:root {
  color-scheme: light;
  --bg: #f7f8fc;
  --bg2: #e9eefb;
  --panel: rgba(255,255,255,.78);
  --panel-solid: #ffffff;
  --panel-soft: rgba(255,255,255,.52);
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15,23,42,.12);
  --accent: #2563eb;
  --accent2: #7c3aed;
  --ok: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --shadow: 0 24px 80px rgba(15,23,42,.13);
  --radius: 26px;
  --chart-grid: rgba(100,116,139,.18);
  --chart-area-bg: rgba(255,255,255,.035);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050816;
  --bg2: #10172a;
  --panel: rgba(15,23,42,.72);
  --panel-solid: #0f172a;
  --panel-soft: rgba(15,23,42,.46);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: rgba(148,163,184,.18);
  --accent: #38bdf8;
  --accent2: #a78bfa;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --shadow: 0 24px 90px rgba(0,0,0,.42);
  --chart-grid: rgba(148,163,184,.18);
  --chart-area-bg: rgba(255,255,255,.025);
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 0%, rgba(37,99,235,.24), transparent 36rem),
    radial-gradient(circle at 84% 10%, rgba(124,58,237,.22), transparent 34rem),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--panel-solid); color: var(--text); border: 2px solid var(--accent); border-radius: 10px; padding: 10px 12px; }
