/* ipindex — monochrome glass console */
@font-face {
  font-family: "JB Mono";
  src: url("/static/fonts/jbmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JB Mono";
  src: url("/static/fonts/jbmono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JB Mono";
  src: url("/static/fonts/jbmono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #050506;
  --bg-2: #0a0a0c;
  --glass: rgba(255, 255, 255, 0.028);
  --glass-2: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.045);
  --ink: #f4f4f5;
  --ink-2: #c9c9ce;
  --muted: #76767d;
  --faint: #4c4c53;
  --accent: #ffffff;
  --accent-dim: rgba(255, 255, 255, 0.07);
  --open: #6ee7b7;
  --err: #f87171;
  --crit: #f87171;
  --high: #fca5a5;
  --med: #e4e4e7;
  --low: #8b8b93;
  --run: #7dd3fc;
  --info: #7dd3fc;
  --thumb: rgba(255, 255, 255, 0.14);
  --radius: 10px;
  --radius-s: 6px;
  --blur: blur(14px) saturate(140%);
  --mono: "JB Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* faint ambient light, top-left — gives the glass something to refract */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(255, 255, 255, 0.045), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(255, 255, 255, 0.02), transparent 55%);
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* scrollbars — thin, quiet */
html, body, * {
  scrollbar-width: thin;
  scrollbar-color: var(--thumb) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); border: 0; }
*::-webkit-scrollbar-corner { background: transparent; }

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.35); }
.mono, .cc, .num, .brand, .stats, th, .status, .sev, .rail-meta, .pill {
  font-family: var(--mono);
}
.muted { color: var(--muted); }

/* ── header ─────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 20px;
  height: 52px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(5, 5, 6, 0.72);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
nav { display: flex; gap: 4px; }
nav a {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--mono);
  padding: 5px 10px;
  border-radius: var(--radius-s);
  transition: color 0.15s, background 0.15s;
}
nav a:hover { color: var(--ink); text-decoration: none; background: var(--glass-2); }
nav a.on {
  color: var(--ink);
  background: var(--glass-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stats { margin-left: auto; display: flex; gap: 14px; color: var(--faint); font-size: 11px; }
.stats b { color: var(--ink-2); font-weight: 500; margin-right: 3px; }
.stats .muted { color: var(--faint); }

main { padding: 18px 20px 48px; animation: rise 0.35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html:has(.mapwrap), body:has(.mapwrap) { overflow: hidden; height: 100%; }
main:has(.mapwrap) { padding: 0; overflow: hidden; height: calc(100vh - 52px); animation: none; }

/* ── searchbar ──────────────────────────────────────────── */
.searchbar {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  max-width: 980px;
}
.searchbar input[type="search"] {
  flex: 1;
  background: var(--glass);
  backdrop-filter: var(--blur);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
  font: 13px/1.4 var(--mono);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.searchbar input[type="search"]::placeholder { color: var(--faint); }
.searchbar input[type="search"]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}
.searchbar button {
  padding: 11px 18px;
  border-radius: var(--radius);
}
button {
  cursor: pointer;
  background: var(--glass);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
button:hover { background: var(--glass-2); color: var(--ink); border-color: rgba(255,255,255,0.25); text-decoration: none; }
button:focus { outline: none; border-color: rgba(255,255,255,0.3); }

/* ── browse layout ──────────────────────────────────────── */
.grid { display: grid; grid-template-columns: 210px 1fr; gap: 26px; }
.facets details { margin: 8px 0; }
.facets summary {
  cursor: pointer;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  font-family: var(--mono);
  list-style: none;
  padding: 4px 0;
}
.facets summary::-webkit-details-marker { display: none; }
.facets summary::before { content: "▸"; margin-right: 6px; color: var(--faint); }
.facets details[open] summary::before { content: "▾"; }
.facets ul {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  max-height: 200px;
  overflow: auto;
  overscroll-behavior: contain;
}
.facet {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 8px;
  color: var(--ink-2);
  font-size: 12px;
  border-radius: var(--radius-s);
  min-width: 0;
  transition: background 0.12s, color 0.12s;
}
.facet:hover { background: var(--accent-dim); text-decoration: none; color: var(--ink); }
.facet span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet .n { color: var(--faint); font-family: var(--mono); font-size: 11px; }
.facet.active { color: var(--ink); background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); }
.clear { font-size: 11px; margin: 6px 0; }
.clear a { color: var(--muted); }

/* ── table ──────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  color: var(--faint);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
td.muted { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tbody tr { transition: background 0.12s; }
tbody tr:hover td { background: var(--glass); }
.cc { display: inline-block; min-width: 22px; color: var(--ink); margin-right: 6px; font-size: 11px; opacity: 0.85; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.status { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.status.open, .status.done { color: var(--open); }
.status.pending { color: var(--low); }
.status.running { color: var(--info); }
.status.error { color: #fb923c; }
.status.closed, .status.filtered { color: var(--err); }
.pager { display: flex; gap: 16px; margin-top: 16px; font: 11px var(--mono); color: var(--muted); }
.meta { color: var(--faint); font: 11px var(--mono); margin-bottom: 10px; }

/* ── host page ──────────────────────────────────────────── */
.hosthead h1 { margin: 0 0 10px; font-size: 26px; font-family: var(--mono); font-weight: 700; letter-spacing: -0.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: var(--blur);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--ink-2);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
section h2 { display: flex; align-items: center; gap: 10px; }
.h2btn {
  border: 1px solid var(--line);
  background: var(--glass);
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--ink-2);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.h2btn:hover { background: var(--accent-dim); color: var(--ink); }
section h2 {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  margin: 26px 0 8px;
  font-family: var(--mono);
}
.card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  transition: border-color 0.15s, background 0.15s;
}
.card:hover { border-color: var(--line); background: var(--glass-2); }
.row { display: flex; justify-content: space-between; gap: 8px; }
.row.left { justify-content: flex-start; gap: 14px; margin-bottom: 10px; }
.wrap { word-break: break-all; }
.sev { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.sev.critical { color: var(--crit); }
.sev.high { color: var(--high); }
.sev.medium { color: var(--med); }
.sev.low, .sev.info { color: var(--low); }
.rels { list-style: none; padding: 0; }

/* ── map ────────────────────────────────────────────────── */
.mapwrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: 100%;
  min-height: 0;
}
/* pin children to explicit columns: when the rail is display:none it stops
   being a grid item and #map would auto-place into the collapsed 0px column */
.mapwrap > .maprail { grid-column: 1; grid-row: 1; }
.mapwrap > #map { grid-column: 2; grid-row: 1; min-width: 0; }
.maprail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line-soft);
  background: rgba(5, 5, 6, 0.85);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.rail-filters { padding: 12px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line-soft); }
