:root {
  --bg: #0a0f0a;
  --bg-panel: #0d130d;
  --bg-raise: #121a12;
  --line: #1f2f1f;
  --line-bright: #2e452e;
  --grid: #16241680;
  --text: #b8c8b0;
  --text-dim: #5f755c;
  --green: #6abf5e;
  --green-bright: #8fe07f;
  --amber: #d9a441;
  --red: #d95448;
  --cyan: #56b8b0;
  --sea: #0b120e;
  --land: #1b2b1c;
  --land-hover: #2a4228;
  --land-active: #3a5c33;
  --border-country: #2c452a;
  --mono: "Cascadia Mono", "Consolas", "JetBrains Mono", "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  overflow: hidden;
}

/* ---------- boot screen ---------- */
#boot-screen {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s;
}
#boot-screen.done { opacity: 0; pointer-events: none; }
.boot-logo { color: var(--green); font-size: 9px; line-height: 1.1; text-shadow: 0 0 8px #6abf5e55; }
.boot-lines { margin-top: 18px; color: var(--text-dim); font-size: 12px; min-height: 120px; }
.boot-lines div { margin: 2px 0; }
.boot-lines .ok { color: var(--green); }

/* ---------- top bar ---------- */
#topbar {
  height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: linear-gradient(180deg, #101810, #0b110b);
  border-bottom: 1px solid var(--line-bright);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-mark { color: var(--green); animation: pulse 2s infinite; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: 4px; color: var(--green-bright); }
.brand-sub { font-size: 10px; letter-spacing: 2px; color: var(--text-dim); }
.topbar-status { display: flex; gap: 18px; align-items: center; font-size: 11px; letter-spacing: 1px; }
.status-item b { color: var(--amber); }
.clock { color: var(--green-bright); font-size: 13px; }
.dim { color: var(--text-dim); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.dot-green { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }

/* ---------- ticker ---------- */
#ticker-strip {
  height: 28px;
  display: flex; align-items: stretch;
  background: #080d08;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ticker-label {
  padding: 0 12px; display: flex; align-items: center;
  background: var(--bg-raise); color: var(--amber);
  font-size: 10px; letter-spacing: 2px;
  border-right: 1px solid var(--line-bright);
  flex: 0 0 auto;
}
.ticker-viewport { flex: 1; overflow: hidden; position: relative; }
.ticker-track {
  position: absolute; white-space: nowrap; display: flex; align-items: center; height: 100%;
  animation: ticker 55s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.tick { margin: 0 22px; font-size: 12px; }
.tick .sym { color: var(--text-dim); margin-right: 6px; }
.tick .val { color: var(--text); }
.tick .chg.up { color: var(--green-bright); }
.tick .chg.down { color: var(--red); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- world clocks strip ---------- */
#clocks-strip {
  height: 24px;
  display: flex; align-items: center; gap: 20px;
  padding: 0 14px;
  background: #091009;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
}
.wclk .city { color: var(--text-dim); margin-right: 5px; letter-spacing: 1px; }
.wclk .t { color: var(--green-bright); }

/* ---------- layout ---------- */
#layout {
  display: grid;
  grid-template-columns: 250px 1fr 290px;
  height: calc(100vh - 44px - 28px - 24px - 24px);
}

.panel {
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}
#panel-right { border-right: none; border-left: 1px solid var(--line); }

.panel-header {
  padding: 8px 12px;
  font-size: 11px; letter-spacing: 2px;
  color: var(--amber);
  background: linear-gradient(180deg, #131c13, #0e150e);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.panel-header:first-child { border-top: none; }
.panel-count { color: var(--text-dim); float: right; }
.panel-scroll { overflow-y: auto; flex: 1; min-height: 0; }
.panel-scroll::-webkit-scrollbar, #market-grid::-webkit-scrollbar { width: 6px; }
.panel-scroll::-webkit-scrollbar-thumb { background: var(--line-bright); }

/* ---------- filters ---------- */
.filter-row { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.filter-btn {
  background: var(--bg-raise); color: var(--text-dim);
  border: 1px solid var(--line); font-family: var(--mono);
  font-size: 9px; letter-spacing: 1px; padding: 3px 7px; cursor: pointer;
}
.filter-btn:hover { color: var(--text); border-color: var(--line-bright); }
.filter-btn.active { color: var(--green-bright); border-color: var(--green); background: #14231280; }

/* ---------- location list ---------- */
.loc-item {
  padding: 7px 12px;
  border-bottom: 1px solid #131d13;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.loc-item:hover { background: var(--bg-raise); }
.loc-item.selected { background: #16281470; border-left: 2px solid var(--green); padding-left: 10px; }
.loc-name { color: var(--text); font-size: 12px; }
.loc-meta { font-size: 10px; color: var(--text-dim); display: flex; justify-content: space-between; }
.loc-tag { font-size: 9px; letter-spacing: 1px; }
.tag-CHOKEPOINT { color: var(--amber); }
.tag-NAVAL { color: var(--cyan); }
.tag-AIRBASE { color: var(--green-bright); }
.tag-STRATEGIC { color: var(--red); }
.tag-BRIDGE { color: #c98fe0; }
.tag-RAIL { color: #8fb0e0; }
.tag-INFRA { color: #e0c060; }

/* ---------- map ---------- */
#map-wrap { position: relative; overflow: hidden; background: var(--sea); }
#map { width: 100%; height: 100%; display: block; cursor: crosshair; }

.graticule { fill: none; stroke: var(--grid); stroke-width: .5; }
.sphere { fill: #0a100c; stroke: var(--line-bright); stroke-width: 1; }
.country { fill: var(--land); stroke: var(--border-country); stroke-width: .5; transition: fill .15s; }
.country:hover { fill: var(--land-hover); }
.country.active { fill: var(--land-active); stroke: var(--green); }

.marker { cursor: pointer; }
.marker circle.core { fill: currentColor; }
.marker circle.ring { fill: none; stroke: currentColor; opacity: .8; animation: ring 2.4s ease-out infinite; }
.marker text {
  fill: currentColor; font-family: var(--mono); letter-spacing: .5px;
  paint-order: stroke; stroke: #0a0f0acc; stroke-width: 2.5px;
  pointer-events: none;
}
.m-CHOKEPOINT { color: var(--amber); }
.m-NAVAL { color: var(--cyan); }
.m-AIRBASE { color: var(--green-bright); }
.m-STRATEGIC { color: var(--red); }
.m-BRIDGE { color: #c98fe0; }
.m-RAIL { color: #8fb0e0; }
.m-INFRA { color: #e0c060; }
@keyframes ring { 0% { r: 3; opacity: .9; } 100% { r: 14; opacity: 0; } }

.map-hud {
  position: absolute; bottom: 10px; left: 12px;
  font-size: 10px; letter-spacing: 1px; color: var(--text-dim);
  background: #0a0f0acc; padding: 3px 8px; border: 1px solid var(--line);
  pointer-events: none;
}
.map-hud.right { left: auto; right: 12px; }

#zoom-controls {
  position: absolute; top: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
#zoom-controls button {
  width: 30px; height: 30px;
  background: #0d130dd9; color: var(--green-bright);
  border: 1px solid var(--line-bright);
  font-family: var(--mono); font-size: 15px; cursor: pointer;
}
#zoom-controls button:hover { background: var(--bg-raise); border-color: var(--green); }

#tooltip {
  position: absolute; pointer-events: none; display: none;
  background: #0b110bee; border: 1px solid var(--green);
  padding: 6px 10px; font-size: 11px; z-index: 20; max-width: 240px;
  box-shadow: 0 0 12px #000c;
}
#tooltip .tt-title { color: var(--green-bright); letter-spacing: 1px; }
#tooltip .tt-sub { color: var(--text-dim); font-size: 10px; margin-top: 2px; }

/* corner brackets */
.map-overlay.corners { position: absolute; inset: 8px; pointer-events: none; }
.map-overlay.corners::before, .map-overlay.corners::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 1px solid var(--green); opacity: .5;
}
.map-overlay.corners::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.map-overlay.corners::after { bottom: 0; right: 0; border-left: none; border-top: none; }

.scanline {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #00000012 3px 4px);
  mix-blend-mode: multiply;
}

/* ---------- country card ---------- */
#country-card {
  position: absolute; top: 12px; left: 12px; width: 250px;
  background: #0b110bf2; border: 1px solid var(--line-bright);
  box-shadow: 0 0 18px #000d; z-index: 15;
}
#country-card.hidden { display: none; }
.cc-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  color: var(--green-bright); letter-spacing: 1px; font-size: 13px;
  background: #10190f;
}
#cc-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-family: var(--mono); }
#cc-close:hover { color: var(--red); }
.cc-body { padding: 8px 10px; font-size: 11px; }
.cc-row { display: flex; justify-content: space-between; margin: 3px 0; }
.cc-row .k { color: var(--text-dim); }
.cc-row .v { color: var(--text); text-align: right; }

/* ---------- market / defense grids ---------- */
#market-grid, #defense-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  grid-auto-rows: 58px;
  background: var(--line); border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  max-height: 178px; /* exactly 3 rows — no half-cut cells */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#defense-grid { height: 117px; max-height: 117px; flex: none; /* exactly 2 rows */ }
#market-grid::-webkit-scrollbar, #defense-grid::-webkit-scrollbar { width: 7px; }
#market-grid::-webkit-scrollbar-track, #defense-grid::-webkit-scrollbar-track { background: #0a0f0a; }
#market-grid::-webkit-scrollbar-thumb, #defense-grid::-webkit-scrollbar-thumb {
  background: var(--line-bright); border: 1px solid #0a0f0a;
}
#market-grid::-webkit-scrollbar-thumb:hover, #defense-grid::-webkit-scrollbar-thumb:hover { background: var(--green); }
.mkt-cell { background: var(--bg-panel); padding: 7px 10px; }
.mkt-sym { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.mkt-val { font-size: 14px; color: var(--text); margin-top: 1px; }
.mkt-chg { font-size: 10px; }
.mkt-chg.up { color: var(--green-bright); }
.mkt-chg.up::before { content: "▲ "; }
.mkt-chg.down { color: var(--red); }
.mkt-chg.down::before { content: "▼ "; }
.mkt-live { font-size: 8px; color: var(--amber); letter-spacing: 1px; margin-left: 5px; }

/* ---------- event feed ---------- */
.evt {
  padding: 8px 12px; border-bottom: 1px solid #131d13;
  display: flex; flex-direction: column; gap: 3px; cursor: default;
}
.evt-top { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); }
.evt-sev { letter-spacing: 1px; }
.sev-HIGH { color: var(--red); }
.sev-ELEVATED { color: var(--amber); }
.sev-ROUTINE { color: var(--green); }
.evt-text { font-size: 11px; line-height: 1.45; color: var(--text); }
.evt-region { color: var(--cyan); }
.evt.clickable { cursor: pointer; }
.evt.clickable:hover { background: var(--bg-raise); }

/* ---------- status bar ---------- */
#statusbar {
  height: 24px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  font-size: 10px; letter-spacing: 1px;
  background: #0b110b; border-top: 1px solid var(--line-bright);
  color: var(--text-dim);
}
#sb-msg { color: var(--green); }

.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  #layout { grid-template-columns: 200px 1fr; }
  #panel-right { display: none; }
}
@media (max-width: 680px) {
  #layout { grid-template-columns: 1fr; }
  #panel-left { display: none; }
}

/* ---------- layer controls ---------- */
#layer-bar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  background: #0b110be8; border: 1px solid var(--line-bright);
  padding: 6px 10px; z-index: 16; max-width: 92vw;
}
#layer-collapse {
  background: none; border: none; color: var(--amber); cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 3px; padding: 0;
}
#layer-groups { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
#layer-bar.collapsed #layer-groups { display: none; }
.lg-col { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.lg-cat { font-size: 8px; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 2px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.lb-title { font-size: 9px; color: var(--amber); letter-spacing: 2px; margin-right: 4px; }
.layer-btn {
  background: var(--bg-raise); color: var(--text-dim);
  border: 1px solid var(--line); font-family: var(--mono);
  font-size: 9px; letter-spacing: 1px; padding: 3px 7px; cursor: pointer; text-align: left;
}
.layer-btn:hover { color: var(--text); border-color: var(--line-bright); }
.layer-btn.active { color: var(--green-bright); border-color: var(--green); background: #14231280; }

/* cities as subtle base-map cartography */
.city-layer .pt-glyph { opacity: .72; }
.city-layer .pt-label { opacity: .6; }

/* radiation radar-blip markers */
.rad-blip { cursor: pointer; }
.rad-core { }
.rad-ping { opacity: .8; animation: radping 2.6s ease-out infinite; }
.rad-ping2 { animation-delay: 1.3s; }
.rad-HIGH .rad-ping { animation-duration: 1.6s; }
@keyframes radping { 0% { r: 2; opacity: .85; } 100% { r: 15; opacity: 0; } }

#res-chips {
  position: absolute; top: 47px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
  z-index: 16; max-width: 72%;
}
#res-chips.hidden { display: none; }
.res-chip {
  border: 1px solid; background: #0b110bd9;
  font-size: 9px; padding: 2px 7px; cursor: pointer;
  font-family: var(--mono); letter-spacing: 1px;
  opacity: .4;
}
.res-chip.active { opacity: 1; }

/* ---------- sea lanes ---------- */
.route { fill: none; stroke-linecap: round; }
.route:hover { animation: dashflow 1.4s linear infinite; }
.route.cond-ok       { stroke: var(--green); }
.route.cond-warn     { stroke: var(--amber); }
.route.cond-risk     { stroke: var(--red); }
.route.cond-seasonal { stroke: var(--cyan); }
.route-hit { fill: none; stroke: #fff; stroke-opacity: 0; cursor: pointer; }
@keyframes dashflow { to { stroke-dashoffset: -14; } }

/* ---------- resource markers ---------- */
.rmarker { cursor: pointer; }
.rmarker .core { stroke: #0a0f0a; stroke-width: .6; }
.rmarker text {
  font-family: var(--mono); letter-spacing: .5px;
  paint-order: stroke; stroke: #0a0f0acc; stroke-width: 2.5px;
  pointer-events: none;
}

/* ---------- timezone layer ---------- */
.tz-band { fill: #8fe07f; fill-opacity: .045; pointer-events: none; }
.tz-line { fill: none; stroke: #8fe07f; stroke-opacity: .22; stroke-dasharray: 2 3; pointer-events: none; }
.tzlabel text {
  fill: #8fe07f; opacity: .75; font-size: 7px;
  text-anchor: middle; font-family: var(--mono);
  paint-order: stroke; stroke: #0a0f0acc; stroke-width: 2px;
  pointer-events: none;
}

/* ---------- SITREP choropleth ---------- */
.sitrep-on .country.st-WAR     { fill: #4b211d; stroke: #6e3029; }
.sitrep-on .country.st-UNREST  { fill: #45301b; stroke: #64451f; }
.sitrep-on .country.st-TENSION { fill: #3d3419; stroke: #5c4d1e; }
.sitrep-on .country.st-WAR:hover     { fill: #6e2d27; }
.sitrep-on .country.st-UNREST:hover  { fill: #62431f; }
.sitrep-on .country.st-TENSION:hover { fill: #574a1e; }
.sitrep-on .country.st-WAR.active     { fill: #8a3a31; stroke: var(--red); }
.sitrep-on .country.st-UNREST.active  { fill: #7d5526; stroke: #d97b41; }
.sitrep-on .country.st-TENSION.active { fill: #6f5e24; stroke: var(--amber); }

#sitrep-legend {
  position: absolute; bottom: 36px; right: 12px;
  display: flex; flex-direction: column; gap: 4px;
  background: #0a0f0acc; border: 1px solid var(--line);
  padding: 6px 10px; z-index: 14;
  font-size: 9px; letter-spacing: 1px; color: var(--text-dim);
  pointer-events: none;
}
#sitrep-legend.hidden { display: none; }
#sitrep-legend .lg-title { color: var(--amber); margin-bottom: 2px; }
#sitrep-legend .lg-item { display: flex; align-items: center; gap: 6px; }
#sitrep-legend .lg-item i {
  width: 8px; height: 8px; display: inline-block; opacity: .85;
}

.tt-status { font-size: 10px; margin-top: 2px; letter-spacing: 1px; }

/* ---------- live ops layer ---------- */
.dot-amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); animation: pulse 2s infinite; }
.dot-red   { background: var(--red);   box-shadow: 0 0 6px var(--red);   animation: pulse 1s infinite; }

.qk circle { fill-opacity: .25; stroke-width: .8; }
.qk.q-major circle  { fill: var(--red);   stroke: var(--red); }
.qk.q-strong circle { fill: var(--amber); stroke: var(--amber); }
.qk.q-light circle  { fill: var(--green); stroke: var(--green); }
.qk text, .hz text, .iss text {
  font-family: var(--mono); letter-spacing: .5px;
  paint-order: stroke; stroke: #0a0f0acc; stroke-width: 2px;
  pointer-events: none;
}

.hz rect { stroke: #0a0f0a; stroke-width: .5; }
.hz-WF { color: #d97b41; }
.hz-VO { color: #d95448; }
.hz-ST { color: #56b8b0; }
.hz-IC { color: #9ab8c8; }

.iss circle { fill: none; stroke: var(--green-bright); }
.iss line { stroke: var(--green-bright); stroke-width: .6; }
.iss text { fill: var(--green-bright); }

/* ---------- live intel items ---------- */
.evt .evt-src { color: var(--text-dim); }
.evt.live .evt-text a {
  color: var(--text); text-decoration: none;
}
.evt.live .evt-text a:hover { color: var(--green-bright); }
.evt .ext { color: var(--text-dim); font-size: 9px; }

/* ---------- country card enrichment ---------- */
.cc-row .live-tag { font-size: 8px; color: var(--amber); letter-spacing: 1px; margin-left: 4px; }

/* ---------- header key button ---------- */
.hdr-btn {
  background: var(--bg-raise); color: var(--text-dim);
  border: 1px solid var(--line); font-family: var(--mono);
  font-size: 9px; letter-spacing: 1px; padding: 1px 6px; cursor: pointer;
  margin-left: 6px; vertical-align: middle;
}
.hdr-btn:hover { color: var(--green-bright); border-color: var(--green); }

/* Discord — brand blurple accent, used in the header and on the login page */
.discord-btn {
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none; color: #c7ccff; border-color: #454b86;
}
.discord-btn:hover { color: #fff; border-color: #5865f2; background: #5865f233; }
.dc-ico { width: 12px; height: 10px; flex: none; }
#discord-cta {
  display: flex; align-items: center; gap: 11px;
  width: 340px; box-sizing: border-box; padding: 11px 15px;
  background: #5865f21c; border: 1px solid #454b86;
  color: #c7ccff; text-decoration: none; font-family: var(--mono);
}
#discord-cta:hover { border-color: #5865f2; background: #5865f233; color: #fff; }
#discord-cta .dc-ico { width: 27px; height: 21px; color: #5865f2; }
#discord-cta .dc-txt { display: flex; flex-direction: column; }
#discord-cta .dc-txt b { font-size: 12px; letter-spacing: 2px; font-weight: 700; }
#discord-cta .dc-txt small { color: var(--text-dim); font-size: 9px; letter-spacing: 1px; margin-top: 2px; }

/* ---------- live news map dots ---------- */
.news-dot circle { fill: #e6d38a; stroke: #0a0f0a; stroke-width: .4; opacity: .8; }
.news-dot { cursor: pointer; }

/* ---------- fullscreen ---------- */
.fs-btn { cursor: pointer; }
#zoom-controls .fs-btn {
  width: 30px; height: 30px;
  background: #0d130dd9; color: var(--green-bright);
  border: 1px solid var(--line-bright);
  font-family: var(--mono); font-size: 13px;
}
#zoom-controls .fs-btn:hover { background: var(--bg-raise); border-color: var(--green); }
:fullscreen { background: var(--bg) !important; }
#map-wrap:fullscreen { background: var(--sea) !important; }
#market-grid:fullscreen, #defense-grid:fullscreen {
  max-height: none; grid-template-columns: repeat(4, 1fr);
  align-content: start; padding: 24px; gap: 2px;
}
#market-grid:fullscreen .mkt-val, #defense-grid:fullscreen .mkt-val { font-size: 20px; }
#market-grid:fullscreen .mkt-sym, #defense-grid:fullscreen .mkt-sym { font-size: 12px; }
#event-feed:fullscreen { background: var(--bg-panel); padding: 24px 18vw; font-size: 14px; }
#event-feed:fullscreen .evt-text { font-size: 13px; }
#panel-left:fullscreen { border: none; }

/* ---------- live tv overlay ---------- */
#tv-overlay {
  position: fixed; right: 14px; bottom: 34px;
  width: 500px; max-width: calc(100vw - 28px);
  background: #0b110bf8; border: 1px solid var(--line-bright);
  box-shadow: 0 0 28px #000d; z-index: 60;
}
#tv-overlay.hidden { display: none; }
.tv-header {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.tv-title { color: var(--red); font-size: 10px; letter-spacing: 2px; margin-right: 4px; animation: pulse 2s infinite; }
#tv-channels { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
#tv-close { margin-left: auto; }
#tv-frame { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; background: #000; }
.tv-note {
  padding: 4px 8px; font-size: 8px; letter-spacing: 1px;
  color: var(--text-dim); border-top: 1px solid var(--line);
}

/* ---------- pipelines ---------- */
.pipe { fill: none; stroke-linecap: round; }
.pipe.k-OIL { stroke: #c9903a; }
.pipe.k-GAS { stroke: #4fb3ab; }
.pipe.st-live { opacity: .9; }
.pipe.st-down { opacity: .45; }
.pipe-hit { fill: none; stroke: #fff; stroke-opacity: 0; cursor: pointer; }
.tt-pipe-oil { color: #c9903a; }
.tt-pipe-gas { color: #4fb3ab; }

/* ---------- defense sector: compact rows, no inner scroll ---------- */
#defense-grid {
  display: block; height: auto; max-height: none; flex: none;
  overflow: visible; background: var(--bg-panel);
}
.def-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 12px; border-bottom: 1px solid #131d13;
  font-size: 11px;
}
.def-row .def-sym { color: var(--text-dim); flex: 1; font-size: 10px; letter-spacing: .5px; }
.def-row .def-val { color: var(--text); }
.def-row .mkt-chg { font-size: 10px; min-width: 58px; text-align: right; }
#defense-grid:fullscreen { padding: 24px 22vw; font-size: 14px; }
#defense-grid:fullscreen .def-row { font-size: 14px; padding: 8px 12px; }
#defense-grid:fullscreen .def-row .def-sym { font-size: 12px; }

/* ---------- tv overlay extras ---------- */
.tv-header { cursor: move; user-select: none; }
.tv-header button { cursor: pointer; }
#tv-overlay.big { width: 860px; }

/* ---------- tv hls video mode ---------- */
#tv-video { width: 100%; aspect-ratio: 16 / 9; display: none; background: #000; }
#tv-overlay.tv-mode-hls #tv-video { display: block; }
#tv-overlay.tv-mode-hls #tv-frame { display: none; }

/* ---------- asset search ---------- */
#loc-search-row { padding: 6px 8px; border-bottom: 1px solid var(--line); }
#loc-search {
  width: 100%; background: #0a0f0a; border: 1px solid var(--line);
  color: var(--green-bright); font-family: var(--mono); font-size: 11px;
  letter-spacing: 1px; padding: 5px 8px; outline: none;
}
#loc-search:focus { border-color: var(--green); }
#loc-search::placeholder { color: var(--text-dim); }

/* ---------- user chip ---------- */
#user-chip { color: var(--green-bright); cursor: pointer; }
#user-chip:hover { color: var(--red); }
#user-chip.dim { color: var(--text-dim); cursor: default; }

/* ---------- conflict mode ---------- */
body.conflict-mode #topbar { border-bottom-color: var(--red); }
body.conflict-mode .brand-name { color: var(--red); text-shadow: 0 0 8px #d9544855; }
body.conflict-mode .brand-mark { color: var(--red); }
#conflict-btn.armed { color: var(--red); border-color: var(--red); background: #2a1512; animation: pulse 1.4s infinite; }

#conflict-panel {
  position: absolute; bottom: 36px; left: 12px; width: 340px;
  background: #120b0bf2; border: 1px solid #6e3029;
  box-shadow: 0 0 24px #000d; z-index: 15;
  display: flex; flex-direction: column;
  max-height: 55%;
}
#conflict-panel.hidden { display: none; }
.cp-header {
  padding: 7px 10px; font-size: 10px; letter-spacing: 1.5px;
  color: var(--red); background: #1c0f0d;
  border-bottom: 1px solid #6e3029;
}
.cp-header span { float: right; color: var(--text-dim); }
.cp-gauge-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.cp-gauge {
  flex: 1; height: 10px; background: #0a0f0a;
  border: 1px solid var(--line-bright); overflow: hidden;
}
#cp-gauge-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--green), var(--amber) 55%, var(--red));
  transition: width .8s;
}
#cp-gauge-label { font-size: 10px; letter-spacing: 1px; color: var(--amber); min-width: 86px; text-align: right; }
.cp-watch { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; border-bottom: 1px solid #3a1f1c; }
.cp-watch .filter-btn { border-color: #6e3029; }
.cp-feed { overflow-y: auto; min-height: 0; }
.cp-feed::-webkit-scrollbar { width: 6px; }
.cp-feed::-webkit-scrollbar-thumb { background: #6e3029; }
.cp-item { padding: 6px 10px; border-bottom: 1px solid #241412; font-size: 10px; line-height: 1.45; }
.cp-item a { color: var(--text); text-decoration: none; }
.cp-item a:hover { color: var(--red); }
.cp-item .cp-time { color: var(--text-dim); margin-right: 6px; }

/* ---------- osint feed ---------- */
#intel-src-row .filter-btn.active { color: var(--cyan); border-color: var(--cyan); }
.osint-post { padding: 8px 12px; border-bottom: 1px solid #131d13; font-size: 11px; line-height: 1.5; }
.osint-post .op-top { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-bottom: 3px; }
.osint-post .op-ch { color: var(--cyan); letter-spacing: 1px; }
.osint-post .op-text { color: var(--text); white-space: pre-wrap; word-break: break-word; }
.osint-post .op-links { margin-top: 4px; font-size: 9px; }
.osint-post .op-links a { color: var(--text-dim); text-decoration: none; margin-right: 10px; }
.osint-post .op-links a:hover { color: var(--green-bright); }
#osint-acct-row.hidden, #intel-filter-row.hidden, #intel-src-row.hidden { display: none; }

/* ---------- geolocated events layer ---------- */
.event-mark { cursor: pointer; }
.event-mark .ev-ring { fill-opacity: .18; stroke-width: .8; }
.event-mark .ev-glyph { paint-order: stroke; stroke: #0a0f0a; stroke-width: 1.6px; }
.ev-HIGH .ev-ring { fill: var(--red); stroke: var(--red); }
.ev-HIGH .ev-glyph { fill: #ff6a5a; }
.ev-ELEVATED .ev-ring { fill: var(--amber); stroke: var(--amber); }
.ev-ELEVATED .ev-glyph { fill: var(--amber); }
.event-mark.ev-fresh .ev-ring { animation: evpulse 1.6s ease-out infinite; }
@keyframes evpulse { 0% { r: 3; fill-opacity: .5; } 100% { r: 12; fill-opacity: 0; } }
.tt-title.ev-tt-HIGH { color: #ff6a5a; }
.tt-title.ev-tt-ELEVATED { color: var(--amber); }

/* ---------- notification settings modal ---------- */
#notif-modal {
  position: fixed; inset: 0; z-index: 70;
  background: #060906cc; display: flex; align-items: center; justify-content: center;
}
#notif-modal.hidden { display: none; }
.nm-box {
  width: 420px; max-width: calc(100vw - 24px); max-height: 88vh; overflow-y: auto;
  background: #0b110b; border: 1px solid var(--line-bright); box-shadow: 0 0 30px #000d;
}
.nm-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  color: var(--amber); letter-spacing: 2px; font-size: 12px;
  background: #10190f; position: sticky; top: 0;
}
.nm-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.nm-master {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--green-bright); font-size: 11px; letter-spacing: 1px;
}
.nm-note { font-size: 9px; color: var(--text-dim); letter-spacing: 1px; }
.nm-note.warn { color: var(--amber); }
.nm-group { border: 1px solid var(--line); }
.nm-group-h {
  font-size: 10px; letter-spacing: 2px; color: var(--amber);
  padding: 5px 10px; background: var(--bg-raise); border-bottom: 1px solid var(--line);
}
.nm-rows { padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.nm-chk { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text); cursor: pointer; letter-spacing: .5px; }
.nm-chk input { accent-color: var(--green); }
.nm-sel { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.nm-sel select {
  background: #0a0f0a; color: var(--green-bright); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; padding: 3px 6px;
}
#notif-btn.on { color: var(--amber); border-color: var(--amber); }

/* ---------- alert badge + toasts + log ---------- */
#notif-badge {
  display: none; margin-left: 5px; min-width: 15px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: 8px;
  font-size: 9px; line-height: 15px; text-align: center; vertical-align: middle;
}
#toast-host {
  position: fixed; bottom: 32px; right: 14px; z-index: 80;
  display: flex; flex-direction: column; gap: 8px; width: 300px; max-width: calc(100vw - 24px);
  pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer;
  background: #0b110bf5; border: 1px solid var(--line-bright); border-left-width: 3px;
  padding: 8px 10px; box-shadow: 0 0 16px #000c;
  animation: toastin .3s ease-out;
}
.toast.out { opacity: 0; transform: translateX(20px); transition: all .4s; }
.toast.sev-HIGH { border-left-color: var(--red); }
.toast.sev-ELEVATED { border-left-color: var(--amber); }
.toast.sev-ROUTINE { border-left-color: var(--green); }
.toast-t { color: var(--green-bright); font-size: 11px; letter-spacing: .5px; }
.toast-b { color: var(--text-dim); font-size: 10px; margin-top: 3px; line-height: 1.4; }
@keyframes toastin { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

.nm-subrow { display: flex; gap: 16px; padding-left: 4px; }
#alert-log { max-height: 168px; overflow-y: auto; }
.al-row { padding: 6px 10px; border-bottom: 1px solid #131d13; border-left: 2px solid var(--line-bright); }
.al-row.sev-HIGH { border-left-color: var(--red); }
.al-row.sev-ELEVATED { border-left-color: var(--amber); }
.al-row.sev-ROUTINE { border-left-color: var(--green); }
.al-t { color: var(--text); font-size: 10px; }
.al-b { color: var(--text-dim); font-size: 9px; margin-top: 2px; line-height: 1.4; }
.al-time { color: var(--text-dim); font-size: 8px; margin-top: 2px; letter-spacing: 1px; }
.al-empty { padding: 12px 10px; color: var(--text-dim); font-size: 10px; text-align: center; }

/* ---------- extended point layers (nuclear/ports/cities/AI/radiation) ---------- */
.pt-mark { cursor: pointer; }
.pt-glyph { paint-order: stroke; stroke: #0a0f0a; stroke-width: 1.4px; }
.pt-label {
  font-family: var(--mono); letter-spacing: .3px;
  paint-order: stroke; stroke: #0a0f0acc; stroke-width: 2px; pointer-events: none;
}

/* ---------- undersea cables ---------- */
.cable { fill: none; stroke: #7fe0d0; stroke-opacity: .55; stroke-linecap: round; }
.cable-hit { fill: none; stroke: #fff; stroke-opacity: 0; cursor: pointer; }

/* ---------- GPS jamming zones ---------- */
.jam-zone { fill-opacity: .1; stroke-opacity: .7; stroke-dasharray: 3 2; pointer-events: visiblePainted; cursor: help; }

/* ---------- events timespan filter ---------- */
#events-timespan {
  position: absolute; top: 14px; left: 14px;
  display: flex; gap: 4px; align-items: center; z-index: 16;
  background: #0b110be8; border: 1px solid var(--line-bright); padding: 3px 7px;
}
#events-timespan.hidden { display: none; }
.ts-lbl { font-size: 9px; color: var(--amber); letter-spacing: 1px; margin-right: 3px; }
.ts-btn {
  background: var(--bg-raise); color: var(--text-dim); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px; padding: 2px 6px; cursor: pointer;
}
.ts-btn:hover { color: var(--text); border-color: var(--line-bright); }
.ts-btn.active { color: var(--green-bright); border-color: var(--green); background: #14231280; }

/* ---------- country headline in readout card ---------- */
.cc-headline { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 10px; }
.cch-tag { color: var(--amber); font-size: 9px; letter-spacing: 1px; margin-bottom: 2px; }
.cc-headline a { color: var(--green-bright); text-decoration: none; line-height: 1.4; }
.cc-headline a:hover { text-decoration: underline; }
.cch-src { color: var(--text-dim); font-size: 8px; margin-top: 2px; }

/* ---------- displacement / migration flows ---------- */
.flow-line { fill: none; stroke: #e07b5a; stroke-opacity: .35; stroke-linecap: round; }
.flow-dash { fill: none; stroke: #f0a080; stroke-opacity: .9; stroke-linecap: round; stroke-dasharray: 6 10; animation: flowmove 1.2s linear infinite; }
.flow-hit { fill: none; stroke: #fff; stroke-opacity: 0; cursor: pointer; }
.flow-end circle { filter: drop-shadow(0 0 2px #e07b5a); }
@keyframes flowmove { to { stroke-dashoffset: -16; } }

/* ---------- religion block in country card ---------- */
.cc-religion { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.rel-bar { display: flex; height: 7px; width: 100%; border: 1px solid var(--line); margin: 4px 0 6px; overflow: hidden; }
.rel-bar span { height: 100%; display: block; }
.rel-item { display: flex; align-items: center; gap: 6px; font-size: 10px; padding: 1px 0; }
.rel-dot { width: 7px; height: 7px; flex: 0 0 7px; }
.rel-n { color: var(--text-dim); flex: 1; }
.rel-n.rel-maj { color: var(--text); }
.rel-p { color: var(--text); }

/* ---------- draggable time window ---------- */
#events-timespan { cursor: default; }
.ts-lbl { cursor: move; user-select: none; }