:root{
  --bg:#0b1020;
  --card:#111831;
  --ink:#e9eefc;
  --muted:#b7c1e6;
  --brand:#5aa0ff;
  --accent:#9bffb3;
  --shadow:0 6px 20px rgba(0,0,0,0.25);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#0a0f21 0%, #0d1330 100%);
  color:var(--ink);
  font:400 16px/1.6 system-ui,-apple-system, Segoe UI, Roboto, Ubuntu,"Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:#cfe2ff}
.container{max-width:1100px;margin:0 auto;padding:16px}

.site-header{ backdrop-filter: blur(6px); position:sticky;top:0;z-index:10;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(10,15,33,0.7);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}
.brand-text{font-weight:700;letter-spacing:0.2px}
.logo{width:28px;height:28px}
.top-nav a{margin-left:14px;text-decoration:none;color:var(--muted)}
.top-nav a[aria-current="page"]{color:var(--ink);font-weight:600}

.toolbar{display:grid;gap:14px;grid-template-columns:1fr;margin:16px 0 8px;}
@media(min-width:800px){.toolbar{grid-template-columns:1fr auto auto;align-items:center}}
.date-controls{display:flex;gap:8px;align-items:center}
.date-controls .btn{min-width:44px}
#date-picker{background:var(--card);border:1px solid rgba(255,255,255,0.08);color:var(--ink);padding:10px 12px;border-radius:12px;}

.region-toggle{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid rgba(255,255,255,0.08);color:var(--ink);padding:8px 12px;border-radius:999px;cursor:pointer;}
.chip.is-active{outline:2px solid var(--brand)}

.level-toggle{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.label{color:var(--muted)}
.segmented{display:flex;background:var(--card);border:1px solid rgba(255,255,255,0.08);border-radius:999px;padding:4px;}
.seg{background:transparent;border:none;color:var(--ink);border-radius:999px;padding:8px 12px;cursor:pointer;}
.seg.is-selected{background:var(--brand);color:#061025;font-weight:700}

.card-grid{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:620px){.card-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.card-grid{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--card);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px;}
.card .meta{color:var(--muted);font-size:14px}
.card h3{margin:0 0 4px;font-size:18px}
.card p{margin:0 0 8px;color:#dbe5ff}
.badge{display:inline-block;background:#132047;color:#c9d7ff;border:1px solid rgba(255,255,255,0.08);padding:2px 8px;border-radius:999px;font-size:12px}
.card .actions{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn, .btn-ghost{background:var(--brand);color:#061025;border:none;border-radius:12px;padding:10px 12px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.2);color:var(--ink)}

.empty{text-align:center;opacity:0.9}
.hidden{display:none !important}

.site-footer{margin-top:30px;border-top:1px solid rgba(255,255,255,0.06)}
.site-footer p{color:var(--muted)}

.story .meta{color:var(--muted)}
.story-head h1{margin:8px 0 6px;font-size:28px}
.dek{color:#d3deff}

.hero{margin:10px 0; background:#0c1430;border:1px solid rgba(255,255,255,0.08); border-radius:16px; overflow:hidden}
.hero img{width:100%; display:block}
.hero figcaption{font-size:14px;color:#b9c6f8;padding:8px 12px; background:#0b1330}

.article-content{background:#0e1630;border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px;margin:10px 0}
.article-content h2{margin-top:14px;font-size:20px}
.article-content p{margin:8px 0}
.glossary, .quickcheck, .sources{margin:16px 0}
.glossary ul, .sources ul{padding-left:18px}
.story-actions{display:flex;gap:10px;flex-wrap:wrap}

.explain-tooltip{position:absolute;background:#101a39;border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:8px;box-shadow:var(--shadow);}
.explain-tooltip .btn.small{padding:6px 8px;font-size:14px}
.explain-tooltip.hidden{display:none}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#0a1a0f;border:1px solid #1c4d2b;color:#c9ffd8;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);}
.toast.hidden{display:none}

@media print{
  header, .toolbar, .story-actions, .explain-tooltip, .toast, footer{display:none !important}
  body{background:#fff;color:#000}
  .article-content{border:none;background:#fff}
}