/* Clinical Intelligence — HYDRA+19 情报台 visual identity. */
:root {
  --bg: #F6F8F9;
  --ink: #0F1A1C;
  --primary: #0B6E6E;
  --signal: #E8A317;   /* opportunity */
  --risk: #C0492B;
  --hairline: #E2E6E9;
  --card: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Noto Sans SC", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.display, h1, h2, h3 {
  font-family: "Space Grotesk", "Noto Sans SC", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mono, .kpi-value {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Site chrome: narrow left nav + content. */
.shell { display: flex; min-height: 100vh; }

nav.sidenav {
  width: 210px;
  flex: 0 0 210px;
  border-right: 1px solid var(--hairline);
  padding: 22px 18px;
  background: var(--card);
}
nav.sidenav .brand { font-family: "Space Grotesk", "Noto Sans SC", sans-serif; font-weight: 600; font-size: 17px; }
nav.sidenav .brand small { display: block; color: var(--primary); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
nav.sidenav ul { list-style: none; padding: 0; margin: 24px 0 0; }
nav.sidenav li { padding: 7px 0; color: #475157; font-size: 14px; border-bottom: 1px solid var(--hairline); }
nav.sidenav li.active { color: var(--primary); font-weight: 600; }

main { flex: 1; padding: 0; }

/* Site-wide sample-bias watermark. */
.bias-watermark {
  background: repeating-linear-gradient(135deg, #FFF7E6, #FFF7E6 10px, #FFFDF5 10px, #FFFDF5 20px);
  border-bottom: 1px solid var(--signal);
  color: #6b4e12;
  font-size: 12.5px;
  padding: 7px 28px;
}
.bias-watermark strong { color: var(--risk); }

/* Top KPI read-out strip. */
.kpi-strip {
  display: flex;
  gap: 1px;
  background: var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.kpi {
  flex: 1;
  background: var(--card);
  padding: 20px 28px;
}
.kpi .kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #6b757a; }
.kpi .kpi-value { font-size: 30px; font-weight: 600; margin-top: 6px; color: var(--ink); }
.kpi .kpi-unit { font-size: 13px; color: var(--primary); margin-left: 4px; }

.content { padding: 28px; }
.content h1 { margin: 0 0 4px; font-size: 22px; }
.content .subhead { color: #6b757a; margin: 0 0 22px; font-size: 13.5px; }

/* Market Facts panel — supplement-label visual grammar. */
.market-facts {
  max-width: 380px;
  background: var(--card);
  border: 2px solid var(--ink);
  padding: 14px 16px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.market-facts .mf-title { font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 700; border-bottom: 8px solid var(--ink); padding-bottom: 4px; }
.market-facts .mf-sub { border-bottom: 4px solid var(--ink); padding: 3px 0; font-size: 12px; }
.market-facts .mf-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--ink); padding: 5px 0; font-size: 13px; }
.market-facts .mf-row .v { font-weight: 600; }

/* Login. */
.login-wrap { min-height: 100vh; display: grid; place-items: center; }
.login-card { background: var(--card); border: 1px solid var(--hairline); padding: 34px 36px; width: 340px; }
.login-card h1 { font-size: 19px; margin: 0 0 2px; }
.login-card .tag { color: var(--primary); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.login-card input { width: 100%; padding: 10px 12px; margin-top: 18px; border: 1px solid var(--hairline); font-family: "IBM Plex Mono", monospace; }
.login-card button { width: 100%; padding: 10px; margin-top: 14px; background: var(--primary); color: #fff; border: 0; font-weight: 600; cursor: pointer; }
.login-card .err { color: var(--risk); font-size: 13px; margin-top: 12px; }