.rail-filters input, #railtxt {
  background: var(--glass);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 7px 9px;
  font: 12px var(--mono);
  width: 100%;
}
.rail-filters input:focus, #railtxt:focus { outline: none; border-color: rgba(255,255,255,0.25); }
.rail-filters input::placeholder, #railtxt::placeholder { color: var(--faint); }
.rail-row { display: flex; gap: 6px; }
.rail-row input { min-width: 0; flex: 1; }
#railtxt { margin: 10px 12px 8px; width: auto; }
.rail-meta { padding: 0 14px 8px; color: var(--faint); font: 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.raillist { overflow: auto; flex: 1; min-height: 0; }
.railitem {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 9px 14px;
  color: var(--ink);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  transition: background 0.12s;
}
.railitem .mono { font-size: 12px; color: var(--ink); font-weight: 500; }
.rail-sub {
  grid-column: 1;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-right {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 11px;
}
.rail-right b { font-weight: 500; color: var(--ink-2); }
.railitem:hover, .railitem.on { background: var(--accent-dim); text-decoration: none; }
.railitem.on { box-shadow: inset 2px 0 0 var(--accent); }
.railitem:hover .mono, .railitem.on .mono { color: var(--ink); }
#map { height: 100%; background: var(--bg); }
#map path.mk-done { stroke: rgba(110, 231, 183, 0.9); fill: rgba(110, 231, 183, 0.8); }
#map path.mk-error { stroke: rgba(248, 113, 113, 0.9); fill: rgba(248, 113, 113, 0.7); }
#map path.mk-running { stroke: rgba(125, 211, 252, 0.95); fill: rgba(125, 211, 252, 0.85); }

/* clusters — monochrome glass */
.mcluster {
  border-radius: 50%;
  background: transparent;
}
.mcluster.md .mc-in { background: rgba(10, 10, 12, 0.85); }
.mcluster.lg .mc-in { background: rgba(10, 10, 12, 0.95); }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: transparent; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: transparent; }

#mapmodes {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  display: flex;
  gap: 4px;
  background: rgba(12, 12, 14, 0.85);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px;
}
.mode-chip {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 99px;
  padding: 5px 12px;
}
.mode-chip:hover { background: var(--accent-dim); color: var(--ink); }
.mode-chip.on { background: var(--accent); color: #000; }
#maplegend {
  position: absolute;
  bottom: 24px;
  right: 12px;
  z-index: 500;
  display: flex;
  gap: 12px;
  background: rgba(12, 12, 14, 0.8);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  padding: 6px 10px;
  font: 10px var(--mono);
  color: var(--muted);
}
#maplegend .leg { display: flex; align-items: center; gap: 5px; }
#maplegend .leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kbadge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid rgba(125, 211, 252, 0.4);
  border-radius: 99px;
  color: #7dd3fc;
  font: 500 9px var(--mono);
  letter-spacing: 0.1em;
  vertical-align: 2px;
}
#map path.mkg { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)); }
.mc-in {
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 11px var(--mono);
  color: var(--ink);
}

/* country hover tooltip */
.cc-tip {
  background: rgba(12, 12, 14, 0.9) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  font: 11px var(--mono) !important;
  border-radius: var(--radius-s) !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
}
.cc-tip::before { display: none !important; }
.leaflet-container { background: var(--bg); font-family: var(--sans); }
.leaflet-container a { color: var(--ink); }