.skip-link:focus { top: 12px; }
.boot-screen { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; color: var(--text); }
.boot-screen .orb { width: 68px; height: 68px; border-radius: 24px; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: var(--shadow); animation: pulse 1.8s infinite alternate; }
.boot-screen h1 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }
.boot-screen p { margin: 0; color: var(--muted); }
@keyframes pulse { from { transform: translateY(0) scale(1); opacity: .75; } to { transform: translateY(-6px) scale(1.04); opacity: 1; } }
.app-shell { max-width: 1680px; margin: 0 auto; padding: 24px; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.logo-image { width: 58px; height: 58px; border-radius: 18px; box-shadow: var(--shadow); flex: 0 0 auto; }
.brand h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.035em; }
.brand p { margin: 3px 0 0; color: var(--muted); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn, .select, .input, .chip {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  backdrop-filter: blur(14px);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease, box-shadow .16s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.btn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.btn.small { padding: 7px 10px; font-size: .88rem; }
.btn.ghost { box-shadow: none; }
.btn.danger { color: var(--bad); }
.input, .select { border-radius: 14px; width: 100%; }
.input:focus, .select:focus, .btn:focus-visible { outline: none; border-color: color-mix(in srgb, var(--accent) 65%, white 10%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
.input.search { padding-left: 38px; }
.search-wrap { position: relative; }
.search-wrap::before { content: "⌕"; position: absolute; left: 14px; top: 50%; transform: translateY(-52%); color: var(--muted); z-index: 1; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.hero { display: grid; grid-template-columns: 1.15fr .9fr; gap: 18px; margin-bottom: 18px; }
.hero-title { font-size: clamp(2.2rem, 5vw, 5rem); line-height: .92; letter-spacing: -.07em; margin: 0 0 18px; }
.grad { background: linear-gradient(135deg, var(--accent), var(--accent2)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero-text { color: var(--muted); font-size: 1.06rem; line-height: 1.72; max-width: 920px; }
.seo-hero, .entry-panel, .story-section, .static-page main {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  margin-bottom: 18px;
}
.seo-hero h2, .entry-panel h2, .story-section h2, .static-page h2 { margin: 0 0 10px; letter-spacing: -.025em; }
.seo-hero h2 { font-size: clamp(1.8rem, 4vw, 3.8rem); line-height: 1; max-width: 1120px; }
.seo-hero p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 900px; }
.entry-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.story-search { margin: 0 0 12px; }
.story-scroll {
  max-height: 430px;
  overflow: auto;
  padding: 2px 8px 2px 2px;
  scrollbar-gutter: stable;
}
.story-scroll:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 18px; }
.story-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.story-card {
  display: grid;
  gap: 8px;
  min-height: 170px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
  background: rgba(255,255,255,.045);
  align-content: start;
}
.story-card:hover, .story-card.active { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); transform: translateY(-1px); }
.story-card span { color: var(--accent); font-size: .82rem; font-weight: 800; }
.story-card strong { font-size: 1rem; line-height: 1.2; }
.story-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.story-card em { color: var(--text); font-style: normal; font-weight: 800; margin-top: auto; }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: minmax(320px,.82fr) minmax(0,1.75fr); align-items: start; }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.panel-title { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; letter-spacing: -.015em; }
.muted { color: var(--muted); }
.small-note { font-size: .9rem; }
.explain { color: var(--muted); line-height: 1.68; }
.explain strong { color: var(--text); }
.snapshot { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.metric { border: 1px solid var(--border); border-radius: 20px; padding: 13px; background: rgba(255,255,255,.04); min-height: 104px; }
.metric small { display: block; color: var(--muted); margin-bottom: 6px; }
.metric strong { display: block; font-size: 1.28rem; letter-spacing: -.02em; }
.metric .meta { color: var(--muted); margin-top: 7px; font-size: .78rem; }
.pill, .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.04); font-size: .83rem; }
.pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.notice { border-left: 4px solid var(--accent2); background: color-mix(in srgb, var(--accent2) 10%, transparent); color: var(--muted); margin-bottom: 18px; }
.chart-card { min-height: 720px; }
.chart-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.chart-head h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.03em; }
.chart-head p { margin: 5px 0 0; color: var(--muted); }
.controls-inline { justify-content: flex-end; }
.range-toolbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.035); }
.range-group { min-width: 170px; display: grid; gap: 6px; }
.range-label { font-size: .84rem; color: var(--muted); padding-left: 4px; }
.date-input { padding: 10px 12px; }
.series-list { display: grid; gap: 10px; margin-bottom: 12px; }
.series-row { display: grid; grid-template-columns: 34px minmax(180px,1.1fr) minmax(160px,.82fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.035); }
.series-status { grid-column: 2 / -1; justify-self: start; }
.color-dot { width: 18px; height: 18px; border-radius: 999px; box-shadow: 0 0 0 4px rgba(255,255,255,.05); }
.chart-area { width: 100%; height: 560px; position: relative; border-radius: 20px; border: 1px solid var(--border); background: var(--chart-area-bg); overflow: hidden; }
.chart-area svg { width: 100%; height: 100%; display: block; }
.chart-tooltip { position: fixed; z-index: 40; pointer-events: none; background: var(--panel-solid); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); color: var(--text); font-size: .88rem; max-width: 320px; display: none; }
.chart-tooltip small { display: block; color: var(--muted); margin-top: 3px; }
.tip-row { display: grid; grid-template-columns: 10px minmax(120px,1fr) auto; gap: 7px; align-items: center; margin-top: 8px; }
.tip-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tip-row small { grid-column: 2 / -1; margin-top: -2px; }
.tip-dot { width: 9px; height: 9px; border-radius: 999px; }
.chart-hover-line { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--accent) 70%, transparent); opacity: .72; pointer-events: none; display: none; z-index: 2; }
.layer-panel { display: grid; gap: 14px; }
.layer-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.layer-tabs.three-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); }
.layer-tabs button { justify-content: center; }
.layer-tabs button.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent; }
.layer-list { max-height: 520px; overflow: auto; display: grid; gap: 8px; padding-right: 4px; }
.layer-item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 16px; padding: 10px; background: rgba(255,255,255,.035); }
.layer-item input { margin-top: 4px; }
.layer-item strong, .layer-item span { display: block; }
.layer-item span { color: var(--muted); font-size: .78rem; line-height: 1.35; margin-top: 2px; }
.layer-item .date { color: var(--accent); font-weight: 700; }
.layer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.legend .item { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 7px 10px; color: var(--muted); background: rgba(255,255,255,.04); font-size: .84rem; }
.provenance-strip { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.provenance-item { display: grid; gap: 4px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.035); }
.provenance-item span, .provenance-item small { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.data-table-panel { margin-top: 12px; border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: rgba(255,255,255,.035); }
.data-table-panel summary { cursor: pointer; font-weight: 800; }
.table-wrap { margin-top: 10px; overflow: auto; max-height: 360px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.table-wrap th, .table-wrap td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: right; white-space: nowrap; }
.table-wrap th:first-child, .table-wrap td:first-child { text-align: left; position: sticky; left: 0; background: var(--panel-solid); }
.source-directory { display: grid; gap: 12px; padding-left: 22px; }
.source-directory li { border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.source-directory span, .source-directory small { color: var(--muted); line-height: 1.55; }
.footer { color: var(--muted); text-align: center; margin: 24px 0 8px; font-size: .88rem; }
.error-box { border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--border)); background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--text); border-radius: 18px; padding: 16px; }
.error-box pre { white-space: pre-wrap; color: var(--muted); }
.stat-line { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); padding: 9px 0; }
.stat-line:last-child { border-bottom: 0; }
.stat-line strong { text-align: right; }
@media (max-width: 1280px) { .hero, .grid.two { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .grid.three { grid-template-columns: 1fr 1fr; }
  .series-row { grid-template-columns: 28px 1fr; }
  .series-row .indicatorSelect, .series-row .sourceSelect, .series-row .btn { grid-column: 2; justify-self: stretch; }
  .series-row .btn { justify-self: start; }
  .story-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .app-shell { padding: 14px; }
  .header { align-items: flex-start; flex-direction: column; }
  .grid.three, .snapshot { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.55rem; }
  .chart-area { height: 430px; }
  .chart-head { flex-direction: column; }
  .range-toolbar { align-items: stretch; }
  .range-group { min-width: 100%; }
  .main-workspace .chart-card { order: 1; }
  .main-workspace .layer-panel { order: 2; }
  .chart-card { display: flex; flex-direction: column; }
  .chart-head { order: 1; }
  .chart-area { order: 2; }
  .legend { order: 3; }
  .provenance-strip { order: 4; }
  .data-table-panel { order: 5; }
  .range-toolbar { order: 6; margin-top: 14px; }
  .data-search-toolbar { order: 7; }
  .series-list { order: 8; }
  .chart-actions { order: 9; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card { min-height: 136px; }
  .provenance-strip { grid-template-columns: 1fr; }
  .entry-buttons .btn { width: 100%; justify-content: center; }
  .chart-actions .btn, .chart-actions a.btn { flex: 1 1 145px; justify-content: center; }
}
.data-search-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}
@media (max-width: 760px) {
  .data-search-toolbar { grid-template-columns: 1fr; }
}

.btn.support { background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(239,68,68,.92)); color: #fff; border-color: transparent; font-weight: 800; }
.btn.support:hover { filter: brightness(1.06); }
/* V4.1 chart-type selector */
.chart-type-select { width: auto; min-width: 128px; border-radius: 999px; padding: 9px 14px; }
.inline-label { margin: 0 2px 0 8px; align-self: center; white-space: nowrap; }
.chart-area svg rect[data-tip], .chart-area svg circle[data-tip] { cursor: crosshair; }

/* V5.1 editorial panels */
.editorial-panels.grid.two { grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); }
.editorial-card { min-height: 240px; }
.brief-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 12px; }
.brief-toolbar .explain { margin: 0; }
.copy-status { color: var(--ok); font-weight: 800; min-width: 78px; }
.brief-list { display: grid; gap: 10px; }
.brief-item {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.04);
}
.brief-item strong { font-size: 1rem; }
.brief-item span { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.brief-item b { color: var(--text); }
.quality-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.metric.compact { min-height: 86px; }
.source-strip { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) {
  .editorial-panels.grid.two, .brief-toolbar, .quality-grid { grid-template-columns: 1fr; }
  .brief-toolbar .btn { justify-content: center; }
}


/* V4.5 interactive chart polish */
.scale-chip-primary {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  white-space: nowrap;
}
.interaction-hint { align-self: center; font-size: .88rem; white-space: nowrap; }
.chart-area { cursor: crosshair; user-select: none; touch-action: none; }
.chart-area:active { cursor: grabbing; }
@media (max-width: 900px) {
  .scale-chip-primary, .interaction-hint { width: 100%; justify-content: center; }
}

/* V4.6: cleaner normalize help marker */
.info-dot {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  margin-left: 2px;
}

/* V4.7 admin */
.admin-shell { max-width: 1500px; }
.admin-login { max-width: 520px; margin: 10vh auto 0; }
.admin-login-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; }
.admin-password-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; align-items: center; }
.admin-grid { margin-bottom: 18px; }
.admin-panels { margin-top: 18px; }
.admin-metric { min-height: 118px; }
.admin-source-list { display: grid; gap: 10px; max-height: 520px; overflow: auto; padding-right: 4px; }
.success-box { border: 1px solid rgba(74, 222, 128, .42); background: rgba(74, 222, 128, .1); color: #bbf7d0; padding: 10px 12px; border-radius: 8px; }
.source-row {
  display: grid;
  grid-template-columns: auto minmax(140px,.72fr) minmax(0,1.2fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.035);
}
.source-row strong { min-width: 0; overflow-wrap: anywhere; }
.source-row .muted { min-width: 0; overflow-wrap: anywhere; font-size: .86rem; }
@media (max-width: 760px) {
  .admin-login-form, .admin-password-form, .source-row { grid-template-columns: 1fr; }
  .admin-shell .actions { width: 100%; justify-content: flex-start; }
}

/* V7 — editorial forest system, inspired by the restrained HUNAGI identity */
:root {
  --bg: #f1f0e8;
  --bg2: #e7ebe1;
  --panel: #fbfaf5;
  --panel-solid: #fbfaf5;
  --panel-soft: #f5f4ed;
  --text: #13231f;
  --muted: #61706a;
  --border: rgba(19,35,31,.16);
  --accent: #236650;
  --accent2: #83b83f;
  --ok: #27784d;
  --warn: #a96812;
  --bad: #b44132;
  --shadow: 0 1px 0 rgba(19,35,31,.06), 0 12px 34px rgba(19,35,31,.06);
  --radius: 12px;
  --chart-grid: rgba(35,102,80,.14);
  --chart-area-bg: rgba(35,102,80,.025);
}
html[data-theme="dark"] {
  --bg: #071d19;
  --bg2: #0a2721;
  --panel: #0e3029;
  --panel-solid: #0e3029;
  --panel-soft: #12382f;
  --text: #f3f2e9;
  --muted: #aabbb4;
  --border: rgba(222,235,226,.17);
  --accent: #a8d65d;
  --accent2: #6cbb86;
  --ok: #83d89f;
  --warn: #efbd67;
  --bad: #f08b7c;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 18px 44px rgba(0,0,0,.18);
  --chart-grid: rgba(220,235,226,.13);
  --chart-area-bg: rgba(255,255,255,.018);
}
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-size: 72px 72px, 72px 72px, 100% 100%;
  background-attachment: fixed;
}
.app-shell { max-width: 1480px; padding: 0 28px 28px; }
.header.site-header {
  min-height: 86px;
  margin: 0 -10px 28px;
  padding: 12px 10px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.brand { color: var(--text); text-decoration: none; min-width: 238px; }
.logo-image { width: 50px; height: 50px; border-radius: 8px; box-shadow: none; }
.brand h1 { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; letter-spacing: -.045em; }
.brand p { font-size: .78rem; letter-spacing: .025em; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.main-nav a {
  color: var(--muted);
  font-weight: 720;
  font-size: .9rem;
  text-decoration: none;
  padding: 9px 11px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--text); border-bottom-color: var(--accent2); }
.header-actions { min-width: 238px; flex-wrap: nowrap; }
.btn, .select, .input, .chip {
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 9px 12px;
  backdrop-filter: none;
  font-weight: 680;
}
.btn:hover { transform: none; background: color-mix(in srgb, var(--accent) 9%, var(--panel-soft)); }
.btn.primary { background: var(--accent); color: var(--panel-solid); border: 1px solid var(--accent); }
html[data-theme="dark"] .btn.primary { color: #0a211c; }
.icon-btn { width: 40px; justify-content: center; font-size: 1.15rem; }
.refresh-btn { white-space: nowrap; }
.card, .seo-hero, .entry-panel, .story-section, .static-page main {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0,1.32fr) minmax(330px,.68fr);
  gap: 0;
  min-height: 590px;
  margin: 0 0 92px;
  overflow: hidden;
  border-radius: 14px;
  color: #f7f7ef;
  background: #0b3b32;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 70px rgba(5,30,25,.2);
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: 18%;
  top: -210px;
  border: 1px solid rgba(174,215,101,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(174,215,101,.035), 0 0 0 180px rgba(174,215,101,.025);
  pointer-events: none;
}
.hero-copy {
  padding: clamp(48px,7vw,94px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.eyebrow, .section-kicker {
  margin: 0 0 22px;
  color: #b6df6b;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-title {
  max-width: 880px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.25rem,6.2vw,6.4rem);
  font-weight: 650;
  line-height: .92;
  letter-spacing: -.062em;
  margin-bottom: 26px;
}
.hero-title .grad { display: block; color: #a9d85c; background: none; }
.hero-text { color: rgba(247,247,239,.74); max-width: 700px; font-size: 1.04rem; line-height: 1.7; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 26px; }
.hero-cta .btn { min-height: 46px; align-items: center; }
.hero-cta .primary { background: #a9d85c; border-color: #a9d85c; color: #0b312a; }
.hero-secondary { color: #f7f7ef; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.07); }
.hero-status .pill { color: rgba(247,247,239,.72); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.045); }
.hero-status .pill.ok { color: #b8e68c; }
.hero-data {
  margin: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  position: relative;
  z-index: 2;
  border-left: 1px solid rgba(255,255,255,.12);
  background: rgba(4,27,23,.45);
}
.hero-data-head { display: flex; justify-content: space-between; gap: 12px; color: #fff; font-weight: 800; }
.hero-data-head small { color: rgba(255,255,255,.5); font-weight: 500; }
.hero-data .snapshot { grid-template-columns: 1fr 1fr; gap: 0; }
.hero-data .metric {
  min-height: 92px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.14);
  border-radius: 0;
  padding: 15px 10px 12px 0;
  background: none;
}
.hero-data .metric:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); }
.hero-data .metric:nth-child(even) { padding-left: 14px; }
.hero-data .metric small, .hero-data .metric .meta { color: rgba(255,255,255,.54); }
.hero-data .metric strong { color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; }
.section-kicker { color: var(--accent); margin-bottom: 12px; }
.section-intro { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.75fr); gap: 60px; align-items: end; margin-bottom: 30px; }
.section-intro h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.35rem,4.6vw,4.7rem); line-height: .98; letter-spacing: -.055em; }
.section-intro p { margin: 0; color: var(--muted); line-height: 1.72; }
.spatial-section { scroll-margin-top: 110px; margin: 0 0 92px; }
.spatial-explorer { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--panel); }
.spatial-loading { min-height: 420px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--muted); }
.spatial-loading span { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spatial-spin .8s linear infinite; }
@keyframes spatial-spin { to { transform: rotate(360deg); } }
.spatial-mode { min-height: 70px; display: flex; align-items: center; gap: 4px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.spatial-mode button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 13px 14px 11px; font-weight: 800; }
.spatial-mode button.active { color: var(--text); border-bottom-color: var(--accent2); }
.spatial-mode > span { margin-left: auto; color: var(--muted); font-size: .82rem; }
.spatial-controls { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding: 18px; border-bottom: 1px solid var(--border); background: var(--panel-soft); }
.spatial-controls label { min-width: 210px; display: grid; gap: 6px; }
.spatial-controls label:first-child { flex: 1 1 320px; }
.spatial-controls label span { color: var(--muted); font-size: .78rem; font-weight: 760; }
.spatial-controls select, .spatial-controls input { width: 100%; min-height: 42px; padding: 8px 11px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 7px; font: inherit; }
.spatial-controls .btn { min-height: 42px; }
.municipality-controls .place-search { flex: 1 1 220px; }
.spatial-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.65fr); min-height: 610px; }
.spatial-map-panel { min-width: 0; padding: 18px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%); }
.spatial-map { display: block; width: 100%; min-height: 520px; max-height: 610px; }
.map-grid line { stroke: var(--chart-grid); stroke-width: .55; stroke-dasharray: 2 8; }
.spatial-region { stroke: color-mix(in srgb, var(--panel-solid) 80%, #fff 20%); stroke-width: 1.2; cursor: pointer; transition: opacity .15s, filter .15s, stroke-width .15s; }
.spatial-region:hover, .spatial-region:focus-visible { filter: brightness(1.12); stroke: var(--text); stroke-width: 2; outline: none; }
.spatial-region.selected { stroke: #f3ae3d; stroke-width: 3; }
.municipality-outline { fill: color-mix(in srgb, var(--panel) 90%, var(--accent) 10%); stroke: var(--border); stroke-width: 1; pointer-events: none; }
.spatial-place { stroke: color-mix(in srgb, var(--panel-solid) 72%, #fff 28%); stroke-width: .7; opacity: .82; cursor: pointer; }
.spatial-place:hover, .spatial-place:focus-visible { opacity: 1; stroke: var(--text); stroke-width: 1.8; outline: none; }
.spatial-place.selected { stroke: #f3ae3d; stroke-width: 3; opacity: 1; }
.map-bin-0 { fill: #dce8be; background: #dce8be; }
.map-bin-1 { fill: #b8d37b; background: #b8d37b; }
.map-bin-2 { fill: #82b966; background: #82b966; }
.map-bin-3 { fill: #3e8d65; background: #3e8d65; }
.map-bin-4 { fill: #145847; background: #145847; }
.map-bin-no-data, .map-bin-no-data path { fill: #a9afaa; background: #a9afaa; }
html[data-theme="dark"] .map-bin-0 { fill: #25483e; background: #25483e; }
html[data-theme="dark"] .map-bin-1 { fill: #396a51; background: #396a51; }
html[data-theme="dark"] .map-bin-2 { fill: #5d965d; background: #5d965d; }
html[data-theme="dark"] .map-bin-3 { fill: #83bc62; background: #83bc62; }
html[data-theme="dark"] .map-bin-4 { fill: #b4df71; background: #b4df71; }
.map-legend { display: flex; flex-wrap: wrap; gap: 9px 14px; padding: 8px 4px 0; color: var(--muted); font-size: .76rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { display: inline-block; width: 22px; height: 8px; border-radius: 2px; border: 1px solid var(--border); }
.spatial-detail { padding: 34px 28px; min-width: 0; }
.spatial-detail .eyebrow { color: var(--accent); margin-bottom: 10px; }
.spatial-detail h3 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem,3vw,3rem); line-height: 1; letter-spacing: -.045em; }
.spatial-big-number { display: block; margin: 24px 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.1rem,4vw,4.1rem); line-height: .95; color: var(--accent); }
.spatial-big-number small { font-family: inherit; font-size: .34em; color: var(--muted); }
.spatial-detail > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.spatial-rank { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 22px 0 10px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); }
.spatial-rank strong { color: var(--text); }
.spatial-ranking { margin: 0; padding: 0; list-style: none; counter-reset: place; }
.spatial-ranking li { counter-increment: place; }
.spatial-ranking button { width: 100%; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px 0; color: var(--text); border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; }
.spatial-ranking button::before { content: counter(place); color: var(--muted); font-size: .76rem; }
.spatial-ranking button:hover span { color: var(--accent); }
.spatial-ranking b { font-variant-numeric: tabular-nums; }
.place-facts { margin: 20px 0 0; }
.place-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.place-facts dt { color: var(--muted); }
.place-facts dd { margin: 0; text-align: right; }
.spatial-source { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 13px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: .76rem; }
.spatial-source span:first-child { color: var(--ok); font-weight: 760; }
.story-section { margin-bottom: 76px; padding: 26px; }
.story-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.story-card { border-radius: 8px; background: var(--panel-soft); }
.story-card span { color: var(--accent); }
.main-workspace { scroll-margin-top: 110px; }
.grid.two { grid-template-columns: minmax(280px,.7fr) minmax(0,1.8fr); }
.layer-panel { box-shadow: none; }
.chart-card { padding: 26px; }
.chart-area { border-radius: 7px; }
.series-row, .range-toolbar, .layer-item, .brief-item, .provenance-item, .data-table-panel { border-radius: 7px; }
.pill, .chip { border-radius: 5px; }
.footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); padding: 24px 0 4px; text-align: left; }
.footer a { color: var(--accent); font-weight: 750; text-decoration: none; }

@media (max-width: 1160px) {
  .site-header { flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
  .header-actions { min-width: 0; }
  .hero { grid-template-columns: 1fr; }
  .hero-data { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .spatial-layout { grid-template-columns: 1fr; }
  .spatial-map-panel { border-right: 0; border-bottom: 1px solid var(--border); }
  .story-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .app-shell { padding: 0 14px 18px; }
  .header.site-header { margin: 0 -4px 18px; padding: 9px 4px; position: relative; }
  .brand { min-width: 0; }
  .brand p, .refresh-btn span { display: none; }
  .header-actions { margin-left: auto; }
  .main-nav { gap: 0; }
  .main-nav a { padding: 8px; font-size: .82rem; white-space: nowrap; }
  .hero { min-height: 0; margin-bottom: 62px; }
  .hero-copy { padding: 44px 24px; }
  .hero-title { font-size: clamp(3rem,16vw,4.3rem); }
  .hero-data { margin: 0; padding: 22px; }
  .hero-data .snapshot { grid-template-columns: 1fr; }
  .hero-data .metric:nth-child(odd) { border-right: 0; }
  .hero-data .metric:nth-child(even) { padding-left: 0; }
  .section-intro { grid-template-columns: 1fr; gap: 16px; }
  .spatial-section { margin-bottom: 62px; }
  .spatial-mode { align-items: stretch; flex-wrap: wrap; }
  .spatial-mode button { flex: 1 1 140px; }
  .spatial-mode > span { width: 100%; margin: 4px 0 0; }
  .spatial-controls { align-items: stretch; }
  .spatial-controls label, .spatial-controls label:first-child { min-width: 100%; flex-basis: 100%; }
  .spatial-controls .btn { flex: 1; justify-content: center; }
  .spatial-map-panel { padding: 8px; }
  .spatial-map { min-height: 360px; }
  .spatial-detail { padding: 28px 20px; }
  .story-grid { grid-template-columns: 1fr; }
  .footer { flex-direction: column; }
}