:root {
  --ink: #e9efe7;
  --muted: #93a198;
  --faint: #5e6d64;
  --bg: #07100d;
  --panel: #0b1712;
  --panel-2: #102019;
  --line: rgba(202, 224, 208, .13);
  --acid: #d9f99d;
  --green: #79d6a0;
  --blue: #71aee8;
  --red: #e77867;
  --amber: #e7b567;
  --purple: #ad8de3;
  --mono: "IBM Plex Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--sans); min-width: 320px; }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; background: radial-gradient(circle at 52% 22%, rgba(35, 84, 58, .18), transparent 34%), var(--bg); }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(7, 16, 13, .88); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(217, 249, 157, .55); color: var(--acid); font: 600 18px var(--mono); transform: rotate(45deg); }
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand > span:last-child { display: grid; }
.brand strong { letter-spacing: .14em; font-size: 15px; }
.brand small { color: var(--faint); font: 500 8px var(--mono); letter-spacing: .16em; margin-top: 2px; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.ghost-button, .turn-pill, .icon-button { border: 1px solid var(--line); background: rgba(255,255,255,.025); cursor: pointer; }
.ghost-button { padding: 11px 14px; font-size: 12px; color: var(--muted); }
.button-icon { color: var(--green); margin-right: 5px; }
.turn-pill { height: 42px; display: grid; grid-template-columns: auto auto; column-gap: 9px; align-items: center; padding: 5px 13px; text-align: left; }
.turn-pill .pulse { grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(121,214,160,.1); }
.turn-pill span:nth-child(2) { font: 500 8px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.turn-pill strong { font: 600 10px var(--mono); letter-spacing: .08em; }
main { width: min(1600px, 100%); margin: 0 auto; }
.briefing { min-height: 194px; padding: 34px 32px 26px; display: grid; grid-template-columns: minmax(280px, 1.3fr) minmax(520px, 1fr); align-items: end; gap: 50px; }
.eyebrow { margin: 0 0 10px; color: var(--green); font: 600 9px var(--mono); letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(32px, 4vw, 54px); line-height: 1; letter-spacing: -.045em; }
.lede { color: var(--muted); max-width: 700px; margin: 15px 0 0; font-size: 14px; line-height: 1.6; }
.status-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.status-strip article { min-width: 0; padding: 14px; border-right: 1px solid var(--line); display: grid; gap: 5px; }
.status-strip article:last-child { border: 0; }
.status-strip span { color: var(--faint); font: 500 8px var(--mono); letter-spacing: .12em; }
.status-strip strong { font-size: 13px; }
.status-strip em { font: normal 9px var(--mono); }
.trend.up { color: var(--green); } .trend.hot { color: var(--red); } .trend.neutral { color: var(--amber); }
.workspace { display: grid; grid-template-columns: 190px minmax(460px, 1fr) 350px; min-height: 610px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.control-panel, .intel-panel { background: rgba(11, 23, 18, .82); padding: 20px; }
.control-panel { border-right: 1px solid var(--line); max-height: 760px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #31443a transparent; }
.intel-panel { border-left: 1px solid var(--line); overflow-y: auto; max-height: 700px; }
.panel-heading, .event-header, .evidence-heading { display: flex; justify-content: space-between; align-items: center; }
.icon-button { width: 28px; height: 28px; color: var(--muted); }
.filter-group { display: grid; gap: 5px; }
.filter-chip { border: 0; background: transparent; color: var(--muted); padding: 10px 8px; display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; text-align: left; font-size: 11px; cursor: pointer; border-left: 2px solid transparent; }
.filter-chip:hover, .filter-chip.active { color: var(--ink); background: rgba(255,255,255,.035); border-left-color: var(--acid); }
.filter-chip b { color: var(--faint); font: 500 9px var(--mono); }
.chip-dot, .conf { width: 7px; height: 7px; border-radius: 50%; align-self: center; display: inline-block; }
.chip-dot.all { background: var(--acid); }.chip-dot.ground { background: var(--green); }.chip-dot.air { background: var(--red); }.chip-dot.diplomacy { background: var(--purple); }
.divider { height: 1px; background: var(--line); margin: 17px 0; }
.toggle-row { display: grid; grid-template-columns: 1fr auto; position: relative; gap: 10px; cursor: pointer; }
.toggle-row span { display: grid; gap: 4px; }
.toggle-row strong { font-size: 11px; }.toggle-row small { color: var(--faint); font-size: 9px; }
.toggle-row input { opacity: 0; position: absolute; }
.toggle-row i { width: 31px; height: 17px; border-radius: 20px; background: #24332b; position: relative; }
.toggle-row i::after { content: ""; position: absolute; width: 11px; height: 11px; left: 3px; top: 3px; border-radius: 50%; background: var(--faint); transition: .2s; }
.toggle-row input:checked + i { background: rgba(121,214,160,.26); }.toggle-row input:checked + i::after { transform: translateX(14px); background: var(--green); }
.map-layer-group { display: grid; gap: 5px; }.map-layer-group .eyebrow { margin-bottom: 3px; }.map-layer-group .layer-subhead { margin-top: 11px; }.map-layer-group label { display: grid; grid-template-columns: 13px 11px 1fr; align-items: center; gap: 7px; padding: 5px 3px; cursor: pointer; color: var(--muted); font-size: 10px; }.map-layer-group input { accent-color: var(--green); margin: 0; }.map-layer-group label > span { display: grid; gap: 2px; }.map-layer-group small { color: var(--faint); font-size: 7px; }.layer-symbol { display: inline-block; }.layer-symbol.route { width: 11px; height: 2px; background: var(--amber); }.layer-symbol.rail { width: 11px; height: 0; border-top: 2px dashed var(--blue); }.layer-symbol.energy, .layer-symbol.civic, .layer-symbol.communications, .layer-symbol.units { width: 8px; height: 8px; border: 1px solid var(--amber); border-radius: 50%; }.layer-symbol.civic { border-color: var(--green); }.layer-symbol.communications { border-color: var(--purple); }.layer-symbol.control { width: 10px; height: 8px; background: linear-gradient(90deg, rgba(113,174,232,.75) 50%, rgba(231,120,103,.75) 50%); }.layer-symbol.movement { width: 11px; height: 0; border-top: 2px solid var(--red); transform: rotate(-18deg); }.layer-symbol.admin { width: 11px; height: 0; border-top: 1px dotted var(--muted); }.layer-symbol.water { width: 11px; height: 2px; background: #63bddd; }.layer-symbol.terrain { width: 10px; height: 7px; border: 1px solid #9a8e68; border-radius: 50% 50% 0 0; }.layer-symbol.maritime { width: 11px; height: 0; border-top: 2px dashed #63bddd; }.layer-symbol.aviation { width: 11px; height: 0; border-top: 2px dotted var(--purple); }.layer-symbol.units { border-color: var(--red); box-shadow: 0 0 0 2px rgba(231,120,103,.08); }
.map-safety-note { display: grid; gap: 5px; margin-top: 17px; padding: 11px; border: 1px solid var(--line); border-left: 2px solid var(--blue); background: rgba(113,174,232,.04); }.map-safety-note strong { color: var(--blue); font: 600 8px var(--mono); letter-spacing: .12em; }.map-safety-note span { color: var(--faint); font-size: 8px; line-height: 1.45; }
.confidence-key { display: grid; gap: 9px; margin-top: 28px; }
.confidence-key p { margin: 0; display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; font-size: 10px; color: var(--muted); }
.confidence-key p b { color: var(--faint); }.conf.high { background: var(--green); }.conf.medium { background: var(--amber); }.conf.low { background: var(--red); }
.analyst-note { margin-top: 30px; padding: 13px; border: 1px solid var(--line); border-left: 2px solid var(--amber); background: rgba(231,181,103,.04); }
.analyst-note span { color: var(--amber); font: 600 8px var(--mono); letter-spacing: .12em; }.analyst-note p { font-size: 10px; line-height: 1.6; color: var(--muted); margin: 9px 0 0; }
.map-card { position: relative; overflow: hidden; min-height: 760px; background: radial-gradient(circle at 58% 46%, rgba(49,75,83,.18), transparent 36%), linear-gradient(145deg, #071015, #05090c 72%); box-shadow: inset 0 0 70px rgba(0,0,0,.38); }
.map-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(116,170,184,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(116,170,184,.025) 1px, transparent 1px); background-size: 32px 32px; mix-blend-mode: screen; }
.map-toolbar { position: absolute; z-index: 5; left: 18px; right: 18px; top: 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.map-toolbar > * { pointer-events: auto; }
.map-toolbar > span { color: var(--faint); font: 500 8px var(--mono); letter-spacing: .1em; background: rgba(7,16,13,.82); padding: 8px; }
.map-toolbar-status { display: flex; gap: 7px; align-items: center; }.map-toolbar-status > span { color: var(--faint); font: 500 8px var(--mono); letter-spacing: .1em; background: rgba(7,16,13,.82); padding: 8px; }.zoom-controls { display: flex; padding: 3px; border: 1px solid var(--line); background: rgba(7,16,13,.86); }.zoom-controls button { width: 27px; height: 25px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font: 600 13px var(--mono); }.zoom-controls button:last-child { border-right: 0; }.zoom-controls button:hover { color: var(--acid); background: var(--panel-2); }
.segmented { border: 1px solid var(--line); background: rgba(7,16,13,.82); padding: 3px; }
.segmented button { border: 0; padding: 6px 10px; color: var(--faint); background: transparent; cursor: pointer; font: 600 8px var(--mono); text-transform: uppercase; }
.segmented button.active { background: var(--panel-2); color: var(--acid); }
.map { position: absolute; inset: 0; z-index: 0; }
.map svg { width: 100%; height: 100%; display: block; }
.maplibregl-map { font-family: var(--sans); background: #07100d; }.maplibregl-canvas { outline: none; }.maplibregl-ctrl-attrib { color: #405047 !important; background: rgba(7,16,13,.82) !important; font: 500 7px var(--mono) !important; }.maplibregl-ctrl-attrib a { color: #73847a !important; }.maplibregl-ctrl-attrib-button { filter: invert(1); opacity: .45; }
.map-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; justify-items: center; color: var(--faint); font: 500 9px var(--mono); letter-spacing: .1em; }
.map-loading span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--green); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.country { fill: #111b20; stroke: #263943; stroke-width: .55; transition: .3s; }.country.focus-ua { fill: #153747; stroke: rgba(101,174,210,.68); stroke-width: 1.15; }.country.focus-ru { fill: #251b1d; stroke: rgba(147,92,91,.42); }
.graticule { fill: none; stroke: rgba(134,181,197,.09); stroke-width: .5; }
.map-layer { transition: opacity .2s; }.map-layer.hidden { opacity: 0 !important; pointer-events: none; }.zoom-regional, .zoom-detail { opacity: 0; pointer-events: none; transition: opacity .2s; }.zoom-regional.zoom-visible, .zoom-detail.zoom-visible { opacity: 1; pointer-events: auto; }
.terrain-band { stroke: rgba(190,176,126,.2); stroke-width: .7; vector-effect: non-scaling-stroke; }.terrain-band.high { fill: rgba(184,151,91,.12); }.terrain-band.mid { fill: rgba(157,144,98,.055); }.terrain-label { fill: rgba(215,200,150,.56); font: 600 7px var(--mono); letter-spacing: .08em; paint-order: stroke; stroke: #07100d; stroke-width: 2px; }
.control-zone { vector-effect: non-scaling-stroke; }.control-zone.ru { fill: rgba(194,65,61,.48); stroke: rgba(255,129,110,.92); stroke-width: 1.8; filter: drop-shadow(0 0 7px rgba(194,65,61,.22)); }.front-buffer { fill: none; stroke: rgba(241,209,141,.15); stroke-width: 12; vector-effect: non-scaling-stroke; }.front-line { fill: none; stroke: #f4d897; stroke-width: 2.4; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(241,209,141,.48)); }.control-label { font: 700 8px var(--mono); letter-spacing: .11em; paint-order: stroke; stroke: #07100d; stroke-width: 3px; }.control-label.ua { fill: #8ed9ff; }.control-label.ru { fill: #ff9b88; }
.admin-line { fill: none; stroke: rgba(208,220,211,.21); stroke-width: .6; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }.waterway { fill: none; stroke: rgba(99,189,221,.74); stroke-width: 1.4; vector-effect: non-scaling-stroke; }.water-label { fill: rgba(116,205,235,.72); font: italic 500 6px var(--mono); paint-order: stroke; stroke: #07100d; stroke-width: 2px; }
.strategic-route { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.strategic-route.routes { stroke: rgba(231,181,103,.78); stroke-width: 2; }.strategic-route.rail { stroke: rgba(113,174,232,.72); stroke-width: 1.5; stroke-dasharray: 5 4; }.route-label { fill: rgba(233,239,231,.78); font: 500 7px var(--mono); paint-order: stroke; stroke: #07100d; stroke-width: 3px; }.rail-label { fill: rgba(137,190,238,.8); }.critical-zone .zone-halo { fill: rgba(231,181,103,.06); stroke: var(--amber); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }.critical-zone .zone-core { fill: var(--amber); }.critical-zone.civic .zone-halo { stroke: var(--green); fill: rgba(121,214,160,.06); }.critical-zone.civic .zone-core { fill: var(--green); }.critical-zone.communications .zone-halo { stroke: var(--purple); fill: rgba(173,141,227,.06); }.critical-zone.communications .zone-core { fill: var(--purple); }
.traffic-corridor { fill: none; vector-effect: non-scaling-stroke; }.traffic-corridor.maritime { stroke: rgba(99,189,221,.78); stroke-width: 2.2; stroke-dasharray: 8 4; }.traffic-corridor.aviation { stroke: rgba(173,141,227,.7); stroke-width: 1.5; stroke-dasharray: 2 4; }.traffic-label { fill: rgba(210,222,214,.62); font: 500 6px var(--mono); paint-order: stroke; stroke: #07100d; stroke-width: 2px; }
.movement-arrow { fill: none; stroke-width: 2.4; stroke-dasharray: 6 3; vector-effect: non-scaling-stroke; opacity: .9; }.movement-arrow.ru { stroke: var(--red); }.movement-arrow.ua { stroke: var(--blue); }.movement-label { fill: rgba(233,239,231,.85); font: 600 7px var(--mono); paint-order: stroke; stroke: #07100d; stroke-width: 3px; }
.capability-uncertainty { fill: rgba(231,120,103,.055); stroke: rgba(231,120,103,.6); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }.capability-sector.ua .capability-uncertainty { fill: rgba(113,174,232,.055); stroke: rgba(113,174,232,.65); }.capability-symbol { fill: rgba(7,16,13,.92); stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; }.capability-sector.ua .capability-symbol { stroke: var(--blue); }.capability-sector text { fill: var(--ink); font: 600 6px var(--mono); paint-order: stroke; stroke: #07100d; stroke-width: 2px; }.capability-sector .capability-region { fill: var(--faint); font-size: 5px; }
.fog-layer { pointer-events: none; opacity: .62; transition: opacity .25s; }.fog-layer.hidden { opacity: 0; }
.event-marker { cursor: pointer; }.event-marker .marker-ring { fill: none; stroke-width: 1.2; opacity: .48; }.event-marker .marker-core { stroke: #07100d; stroke-width: 2; }.event-marker:hover .marker-ring, .event-marker.selected .marker-ring { stroke-width: 2.4; opacity: 1; }.event-marker.filtered { opacity: .08; pointer-events: none; }
.event-marker.ground .marker-core, .event-marker.ground .marker-ring { fill: var(--green); stroke: var(--green); }.event-marker.air .marker-core, .event-marker.air .marker-ring { fill: var(--red); stroke: var(--red); }.event-marker.diplomacy .marker-core, .event-marker.diplomacy .marker-ring { fill: var(--purple); stroke: var(--purple); }
.marker-label { fill: #eaf2f4; font: 600 8px var(--mono); paint-order: stroke; stroke: #05090c; stroke-width: 3px; stroke-linejoin: round; }
.map-legend { position: absolute; z-index: 3; left: 18px; bottom: 17px; display: flex; gap: 14px; padding: 8px 10px; background: rgba(7,16,13,.82); color: var(--muted); font: 500 8px var(--mono); }
.map-legend span { display: flex; gap: 5px; align-items: center; }.actor { width: 6px; height: 6px; display: inline-block; }.actor.ua { background: var(--blue); }.actor.ru { background: var(--red); }.halo { width: 9px; height: 9px; border: 1px solid var(--amber); border-radius: 50%; display: inline-block; }.route-key { width: 12px; height: 2px; background: var(--amber); display: inline-block; }.contested-key { width: 12px; height: 0; border-top: 2px dotted #f1d18d; display: inline-block; }
.map-disclaimer { position: absolute; z-index: 3; right: 18px; bottom: 17px; color: var(--faint); font: 500 7px var(--mono); }
.event-code { color: var(--faint); font: 500 8px var(--mono); letter-spacing: .1em; margin-right: 8px; }
.confidence-badge { padding: 4px 6px; font: 600 7px var(--mono); letter-spacing: .1em; border: 1px solid; }.confidence-badge.high { color: var(--green); border-color: rgba(121,214,160,.35); background: rgba(121,214,160,.06); }.confidence-badge.medium { color: var(--amber); border-color: rgba(231,181,103,.35); background: rgba(231,181,103,.06); }
.event-kind { margin: 24px 0 9px; color: var(--green); font: 600 8px var(--mono); letter-spacing: .14em; }
.intel-panel h2 { margin: 0; font-size: 23px; line-height: 1.2; letter-spacing: -.025em; }
.event-summary { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 13px 0 20px; }
.event-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 18px; }
.event-facts div { background: var(--panel); padding: 11px; }.event-facts dt { color: var(--faint); font: 500 7px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.event-facts dd { margin: 5px 0 0; font-size: 11px; }
.assessment { padding: 13px; background: rgba(121,214,160,.04); border-left: 2px solid var(--green); }.assessment span, .evidence-heading span { color: var(--green); font: 600 8px var(--mono); letter-spacing: .13em; }.assessment p { color: var(--muted); font-size: 10px; line-height: 1.6; margin: 7px 0 0; }
.evidence-block { margin-top: 20px; }.evidence-heading b { color: var(--faint); font: 500 8px var(--mono); }
.source-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }.source-num { width: 23px; height: 23px; display: grid; place-items: center; background: var(--panel-2); color: var(--faint); font: 500 8px var(--mono); }.source-item strong { display: block; font-size: 10px; }.source-item small { display: block; color: var(--faint); font-size: 8px; margin-top: 3px; }.source-item em { font: normal 7px var(--mono); color: var(--green); }
.full-button { width: 100%; border: 1px solid var(--line); background: var(--panel-2); padding: 11px; color: var(--muted); font-size: 9px; margin-top: 17px; cursor: pointer; display: flex; justify-content: space-between; }.full-button:hover { color: var(--acid); border-color: rgba(217,249,157,.3); }
.strategy-console { padding: 38px 32px 42px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,32,25,.42), rgba(7,16,13,.24)); }
.strategy-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 24px; }
.strategy-heading h2 { margin: 0; font-size: 27px; letter-spacing: -.03em; }.strategy-heading > div:first-child > p:last-child { max-width: 690px; color: var(--muted); font-size: 11px; line-height: 1.55; margin: 9px 0 0; }
.strategy-tabs { display: flex; border: 1px solid var(--line); padding: 3px; background: rgba(7,16,13,.7); }
.strategy-tabs button { border: 0; background: transparent; color: var(--faint); padding: 9px 12px; cursor: pointer; font: 600 8px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.strategy-tabs button.active { color: var(--acid); background: var(--panel-2); box-shadow: inset 0 -1px var(--acid); }
.strategy-view { animation: viewIn .25s ease; }.strategy-view[hidden] { display: none; } @keyframes viewIn { from { opacity: .3; transform: translateY(4px); } }
.era-card { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 22px; align-items: center; border: 1px solid var(--line); padding: 18px; background: rgba(11,23,18,.7); }
.era-index { min-height: 92px; display: grid; place-content: center; justify-items: center; border: 1px solid rgba(217,249,157,.25); background: radial-gradient(circle, rgba(217,249,157,.1), transparent 68%); }
.era-index span, .era-index small { color: var(--faint); font: 500 7px var(--mono); letter-spacing: .13em; text-transform: uppercase; }.era-index strong { color: var(--acid); font: 600 30px var(--mono); line-height: 1.15; }
.era-card h3, .advisor-brief h3 { margin: 0; font-size: 20px; }.era-card > div:last-child > p:last-child { color: var(--muted); margin: 8px 0 0; font-size: 10px; line-height: 1.55; max-width: 760px; }
.pressure-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 1px; background: var(--line); border: 1px solid var(--line); }
.pressure-grid article { background: var(--panel); padding: 16px; }.pressure-grid span, .section-label span, .recommendation span { display: block; color: var(--faint); font: 600 8px var(--mono); letter-spacing: .12em; }.pressure-grid strong { display: block; margin: 8px 0 11px; font-size: 13px; }.pressure-grid small { display: block; color: var(--faint); font-size: 8px; margin-top: 8px; }
.meter { height: 4px; background: #1d2b24; overflow: hidden; }.meter i { display: block; width: var(--level); height: 100%; background: var(--green); box-shadow: 0 0 12px rgba(121,214,160,.28); }.meter.amber i { background: var(--amber); }.meter.purple i { background: var(--purple); }.meter.blue i { background: var(--blue); }
.milestone-board, .advisor-board, .capacity-board { border: 1px solid var(--line); background: rgba(11,23,18,.64); }.milestone-board { margin-top: 14px; padding: 16px; }
.section-label { display: flex; justify-content: space-between; gap: 12px; align-items: center; }.section-label small { color: var(--faint); font: 500 7px var(--mono); }
.milestone-track { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; border-top: 1px solid var(--line); }.milestone-track article { position: relative; padding: 20px 14px 4px 0; }.milestone-track article::before { content: ""; position: absolute; width: 8px; height: 8px; top: -5px; left: 4px; border-radius: 50%; background: #304039; box-shadow: 0 0 0 5px var(--panel); }.milestone-track article.reached::before { background: var(--acid); }.milestone-track i { color: var(--faint); font: normal 8px var(--mono); }.milestone-track strong, .milestone-track span { display: block; }.milestone-track strong { font-size: 11px; margin: 5px 0; }.milestone-track span { color: var(--faint); font-size: 8px; }
.systems-layout { display: grid; grid-template-columns: 300px minmax(300px, 1fr) minmax(330px, .9fr); gap: 14px; }
.advisor-board, .capacity-board { padding: 16px; }.advisor-list { display: grid; gap: 5px; margin-top: 14px; }.advisor { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; width: 100%; border: 1px solid transparent; background: rgba(255,255,255,.018); color: var(--muted); padding: 9px; text-align: left; cursor: pointer; }.advisor:hover, .advisor.active { color: var(--ink); border-color: var(--line); background: var(--panel-2); }.advisor-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(231,120,103,.1); color: var(--red); font: normal 600 9px var(--mono); }.advisor-icon.humanitarian { color: var(--blue); background: rgba(113,174,232,.1); }.advisor-icon.infrastructure { color: var(--amber); background: rgba(231,181,103,.1); }.advisor-icon.diplomacy { color: var(--purple); background: rgba(173,141,227,.1); }.advisor span { display: grid; gap: 2px; }.advisor b { font-size: 10px; }.advisor small { color: var(--faint); font-size: 8px; }.advisor em { color: var(--amber); font: normal 600 7px var(--mono); }
.advisor-brief { border: 1px solid var(--line); padding: 22px; background: radial-gradient(circle at 100% 0, rgba(121,214,160,.08), transparent 42%), var(--panel); }.advisor-brief > p:not(.eyebrow) { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 12px 0 24px; }.recommendation { border-left: 2px solid var(--green); background: rgba(121,214,160,.04); padding: 12px; }.recommendation strong { display: block; margin-top: 6px; font-size: 10px; }
.capacity-board .section-label { margin-bottom: 17px; }.capacity-row { display: grid; grid-template-columns: 105px 1fr 52px; gap: 10px; align-items: center; margin: 12px 0; }.capacity-row span { color: var(--muted); font-size: 9px; }.capacity-row > div { height: 5px; background: #1d2b24; }.capacity-row i { display: block; width: var(--level); height: 100%; background: linear-gradient(90deg, var(--green), var(--acid)); }.capacity-row b { color: var(--faint); font: 500 7px var(--mono); text-align: right; text-transform: uppercase; }
.network-status { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 14px; background: var(--line); border: 1px solid var(--line); }.network-status article { background: var(--panel); padding: 13px; }.network-status span, .network-status strong, .network-status small { display: block; }.network-status span { color: var(--faint); font: 500 7px var(--mono); letter-spacing: .12em; }.network-status strong { margin: 6px 0 3px; font-size: 11px; }.network-status small { color: var(--faint); font-size: 8px; }
.model-disclaimer, .method-note { color: var(--faint); font-size: 8px; line-height: 1.55; }.model-disclaimer { margin: 15px 0 0; font-family: var(--mono); }.model-disclaimer strong, .method-note strong { color: var(--amber); }.method-note { margin: 20px 0 0; padding: 12px; border: 1px solid var(--line); }.method-note a { color: var(--green); text-underline-offset: 3px; }
.force-compare { padding: 38px 32px 42px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 82% 0, rgba(113,174,232,.06), transparent 34%), rgba(7,16,13,.36); }
.force-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 22px; }.force-heading h2 { margin: 0; font-size: 27px; letter-spacing: -.03em; }.force-heading > div:first-child > p:last-child { max-width: 760px; color: var(--muted); font-size: 11px; line-height: 1.55; margin: 9px 0 0; }
.force-tabs { display: flex; border: 1px solid var(--line); padding: 3px; background: rgba(7,16,13,.7); }.force-tabs button { border: 0; background: transparent; color: var(--faint); padding: 9px 12px; cursor: pointer; font: 600 8px var(--mono); text-transform: uppercase; letter-spacing: .07em; }.force-tabs button.active { color: var(--acid); background: var(--panel-2); box-shadow: inset 0 -1px var(--acid); }
.force-view[hidden] { display: none; }.force-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }.force-summary article { padding: 14px 16px; background: var(--panel); }.force-summary span, .force-summary strong, .force-summary small { display: block; }.force-summary span { color: var(--faint); font: 600 8px var(--mono); letter-spacing: .12em; }.force-summary strong { margin: 6px 0 2px; color: var(--acid); font-size: 18px; }.force-summary small { color: var(--faint); font-size: 8px; }
.comparison-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-top: 0; }.comparison-table { width: 100%; min-width: 760px; border-collapse: collapse; }.comparison-table th, .comparison-table td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; }.comparison-table thead th { color: var(--faint); background: rgba(255,255,255,.025); font: 600 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.comparison-table tbody th { width: 29%; font-size: 11px; font-weight: 600; }.comparison-table tbody th small { display: block; color: var(--faint); font-size: 7px; margin-top: 2px; }.comparison-table td { color: var(--muted); font: 500 11px var(--mono); }.comparison-table td:nth-child(2) { color: #f0a396; }.comparison-table td:nth-child(3) { color: #96c8f3; }.comparison-table td:nth-child(4) { min-width: 175px; }.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }.comparison-table .confidence-badge { font-style: normal; }
.ratio-bar { display: inline-block; width: 96px; height: 4px; margin-right: 10px; vertical-align: middle; background: #1d2b24; }.ratio-bar i { display: block; width: var(--ratio); height: 100%; background: linear-gradient(90deg, var(--amber), var(--red)); }.comparison-table td b { color: var(--ink); font-size: 9px; }.force-source { color: var(--faint); font: 500 8px/1.6 var(--mono); margin: 12px 0 0; }.force-source a { color: var(--green); text-underline-offset: 3px; }
.manpower-grid { display: grid; grid-template-columns: 240px 240px 1fr; gap: 12px; }.manpower-card, .mobilization-verdict { border: 1px solid var(--line); background: var(--panel); padding: 20px; }.manpower-card { border-top: 2px solid var(--red); }.manpower-card.ukraine { border-top-color: var(--blue); }.manpower-card > strong, .manpower-card > span { display: block; }.manpower-card > strong { font-size: 30px; letter-spacing: -.04em; }.manpower-card > span { color: var(--muted); font-size: 10px; margin-top: 3px; }.manpower-card > div { margin-top: 26px; padding-top: 13px; border-top: 1px solid var(--line); }.manpower-card > div b, .manpower-card > div small { display: block; }.manpower-card > div b { font-size: 12px; }.manpower-card > div small { color: var(--faint); font-size: 8px; margin-top: 4px; }.mobilization-verdict { border-left: 2px solid var(--amber); }.mobilization-verdict > span { color: var(--amber); font: 600 8px var(--mono); letter-spacing: .12em; }.mobilization-verdict h3 { margin: 9px 0; font-size: 18px; }.mobilization-verdict p { color: var(--muted); font-size: 10px; line-height: 1.65; margin: 0; }.manpower-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 12px; border: 1px solid var(--line); background: var(--line); }.manpower-notes p { margin: 0; padding: 13px; background: rgba(255,255,255,.018); color: var(--muted); font-size: 9px; line-height: 1.55; }.manpower-notes b { color: var(--ink); }
.drone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.drone-card { padding: 17px; border: 1px solid var(--line); border-top: 2px solid var(--red); background: var(--panel); }.drone-card.ukraine { border-top-color: var(--blue); }.drone-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.drone-card-head > span { color: var(--faint); font: 600 8px var(--mono); letter-spacing: .1em; }.drone-card-head em { font-style: normal; }.drone-card > strong { display: block; margin: 18px 0 7px; font-size: 25px; letter-spacing: -.04em; }.drone-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }.drone-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 9px; align-items: center; margin-top: 12px; }.drone-flow article { min-height: 82px; padding: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }.drone-flow article span, .drone-flow article b, .drone-flow article small { display: block; }.drone-flow article span { color: var(--green); font: 600 8px var(--mono); }.drone-flow article b { margin: 5px 0; font-size: 11px; }.drone-flow article small { color: var(--faint); font-size: 8px; line-height: 1.4; }.drone-flow > i { color: var(--faint); font-style: normal; }.drone-caveat { display: grid; grid-template-columns: 100px 1fr; gap: 14px; margin-top: 12px; padding: 13px; border-left: 2px solid var(--amber); background: rgba(231,181,103,.04); }.drone-caveat span { color: var(--amber); font: 600 8px var(--mono); letter-spacing: .12em; }.drone-caveat p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.kda-hero { display: grid; grid-template-columns: 230px 230px 1fr; gap: 1px; border: 1px solid var(--line); background: var(--line); }.kda-hero > * { margin: 0; padding: 17px; background: var(--panel); }.kda-hero div span, .kda-hero div strong, .kda-hero div small { display: block; }.kda-hero div span { color: var(--faint); font: 600 8px var(--mono); letter-spacing: .1em; }.kda-hero div strong { margin: 8px 0 3px; color: var(--acid); font: 600 26px var(--mono); }.kda-hero div small { color: var(--faint); font-size: 8px; }.kda-hero p { color: var(--muted); font-size: 9px; line-height: 1.6; }.kda-hero p b { color: var(--amber); }.loss-table-wrap { border-top: 0; }.loss-table td:nth-child(2) { color: #f0a396; }.loss-table td:nth-child(3) { color: #96c8f3; }.loss-table td:nth-child(4) b { color: var(--ink); }.loss-table .confidence-badge { font-style: normal; }.loss-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 10px; border: 1px solid var(--line); background: var(--line); }.loss-legend p { margin: 0; padding: 11px; color: var(--faint); background: rgba(255,255,255,.018); font-size: 8px; line-height: 1.5; }.loss-legend b { color: var(--muted); }
.timeline-section { padding: 35px 32px 45px; }
.timeline-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }.timeline-heading h2 { margin: 0; font-size: 22px; }.timeline-heading > p { color: var(--faint); font-size: 10px; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.timeline-card { border: 0; border-right: 1px solid var(--line); background: transparent; padding: 19px 17px; text-align: left; cursor: pointer; min-height: 138px; position: relative; }.timeline-card::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); position: absolute; top: -4px; left: 17px; box-shadow: 0 0 0 5px var(--bg); }.timeline-card.ground::before { background: var(--green); }.timeline-card.air::before { background: var(--red); }.timeline-card.diplomacy::before { background: var(--purple); }.timeline-card:hover, .timeline-card.selected { background: rgba(255,255,255,.025); }.timeline-card.filtered { display: none; }.timeline-card time { color: var(--faint); font: 500 8px var(--mono); }.timeline-card strong { display: block; font-size: 11px; line-height: 1.45; margin: 10px 0 7px; }.timeline-card span { color: var(--faint); font-size: 9px; }
footer { min-height: 90px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; color: var(--faint); font-size: 9px; }.brand-mark.small { width: 22px; height: 22px; font-size: 11px; display: inline-grid; margin-right: 9px; } footer > div { display: flex; align-items: center; color: var(--muted); letter-spacing: .1em; } footer button { border: 0; color: var(--muted); background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
dialog { width: min(760px, calc(100% - 32px)); color: var(--ink); background: #0c1813; border: 1px solid rgba(217,249,157,.2); padding: 35px; box-shadow: 0 30px 100px #000; } dialog::backdrop { background: rgba(1,6,4,.82); backdrop-filter: blur(5px); }.dialog-close { position: absolute; right: 17px; top: 15px; border: 0; background: none; color: var(--muted); font-size: 24px; cursor: pointer; } dialog h2 { font-size: 30px; margin: 0 0 25px; }.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }.dialog-grid article { background: var(--panel); padding: 18px; }.dialog-grid b { color: var(--green); font: 600 9px var(--mono); }.dialog-grid h3 { margin: 9px 0 5px; font-size: 14px; }.dialog-grid p { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 0; }.confidence-scale { display: flex; gap: 18px; margin-top: 22px; color: var(--muted); font-size: 8px; }.confidence-scale span { display: flex; gap: 6px; align-items: center; }
@media (max-width: 1150px) { .workspace { grid-template-columns: 170px 1fr 310px; }.briefing { grid-template-columns: 1fr; gap: 24px; }.status-strip { max-width: 750px; }.map-disclaimer { display: none; }.systems-layout { grid-template-columns: 280px 1fr; }.capacity-board { grid-column: 1 / 3; } }
@media (max-width: 900px) { .workspace { grid-template-columns: 160px 1fr; }.intel-panel { grid-column: 1 / 3; border-left: 0; border-top: 1px solid var(--line); max-height: none; }.timeline { grid-template-columns: repeat(2, 1fr); }.timeline-card { border-bottom: 1px solid var(--line); }.briefing { padding-top: 28px; }.timeline-heading > p { display: none; }.strategy-heading, .force-heading { align-items: start; flex-direction: column; }.force-tabs { flex-wrap: wrap; }.pressure-grid { grid-template-columns: 1fr 1fr; }.systems-layout { grid-template-columns: 1fr; }.capacity-board { grid-column: auto; }.network-status { grid-template-columns: repeat(3, 1fr); }.manpower-grid, .drone-grid { grid-template-columns: 1fr 1fr; }.mobilization-verdict { grid-column: 1 / 3; }.kda-hero { grid-template-columns: 1fr 1fr; }.kda-hero p { grid-column: 1 / 3; }.drone-flow { grid-template-columns: 1fr 1fr; }.drone-flow > i { display: none; } }
@media (max-width: 620px) { .topbar { height: 62px; padding: 0 16px; }.brand small, .ghost-button { display: none; }.briefing { padding: 24px 16px; }.status-strip { grid-template-columns: 1fr 1fr; }.status-strip article:nth-child(2) { border-right: 0; }.status-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.workspace { display: flex; flex-direction: column; }.control-panel { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; overflow: visible; }.filter-group { grid-template-columns: 1fr 1fr; }.map-layer-group { grid-template-columns: 1fr 1fr; }.map-layer-group .eyebrow { grid-column: 1 / 3; }.confidence-key, .analyst-note { display: none; }.map-card { min-height: 500px; }.map-toolbar-status > span { display: none; }.intel-panel { border-top: 1px solid var(--line); }.strategy-console, .force-compare { padding: 30px 16px; }.strategy-tabs, .force-tabs { width: 100%; }.strategy-tabs button, .force-tabs button { flex: 1 1 45%; }.era-card { grid-template-columns: 1fr; }.era-index { min-height: 72px; }.pressure-grid, .milestone-track, .force-summary, .manpower-grid, .manpower-notes, .drone-grid, .drone-flow, .kda-hero, .loss-legend { grid-template-columns: 1fr; }.milestone-track article:nth-child(n+3) { margin-top: 12px; }.network-status { grid-template-columns: 1fr 1fr; }.mobilization-verdict, .kda-hero p { grid-column: auto; }.drone-caveat { grid-template-columns: 1fr; }.timeline-section { padding: 30px 16px; }.timeline { grid-template-columns: 1fr; }.timeline-card { min-height: 105px; }.map-legend { flex-wrap: wrap; right: 18px; }.timeline-heading { align-items: start; }.timeline-heading h2 { font-size: 19px; } footer { padding: 24px 16px; display: grid; gap: 14px; } footer button { text-align: left; }.dialog-grid { grid-template-columns: 1fr; }.confidence-scale { display: grid; } }