:root{
  --bg:#0b0c0f;
  --panel:#101218;
  --panel2:#0f1116;
  --line:#1b2030;
  --text:#e9edf7;
  --muted:#95a0b8;
  --accent:#c9d4ff;
  --danger:#ff5c6d;
  --good:#71ffb6;

  --radius:14px;
  --pad:16px;

  /* density gradient */
  --low:#1a2238;
  --high:#6a7cff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 800px at 20% 10%, #141a2b, var(--bg));
  color:var(--text);
}

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px 12px;
  border-bottom:1px solid var(--line);
}

.brand .title{
  font-weight:800;
  letter-spacing:0.08em;
  font-size:18px;
}
.brand .sub{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
}

.kpis{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.kpi{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  min-width:92px;
  text-align:right;
}
.kpiSmall{ min-width:140px; }
.kpiNum{
  font-weight:800;
  font-size:16px;
}
.kpiLab{
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.06em;
}

.layout{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr 1.4fr;
  gap:14px;
  padding:14px;
}

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  min-height: calc(100vh - 92px);
}

.panelHeader{
  padding:14px var(--pad);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.panelTitle{
  font-weight:800;
  letter-spacing:.08em;
  font-size:12px;
  color:var(--accent);
}
.panelHint{
  font-size:12px;
  color:var(--muted);
}

.mapWrap{ padding: var(--pad); }
.tileMap{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:6px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
}

.tile{
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  letter-spacing:.06em;
  font-size:12px;
  user-select:none;
  cursor:pointer;
  background:rgba(255,255,255,.02);
  transition: transform .08s ease, border-color .2s ease, filter .2s ease;
}
.tile:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.tile.selected{
  outline:2px solid rgba(201,212,255,.65);
  outline-offset:1px;
}

.legend{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.22);
}
.legendTop{
  display:flex;
  gap:10px;
  align-items:center;
}
.legendNum{
  font-weight:800;
  min-width:34px;
  text-align:left;
}
.legendLabel{
  font-size:12px;
  color:var(--muted);
}
.legendLabel.right{ margin-left:auto; }
.legendBar{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--low), var(--high));
  border:1px solid rgba(255,255,255,.06);
}

.selectedBox{
  padding: 0 var(--pad) var(--pad);
}
.selectedRow{
  display:flex;
  justify-content:space-between;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.18);
  margin-top:10px;
}
.selectedKey{ color:var(--muted); font-size:12px; }
.selectedVal{ font-weight:800; }

.statesList{
  padding: var(--pad);
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: calc(100vh - 160px);
  overflow:auto;
}
.stateRow{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.16);
  cursor:pointer;
}
.stateRow:hover{ border-color: rgba(255,255,255,.18); }
.stateRow.selected{ outline:2px solid rgba(201,212,255,.65); outline-offset:1px; }
.stateAbbr{
  font-weight:900;
  letter-spacing:.08em;
  color:var(--accent);
}
.stateName{ font-size:13px; }
.stateMeta{ color:var(--muted); font-size:12px; }

.resultsPanel{ display:flex; flex-direction:column; }
.mutedNote{
  padding:10px var(--pad) 0;
  color:var(--muted);
  font-size:12px;
}
.searchBlock{
  padding: 12px var(--pad) 0;
}
.label{
  display:block;
  font-weight:800;
  letter-spacing:.08em;
  font-size:11px;
  color:var(--accent);
  margin-bottom:8px;
}
input[type="search"]{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
}
input[type="search"]:focus{ border-color: rgba(201,212,255,.55); }

.filtersBlock{
  padding: 14px var(--pad) 0;
}
.filtersHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.filtersGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.filterCard{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px 12px;
  background:rgba(0,0,0,.16);
}
.filterTitle{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
}
.pills{ display:flex; flex-wrap:wrap; gap:6px; }
.pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  font-size:12px;
  cursor:pointer;
  user-select:none;
}
.pill.active{ border-color: rgba(201,212,255,.6); background: rgba(201,212,255,.12); }

.btn{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{ filter:brightness(1.08); }
.btn.ghost{
  background:transparent;
  color:var(--muted);
}

.resultsHeader{
  padding: 12px var(--pad) 10px;
  border-top:1px solid var(--line);
}
.resultsList{
  padding: 0 var(--pad) var(--pad);
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  max-height: calc(100vh - 410px);
}

.resultCard{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px 10px;
  background:rgba(0,0,0,.16);
  cursor:pointer;
}
.resultTitle{
  font-weight:900;
  margin-bottom:6px;
}
.resultLine{
  color:var(--muted);
  font-size:12px;
  margin:2px 0;
}
.tags{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tag{
  font-size:11px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  color: var(--text);
}

.drawer{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(520px, 92vw);
  background:linear-gradient(180deg, rgba(16,18,24,.98), rgba(10,12,18,.98));
  border-left:1px solid var(--line);
  transform: translateX(110%);
  transition: transform .18s ease;
  z-index:50;
  display:flex;
  flex-direction:column;
}
.drawer.open{ transform: translateX(0); }
.drawerTop{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.drawerTitle{ font-weight:900; }
.drawerBody{
  padding:14px;
  overflow:auto;
}
.detailGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.detailCard{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(0,0,0,.18);
}
.detailKey{
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}
.detailVal{
  font-weight:800;
}
pre.note{
  white-space:pre-wrap;
  margin:0;
  color:var(--text);
  font-family: inherit;
  line-height:1.35;
}

.backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:40;
}

@media (max-width: 1100px){
  .layout{ grid-template-columns: 1fr; }
  .panel{ min-height:auto; }
  .resultsList{ max-height: none; }
  .statesList{ max-height: none; }
}
/* ------------------------------
   iOS/Safari: stop repeating overlay band on scroll
   Move the big gradient onto a fixed layer
-------------------------------- */

html{
  background: var(--bg);
}

body{
  background: var(--bg) !important;   /* kill gradient on the scrolling layer */
  position: relative;
  overflow-x: hidden;
}

/* fixed "canvas" behind the page */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(1200px 800px at 20% 10%, #141a2b, var(--bg));
  transform: translateZ(0); /* force stable compositor layer on iOS */
  will-change: transform;
}
.panel,
.stateRow,
.resultCard,
.filterCard{
  background-color: rgba(10,12,18,.72);
}