/* glass popups */
.pop { font: 12px/1.55 var(--sans); width: 292px; padding: 14px 16px 12px; color: var(--ink); }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pop-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.pop-badges .kbadge { margin-left: 0; }
.pop-ip { font: 700 15px var(--mono); color: var(--ink); text-decoration: none; }
.pop-ip:hover { text-decoration: underline; }
.pop-geo { color: #c9c9ce; margin-top: 7px; }
.pop-asn { color: var(--muted); margin-top: 3px; font: 11px var(--mono); }
.pop-title {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pop-ports { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.portchip {
  font: 10px var(--mono);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 1px 7px;
}
.pop-meta { display: flex; gap: 12px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line-soft); align-items: center; color: var(--muted); }
.pop-go {
  display: block;
  text-align: center;
  margin-top: 11px;
  font: 500 10px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 10px;
  transition: background 0.15s, color 0.15s;
}
.pop-go:hover { background: var(--accent); color: #000; text-decoration: none; }
.leaflet-popup-content-wrapper {
  background: rgba(12, 12, 14, 0.88) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}
.leaflet-popup-tip { background: rgba(12, 12, 14, 0.88) !important; border: 1px solid var(--line); }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-popup-close-button { color: var(--muted) !important; }
.leaflet-bar a {
  background: rgba(12, 12, 14, 0.85) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  backdrop-filter: var(--blur);
}
.leaflet-bar a:hover { background: var(--accent) !important; color: #000 !important; }
.leaflet-control-attribution { background: transparent !important; color: var(--faint); font-size: 10px; }
.leaflet-control-attribution a { color: var(--faint); }

/* ── scans page ─────────────────────────────────────────── */
.scanhead { margin-bottom: 18px; }
.scan-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: var(--blur);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pill b { color: var(--ink); font-weight: 500; margin-right: 4px; }
.pill.live { color: var(--faint); border-color: transparent; background: transparent; }
.pill.live.on { visibility: hidden; }
.scan-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; min-height: 0; }
.scan-col {
  max-height: calc(100vh - 170px);
  overflow: auto;
  border-top: 1px solid var(--line);
  border-radius: var(--radius);
}
.scanrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  transition: background 0.12s;
}
.scanrow:hover { background: var(--accent-dim); text-decoration: none; }
.scanrow .mono { color: var(--ink-2); }
.scanrow:hover .mono { color: var(--ink); }
.scanrow.running { box-shadow: inset 2px 0 0 var(--run); }
.scanrow.error { box-shadow: inset 2px 0 0 #fb923c; }
.scanrow.done { box-shadow: inset 2px 0 0 var(--open); }
.scanrow.pending { box-shadow: inset 2px 0 0 var(--faint); }

@media (max-width: 900px) {
  .grid, .cols, .scan-grid, .mapwrap, .dash-grid { grid-template-columns: 1fr; }
  .stats { display: none; }
}

/* maplibre + tactical */
.bbox-drag {
  position: absolute; border: 1px dashed rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06); pointer-events: none; z-index: 10;
}
#maptactical {
  position: absolute; top: 60px; right: 12px; z-index: 500;
  display: flex; gap: 4px; align-items: center;
  background: rgba(12,12,14,0.85); backdrop-filter: var(--blur);
  border: 1px solid var(--line); border-radius: 99px; padding: 3px;
}
#mapcoords {
  position: absolute; bottom: 24px; left: 12px; z-index: 500;
  font: 10px var(--mono); color: var(--faint);
  background: rgba(12,12,14,0.7); border: 1px solid var(--line-soft);
  border-radius: var(--radius-s); padding: 4px 8px; pointer-events: none;
}
.tac-hint { font: 9px var(--mono); color: var(--faint); padding: 0 8px; letter-spacing: 0.04em; }
.clear-btn { width: 100%; margin-top: 2px; color: var(--muted); }
.clear-btn:hover { color: #000; }
.kbadge.sm { font-size: 8px; padding: 0 5px; margin-left: 4px; }
.maplibregl-popup-content {
  background: rgba(12,12,14,0.92) !important; backdrop-filter: var(--blur);
  color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important; padding: 0 !important;
}
.maplibregl-popup-close-button { color: var(--muted); }
.cc-tip2 { font: 11px var(--mono); color: var(--ink); padding: 4px 6px; }
.cc-tip-pop .maplibregl-popup-content { padding: 6px 10px !important; }
.maplibregl-ctrl-attrib { background: rgba(5,5,6,0.6) !important; color: var(--faint) !important; font-size: 10px; }
.maplibregl-ctrl-group { background: rgba(12,12,14,0.85) !important; border: 1px solid var(--line); }
.maplibregl-ctrl-group button span { filter: invert(0.9); }

/* dashboard */
.dash-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.kpi {
  background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 14px 16px; backdrop-filter: var(--blur);
}
.kpi .k { font: 10px var(--mono); color: var(--faint); letter-spacing: 0.14em; text-transform: uppercase; }
.kpi .v { font: 700 26px var(--mono); margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.dash-card {
  background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 14px 16px; backdrop-filter: var(--blur); min-height: 180px;
}
.dash-card h2 { margin: 0 0 12px; }
.tl { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.tl b { display: block; flex: 1; background: var(--ink-2); border-radius: 2px 2px 0 0; min-height: 1px; opacity: 0.7; }
.tl-lab { display: flex; justify-content: space-between; font: 9px var(--mono); color: var(--faint); margin-top: 6px; }
.pie { width: 120px; height: 120px; border-radius: 50%; margin: 8px auto; }
.pie-leg { list-style: none; padding: 0; margin: 8px 0 0; font: 11px var(--mono); }
.pie-leg li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: var(--ink-2); }
.pie-leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dash-list a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: 12px; }
.dash-list a:hover { text-decoration: none; background: transparent; color: var(--ink); }
.dash-wide { grid-column: 1 / -1; }

/* dash v2 */
.dash-kpis { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.dash-kpis .kpi .v { font-size: 22px; }
a.kpi { color: inherit; display: block; transition: border-color 0.15s, background 0.15s; }
a.kpi:hover { text-decoration: none; border-color: var(--line); background: var(--glass-2); }
.dash-span2 { grid-column: span 2; }
#dash-activity { width: 100%; display: block; cursor: crosshair; }
.dash-legend {
  display: flex; gap: 14px; align-items: center;
  font: 10px var(--mono); color: var(--muted); margin-top: 8px; letter-spacing: 0.06em;
}
.dash-legend span { display: flex; align-items: center; gap: 6px; }
.dash-legend .muted { margin-left: auto; letter-spacing: 0; }
.dash-legend i { width: 10px; height: 3px; display: inline-block; border-radius: 1px; }
.lg-ingest { background: rgba(244,244,245,0.35); height: 8px; width: 10px; }
.lg-jobs { background: #f4f4f5; }
.dash-bars { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow: auto; }
.dash-bar {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 6px;
  border-radius: var(--radius-s);
  color: var(--ink);
  font: 11px var(--mono);
}
.dash-bar.cred { grid-template-columns: 7.4rem 1fr auto; }
.dash-bar .ip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar:hover { background: var(--accent-dim); text-decoration: none; color: var(--ink); }
.dash-bar .track {
  height: 6px;
  background: var(--glass-2);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  overflow: hidden;
}
.dash-bar .fill {
  display: block;
  height: 100%;
  background: var(--ink-2);
  border-radius: 99px;
  min-width: 2px;
}
.dash-bar .n { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-tree { height: 220px; }
.dash-tree svg { display: block; }
.dash-tree a { cursor: pointer; }
.dash-tree a:hover rect { stroke: rgba(255,255,255,0.35); }
.dash-donut { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center; }
.dash-donut svg { display: block; }
.dash-leg { list-style: none; padding: 0; margin: 0; font: 11px var(--mono); }
.dash-leg li { margin: 0; }
.dash-leg-a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 3px 4px; border-radius: var(--radius-s); color: var(--ink-2);
}
.dash-leg-a:hover { background: var(--accent-dim); text-decoration: none; color: var(--ink); }
.dash-leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; flex: none; }
.dash-leg-a span:first-of-type { display: flex; align-items: center; }
.dash-leg .n { color: var(--faint); }
.dash-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  background: var(--glass);
  border-radius: 99px;
  padding: 4px 10px;
  font: 11px var(--mono);
  color: var(--ink-2);
}
.dash-chip b { color: var(--faint); font-weight: 500; }
.dash-chip:hover { background: var(--accent); color: #000; text-decoration: none; border-color: var(--accent); }
.dash-chip:hover b { color: #000; }
.dash-ticker { max-height: 280px; overflow: auto; }
.dash-ticker a {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); font-size: 12px;
}
.dash-ticker a:hover { text-decoration: none; color: var(--ink); background: transparent; }
.dash-ticker a.in { animation: dash-in 0.25s ease; }
@keyframes dash-in { from { opacity: 0; } to { opacity: 1; } }
#dash-tip {
  position: fixed; z-index: 40; pointer-events: none;
  background: rgba(12, 12, 14, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 6px 8px;
  font: 11px/1.4 var(--mono);
  color: var(--ink);
  backdrop-filter: var(--blur);
  max-width: 240px;
}
#dash-tip b { font-weight: 500; }
@media (max-width: 1100px) {
  .dash-kpis { grid-template-columns: repeat(4, 1fr); }
  .dash-span2 { grid-column: span 1; }
  .dash-donut { grid-template-columns: 1fr; justify-items: center; }
}
@media (max-width: 900px) {
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-span2, .dash-wide { grid-column: 1 / -1; }
}

/* map hover tooltip */
.hov-pop .maplibregl-popup-content { padding: 3px 9px !important; border-radius: 6px !important; }
.hov-pop .maplibregl-popup-tip { display: none; }
.hov-tip { font: 10px var(--mono); color: #c9c9ce; letter-spacing: 0.04em; }

/* host access links + live toggle */
.access { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.acclink { border: 1px solid var(--line); border-radius: 99px; padding: 5px 14px; font-size: 12px; color: var(--ink-2); transition: background .15s, color .15s; }
.acclink:hover { background: var(--accent); color: #000; text-decoration: none; border-color: var(--accent); }
.live-lab { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
a.portchip { text-decoration: none; }
a.portchip:hover { background: #fff; color: #000; border-color: #fff; }
.acclink.dim { opacity: 0.55; cursor: default; }

/* rail filter grid — readable placeholders */
.rail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.rail-grid input { width: 100%; min-width: 0; }
.rail-grid .live-lab { justify-content: center; align-self: center; }
.rail-actions { display: flex; gap: 6px; }
.rail-actions button { flex: 1; }

/* styled live checkbox */
.live-lab { user-select: none; }
.live-lab input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; margin: 0;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--glass);
  display: inline-grid; place-content: center;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.live-lab:hover input[type="checkbox"] { border-color: rgba(255,255,255,0.3); }
.live-lab input[type="checkbox"]:checked { background: #fff; border-color: #fff; }
.live-lab input[type="checkbox"]:checked::before {
  content: ""; width: 8px; height: 8px; background: #000;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* clickable ports in host table */
.portlink { color: var(--ink); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.35); }
.portlink:hover { border-bottom: 1px solid #fff; }

/* host flyout drawer on map */
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 340px; z-index: 30;
  background: rgba(10, 10, 13, 0.93); backdrop-filter: var(--blur);
  border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(0,0,0,0.55);
  transform: translateX(102%); transition: transform 0.22s ease;
  padding: 16px 18px; overflow-y: auto; overflow-x: hidden; display: none;
}
.drawer.open { transform: translateX(0); display: block; }
.dr-load { color: var(--muted); font: 11px var(--mono); }
.dr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dr-ip { font: 700 16px var(--mono); color: var(--ink); text-decoration: none; }
.dr-ip:hover { text-decoration: underline; }
.dr-x { background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--muted);
  width: 24px; height: 24px; line-height: 1; cursor: pointer; font-size: 14px; }
.dr-x:hover { border-color: var(--accent); color: var(--ink); }
.dr-geo { color: #c9c9ce; margin-top: 8px; }
.dr-asn { color: var(--muted); font: 11px var(--mono); margin-top: 3px; word-break: break-word; }
.dr-meta { display: flex; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--muted); align-items: center; }
.dr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.dtag { border: 1px solid rgba(125, 211, 252, 0.35); border-radius: 99px; padding: 1px 9px;
  color: #7dd3fc; font: 500 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  max-width: 100%; overflow-wrap: anywhere; }
.dtag.kind { border-color: rgba(167, 139, 250, 0.4); color: #a78bfa; }
.dr-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dlink { display: block; padding: 4px 2px; font: 500 11px var(--mono); line-height: 1.35;
  color: var(--ink-2); text-decoration: none; transition: color .15s; word-break: break-all; }
.dlink:hover { color: #fff; text-decoration: underline; }
.dr-ports { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.dr-web { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dweb { border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: 8px 10px; }
.dweb a { color: var(--ink); font-size: 12px; text-decoration: none; }
.dweb a:hover { text-decoration: underline; }
.dweb-t { color: var(--ink-2); font-size: 12px; margin-top: 3px; }
.dweb-s { color: var(--muted); font: 10px var(--mono); margin-top: 3px; }
.dr-ban { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dban-h { color: var(--muted); font: 10px var(--mono); letter-spacing: 0.06em; margin-bottom: 3px; }
.banner { background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 8px 10px; font-size: 11px; color: var(--ink-2); white-space: pre-wrap; word-break: break-all; margin: 0; }
.dr-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.dr-go { display: block; text-align: center; border: 1px solid var(--line); border-radius: 99px;
  padding: 7px 12px; font: 500 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; }
.dr-go:hover { background: #fff; color: #000; border-color: #fff; }
.status.empty { color: var(--err); }

/* drawer: above map controls + rich metadata bits */
.drawer { z-index: 1000; }
.dr-creds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.dcred { border: 1px solid rgba(110, 231, 183, 0.35); border-radius: 6px; padding: 2px 8px;
  color: #6ee7b7; font: 500 10px var(--mono); cursor: default; }
.dr-rels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.drel { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px;
  color: var(--ink-2); font-size: 11px; cursor: pointer; transition: border-color .15s, color .15s; }
.drel:hover { border-color: #fff; color: #fff; }
.dr-seen { color: var(--faint); font: 10px var(--mono); margin-top: 12px; letter-spacing: 0.04em; }
.dweb-tech { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.dweb-tech .dtag { border-color: rgba(255,255,255,0.14); color: var(--muted); }

/* layers control: injected into maplibre's top-right group; tray drops down vertically from the button */
.layers-ctrl { position: relative; }
.layers-ctrl #stylebtn { width: 29px; height: 29px; display: grid; place-content: center;
  background: none; border: 0; color: var(--ink-2); cursor: pointer; }
.layers-ctrl #stylebtn:hover { color: #fff; }
#styleflyout { position: absolute; top: 32px; right: 0; display: flex; flex-direction: column; align-items: flex-end;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; }
#styleflyout.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
#styleflyout #maptactical {
  position: static; z-index: auto; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px;
  background: rgba(12,12,14,0.85); backdrop-filter: var(--blur);
  border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.tac-chip { width: 29px; height: 29px; border: 0; background: transparent; color: var(--muted);
  border-radius: 50%; display: grid; place-content: center; cursor: pointer; transition: all .15s; }
.tac-chip:hover { color: var(--ink); background: rgba(255,255,255,0.08); }
.tac-chip.on { color: var(--accent); background: var(--accent-dim); }

/* control column slides left when the host drawer is open */
.maplibregl-ctrl-top-right { transition: right .2s ease; }
body.drawer-open .maplibregl-ctrl-top-right { right: 342px; }

/* map key: filters stacked above the legend, bottom-right */
#mapkey { position: absolute; bottom: 24px; right: 12px; z-index: 500;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#mapkey.shifted { right: 354px; }
#mapkey #mapmodes, #mapkey #maplegend { position: static; z-index: auto; }

/* drawer: creds table + findings + nodes */
.dr-lbl { color: var(--faint); font: 9px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 5px; }
.dctable { width: 100%; border-collapse: collapse; font-size: 11px; }
.dctable th { text-align: left; color: var(--faint); font: 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px 4px 0; border-bottom: 1px solid var(--line-soft); }
.dctable td { padding: 4px 6px 4px 0; border-bottom: 1px solid rgba(255,255,255,0.03); vertical-align: top; word-break: break-all; }
.dctable td.muted { color: var(--muted); font-size: 10px; }
.dr-fnd { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.dfnd { display: flex; align-items: baseline; gap: 6px; }
.sevchip { font: 700 8px var(--mono); letter-spacing: 0.06em; border-radius: 4px; padding: 1px 5px; min-width: 30px; text-align: center; }
.sevchip.critical { background: #f87171; color: #000; }
.sevchip.high { background: #fca5a5; color: #000; }
.sevchip.medium { background: #e4e4e7; color: #000; }
.sevchip.low { background: #8b8b93; color: #fff; }
.sevchip.info { background: rgba(255,255,255,0.08); color: var(--muted); }
.dfnd-k { color: var(--ink-2); font: 10px var(--mono); white-space: nowrap; }
.dfnd-v { color: var(--muted); font-size: 11px; word-break: break-all; }
.dr-nodes { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.dnode { border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--muted); font: 10px var(--mono); }
.dnode.live { border-color: rgba(110, 231, 183, 0.4); color: #6ee7b7; }
.tac-hint { white-space: nowrap; }

/* crt refresh sweep on filter apply */
.mapwrap { position: relative; }
#crtfx { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
#crtfx::before { content: ""; position: absolute; left: 0; right: 0; top: -12%; height: 12%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.045) 70%, rgba(255,255,255,0.09) 96%, rgba(255,255,255,0.22) 100%); }
#crtfx::after { content: ""; position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); }
#crtfx.on::before { animation: crt-sweep 0.42s linear 1; }
#crtfx.on::after { animation: crt-veil 0.42s linear 1; }
@keyframes crt-sweep { 0% { top: -12%; } 100% { top: 104%; } }
@keyframes crt-veil { 0% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* rail cred-match line */
.rail-match { display: block; margin-top: 2px; color: var(--muted); font: 10px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.rail-match mark { background: none; color: var(--accent); font-weight: 700; }
.tbl-match { color: var(--accent); font-size: 10px; margin-top: 1px; }

/* coords readout belongs to the map pane, not the rail */
#mapcoords { left: 312px; }

/* drawer v2: refined glass, dense property panel */
.drawer { background: rgba(10,10,13,0.88); backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-left: 1px solid rgba(255,255,255,0.08); box-shadow: -24px 0 60px rgba(0,0,0,0.5);
  padding: 14px 14px 20px; }
.dr-title { display: flex; align-items: center; gap: 10px; }
.dr-kv { margin: 10px 0 2px; border-top: 1px solid rgba(255,255,255,0.06); }
.dkv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04); }
.dkv span { color: var(--faint); font: 9px var(--mono); text-transform: uppercase;
  letter-spacing: 0.1em; padding-top: 2px; white-space: nowrap; flex: none; }
.dkv b { font: 500 11px var(--mono); color: var(--ink-2); text-align: right; word-break: break-all; }
.dr-sec { margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.dr-portline { display: flex; flex-wrap: wrap; gap: 4px 9px; font: 11px var(--mono); }
.dp { color: var(--ink-2); }
.dp i { color: var(--faint); font-style: normal; }

.dweb { border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; background: rgba(255,255,255,0.02);
  padding: 6px 8px; margin-top: 6px; }
.dweb-t { color: var(--ink); font-size: 11px; margin-top: 3px; }
.dweb-s { color: var(--muted); font: 10px var(--mono); margin-top: 2px; }
.dctable td { padding: 3px 6px 3px 0; }
.dr-foot { margin-top: 14px; }
.dr-go { display: block; text-align: center; padding: 8px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; color: var(--ink-2); font: 11px var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; transition: all .15s; }
.dr-go:hover { border-color: rgba(255,255,255,0.35); color: #fff; background: rgba(255,255,255,0.04); }

/* live checkbox: native flat control */
.live-lab { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
  color: var(--muted); font: 11px var(--mono); cursor: pointer; user-select: none; }
.live-lab:hover { border-color: rgba(255,255,255,0.18); }
.live-lab input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; background: transparent;
  display: grid; place-content: center; cursor: pointer; margin: 0; flex: none;
  transition: border-color .12s, background .12s; }
.live-lab input[type="checkbox"]::before { content: ""; width: 8px; height: 8px; transform: scale(0);
  transition: transform .12s ease; background: var(--accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.live-lab input[type="checkbox"]:checked { border-color: var(--accent); background: rgba(255,255,255,0.06); }
.live-lab input[type="checkbox"]:checked::before { transform: scale(1); }

/* layers tray: 29px column aligned with the control stack */
#styleflyout #maptactical { padding: 0; border-radius: 6px; }
.tac-chip { width: 29px; height: 29px; border-radius: 0; }
.tac-chip:first-child { border-radius: 5px 5px 0 0; }
.tac-chip:last-child { border-radius: 0 0 5px 5px; }
.tac-chip:only-child { border-radius: 5px; }

.dkv b { word-break: normal; overflow-wrap: anywhere; }

/* refined glass pass — popup, rail chrome, buttons */
.maplibregl-popup-content { background: rgba(10,10,13,0.88) !important;
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.08) !important; }
.rail-filters input, #railtxt { backdrop-filter: blur(8px); transition: border-color .15s, background .15s; }
.rail-filters input:hover, #railtxt:hover { border-color: rgba(255,255,255,0.15); }
.rail-filters input:focus, #railtxt:focus { border-color: var(--accent); background: rgba(255,255,255,0.05); }
.rail-actions { display: flex; gap: 8px; }
.apply-btn, .clear-btn { flex: 1; padding: 8px; border: 1px solid rgba(255,255,255,0.09);
  border-radius: 6px; background: rgba(255,255,255,0.03); backdrop-filter: blur(8px);
  color: var(--ink-2); font: 11px var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer; transition: all .15s; }
.apply-btn:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--ink); }
.clear-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--ink); }
.railitem:hover { background: rgba(255,255,255,0.04); }
.railitem.on { background: var(--accent-dim); }
.pop-go { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
.pop-meta { border-top-color: rgba(255,255,255,0.05); }

/* fix: maplibre ctrl-group default button styles fighting the icon chips */
.layers-ctrl #styleflyout .tac-chip { border: 0 !important; box-shadow: none !important; outline: none !important; background: none !important; }
.layers-ctrl #styleflyout .tac-chip:hover { background: rgba(255,255,255,0.08) !important; }
.layers-ctrl #styleflyout .tac-chip.on { background: var(--accent-dim) !important; }
.layers-ctrl #styleflyout .tac-chip + .tac-chip { border-top: 1px solid rgba(255,255,255,0.06) !important; }
.maplibregl-ctrl-group button span { filter: none; }

/* fix: coords no longer sits on the scale control */
#mapcoords { bottom: 46px; }

/* rail: breathing room */
.railitem { padding: 11px 14px; }

/* facet dropdowns */
select.facet-sel { -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.03);
  color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 7px 24px 7px 9px; font: 11px var(--mono); width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23737380' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; }
select.facet-sel:hover { border-color: rgba(255,255,255,0.2); }
select.facet-sel:focus { outline: none; border-color: var(--accent); }
select.facet-sel option { background: #101013; color: var(--ink); }
#fcity { width: 100%; }

/* pills: flatter, calm */
.dtag { display: inline-block; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  border-radius: 3px; padding: 2px 7px; color: var(--ink-2); font: 500 9.5px var(--mono);
  letter-spacing: 0.06em; }
.dtag.kind { border-color: rgba(110,231,183,0.3); color: #6ee7b7; background: rgba(110,231,183,0.06); }

/* drawer close: aligned square */
.dr-x { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; display: grid;
  place-content: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px; color: var(--muted); font: 400 14px/1 var(--mono); cursor: pointer;
  transition: all .15s; }
.dr-x:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.drawer { position: absolute; }
.dr-head { padding-right: 32px; }

/* loading overlay */
#mapload { position: fixed; inset: 52px 0 0 0; z-index: 900; display: grid; place-content: center;
  background: rgba(5,5,7,0.88); backdrop-filter: blur(10px); transition: opacity .4s ease, visibility .4s; }
#mapload.done { opacity: 0; visibility: hidden; pointer-events: none; }
.ml-box { text-align: center; }
.ml-title { font: 600 13px var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.ml-steps { display: flex; flex-direction: column; gap: 9px; font: 11px var(--mono); color: var(--faint); }
.ml-step { opacity: 0.45; transition: opacity .3s, color .3s; }
.ml-step.ok { opacity: 1; color: var(--accent); }

.brand { display: inline-flex; align-items: center; gap: 8px; font: 700 13px var(--mono); letter-spacing: 0.18em; color: var(--ink); text-decoration: none; }
.brand .logo { flex: none; opacity: 0.9; }
.brand:hover { color: #fff; }
.brand:hover .logo { opacity: 1; }

/* maplibre nav/compass — kill the default white chrome */
.maplibregl-ctrl-group {
  background: rgba(12,12,14,0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.maplibregl-ctrl-group button {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.maplibregl-ctrl-group button:first-child { border-top: 0 !important; }
.maplibregl-ctrl-group button:hover { background: rgba(255,255,255,0.06) !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255,255,255,0.06) !important; }

.rail-grid .live-lab {
  width: auto; max-width: none; justify-content: flex-start; align-self: stretch;
  height: auto; min-height: 32px;
}
.live-lab input[type="checkbox"] {
  appearance: none !important; -webkit-appearance: none !important;
  width: 13px; height: 13px; margin: 0; flex: none;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 3px;
  background: transparent; display: grid; place-content: center;
}
.live-lab input[type="checkbox"]::before {
  content: ""; width: 7px; height: 7px; transform: scale(0);
  background: #050506;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transition: transform .12s ease;
}
.live-lab input[type="checkbox"]:checked {
  background: #f4f4f5; border-color: #f4f4f5;
}
.live-lab input[type="checkbox"]:checked::before { transform: scale(1); }

#mapload {
  position: fixed; inset: 52px 0 0 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,5,7,0.92); backdrop-filter: blur(12px);
  transition: opacity .45s ease, visibility .45s;
}
#mapload.done { opacity: 0; visibility: hidden; pointer-events: none; }
.ml-box { display: flex; flex-direction: column; align-items: center; }
.ml-title {
  font: 600 13px var(--mono); letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 18px; padding-left: 0.35em;
}
.ml-steps { display: flex; flex-direction: column; gap: 8px; }
.ml-step {
  font: 11px var(--mono); color: var(--faint); letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; opacity: 0.35; transition: opacity .25s, color .25s;
}
.ml-step.ok { opacity: 1; color: #f4f4f5; }

/* combobox */
.combo { position: relative; min-width: 0; }
.combo-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.combo-chip { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06);
  color: var(--ink-2); border-radius: 3px; padding: 1px 5px; font: 10px var(--mono); cursor: pointer; }
.combo-chip:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.combo-inp { width: 100%; background: rgba(255,255,255,0.03); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 7px 9px; font: 11px var(--mono); }
.combo-inp:focus { outline: none; border-color: rgba(255,255,255,0.28); }
.combo-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  max-height: 180px; overflow-y: auto; margin-top: 4px;
  background: rgba(12,12,14,0.96); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.combo.open .combo-panel { display: block; }
.combo-opt { display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--ink-2); padding: 6px 10px; font: 11px var(--mono); cursor: pointer; }
.combo-opt:hover { background: rgba(255,255,255,0.06); color: #fff; }
.combo-opt.on { color: #fff; background: rgba(255,255,255,0.08); }
.combo-empty { padding: 8px 10px; color: var(--faint); font: 11px var(--mono); }
.combo-panel::-webkit-scrollbar { width: 8px; }
.combo-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.pop-rels { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.pop-rel-h { font: 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.pop-rel { display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--ink-2); padding: 3px 0; font: 11px var(--sans, inherit); cursor: pointer; }
.pop-rel:hover { color: #fff; }
.pop-rel-note { color: var(--faint); font: 9px var(--mono); margin-top: 4px; }

.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); opacity: 0.85; }
.maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon { opacity: 1; }
.layers-ctrl #stylebtn { color: #f4f4f5; }

.maplibregl-ctrl-group.layers-ctrl { overflow: visible !important; }
.layers-ctrl #stylebtn { color: #f4f4f5; cursor: pointer; }
#styleflyout { z-index: 20; }

/* DOM-anchored host card (pixel-locked popup) */
.hostcard { position: absolute; z-index: 60; pointer-events: auto;
  background: rgba(10,10,13,0.88); border: 1px solid var(--line); border-radius: 10px;
  backdrop-filter: var(--blur); box-shadow: 0 14px 44px rgba(0,0,0,0.55);
  transform: translate(-50%, calc(-100% - 14px)); max-width: 340px; }
.hostcard .hc-x { position: absolute; top: 6px; right: 8px; border: 0; background: none;
  color: var(--muted); font: 14px/1 inherit; cursor: pointer; z-index: 2; }
.hostcard .hc-x:hover { color: #fff; }
.hostcard .hc-arrow { position: absolute; left: 50%; bottom: -9px; width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 9px solid rgba(10,10,13,0.88); }
.host-ip-url { color: inherit; text-decoration: none; }
.host-ip-url:hover { text-decoration: underline; }
h1 .extlnk, h1.mono a.extlnk { color: inherit; text-decoration: none; }
h1 .extlnk:hover { text-decoration: underline; }

/* combo v2 — pills inside the input box */
.combo-box { display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 4px 6px; cursor: text; }
.combo-box:focus-within { border-color: rgba(255,255,255,0.28); }
.combo-box .combo-chips { display: contents; }
.combo-box .combo-inp { flex: 1; min-width: 56px; width: auto; background: none; border: 0;
  border-radius: 0; padding: 3px 2px; }
.combo-box .combo-inp:focus { outline: none; border-color: transparent; }

/* kill global button:hover bleed on ghost buttons */
button.drel:hover, button.pop-rel:hover, button.dr-x:hover { background: none; border-color: rgba(255,255,255,0.35); }

/* arc relation card + network browse panel */
.hov-sub { font-size: 9px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }
.arccard { max-width: 360px; padding: 12px 14px; }
.arc-h { font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.arc-end { font: 11px var(--mono); color: var(--ink-2); padding: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-end b { color: var(--ink); font-weight: 500; }
.arc-dir { color: var(--muted); font-size: 10px; padding-left: 4px; line-height: 1; }
.arc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.arc-btn { font: 10px var(--mono); color: var(--ink-2); background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.arc-btn:hover { background: var(--glass-2); color: var(--ink); }
.arc-btn.on { border-color: var(--info); color: var(--info); }
.arc-btn.net { border-style: dashed; }
#netpanel[hidden] { display: none; }
#netpanel {
  position: absolute; top: 52px; left: 312px; z-index: 55;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,10,13,0.97); border: 1px solid var(--line); border-radius: 10px;
  backdrop-filter: var(--blur); padding: 6px 10px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
#netpanel .np-body { min-width: 170px; text-align: center; cursor: pointer; padding: 0 6px; border-radius: 6px; }
#netpanel .np-body:hover .np-title { color: var(--info); }
#netpanel .np-title { font: 11px var(--mono); color: var(--ink); }
#netpanel .np-sub { font: 9px var(--mono); color: var(--muted); margin-top: 2px; }
#netpanel .np-nav, #netpanel .np-x {
  border: 1px solid var(--line); background: rgba(255,255,255,0.05); color: var(--ink-2);
  border-radius: 6px; width: 22px; height: 22px; cursor: pointer; font: 12px var(--mono); flex: none;
  display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 0 1px;
}
#netpanel .np-nav:hover, #netpanel .np-x:hover { background: var(--glass-2); color: var(--ink); }

/* net browse v2 */
#netbtn, #spinbtn {
  position: absolute; top: 10px; z-index: 56;
  display: flex; align-items: center; gap: 6px;
  font: 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); cursor: pointer;
  background: rgba(10,10,13,0.97); border: 1px solid var(--line); border-radius: 10px;
  backdrop-filter: var(--blur); padding: 6px 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
#netbtn { left: 398px; }
#spinbtn { display: none !important; }
#netbtn:hover, #spinbtn:hover { background: var(--glass-2); color: var(--ink); }
#netbtn.on, #spinbtn.paused { border-color: var(--info); color: var(--info); }
.np-sep { width: 1px; height: 16px; background: var(--line); flex: none; }
.np-search {
  background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); font: 10px var(--mono); padding: 4px 8px; width: 110px; outline: none;
}
.np-search:focus { border-color: var(--info); }
.np-results {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px; z-index: 60;
  background: rgba(10,10,13,0.96); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px; box-shadow: 0 14px 44px rgba(0,0,0,0.55);
  max-height: min(480px, calc(100vh - 140px)); overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.np-results::-webkit-scrollbar { width: 6px; }
.np-results::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.np-results::-webkit-scrollbar-track { background: transparent; }
.np-hit {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--ink-2); font: 10px var(--mono); padding: 7px 10px; border-radius: 6px; cursor: pointer;
  line-height: 1.5;
}
.np-hit + .np-hit { margin-top: 2px; }
.np-hit:hover { background: var(--glass-2); color: var(--ink); }
.np-hit-sub { font-size: 9px; color: var(--muted); margin-top: 3px; letter-spacing: 0.04em; }
.np-hit-none { font: 10px var(--mono); color: var(--muted); padding: 5px 8px; }
.np-hot { color: #f472b6; }

/* cinema mode — neutral planet, shader atmosphere rim, starfield, vignette */
#cinespace { position: absolute; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
#cinespace .star { position: absolute; border-radius: 50%; background: #dfe7f2; }
#cinespace .star.b { background: #9fdcff; }
#cinespace .star.tw { animation: star-tw 4.5s ease-in-out infinite alternate; }
@keyframes star-tw { from { opacity: 0.22; } to { opacity: 1; } }
.mapwrap.cinema::after {
  content: ""; position: absolute; inset: 0; z-index: 52; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 55%, rgba(0,0,0,0.42) 100%);
}

/* rail flyout */
#railtoggle {
  position: absolute; top: 50%; left: 300px; transform: translateY(-50%); z-index: 57;
  width: 16px; height: 72px; padding: 0;
  background: rgba(10,10,13,0.88); border: 1px solid var(--line); border-left: 0;
  border-radius: 0 8px 8px 0; color: var(--muted); cursor: pointer; font: 11px var(--mono);
}
#railtoggle:hover { color: var(--ink); background: var(--glass-2); }
.mapwrap.rail-hidden { grid-template-columns: 0 1fr; }
.mapwrap.rail-hidden .maprail { display: none; }
.mapwrap.rail-hidden #railtoggle { left: 0; }
.mapwrap.rail-hidden #globebtn { left: 24px; }
.mapwrap.rail-hidden #netbtn { left: 110px; }
.mapwrap.rail-hidden #netpanel { left: 24px; }
.mapwrap.rail-hidden #mapcoords { left: 24px; }

/* network panel tabs */
.np-tabs { display: flex; gap: 2px; background: rgba(255,255,255,0.05); border-radius: 6px; padding: 2px; flex: none; }
.np-tab {
  background: none; border: 0; color: var(--muted); font: 9px var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 4px; cursor: pointer;
}
.np-tab:hover { color: var(--ink); }
.np-tab.on { background: rgba(125,211,252,0.15); color: var(--info); }
.cc-host { margin-top: 8px; }
@keyframes pinpulse {
  0%, 100% { box-shadow: 0 0 6px rgba(125,211,252,0.7); }
  50% { box-shadow: 0 0 16px rgba(125,211,252,1); }
}

/* globe cinema */
#globebtn {
  position: absolute; top: 10px; left: 312px; z-index: 56;
  display: flex; align-items: center; gap: 6px;
  font: 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); cursor: pointer;
  background: rgba(10,10,13,0.88); border: 1px solid var(--line); border-radius: 10px;
  backdrop-filter: var(--blur); padding: 6px 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
#globebtn:hover { background: var(--glass-2); color: var(--ink); }
#globebtn.on { border-color: var(--info); color: var(--info); }
.cinepin { width: 2px; height: 30px; cursor: pointer; }
.cinepin .cp-stem {
  position: absolute; bottom: 0; left: 0; width: 2px; height: 26px;
  background: linear-gradient(to top, #7dd3fc, rgba(125,211,252,0.05));
}
.cinepin .cp-dot {
  position: absolute; bottom: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: #7dd3fc; box-shadow: 0 0 8px rgba(125,211,252,0.9);
}
.cinepin.on .cp-dot { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,1); }
.cinepin.on .cp-stem { background: linear-gradient(to top, #fff, rgba(255,255,255,0.05)); }
.cinemacard { max-width: 300px; padding: 10px 14px; transition: opacity 0.3s ease; transform: none; }
.cinemacard .cc-ip { font: 700 14px var(--mono); color: var(--ink); }
.cinemacard .cc-sub { font: 10px var(--mono); color: var(--muted); margin-top: 3px; }
.cinemacard .cc-meta { font: 11px var(--mono); color: var(--ink-2); margin-top: 8px; }
.cinemacard .cc-meta b { color: var(--info); font-weight: 500; }
.cinemacard .cc-count { font: 9px var(--mono); color: var(--muted); margin-top: 6px; letter-spacing: 0.1em; }

/* dash v3 — scan gauge, errors, findings feed, live refresh */
@keyframes kpi-flash { 0% { color: var(--info); } 100% { color: inherit; } }
.kpi-flash { animation: kpi-flash 0.9s ease; }
.dash-gauge-wrap { display: flex; flex-direction: column; gap: 10px; }
.dash-gauge {
  display: flex; height: 12px; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.dash-gauge .seg { display: block; height: 100%; transition: width 0.4s ease; }
.dash-errors { display: flex; flex-direction: column; max-height: 280px; overflow: auto; }
.dash-err {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 5px 6px; border-bottom: 1px solid var(--line-soft); border-radius: 4px;
  font: 11px var(--mono); color: var(--ink-2);
}
.dash-err:hover { background: var(--accent-dim); text-decoration: none; color: var(--ink); }
.dash-err .msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-err .n { color: var(--err); font-variant-numeric: tabular-nums; flex: none; }
.dash-findings { display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.dash-finding {
  display: grid; grid-template-columns: 4.6rem 9.5rem 1fr 2.4rem; gap: 10px; align-items: baseline;
  padding: 5px 6px; border-bottom: 1px solid var(--line-soft); border-radius: 4px;
  font: 11px var(--mono); color: var(--ink-2);
}
.dash-finding:hover { background: var(--accent-dim); text-decoration: none; color: var(--ink); }
.dash-finding .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.dash-finding .ago { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .dash-finding { grid-template-columns: 4rem 1fr 2rem; }
  .dash-finding .what { display: none; }
}
.pmadump { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.pmastats { font: 12px var(--mono); color: var(--ink); margin: 4px 0 6px; }

/* ── auth ───────────────────────────────────────────────── */
.auth-wrap { display: flex; justify-content: center; padding: 8vh 20px 40px; }
.auth-card {
  width: 100%; max-width: 660px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  padding: 22px 24px;
}
.auth-card h1 { margin: 0 0 6px; font: 700 14px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.auth-card .sub { color: var(--muted); font-size: 12px; margin: 0 0 16px; }
.auth-card textarea, .auth-card input[type="text"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
  font: 12px/1.5 var(--mono);
  padding: 10px 12px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.auth-card textarea:focus, .auth-card input[type="text"]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}
.auth-card textarea::placeholder, .auth-card input::placeholder { color: var(--faint); }
.auth-card button { margin-top: 12px; padding: 10px 18px; }
.auth-card .err { color: var(--err); font-size: 12px; margin: 0 0 10px; }
.auth-challenge {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  padding: 12px;
  overflow-x: auto;
  font: 11px/1.45 var(--mono);
  color: var(--ink-2);
  white-space: pre;
  margin: 12px 0;
}
.auth-table { margin: 14px 0 22px; }
.auth-table td form { margin: 0; }
.auth-table button { margin-top: 0; padding: 5px 10px; }
.auth-fp { font: 10px var(--mono); color: var(--muted); word-break: break-all; }
.auth-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.auth-check input { accent-color: #fff; }
.badge-admin {
  color: var(--open);
  border: 1px solid rgba(110, 231, 183, 0.35);
  border-radius: 99px;
  padding: 1px 8px;
  font: 500 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
}
.auth-links { margin-top: 18px; font: 11px var(--mono); display: flex; gap: 16px; }
.auth-links a { color: var(--muted); }
.auth-links a:hover { color: var(--ink); }
.auth-card h2 {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); font-weight: 500; margin: 22px 0 8px; font-family: var(--mono);
}

/* ── header identity ────────────────────────────────────── */
.whoami { display: flex; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--muted); white-space: nowrap; }
.whoami[hidden] { display: none; }
.whoami img { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; }
.whoami .uname { color: var(--ink-2); }
.whoami .uname:hover { color: var(--ink); }
.whoami-out { color: var(--faint); border: 1px solid var(--line-soft); border-radius: 99px; padding: 2px 9px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.whoami-out:hover { color: var(--err); border-color: rgba(248, 113, 113, 0.4); text-decoration: none; }
.auth-avatar-lg { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; }
.auth-idrow { display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; }
.auth-file input { color: var(--muted); font: 11px var(--mono); }

/* ── auth challenge copy ────────────────────────────────── */
.auth-challenge-wrap { position: relative; }
.auth-challenge-wrap .auth-challenge { margin-top: 0; }
.auth-copy {
  position: absolute; top: 6px; right: 6px;
  margin-top: 0; padding: 3px 10px;
  font-size: 9px;
  background: var(--bg-2);
}
.auth-copy:hover { border-color: rgba(255, 255, 255, 0.3); }
textarea.auth-challenge {
  width: 100%;
  resize: vertical;
  cursor: text;
}

/* ── auth full pages (profile, admin, keys) ─────────────── */
.auth-page { max-width: 1400px; }
.auth-page-title { margin: 0 0 4px; font: 700 14px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.auth-page > .sub { margin: 0 0 18px; }
.auth-page .auth-card { max-width: none; }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.auth-grid-wide { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .auth-grid, .auth-grid-wide { grid-template-columns: 1fr; } }
.auth-panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  padding: 16px 18px;
}
.auth-panel h2:first-child { margin-top: 0; }
.auth-panel textarea, .auth-panel input[type="text"] {
  width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: var(--radius-s); color: var(--ink); font: 12px/1.5 var(--mono);
  padding: 10px 12px; margin-bottom: 8px;
}
.auth-panel textarea:focus, .auth-panel input[type="text"]:focus {
  outline: none; border-color: rgba(255,255,255,0.28);
  background: var(--glass-2); box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.auth-panel button { margin-top: 4px; }
.auth-panel .auth-table button { margin-top: 0; }

/* ── header identity dropdown ────────────────────────────── */
.whoami { position: relative; }
.whoami-btn {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 2px 4px;
  background: transparent; border: 0; border-radius: 99px;
  color: inherit; font: 11px var(--mono); letter-spacing: 0; text-transform: none;
  cursor: pointer;
}
.whoami-btn:hover { background: var(--glass-2); color: inherit; border-color: transparent; }
.whoami-drop {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 180px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  padding: 6px;
  font: 11px var(--mono);
}
.whoami:hover .whoami-drop, .whoami.open .whoami-drop { display: block; }
.whoami-drop-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
  color: var(--ink);
}
.whoami-drop-head img { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; }
.whoami-drop a {
  display: block; padding: 6px 8px; border-radius: 4px;
  color: var(--ink-2); text-decoration: none;
}
.whoami-drop a:hover { background: var(--glass-2); color: var(--ink); }
.whoami-drop a.whoami-drop-out:hover { color: var(--err); background: rgba(248, 113, 113, 0.08); }

/* ── api keys page ─────────────────────────────────── */
.keys-section { margin-top: 8px; }
.keys-soon { opacity: 0.45; pointer-events: none; }
.badge-soon {
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  padding: 1px 8px;
  font: 500 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
}
.badge-live {
  color: var(--open);
  border: 1px solid rgba(110, 231, 183, 0.35);
  border-radius: 99px;
  padding: 1px 8px;
  font: 500 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
}

/* ── modal (profile / api keys) ─────────────────────────── */
#modal-root {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 20px 40px;
}
#modal-root[hidden] { display: none; }
.modal-box {
  position: relative;
  width: 100%; max-width: 780px; max-height: 82vh; overflow-y: auto;
  background: #0a0a0c;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
  animation: rise 0.25s ease both;
}
.modal-x {
  position: absolute; top: 10px; right: 12px;
  margin: 0; padding: 2px 9px;
  font-size: 14px; line-height: 1;
  border: 1px solid transparent; background: none; color: var(--muted);
}
.modal-x:hover { color: var(--err); border-color: var(--line-soft); background: none; }
#modal-body .auth-grid, #modal-body .auth-grid-wide { grid-template-columns: 1fr; }
#modal-body .auth-page-title { margin-bottom: 10px; }

/* ── dropdown hover bridge (no click needed) ────────────── */
.whoami-drop::before {
  content: "";
  position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
.whoami { padding-bottom: 4px; margin-bottom: -4px; }

/* ── modal animation ────────────────────────────────────── */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#modal-root { animation: backdropIn 0.18s ease both; }
.modal-box { animation: modalIn 0.22s cubic-bezier(0.2, 0.9, 0.25, 1) both; }

/* ── api keys modal ─────────────────────────────────────── */
#modal-body input[type="text"], #modal-body textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
  font: 12px/1.5 var(--mono);
  padding: 10px 12px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
#modal-body input[type="text"]:focus, #modal-body textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}
#modal-body input::placeholder, #modal-body textarea::placeholder { color: var(--faint); }
#modal-body input:disabled, #modal-body button:disabled { opacity: 0.4; cursor: not-allowed; }
#modal-body code { background: var(--accent-dim); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.keys-mint-form { display: flex; gap: 8px; margin: 10px 0 14px; }
.keys-mint-form input { flex: 1; }
.keys-mint-form button { margin-top: 0; white-space: nowrap; }
.badge-live {
  color: var(--open);
  border: 1px solid rgba(110, 231, 183, 0.35);
  border-radius: 99px;
  padding: 1px 8px;
  font: 500 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}
.badge-soon {
  color: var(--low);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  padding: 1px 8px;
  font: 500 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── dropdown above dashboard overlays ──────────────────── */
.top { z-index: 100; }
.whoami-drop { z-index: 101; }

/* ── challenge box: clear the copy button ───────────────── */
.auth-challenge-wrap .auth-challenge { padding-right: 72px; }
.auth-challenge-wrap textarea.auth-challenge { resize: none; }

/* ── copy button beside the box, vertically centered ────── */
.auth-challenge-wrap { display: flex; align-items: stretch; gap: 8px; }
.auth-challenge-wrap .auth-challenge { flex: 1; min-width: 0; padding-right: 12px; }
.auth-challenge-wrap textarea.auth-challenge { white-space: pre-wrap; word-break: break-all; }
.auth-copy { position: static; margin: 0; align-self: center; flex-shrink: 0; }