/* ==========================================================================
   EpiTracker — Design System (xAI-inspired)
   Near-black canvas · white outline pills · hairline-bordered flat cards
   Inter (tight negative tracking) for display/body · Geist Mono uppercase eyebrows
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500&display=swap');

/* -------------------------------------------------------------------------- Custom Properties -------------------------------------------------------------------------- */
:root {
  /* xAI: a single near-black canvas, charcoal cards, hairline dividers */
  --bg-base:        #0a0a0a;   /* canvas */
  --bg-surface:     #0a0a0a;
  --bg-card:        #191919;   /* canvas-card */
  --bg-soft:        #1a1c20;   /* canvas-soft — hovered rows, inputs */
  --bg-mid:         #363a3f;   /* canvas-mid — nested surfaces */
  --bg-glass:       rgba(255,255,255,0.03);
  --bg-glass-hover: rgba(255,255,255,0.06);

  /* Muted accent palette — rationed to product/live-tracker color moments */
  --accent-blue:    #a0c3ec;   /* breeze */
  --accent-indigo:  #7c3aed;   /* dusk */
  --accent-violet:  #c4b5fd;   /* twilight */
  --accent-cyan:    #a0c3ec;   /* breeze */
  --accent-emerald: #10b981;
  --accent-amber:   #ff7a17;   /* sunset */
  --accent-rose:    #f43f5e;
  --accent-orange:  #ff7a17;   /* sunset */
  --accent-sunset:      #ff7a17;
  --accent-sunset-soft: #ffc285;
  --accent-dusk:        #7c3aed;
  --accent-twilight:    #c4b5fd;
  --accent-breeze:      #a0c3ec;

  /* Compartment series (kept vivid for chart legibility on near-black) */
  --color-S: #a0c3ec;
  --color-E: #ff7a17;
  --color-I: #fb7185;
  --color-R: #34d399;
  --color-D: #f43f5e;
  --color-V: #c4b5fd;

  --text-primary:   #ffffff;   /* ink */
  --text-secondary: #dadbdf;   /* body */
  --text-muted:     #7d8187;   /* body-mid / mute */

  /* Hairline is the only elevation cue — no shadows, no glass */
  --border:         #212327;   /* hairline */
  --border-strong:  rgba(255,255,255,0.25);   /* outline-pill border */
  --border-accent:  rgba(255,255,255,0.45);

  --grad-header:    #0a0a0a;
  --grad-accent:    linear-gradient(90deg,#ff7a17,#c4b5fd,#a0c3ec);
  --grad-danger:    linear-gradient(90deg,#f43f5e,#ff7a17);
  --grad-safe:      linear-gradient(90deg,#10b981,#a0c3ec);
  --grad-amber:     linear-gradient(90deg,#ff7a17,#ffc285);

  /* Flat system: elevation via hairline borders, not shadow */
  --glass-inset:  none;
  --shadow-card:  none;
  --shadow-hover: none;
  --shadow-glow:  none;

  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 9999px;

  --gap-sm: 0.5rem;
  --gap-md: 1rem;
  --gap-lg: 1.5rem;
  --gap-xl: 2rem;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------------------------------------------------------------------------- Reset -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }

body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* xAI is a flat near-black canvas — no grid, no atmospheric glow. A single
   faint sunset glow sits behind the hero only, as the one restrained accent. */
body::after {
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(60rem 34rem at 50% -12%, rgba(255,122,23,0.05), transparent 62%);
}

/* -------------------------------------------------------------------------- Header (xAI: flat canvas, name only) -------------------------------------------------------------------------- */
.app-header {
  position:sticky; top:0; z-index:200;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.header-brand {
  display:flex; align-items:center; gap:0.7rem;
  text-decoration:none;
}

.header-logo {
  width:34px; height:34px; flex-shrink:0;
  display:grid; place-items:center;
}
.header-logo svg { display:block; }
.header-logo .node-infected { animation: node-pulse 2.4s ease-in-out infinite; transform-origin:center; }
@keyframes node-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:0.35; }
}

.header-name {
  font-size:1.3rem; font-weight:500; letter-spacing:-0.03em;
  color: var(--text-primary);
}
.header-name b { font-weight:600; }
@media (prefers-reduced-motion: reduce) {
  .header-logo .node-infected { animation:none; }
}

.header-right { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }

.live-indicator {
  display:flex; align-items:center; gap:0.35rem;
  font-size:0.65rem; font-weight:700; letter-spacing:0.12em;
  color:#10b981;
  padding:0.25rem 0.6rem;
  border:1px solid rgba(16,185,129,0.3);
  border-radius:100px;
  background:rgba(16,185,129,0.08);
}

.live-dot {
  width:6px; height:6px; border-radius:50%;
  background:#10b981;
  animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(1.4);} }

.header-badges { display:flex; gap:0.4rem; flex-wrap:wrap; }

.badge {
  padding:0.25rem 0.65rem;
  border-radius:100px; font-size:0.65rem; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase; border:1px solid;
}
.badge-blue    { background:rgba(59,130,246,0.12); color:#60a5fa; border-color:rgba(59,130,246,0.25); }
.badge-violet  { background:rgba(139,92,246,0.12); color:#a78bfa; border-color:rgba(139,92,246,0.25); }
.badge-cyan    { background:rgba(6,182,212,0.12);  color:#22d3ee; border-color:rgba(6,182,212,0.25); }
.badge-emerald { background:rgba(16,185,129,0.12); color:#6ee7b7; border-color:rgba(16,185,129,0.25); }

/* -------------------------------------------------------------------------- Alert Ticker -------------------------------------------------------------------------- */
.alert-ticker {
  background: rgba(244,63,94,0.08);
  border-bottom: 1px solid rgba(244,63,94,0.2);
  padding: 0.4rem 1.5rem;
  display:flex; align-items:center; gap:0.75rem;
  overflow:hidden; white-space:nowrap;
  position:relative; z-index:150;
}

.ticker-label {
  font-size:0.65rem; font-weight:800; letter-spacing:0.1em; color:#f43f5e;
  flex-shrink:0;
}

.ticker-content {
  font-size:0.75rem; color:var(--text-secondary);
  animation: ticker-scroll 60s linear infinite;
  white-space:nowrap;
}
@keyframes ticker-scroll { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* -------------------------------------------------------------------------- Tab Navigation -------------------------------------------------------------------------- */
.tab-nav {
  position:sticky; top:60px; z-index:190;
  display:flex; gap:0.5rem;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1.5rem;
}

/* xAI outline pills */
.tab-btn {
  padding: 0.4rem 1rem;
  background:transparent;
  border:1px solid transparent; border-radius:var(--radius-pill);
  color:var(--text-muted);
  font-family:var(--font); font-size:0.82rem; font-weight:400; letter-spacing:-0.01em;
  cursor:pointer;
  transition:color .18s, border-color .18s, background .18s;
  white-space:nowrap;
}
.tab-btn:hover { color:var(--text-primary); border-color:var(--border); }
.tab-btn.active {
  color:var(--text-primary);
  border-color:var(--border-strong);
  background:rgba(255,255,255,0.03);
}

/* -------------------------------------------------------------------------- Tab Content -------------------------------------------------------------------------- */
.tab-content { display:none; }
.tab-content.active { display:block; }

/* -------------------------------------------------------------------------- App Wrapper -------------------------------------------------------------------------- */
.app-wrapper {
  position:relative; z-index:1;
  max-width:1700px; margin:0 auto;
  padding:0 var(--gap-lg);
}

/* -------------------------------------------------------------------------- Main Grid (Simulator tab) -------------------------------------------------------------------------- */
.main-grid {
  display:grid;
  grid-template-columns: 330px 1fr;
  gap: var(--gap-lg);
  padding: var(--gap-lg) 0;
  align-items:start;
}
@media(max-width:1100px) { .main-grid { grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------- Sidebar -------------------------------------------------------------------------- */
.sidebar {
  display:flex; flex-direction:column; gap:var(--gap-md);
  position:sticky; top:120px;
  max-height:calc(100vh - 140px);
  overflow-y:auto; padding-right:4px;
}
.sidebar::-webkit-scrollbar { width:3px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

/* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */
/* xAI: flat charcoal card, hairline border, no shadow, no blur */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--gap-lg);
  transition:border-color .2s;
}
.card:hover { border-color:rgba(255,255,255,0.16); }

.card-header {
  display:flex; align-items:center; gap:0.55rem;
  margin-bottom:var(--gap-md);
  padding-bottom:0.65rem;
  border-bottom:1px solid var(--border);
}
.card-icon {
  width:27px; height:27px; border-radius:var(--radius-sm);
  display:grid; place-items:center; font-size:0.85rem; flex-shrink:0;
}
.card-icon.blue    { background:rgba(59,130,246,0.18); }
.card-icon.violet  { background:rgba(139,92,246,0.18); }
.card-icon.cyan    { background:rgba(6,182,212,0.18); }
.card-icon.emerald { background:rgba(16,185,129,0.18); }
.card-icon.amber   { background:rgba(245,158,11,0.18); }
.card-icon.rose    { background:rgba(244,63,94,0.18); }
.card-icon.orange  { background:rgba(249,115,22,0.18); }

.card-title { font-size:0.83rem; font-weight:600; color:var(--text-primary); }

/* -------------------------------------------------------------------------- Sliders -------------------------------------------------------------------------- */
.slider-group { display:flex; flex-direction:column; gap:0.3rem; margin-bottom:0.9rem; }
.slider-group:last-child { margin-bottom:0; }

.slider-label { display:flex; justify-content:space-between; align-items:center; }
.slider-name  { font-size:0.76rem; font-weight:500; color:var(--text-secondary); }
.slider-math  { font-size:0.68rem; color:var(--text-muted); font-style:italic; }
.slider-value { font-size:0.8rem; font-weight:700; color:var(--accent-blue);
                font-variant-numeric:tabular-nums; min-width:50px; text-align:right; }

input[type="range"] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:100px;
  background:var(--bg-glass); border:1px solid var(--border);
  outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:15px; height:15px; border-radius:50%;
  background:var(--grad-accent);
  border:2px solid var(--bg-base);
  cursor:pointer;
  box-shadow:0 0 9px rgba(99,102,241,0.65);
  transition:transform .15s, box-shadow .15s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform:scale(1.3); box-shadow:0 0 16px rgba(99,102,241,0.9);
}

/* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */
.toggle-row { display:flex; gap:var(--gap-sm); flex-wrap:wrap; }

.toggle-btn {
  flex:1; padding:0.5rem 0.65rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-glass);
  color:var(--text-secondary);
  font-family:var(--font); font-size:0.75rem; font-weight:600;
  cursor:pointer; transition:all .2s; text-align:center;
}
.toggle-btn:hover { background:var(--bg-glass-hover); color:var(--text-primary); }
.toggle-btn.active {
  background:rgba(99,102,241,0.22);
  border-color:rgba(99,102,241,0.55); color:#a5b4fc;
}

/* xAI: every button is a pill. Outline-on-dark is the default; one white-filled
   primary is the rare exception. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  padding:0.5rem 1.1rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);
  background:transparent; color:var(--text-primary);
  font-family:var(--font); font-size:0.82rem; font-weight:400; letter-spacing:-0.01em;
  cursor:pointer; transition:background .18s, border-color .18s, opacity .18s; white-space:nowrap;
}
.btn:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.4); }
/* the single white-filled pill */
.btn-primary  { background:var(--text-primary); color:var(--bg-base); border-color:var(--text-primary); }
.btn-primary:hover  { background:#e9e9e6; border-color:#e9e9e6; }
.btn-secondary{ background:transparent; border:1px solid var(--border-strong); color:var(--text-primary); }
.btn-secondary:hover{ background:rgba(255,255,255,0.06); }
/* semantic outline pills: colored border + text, transparent fill */
.btn-danger   { background:transparent; border-color:rgba(244,63,94,0.6); color:#fb7185; }
.btn-danger:hover   { background:rgba(244,63,94,0.1); border-color:#f43f5e; }
.btn-success  { background:transparent; border-color:rgba(16,185,129,0.6); color:#34d399; }
.btn-success:hover  { background:rgba(16,185,129,0.1); border-color:#10b981; }
.btn-full { width:100%; }

.btn:disabled { opacity:.4; cursor:not-allowed; }

/* -------------------------------------------------------------------------- Select & Text Input -------------------------------------------------------------------------- */
.select-input {
  width:100%; padding:0.5rem 0.7rem;
  border-radius:var(--radius-sm);
  background:var(--bg-soft); border:1px solid var(--border);
  color:var(--text-primary);
  font-family:var(--font); font-size:0.78rem;
  cursor:pointer; outline:none; transition:border-color .2s;
}
.select-input:focus { border-color:var(--border-strong); }
.select-input option { background:#191919; }

.text-input {
  padding:0.45rem 0.7rem;
  border-radius:var(--radius-sm);
  background:var(--bg-soft); border:1px solid var(--border);
  color:var(--text-primary); font-family:var(--font); font-size:0.78rem;
  outline:none; transition:border-color .2s; width:100%;
}
.text-input:focus { border-color:var(--border-strong); }
.text-input::placeholder { color:var(--text-muted); }

/* -------------------------------------------------------------------------- Content Area -------------------------------------------------------------------------- */
.content-area { display:flex; flex-direction:column; gap:var(--gap-lg); min-width:0; }

/* -------------------------------------------------------------------------- Stats Row -------------------------------------------------------------------------- */
.stats-row {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap:var(--gap-md);
}

.stat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:0.9rem 1.1rem;
  backdrop-filter:blur(12px);
  transition:all .25s; position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad-accent); opacity:0; transition:opacity .25s;
}
.stat-card:hover::before { opacity:1; }
.stat-card:hover { border-color:var(--border-accent); transform:translateY(-2px); box-shadow:var(--shadow-hover); }

/* xAI eyebrow: Geist Mono, uppercase, positive tracking — reads like a code label */
.stat-label { font-family:var(--font-mono); font-size:0.62rem; font-weight:400; text-transform:uppercase;
              letter-spacing:0.1em; color:var(--text-muted); margin-bottom:0.4rem; }
.stat-value { font-size:1.5rem; font-weight:500; letter-spacing:-0.04em;
              line-height:1; font-variant-numeric:tabular-nums; }
.stat-value.blue    { color:var(--accent-blue); }
.stat-value.rose    { color:#fb7185; }
.stat-value.emerald { color:var(--accent-emerald); }
.stat-value.amber   { color:var(--accent-amber); }
.stat-value.violet  { color:#a78bfa; }
.stat-sub { font-size:0.68rem; color:var(--text-muted); margin-top:0.25rem; }

/* -------------------------------------------------------------------------- Chart Wrapper -------------------------------------------------------------------------- */
.chart-wrapper {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--gap-lg);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-card);
}
.chart-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--gap-md); flex-wrap:wrap; gap:var(--gap-sm);
}
.chart-title { font-size:0.85rem; font-weight:600; color:var(--text-primary); }
.chart-canvas-wrap { position:relative; height:330px; }
.chart-legend { display:flex; gap:var(--gap-md); align-items:center; flex-wrap:wrap; }
.legend-item  { display:flex; align-items:center; gap:0.3rem; font-size:0.7rem; color:var(--text-secondary); }
.legend-dot   { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.legend-line  { width:16px; height:2px; border-radius:2px; flex-shrink:0; }
.legend-dashed{ width:18px; height:0; border-top:2px dashed; flex-shrink:0; }

/* -------------------------------------------------------------------------- AI Panel -------------------------------------------------------------------------- */
.ai-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-sm); }
@media(max-width:900px) { .ai-grid { grid-template-columns:1fr; } }

.prediction-item {
  display:flex; flex-direction:column; gap:0.2rem;
  padding:0.65rem; background:var(--bg-glass);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.prediction-label { font-size:0.67rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
.prediction-value { font-size:1.3rem; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }

.growth-chip {
  padding:0.25rem 0.55rem; border-radius:100px;
  font-size:0.68rem; font-weight:600;
  border:1px solid;
}

/* -------------------------------------------------------------------------- Intervention & Recommendation -------------------------------------------------------------------------- */
.intervention-marker {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.3rem 0.65rem;
  background:rgba(244,63,94,0.1); border:1px solid rgba(244,63,94,0.3);
  border-radius:100px; font-size:0.7rem; color:#fb7185; font-weight:600;
}

.rec-box {
  padding:0.85rem; border-radius:var(--radius-md);
  border:1px solid; font-size:0.78rem; line-height:1.6; transition:all .3s;
}
.rec-box.critical   { background:rgba(244,63,94,0.1);  border-color:rgba(244,63,94,0.4);  color:#fda4af; }
.rec-box.high       { background:rgba(249,115,22,0.1); border-color:rgba(249,115,22,0.4); color:#fdba74; }
.rec-box.moderate   { background:rgba(245,158,11,0.1); border-color:rgba(245,158,11,0.4); color:#fcd34d; }
.rec-box.controlled { background:rgba(16,185,129,0.1); border-color:rgba(16,185,129,0.4); color:#6ee7b7; }
.rec-severity { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.35rem; }

/* -------------------------------------------------------------------------- Fitted Params -------------------------------------------------------------------------- */
.fitted-params { display:flex; gap:var(--gap-sm); flex-wrap:wrap; margin-top:var(--gap-sm); }
.param-chip {
  padding:0.28rem 0.6rem; border-radius:100px;
  font-size:0.7rem; font-weight:600;
  background:rgba(99,102,241,0.15); border:1px solid rgba(99,102,241,0.3); color:#a5b4fc;
}
.preset-description { font-size:0.72rem; font-style:italic; line-height:1.5; }

/* -------------------------------------------------------------------------- LIVE TRACKER TAB -------------------------------------------------------------------------- */
.live-grid {
  display:flex; flex-direction:column; gap:var(--gap-lg);
  padding:var(--gap-lg) 0;
  max-width:1700px; margin:0 auto;
}

.live-summary-row {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
  gap:var(--gap-md);
}

.live-stat-card {
  --c: var(--accent-indigo);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%),
    var(--bg-card);
  border:1px solid var(--border);
  border-left:3px solid var(--c);
  border-radius:var(--radius-md);
  padding:1.1rem 1.25rem;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:var(--shadow-card), var(--glass-inset);
  transition:all .25s; position:relative; overflow:hidden;
}
.live-stat-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--c); opacity:0; transition:opacity .25s;
}
.live-stat-card:hover::after { opacity:1; }
.live-stat-card:hover {
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow:var(--shadow-hover), 0 0 30px color-mix(in srgb, var(--c) 22%, transparent), var(--glass-inset);
}

.live-stat-icon {
  position:absolute; top:0.7rem; right:0.85rem;
  font-size:1.15rem; opacity:0.5;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 60%, transparent));
}
.live-stat-label { font-family:var(--font-mono); font-size:0.62rem; font-weight:400; text-transform:uppercase;
                   letter-spacing:0.1em; color:var(--text-muted); margin-bottom:0.4rem; }
.live-stat-value { font-size:1.6rem; font-weight:500; letter-spacing:-0.04em;
                   font-variant-numeric:tabular-nums;
                   color:var(--c);
                   text-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent); }
.live-stat-sub   { font-size:0.68rem; color:var(--text-muted); margin-top:0.2rem; }

.live-controls {
  display:flex; align-items:center; gap:var(--gap-md); flex-wrap:wrap;
}

/* World Map */
.map-wrapper { padding:var(--gap-lg); }
.map-legend {
  display:flex; align-items:center; gap:var(--gap-md);
  margin-top:var(--gap-sm); flex-wrap:wrap;
}
.map-legend-bar {
  display:flex; align-items:center; gap:0.4rem;
  font-size:0.7rem; color:var(--text-muted);
}
.map-legend-gradient {
  width:120px; height:8px; border-radius:4px;
}

/* Country Table */
.table-wrap { overflow-x:auto; margin-top:var(--gap-sm); }
.data-table {
  width:100%; border-collapse:collapse;
  font-size:0.78rem;
}
.data-table th {
  position:sticky; top:0; z-index:1;
  padding:0.6rem 0.8rem;
  background:linear-gradient(180deg, rgba(99,102,241,0.16), rgba(99,102,241,0.06));
  backdrop-filter:blur(12px);
  color:var(--text-secondary);
  font-weight:700; font-size:0.68rem;
  text-transform:uppercase; letter-spacing:0.06em;
  text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border-accent);
  cursor:pointer; user-select:none;
}
.data-table th:hover { color:#c4b5fd; }
.data-table td {
  padding:0.55rem 0.8rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
  white-space:nowrap;
}
.data-table tbody tr:nth-child(even) td { background:rgba(255,255,255,0.015); }
.data-table tbody tr { transition:background .15s; }
.data-table tr:hover td {
  background:rgba(99,102,241,0.10);
  box-shadow:inset 3px 0 0 var(--accent-cyan);
}
.data-table .num { font-variant-numeric:tabular-nums; text-align:right; }
.data-table .flag-col { font-size:1.1rem; }
.rank-badge {
  width:22px; height:22px; border-radius:50%;
  background:rgba(99,102,241,0.15);
  border:1px solid rgba(99,102,241,0.25);
  display:inline-grid; place-items:center;
  font-size:0.65rem; font-weight:700; color:#a5b4fc;
}
/* Top-3 medals */
.rank-badge.rank-1 { background:rgba(245,197,24,0.18); border-color:rgba(245,197,24,0.55); color:#fde047;
                     box-shadow:0 0 12px rgba(245,197,24,0.45); }
.rank-badge.rank-2 { background:rgba(203,213,225,0.16); border-color:rgba(203,213,225,0.5); color:#e2e8f0;
                     box-shadow:0 0 10px rgba(203,213,225,0.35); }
.rank-badge.rank-3 { background:rgba(217,119,66,0.18); border-color:rgba(217,119,66,0.55); color:#fb923c;
                     box-shadow:0 0 10px rgba(217,119,66,0.4); }
.severity-bar {
  display:inline-block;
  height:4px; border-radius:2px;
  background:linear-gradient(90deg,#f59e0b,#f43f5e);
  box-shadow:0 0 8px rgba(244,63,94,0.5);
  vertical-align:middle; margin-left:6px;
}

/* -------------------------------------------------------------------------- FORECAST TAB -------------------------------------------------------------------------- */
.forecast-grid {
  display:flex; flex-direction:column; gap:var(--gap-lg);
  padding:var(--gap-lg) 0;
  max-width:1700px; margin:0 auto;
}

/* -------------------------------------------------------------------------- HOSPITAL TAB -------------------------------------------------------------------------- */
.hospital-grid {
  display:flex; flex-direction:column; gap:var(--gap-lg);
  padding:var(--gap-lg) 0;
  max-width:1700px; margin:0 auto;
}

/* -------------------------------------------------------------------------- Loading Spinner -------------------------------------------------------------------------- */
.spinner {
  display:inline-block; width:13px; height:13px;
  border:2px solid rgba(255,255,255,0.2); border-top-color:#fff;
  border-radius:50%; animation:spin .6s linear infinite; vertical-align:middle;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* -------------------------------------------------------------------------- Toasts -------------------------------------------------------------------------- */
.toast-container {
  position:fixed; bottom:1.5rem; right:1.5rem;
  z-index:9999; display:flex; flex-direction:column; gap:0.4rem;
  pointer-events:none;
}
.toast {
  padding:0.7rem 1rem;
  border-radius:var(--radius-md);
  background:rgba(10,10,14,0.72); border:1px solid var(--border);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  font-size:0.78rem; color:var(--text-primary);
  box-shadow:var(--shadow-card);
  animation:toast-in .3s ease, toast-out .3s ease 2.7s forwards;
  pointer-events:auto; max-width:320px;
}
.toast.success { border-color:rgba(16,185,129,0.4); }
.toast.error   { border-color:rgba(244,63,94,0.4); }
.toast.info    { border-color:rgba(59,130,246,0.4); }
.toast.warning { border-color:rgba(245,158,11,0.4); }
@keyframes toast-in  { from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:translateX(0);} }
@keyframes toast-out { to{opacity:0;transform:translateX(20px);} }

/* -------------------------------------------------------------------------- Leaflet overrides -------------------------------------------------------------------------- */
.leaflet-container { background:#000 !important; }
.leaflet-popup-content-wrapper {
  background:rgba(10,10,14,0.9) !important;
  border:1px solid var(--border) !important;
  color:var(--text-primary) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:var(--shadow-card) !important;
}
.leaflet-popup-tip { background:rgba(10,10,14,0.9) !important; }
.leaflet-popup-content { font-family:var(--font) !important; font-size:0.78rem !important; line-height:1.7 !important; }

/* -------------------------------------------------------------------------- Utilities -------------------------------------------------------------------------- */
hr { border:none; border-top:1px solid var(--border); margin:var(--gap-md) 0; }
.text-muted { color:var(--text-muted); font-size:0.73rem; }
.italic { font-style:italic; }
.mt-sm { margin-top:var(--gap-sm); }
.mt-md { margin-top:var(--gap-md); }
.w-full { width:100%; }
.hidden { display:none !important; }

/* -------------------------------------------------------------------------- Scrollbar -------------------------------------------------------------------------- */
::-webkit-scrollbar       { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg-surface); }
::-webkit-scrollbar-thumb { background:rgba(99,102,241,0.28); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(99,102,241,0.5); }

/* --------------------------------------------------------------------------
   Scenario Comparison
   -------------------------------------------------------------------------- */
.scenario-controls { display:flex; flex-direction:column; gap:0.5rem; }
.scenario-row {
  display:flex; align-items:center; gap:0.5rem; flex-wrap:nowrap;
}
.scenario-tag {
  width:28px; height:28px; border-radius:6px; border:1px solid;
  display:grid; place-items:center;
  font-size:0.7rem; font-weight:800; flex-shrink:0;
}

.scenario-table-wrap { overflow-x:auto; margin-top:0.75rem; }
.scenario-table {
  width:100%; border-collapse:collapse; font-size:0.75rem;
}
.scenario-table th {
  padding:0.5rem 0.75rem;
  background:rgba(99,102,241,0.08); color:var(--text-muted);
  font-weight:600; font-size:0.65rem; text-transform:uppercase;
  letter-spacing:0.06em; text-align:left;
  border-bottom:1px solid var(--border);
}
.scenario-table td {
  padding:0.5rem 0.75rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
  font-variant-numeric:tabular-nums;
}
.scenario-table tr:hover td { background:rgba(99,102,241,0.05); }

/* --------------------------------------------------------------------------
   Risk Score Grid
   -------------------------------------------------------------------------- */
.risk-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:0.6rem;
  max-height:520px; overflow-y:auto;
  margin-top:0.5rem;
}
.risk-card {
  padding:0.75rem 0.9rem;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg-glass);
  display:flex; align-items:center; gap:0.65rem;
  transition:all .2s;
}
.risk-card:hover { transform:translateY(-2px); border-color:var(--border-accent); }
.risk-score-circle {
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-size:0.78rem; font-weight:800;
  border:2px solid; flex-shrink:0;
}
.risk-card-body { flex:1; min-width:0; }
.risk-country { font-size:0.8rem; font-weight:600; truncate:ellipsis; white-space:nowrap; overflow:hidden; }
.risk-level-label { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; margin-top:0.15rem; }
.risk-bar-wrap { margin-top:0.3rem; height:3px; background:rgba(255,255,255,0.08); border-radius:2px; }
.risk-bar { height:100%; border-radius:2px; transition:width 0.5s ease; }

/* --------------------------------------------------------------------------
   Wave Builder & Sensitivity Heatmap
   -------------------------------------------------------------------------- */
.wave-row {
  display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap;
}
.wave-label {
  font-size:0.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--text-muted);
  min-width:52px; flex-shrink:0;
}

/* R0 heatmap table */
.heatmap-table { border-collapse:collapse; font-size:0.68rem; }
.heatmap-table th {
  padding:0.35rem 0.5rem;
  color:var(--text-muted); font-weight:600;
  font-size:0.63rem; text-align:center;
  background:rgba(99,102,241,0.06); border:1px solid var(--border);
}
.heatmap-cell {
  padding:0.35rem 0.5rem; text-align:center;
  border:1px solid rgba(255,255,255,0.05);
  font-weight:700; cursor:default;
  transition:opacity .15s;
  font-variant-numeric:tabular-nums;
  min-width:48px;
}
.heatmap-cell:hover { opacity:0.8; outline:2px solid rgba(255,255,255,0.3); }

/* ==========================================================================
   DATA PROVENANCE SYSTEM
   Badges label every number as: Raw Data · Model Estimate · Backtested Forecast
   ========================================================================== */

/* Inline badge (used everywhere data is displayed) */
.badge-provenance {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-provenance.raw {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}
.badge-provenance.mechanistic {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
}
.badge-provenance.validated {
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #34d399;
}

/* Provenance row below Live Tracker stats */
.data-provenance-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.provenance-source { font-weight: 500; color: var(--text-secondary); }
.provenance-sep    { color: var(--text-muted); opacity: 0.4; }
.provenance-asof   { font-weight: 500; }
.provenance-warning {
  color: #fbbf24;
  font-weight: 600;
}

/* ==========================================================================
   STALENESS BANNER
   Shown when data_as_of is > 24h old. Slides down from top.
   ========================================================================== */
.staleness-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  background: linear-gradient(90deg, rgba(245,158,11,0.18) 0%, rgba(239,68,68,0.12) 100%);
  border-bottom: 1px solid rgba(245,158,11,0.35);
  font-size: 0.8rem;
  font-weight: 500;
  color: #fbbf24;
  position: sticky;
  top: 0;
  z-index: 200;
  animation: slideDown 0.3s ease;
}
.staleness-banner.hidden { display: none; }
.staleness-icon   { font-size: 1rem; }
.staleness-age    { color: var(--text-secondary); font-size: 0.72rem; }
.btn-dismiss-staleness {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.25rem;
  transition: color 0.15s;
}
.btn-dismiss-staleness:hover { color: var(--text-primary); }

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ==========================================================================
   PROVENANCE LEGEND MODAL
   Opened by the "ℹ️ Data Key" button in the header.
   ========================================================================== */
.btn-provenance-legend {
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.35);
  color: #a5b4fc;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn-provenance-legend:hover {
  background: rgba(99,102,241,0.28);
  color: #c7d2fe;
}

.provenance-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
.provenance-modal.open {
  display: flex;
}
.provenance-modal-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  max-width: 560px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.provenance-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-primary);
}
.btn-close-modal {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  transition: background 0.15s;
}
.btn-close-modal:hover { background: rgba(255,255,255,0.08); }
.provenance-modal-intro {
  color: var(--text-secondary);
  font-size: 0.82rem;
  margin-bottom: 1rem;
}
.provenance-items {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.provenance-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
.provenance-item strong { color: var(--text-primary); }
.provenance-modal-footer {
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  margin: 0;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}