:root {
  --bg: #02070d;
  --fg: #b7ffd4;
  --dim: #4f7d63;
  --acc: #39ff9c;
  --cyan: #48e4ff;
  --warn: #ffb347;
  --panel: rgba(4, 18, 12, 0.88);
  --line: rgba(57, 255, 156, 0.25);
  font-family: "Consolas", "SFMono-Regular", ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; }
#universe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#scene { position: fixed; inset: 0; z-index: 1; mix-blend-mode: screen; }

#top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 16px; padding: 10px 16px;
  background: linear-gradient(to bottom, rgba(2, 6, 4, 0.9), transparent);
}
.brand { font-weight: 700; letter-spacing: 0.3em; color: var(--acc); text-shadow: 0 0 8px var(--acc); }
.brand span { color: var(--cyan); margin-left: 6px; text-shadow: 0 0 8px var(--cyan); }
.status { font-size: 12px; color: var(--warn); border: 1px solid var(--warn); padding: 2px 8px; border-radius: 3px; }
.status.proj { color: #c38bff; border-color: #c38bff; }
.modes { margin-left: auto; display: flex; gap: 6px; }
.modes button {
  background: transparent; color: var(--fg); border: 1px solid var(--line); padding: 6px 12px;
  font: inherit; cursor: pointer; border-radius: 3px;
}
.modes button { white-space: nowrap; }
@media (max-width: 900px) { .modes { flex-wrap: wrap; justify-content: flex-end; } .modes button { padding: 4px 8px; font-size: 12px; } .status { font-size: 11px; } }
.modes button.on { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 8px rgba(57, 255, 156, 0.4); }

#kpis { position: fixed; top: 52px; left: 16px; z-index: 3; display: flex; gap: 8px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px; min-width: 110px; }
.kpi span { display: block; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.kpi b { font-size: 20px; color: var(--acc); }
.kpi.neg b { color: #ff6b6b; }
@media (max-width: 640px), (max-height: 560px) { .kpi { min-width: 80px; padding: 4px 8px; } .kpi b { font-size: 15px; } }
/* the mode buttons wrap onto extra rows on narrow screens: keep the KPI cards below them */
@media (max-width: 900px) { #kpis { top: 128px; flex-wrap: wrap; } }
#hud {
  position: fixed; left: 16px; bottom: 44px; z-index: 3; width: min(420px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); padding: 12px; border-radius: 4px; font-size: 12px;
}
.year label { display: block; margin-bottom: 4px; }
.year input { width: 100%; accent-color: var(--acc); }
.totals { margin: 8px 0; line-height: 1.6; }
.totals b { color: var(--acc); }
.legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--dim); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot.rev { background: #48e4ff; } .dot.gov { background: #ffffff; } .dot.exp { background: #39ff9c; }
.dot.fun { background: #c38bff; } .dot.bh { background: #000; box-shadow: 0 0 0 2px #ffb347; }

#panel {
  position: fixed; top: 56px; right: 16px; z-index: 4; width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - 120px); overflow: auto;
  background: var(--panel); border: 1px solid var(--acc); padding: 14px 16px; border-radius: 4px; font-size: 13px;
  box-shadow: 0 0 24px rgba(57, 255, 156, 0.2);
}
#panel h3 { margin: 0 0 6px; color: var(--acc); font-size: 15px; }
#panel .amt { font-size: 22px; color: #fff; margin: 4px 0 10px; }
#panel .src { color: var(--dim); font-size: 11px; margin-top: 10px; }
#panel table { width: 100%; border-collapse: collapse; font-size: 12px; }
#panel td { padding: 3px 0; border-bottom: 1px solid rgba(57, 255, 156, 0.1); }
#panel td:last-child { text-align: right; }
#panel .stmt { border-left: 2px solid var(--warn); padding: 4px 8px; margin: 8px 0; color: #ffe0b8; font-size: 12px; }
#panel details { border: 1px solid rgba(57, 255, 156, 0.2); padding: 6px 8px; margin: 6px 0; border-radius: 3px; }
#panel summary { cursor: pointer; }
#panel .spark { width: 100%; height: 40px; }
#panel .spark polyline { fill: none; stroke: var(--cyan); stroke-width: 2; }
#panel button.dive { background: transparent; color: var(--cyan); border: 1px solid var(--cyan); padding: 5px 8px; font: inherit; font-size: 12px; cursor: pointer; border-radius: 3px; }
#panel table.reg td { padding: 3px 6px; text-align: right; } #panel table.reg td:first-child { text-align: left; }
#panel table.reg tr.gew td:first-child { padding-left: 8px; }
#panel table.reg tr.prov td:first-child { padding-left: 20px; color: var(--dim); }
#panel table.reg tr.tot td { color: var(--cyan); }
#panel table.reg td.bar { width: 70px; } #panel table.reg td.bar span { display: block; height: 6px; background: var(--acc); opacity: .7; }
#panel select { background: #000; color: var(--fg); border: 1px solid var(--line); font: inherit; font-size: 12px; padding: 4px; max-width: 100%; }
#close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--fg); font-size: 20px; cursor: pointer; }

#tableView {
  position: fixed; top: 100px; left: 16px; right: 16px; bottom: 16px; z-index: 4; overflow: auto;
  background: rgba(2, 8, 5, 0.96); border: 1px solid var(--acc); border-radius: 4px; padding: 14px 16px; font-size: 13px;
}
#tableView h3 { color: var(--acc); margin: 14px 0 6px; font-size: 14px; }
#tableView table { border-collapse: collapse; width: 100%; max-width: 900px; }
#tableView th, #tableView td { border-bottom: 1px solid rgba(57, 255, 156, 0.15); padding: 4px 6px; text-align: right; }
#tableView th:first-child, #tableView td:first-child { text-align: left; }
#tableView th { color: var(--dim); font-weight: normal; }

#foot { position: fixed; bottom: 0; left: 0; right: 0; z-index: 3; padding: 8px 16px; font-size: 11px; color: var(--dim); background: rgba(2, 6, 4, 0.8); }

@media (max-height: 560px) {
  #hud { padding: 6px 10px; width: min(330px, calc(100vw - 32px)); font-size: 11px; }
  #hud .legend, #hud .totals { display: none; }
  .totals { margin: 4px 0 0; }
  #foot { display: none; }
  #hud { bottom: 8px; }
}
@media (max-width: 640px) {
  #top { flex-wrap: wrap; }
  #hud { bottom: 60px; }
  #foot { font-size: 10px; }
}

/* organism (dive-in view) */
#organism { position: fixed; inset: 0; z-index: 6; background: radial-gradient(ellipse at center, rgba(2, 7, 13, 0.12), rgba(2, 7, 13, 0.55)); }
body:has(#organism:not([hidden])) :is(#scene, #top, #kpis, #hud, #foot, #panel, #tableView) { visibility: hidden; }
#orgCanvas { position: absolute; inset: 0; width: calc(100% - min(360px, 40vw)); height: 100%; touch-action: none; }
.org-top { position: absolute; top: 10px; left: 16px; right: calc(min(360px, 40vw) + 16px); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; z-index: 2; }
.org-top button, #orgCrumbs button { background: transparent; color: var(--fg); border: 1px solid var(--line); padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; border-radius: 3px; }
#orgSides button.on { border-color: var(--acc); color: var(--acc); }
#orgCrumbs { color: var(--dim); font-size: 12px; }
#orgClose { margin-left: auto; font-size: 18px !important; }
.org-side { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 40vw); overflow: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 12px; font-size: 12px; }
#orgList button { display: block; width: 100%; text-align: left; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid rgba(57,255,156,.1); padding: 5px 2px; font: inherit; cursor: pointer; }
#orgList button i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; }
#orgList button:hover { color: var(--acc); }
.org-cur { color: var(--acc); }
#orgInfo h4 { margin: 12px 0 4px; }
#orgInfo table { width: 100%; border-collapse: collapse; }
#orgInfo td { border-bottom: 1px solid rgba(57,255,156,.1); padding: 2px 0; vertical-align: top; }
#orgInfo td:last-child { text-align: right; }
#orgInfo a, .org-src a { color: var(--cyan); }
.org-bars { display: flex; gap: 3px; align-items: flex-end; height: 70px; margin: 4px 0 8px; }
.org-bars div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.org-bars span { width: 100%; background: #c38bff; min-height: 1px; }
.org-bars em { font-style: normal; font-size: 9px; color: var(--dim); }
.org-src { color: var(--dim); margin-top: 12px; }
@media (max-width: 700px) { #orgCanvas { width: 100%; height: 55%; } .org-side { top: 55%; width: 100%; border-left: 0; border-top: 1px solid var(--line); } .org-top { right: 16px; } }
.data-flag { color: #ffcf85; font-size: 11px; white-space: normal; }
.kpi .data-flag { display: block; }

#top {flex-wrap:wrap;gap:8px} .modes {flex-wrap:wrap} .modes button {padding:5px 8px;font-size:12px}
.lang-control select,#geoNav select,#geoNav input {background:#07121c;color:var(--fg);border:1px solid var(--line);font:inherit;padding:5px;border-radius:3px}
#geoNav {position:fixed;z-index:3;top:105px;left:16px;right:16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px}
#geoNav button {font:inherit;color:var(--fg);background:rgba(4,18,12,.85);padding:5px 12px;border:1px solid var(--line);cursor:pointer;border-radius:3px}
#geoNav button.on {color:var(--cyan);border-color:var(--cyan)} #geoNav input {width:190px}
#geoNote {position:fixed;left:16px;top:138px;z-index:3;color:#75b7c1;font-size:11px;max-width:calc(100vw - 32px)}
body:has(#organism:not([hidden])) :is(#geoNav,#geoNote){visibility:hidden}
.org-side details {margin:10px 0;border-top:1px solid var(--line);padding:6px 0} .org-side summary {color:var(--cyan);cursor:pointer} .org-side details div {line-height:1.55;font-size:12px}
#kpis {top:57px} #panel {top:180px;max-height:calc(100vh - 215px)}
@media(max-width:900px){#geoNav{top:174px}#geoNote{top:234px}#kpis{top:122px}#panel{top:270px;max-height:calc(100vh - 300px)}}

#geoNav {top:138px} #geoNote{top:173px} #panel{top:210px;max-height:calc(100vh - 245px)} .tariff-warning {color:var(--warn)} .org-side dd {margin:4px 0 12px;line-height:1.6} .org-side dt{color:var(--cyan)}
@media(max-width:900px){#geoNav{top:174px}#geoNote{top:234px}#panel{top:270px;max-height:calc(100vh - 300px)}}

.org-top select{background:#07121c;color:var(--fg);font:inherit;border:1px solid var(--line);padding:5px}

#top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}#top .status{justify-self:start;max-width:100%;white-space:normal}#top .modes{grid-column:1/-1;justify-self:end;margin-left:0}#kpis{top:86px}#geoNav{top:157px}#geoNote{top:195px}#panel{top:229px;max-height:calc(100vh - 259px)}
@media(max-width:900px){#top .status{font-size:9px}#top .brand{font-size:11px;letter-spacing:.12em}#top .modes button{font-size:10px;padding:4px 6px}#kpis{top:118px}#geoNav{top:179px}#geoNote{top:235px}#panel{top:269px;max-height:calc(100vh - 299px)}}

#panel a,.org-side a{color:var(--cyan)}#panel button:not(#close){background:#07121c;border:1px solid var(--line);color:var(--fg);padding:5px 8px;font:inherit;cursor:pointer}#panel th{text-align:left;font-size:11px;color:var(--dim)}

#lawOverview {position:fixed;inset:90px 16px 34px;z-index:10;background:rgba(3,13,17,.97);border:1px solid var(--cyan);border-radius:6px;overflow:auto;padding:18px;color:var(--fg);box-shadow:0 0 35px rgba(72,228,255,.16)}
.law-top {display:flex;justify-content:flex-end;gap:12px;position:sticky;top:0;z-index:2;background:#030d11}.law-top button,.law-top select,.law-filters input,.law-filters select {font:inherit;color:var(--fg);background:#07121c;border:1px solid var(--line);padding:6px;border-radius:3px}.law-top button{font-size:22px;cursor:pointer;padding:0 10px}
#lawOverview h2 {margin:0 0 8px;color:var(--cyan);font-size:20px}#lawOverview p{font-size:12px;line-height:1.6}.law-summary{display:flex;flex-wrap:wrap;gap:12px}.law-summary span{padding:10px;background:#081c21;border:1px solid rgba(72,228,255,.18);font-size:12px}.law-summary b{display:block;font-size:22px;color:var(--cyan)}
.law-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:18px 0 8px}.law-filters label{display:flex;flex-direction:column;gap:5px;font-size:12px}.law-filters select{max-width:280px}.law-filters .law-check{flex-direction:row;align-items:center;padding-bottom:5px}.law-filters input[type=checkbox]{accent-color:var(--cyan)}
.law-table-scroll {overflow:auto;max-height:53vh;border:1px solid var(--line)}#lawTable {width:100%;min-width:1050px;border-collapse:collapse;font-size:12px}#lawTable td,#lawTable th {padding:9px 8px;border-bottom:1px solid rgba(72,228,255,.12);text-align:left;vertical-align:top}#lawTable thead{position:sticky;top:0;background:#0a2027;z-index:1}#lawTable th[scope=row]{font-weight:normal;min-width:150px}#lawTable td:nth-child(3){min-width:220px;max-width:340px}#lawTable small{display:block;font-size:10px;margin-top:5px;line-height:1.5}#lawTable .law-unknown td:nth-child(7),.law-warning{color:var(--warn)}#lawOverview a{color:var(--cyan)}#lawOverview details{font-size:11px;line-height:1.5}#lawOverview summary{cursor:pointer;color:var(--cyan)}.law-method{margin-top:14px;overflow-wrap:anywhere}
@media(max-width:900px){#lawOverview{inset:15px 8px 15px}.law-table-scroll{max-height:45vh}.law-filters{gap:8px}.law-summary span{flex:1 1 130px;padding:6px}}