:root{
  --bg:#050806; --bg2:#080d09; --pn:#0a100b; --pn2:#0e160f; --ln:#1b281d; --ln2:#2b4130;
  --tx:#c4d4c6; --dim:#70897a; --hi:#eef7ef;
  --ac:#7dff9a; --ac2:#3fa85a; --am:#ffb000; --rd:#ff4d3d; --cy:#59d0ff; --pu:#c09bff;
  --mono:"Consolas","Cascadia Mono","DejaVu Sans Mono",monospace; --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
:root[data-theme="light"]{
  --bg:#eef2f4; --bg2:#e4eaed; --pn:#ffffff; --pn2:#f3f7f8; --ln:#cfd9dd; --ln2:#aab9bf; --tx:#27363b; --dim:#62777e; --hi:#0b1a1f;
  --ac:#0b8f63; --ac2:#0a7a55; --am:#b86e00; --rd:#c62828; --cy:#0a78a8; --pu:#6a45c8;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--tx);font:12px/1.4 var(--sans);overflow:hidden}
button,select,input{font:inherit;color:inherit}
.mono{font-family:var(--mono)}
/* ---------- shell */
#app{display:grid;grid-template-rows:40px 1fr 0;height:100vh}
#app.replay{grid-template-rows:40px 1fr 64px}
#banner{display:flex;align-items:center;justify-content:center;gap:18px;background:#0b1209;border-bottom:1px solid var(--ln);color:var(--am);font:600 9px var(--mono);letter-spacing:2.6px;white-space:nowrap;overflow:hidden}
#banner span.d{color:var(--dim)}
#top{display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--bg2);border-bottom:1px solid var(--ln);white-space:nowrap;overflow:hidden}
.logo{font:700 15px var(--mono);letter-spacing:6px;color:var(--ac);text-shadow:0 0 8px rgba(125,255,154,.35)}
.tag{padding:2px 8px;border:1px solid var(--ln2);font:11px var(--mono);color:var(--dim);border-radius:2px}
.tag.on{color:var(--ac);border-color:var(--ac2)} .tag.warn{color:var(--am);border-color:#7a5516} .tag.bad{color:var(--rd);border-color:#8a2c2c}
.sp{flex:1}
.tabs{display:flex;gap:2px;margin-left:8px}
.tabs button{padding:5px 14px;background:transparent;border:1px solid var(--ln);border-bottom:2px solid transparent;cursor:pointer;color:var(--dim);letter-spacing:1.5px;font:600 11px var(--mono)}
.tabs button.act{color:var(--ac);border-bottom-color:var(--ac);background:var(--pn)}
.tabs button:disabled{opacity:.35;cursor:not-allowed}
a.btn,.btn{display:inline-block;padding:5px 12px;border:1px solid var(--ln2);background:var(--pn);cursor:pointer;color:var(--tx);text-decoration:none;font:600 11px var(--mono);letter-spacing:1.2px;border-radius:2px}
.btn:hover{border-color:var(--ac);color:var(--ac)} .btn.pri{border-color:var(--ac);color:var(--ac)} .btn.pri:hover{background:var(--ac);color:#04110c}
.btn.dng{border-color:#8a2c2c;color:var(--rd)} .btn:disabled{opacity:.4;cursor:not-allowed}
#main{display:grid;grid-template-columns:var(--lw,330px) 1fr var(--rw,350px);min-height:0;transition:grid-template-columns .18s ease}
body.hideL{--lw:0px} body.hideR{--rw:0px}
body.hideL #left,body.hideR #right{visibility:hidden}
.side{background:var(--pn);border-right:1px solid var(--ln);overflow-y:auto;overflow-x:hidden;min-height:0;min-width:0}
.side.right{border-right:none;border-left:1px solid var(--ln)}
.side::-webkit-scrollbar{width:8px}.side::-webkit-scrollbar-thumb{background:var(--ln2)}
.sec{border-bottom:1px solid var(--ln)}
.sec>h4{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;font:600 10px var(--mono);letter-spacing:2.2px;color:var(--dim);background:var(--pn2);cursor:default;border-left:3px solid var(--ac2)}
.sec>h4 .r{color:var(--ac);letter-spacing:1px}
.sec .body{padding:8px 12px}
.row{display:flex;justify-content:space-between;gap:10px;padding:2px 0;border-bottom:1px dotted var(--ln)}
.row:last-child{border-bottom:none}
.row span:first-child{color:var(--dim)} .row b{font:500 12px var(--mono);color:var(--hi);text-align:right}
.row b.g{color:var(--ac)} .row b.a{color:var(--am)} .row b.r{color:var(--rd)} .row b.c{color:var(--cy)}
label.f{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0;color:var(--dim)}
input[type=text],input[type=number],select{background:var(--bg);border:1px solid var(--ln2);padding:3px 6px;color:var(--hi);font:12px var(--mono);border-radius:2px;min-width:0}
input[type=number]{width:86px}
input[type=range]{accent-color:var(--ac)}
.chk{display:flex;align-items:center;gap:6px;color:var(--tx);padding:2px 0;cursor:pointer}
.chk input{accent-color:var(--ac)}
.btnrow{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}
.hint{color:var(--dim);font-size:11px;padding:3px 0}
.list .item{display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px dotted var(--ln)}
.list .item .nm{flex:1;overflow:hidden;text-overflow:ellipsis}
.list .item button{background:none;border:none;color:var(--dim);cursor:pointer;font:12px var(--mono)} .list .item button:hover{color:var(--rd)}
.badge{display:inline-block;padding:1px 7px;font:600 10px var(--mono);letter-spacing:1px;border:1px solid var(--ln2);border-radius:2px}
.badge.g{color:var(--ac);border-color:var(--ac2)} .badge.a{color:var(--am);border-color:#7a5516} .badge.r{color:var(--rd);border-color:#8a2c2c} .badge.d{color:var(--dim)}
/* ---------- stage */
#stage{position:relative;min-width:0;min-height:0;background:#000}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;pointer-events:none;font:11px var(--mono);color:var(--ac)}
.panel-f{position:absolute;background:rgba(6,10,12,.86);border:1px solid var(--ln2);padding:6px 9px;border-radius:2px}
#viewbar{position:absolute;left:34px;top:10px;display:flex;gap:4px;pointer-events:auto;flex-wrap:wrap;max-width:calc(100% - 300px)}
#viewbar button{padding:4px 10px;background:rgba(6,10,12,.86);border:1px solid var(--ln2);cursor:pointer;font:600 10px var(--mono);letter-spacing:1.4px;color:var(--dim)}
#viewbar button.act{color:var(--ac);border-color:var(--ac)}
#layers-wrap{position:absolute;right:34px;top:10px;pointer-events:auto;text-align:right;z-index:3}
#layers{display:none;margin-top:4px;text-align:left;min-width:230px}#layers.open{display:block}
#layers .chk{font:11px var(--mono);color:var(--tx)}
.vbtn{padding:4px 10px;background:rgba(6,10,12,.86);border:1px solid var(--ln2);cursor:pointer;font:600 10px var(--mono);letter-spacing:1.4px;color:var(--dim)}.vbtn:hover,.vbtn.act{color:var(--ac);border-color:var(--ac)}
#coords{left:34px;bottom:10px} #compass{right:34px;bottom:10px;text-align:right}
body.replay-mode #coords{display:none}
#pip{position:absolute;left:34px;bottom:12px;width:300px;height:190px;border:1px solid var(--ac2);display:none;z-index:3;box-shadow:0 2px 14px #000a}
.pip-bar{position:absolute;left:0;right:0;top:0;height:20px;display:flex;align-items:center;gap:4px;padding:0 4px;background:linear-gradient(#000c,#0000);pointer-events:auto;z-index:4}
.pip-bar span{color:var(--ac);font:600 10px var(--mono);letter-spacing:1.3px}.pip-bar button{background:#000a;border:1px solid var(--ln2);color:var(--tx);font:600 9px var(--mono);padding:1px 6px;cursor:pointer}.pip-bar button:hover{color:var(--ac);border-color:var(--ac)}
#eo-ov{position:absolute;pointer-events:none;z-index:2;display:none}
#hudstrip{left:50%;bottom:14px;transform:translateX(-50%);display:none;gap:16px;font:600 11px var(--mono);white-space:nowrap;color:var(--tx);z-index:2;pointer-events:none}
#hudstrip b{color:var(--ac);font-weight:600}#hudstrip.a b{color:var(--am)}
.edge{position:absolute;left:0;top:50%;width:18px;height:54px;margin-top:-27px;background:rgba(6,10,12,.8);border:1px solid var(--ln2);border-left:none;color:var(--dim);cursor:pointer;z-index:3;font-size:14px}.edge.r{left:auto;right:0;border:1px solid var(--ln2);border-right:none}.edge:hover{color:var(--ac)}
.seg{display:flex}.seg button{padding:4px 10px;background:var(--pn);border:1px solid var(--ln2);margin-left:-1px;cursor:pointer;color:var(--dim);font:600 11px var(--mono)}.seg button:hover,.seg button.act{color:var(--ac);border-color:var(--ac);z-index:1}
#toast{position:absolute;left:50%;top:50px;transform:translateX(-50%);display:none;padding:8px 14px;background:rgba(6,10,12,.94);border:1px solid var(--am);color:var(--am);font:12px var(--mono);z-index:5;max-width:70%}
#busy{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:6}
#busy .box{background:var(--pn);border:1px solid var(--ac);padding:18px 24px;min-width:340px;text-align:center;font:12px var(--mono)}
#busy .bar{height:6px;background:var(--bg);margin-top:10px;border:1px solid var(--ln2)} #busy .bar i{display:block;height:100%;width:0;background:var(--ac)}
/* ---------- replay timeline */
#timeline{display:none;background:var(--bg2);border-top:1px solid var(--ln);padding:6px 12px;gap:12px;align-items:center}
#app.replay #timeline{display:flex}
#tl-wrap{position:relative;flex:1;height:34px}
#tl-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.spd button{padding:3px 7px;background:var(--pn);border:1px solid var(--ln);cursor:pointer;font:600 10px var(--mono);color:var(--dim)} .spd button.act{color:var(--ac);border-color:var(--ac)}
canvas.p{width:100%;display:block;background:#05090b}
.evlist{max-height:220px;overflow-y:auto}
.evlist .ev{display:flex;gap:8px;padding:3px 12px;border-bottom:1px dotted var(--ln);cursor:pointer;font-size:11px}
.evlist .ev:hover{background:var(--pn2)} .evlist .ev em{font:normal 11px var(--mono);color:var(--dim);width:52px;flex:none}
.evlist .ev i{font:600 9px var(--mono);letter-spacing:1px;width:60px;flex:none;color:var(--ac)}
.evlist .ev i.AVOID,.evlist .ev i.FAULT,.evlist .ev i.ENERGY{color:var(--am)} .evlist .ev i.CRASH{color:var(--rd)} .evlist .ev i.DETECT{color:var(--cy)} .evlist .ev i.RECON{color:var(--pu)}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 12px;font:10px var(--mono);color:var(--dim)}
.legend span::before{content:"";display:inline-block;width:14px;height:3px;margin-right:5px;vertical-align:middle;background:var(--c)}
table.t{width:100%;border-collapse:collapse;font:11px var(--mono)} table.t th{color:var(--dim);font-weight:600;text-align:left;padding:3px 6px;border-bottom:1px solid var(--ln2)}
table.t td{padding:3px 6px;border-bottom:1px dotted var(--ln)}


/* ---------- guided planning steps */
.steps{display:flex;border-bottom:1px solid var(--ln);background:var(--pn2);position:sticky;top:0;z-index:5}
.steps button{flex:1;padding:8px 2px 7px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:var(--dim);font:600 10px var(--mono);letter-spacing:.8px}
.steps button i{display:block;font:600 14px var(--mono);font-style:normal;margin-bottom:1px}.steps button.done i{color:var(--ac)}.steps button.act{color:var(--ac);border-bottom-color:var(--ac);background:var(--pn)}
.stepbody{padding:12px 14px 90px}.stepbody h3{font:600 15px var(--sans);color:var(--hi);margin-bottom:3px}.stepbody p.lead{color:var(--dim);margin-bottom:10px;font-size:12px}
.card2{background:var(--pn2);border:1px solid var(--ln);padding:10px 12px;margin:10px 0;border-radius:3px}
.bigbtn{display:block;width:100%;padding:10px;margin:6px 0;border:1px solid var(--ac2);background:transparent;color:var(--ac);cursor:pointer;font:600 12px var(--mono);letter-spacing:1.5px;border-radius:3px}.bigbtn:hover{background:var(--ac);color:#04110c}
.bigbtn.sec2{border-color:var(--ln2);color:var(--tx)}.bigbtn.sec2:hover{background:var(--pn2);color:var(--ac);border-color:var(--ac)}.bigbtn.ok{background:rgba(55,232,160,.12)}
.actionbar{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 12px;background:var(--bg2);border-top:1px solid var(--ln);z-index:6}.actionbar .btn{flex:1;text-align:center;padding:9px 6px;font-size:12px}
.nextrow{display:flex;justify-content:space-between;margin-top:14px}
details.adv{margin:10px 0;border:1px solid var(--ln);border-radius:3px}details.adv summary{cursor:pointer;padding:7px 10px;color:var(--dim);font:600 11px var(--mono);letter-spacing:1px;background:var(--pn2)}details.adv[open] summary{color:var(--ac)}details.adv>div{padding:6px 10px}
.check{display:flex;gap:8px;align-items:center;padding:4px 0}.check i{font-style:normal;width:18px;text-align:center;color:var(--dim)}.check.ok i{color:var(--ac)}
/* ---------- guided tour */
#tour{position:fixed;inset:0;z-index:50;display:none}#tour.on{display:block}
#tour .spot{position:absolute;border-radius:4px;box-shadow:0 0 0 9999px rgba(2,6,8,.72);border:2px solid var(--ac);transition:all .22s ease;pointer-events:none}
#tour .tip{position:absolute;width:340px;background:var(--pn);border:1px solid var(--ac);padding:14px 16px;border-radius:4px;box-shadow:0 8px 30px #000b}
#tour .tip h4{font:600 14px var(--sans);color:var(--hi);margin-bottom:6px}#tour .tip p{color:var(--tx);line-height:1.5;margin-bottom:6px}#tour .tip .kb{font:11px var(--mono);color:var(--dim)}
#tour .tip .nav{display:flex;align-items:center;gap:8px;margin-top:10px}#tour .dots{flex:1;font:10px var(--mono);color:var(--dim)}
.bigbtn.pri{background:var(--ac);color:#04110c}
.btn.pri,.bigbtn{white-space:normal}

/* ---------- tactical look */
.sec,.card,.card2,.kpi{position:relative}
.panel-f::before,.panel-f::after,.card2::before,.card2::after{content:"";position:absolute;width:7px;height:7px;border:1px solid var(--ac2);pointer-events:none;opacity:.8}
.panel-f::before,.card2::before{left:-1px;top:-1px;border-right:none;border-bottom:none}.panel-f::after,.card2::after{right:-1px;bottom:-1px;border-left:none;border-top:none}
.btn,.bigbtn,.vbtn,.seg button,.tabs button{border-radius:0}
.btn:hover,.bigbtn:hover{box-shadow:0 0 0 1px var(--ac) inset}
.annun{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:6px 0 4px}
.annun div{padding:4px 2px;text-align:center;font:600 9px var(--mono);letter-spacing:1px;border:1px solid var(--ln2);color:#3b4d3f;background:#070b08}
.annun div.g{color:#04110a;background:var(--ac2);border-color:var(--ac)}.annun div.a{color:#1a1100;background:var(--am);border-color:var(--am)}.annun div.r{color:#fff;background:var(--rd);border-color:var(--rd);animation:blink 0.8s steps(2) infinite}.annun div.p{color:#12071f;background:var(--pu);border-color:var(--pu)}.annun div.c{color:#001018;background:var(--cy);border-color:var(--cy)}
@keyframes blink{50%{opacity:.45}}
.seg2{display:flex;gap:0;margin-bottom:6px}.seg2 button{flex:1;padding:4px;background:var(--bg);border:1px solid var(--ln2);margin-left:-1px;color:var(--dim);font:600 10px var(--mono);cursor:pointer}.seg2 button.act{color:var(--ac);border-color:var(--ac);z-index:1}

/* map labels, grid, search and coordinate pin */
#maplabels{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.ml{position:absolute;left:0;top:0;white-space:nowrap;font:600 11px var(--mono);color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,0 1px 4px #000;will-change:transform}
.ml i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #000}
.ml span{position:absolute;left:8px;top:-8px}
.ml.water{color:#7fd4ff}.ml.water i{background:#7fd4ff}.ml.pass{color:#ffc857}.ml.pass i{background:#ffc857;border-radius:0;transform:rotate(45deg)}
.ml.peak{color:#e9e2d0}.ml.peak i{background:none;border:solid transparent;border-width:0 4px 7px;border-bottom-color:#e9e2d0;border-radius:0;width:0;height:0;box-shadow:none;top:-5px;left:-4px}
.ml.fort{color:#ff9d7a}.ml.fort i{background:#ff9d7a;border-radius:0}
.ml.place span{font-size:12px;letter-spacing:.3px}
.ml.grat{font-weight:500;font-size:10px;color:#dfe9e4;opacity:.8}.ml.grat i{display:none}.ml.grat span{left:3px;top:2px}
.ml.pin i{width:10px;height:10px;left:-5px;top:-5px;background:var(--am);border:2px solid #000;box-shadow:0 0 0 2px var(--am)}
.ml.pin span{color:var(--am);left:12px;top:-8px}
#maptools{position:absolute;left:34px;top:44px;display:flex;gap:4px;z-index:3;pointer-events:auto}
#maptools .vbtn.act{color:var(--ac);border-color:var(--ac)}
#pincard{display:none;position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:3;pointer-events:auto;min-width:290px;text-align:center}
#pincard .pc-t{font-size:9px;letter-spacing:1.6px;color:var(--dim)}#pincard .pc-c{font-size:17px;color:var(--ac);margin:3px 0;letter-spacing:.5px}
#pincard .pc-e{font-size:10px;color:var(--dim)}#pincard .pc-r{display:flex;gap:4px;justify-content:center;margin-top:7px;flex-wrap:wrap}

.ml.city span{font-size:13px;font-weight:700;letter-spacing:.6px}.ml.city i{width:8px;height:8px;left:-4px;top:-4px}
.ml.bline{font-size:9px;letter-spacing:1.6px;font-weight:700;color:#ffd23f}.ml.bline.loc{color:#4ce0ff}.ml.bline i{display:none}.ml.bline span{left:-60px;top:-14px;white-space:nowrap}
.ml.river{color:#8fd8ff;font-style:italic;font-weight:500}.ml.river i{display:none}.ml.river span{left:-20px;top:-6px}
details.files{border-bottom:1px solid var(--ln);background:var(--pn2)}details.files summary{cursor:pointer;padding:7px 10px;font:600 10px var(--mono);letter-spacing:1.4px;color:var(--ac)}
details.files>div{padding:4px 10px 10px}.fsel{width:100%;margin-bottom:6px;padding:5px;background:var(--bg2);color:var(--tx);border:1px solid var(--ln2)}

#t-region select{background:transparent;border:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;outline:none;max-width:260px}#t-region select option{background:var(--bg2);color:var(--tx)}
#navctl{position:absolute;right:10px;bottom:62px;display:flex;flex-direction:column;gap:3px;z-index:3;pointer-events:auto}
#navctl .row{display:flex;gap:3px}#navctl button{width:30px;height:26px;padding:0;background:rgba(6,10,12,.86);border:1px solid var(--ln2);color:var(--ac);font:600 13px var(--mono);cursor:pointer}#navctl button:hover{border-color:var(--ac)}
#navctl .dial{width:93px;text-align:center;font:600 9px var(--mono);letter-spacing:1.4px;color:var(--dim)}

.ml.base{color:#ffd23f;font-weight:700;letter-spacing:.5px}.ml.base i{border-radius:0;background:#ffd23f;transform:rotate(45deg)}.ml.base.airfield{color:#7fe0ff}.ml.base.airfield i{background:#7fe0ff}.ml.base.fort{color:#ff9d7a}.ml.base.fort i{background:#ff9d7a}
details.files summary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#scalebar{position:absolute;left:12px;bottom:46px;display:flex;align-items:center;gap:6px;z-index:2;pointer-events:none;font:600 10px var(--mono);color:var(--tx);text-shadow:0 0 3px #000}
#scalebar i{display:block;height:6px;border:1px solid var(--tx);border-top:none;box-shadow:0 1px 3px #000}
#pincard .pc-c2{font-size:11px;color:var(--am);margin-bottom:2px;letter-spacing:1px}
:root[data-theme="night"]{
  --bg:#070000; --bg2:#0c0202; --pn:#100303; --pn2:#160505; --ln:#2a0b0b; --ln2:#4a1414;
  --tx:#d98a80; --dim:#8a4a44; --hi:#ffc9c0; --ac:#ff6a55; --ac2:#c23a2a; --am:#ff9a6a; --rd:#ff3030; --cy:#ff8a7a; --pu:#d9708a;
}
:root[data-theme="night"] #gl{filter:saturate(.25) sepia(1) hue-rotate(-50deg) brightness(.75)}
:root[data-theme="night"] #pip canvas,:root[data-theme="night"] #eo-ov{filter:saturate(.3) sepia(1) hue-rotate(-50deg) brightness(.8)}

@media (max-width:1500px){#t-gcs{display:none}#t-nav{display:none}}
@media (max-width:1280px){#t-clock{display:none}#b-analytics{padding:0 8px}}
@media (max-width:1250px){#main{grid-template-columns:var(--lw,290px) 1fr var(--rw,270px)}}
@media (max-width:900px){#main{grid-template-columns:var(--lw,260px) 1fr var(--rw,0px)} body:not(.showR) #right{visibility:hidden} #t-gcs,#b-focus{display:none}}