:root{
  --bg:#0d0f0e; --panel:#15191a; --panel2:#0c100f; --line:#23292b;
  --ink:#e9ede9; --dim:#7e8a85; --amber:#ffb000; --good:#3ad07a; --bad:#ff5a47;
  --blue:#5bc0ff; --orange:#ff9d5b; --grid:#1b2123;
  --role:#ffb000;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:'Oswald',sans-serif;
  background-image:radial-gradient(circle at 50% -8%,#16201d 0%,#0d0f0e 55%);
  padding:14px;max-width:520px;margin:0 auto;overscroll-behavior:none;
}
h1,h2,h3,h4{font-weight:600}
.hide{display:none!important}

/* header */
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.brand{font-weight:700;letter-spacing:.13em;font-size:13px;text-transform:uppercase;white-space:nowrap}
.brand b{color:var(--amber)}
.role-pill{font-family:'JetBrains Mono',monospace;font-size:10px;color:#1a1300;background:var(--role);
  border-radius:99px;padding:4px 10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.status{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);
  border:1px solid var(--line);border-radius:99px;padding:4px 9px;display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim)}
.dot.live{background:var(--good);box-shadow:0 0 8px var(--good);animation:pulse 1.4s infinite}
.dot.sim{background:var(--amber);box-shadow:0 0 8px var(--amber)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* selectors row */
.bar{display:flex;gap:8px;margin-bottom:12px}
.bar select{flex:1;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:10px;font-family:'Oswald';font-size:13px}
.bar select:focus{outline:none;border-color:var(--amber)}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.card h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.card h3 .accent{color:var(--amber)}

/* readout */
.readout{background:linear-gradient(180deg,#171c1d,#101413);border:1px solid var(--line);border-radius:18px;
  padding:20px 18px 16px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 #ffffff0a,0 20px 40px -22px #000;margin-bottom:12px}
.readout::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px);
  background-size:100% 22px;opacity:.5;pointer-events:none}
.lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);position:relative}
.station{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:clamp(46px,15vw,78px);line-height:.95;
  color:var(--amber);text-shadow:0 0 28px #ffb00040;position:relative;margin-top:4px}
.station .small{font-size:.5em;color:#ffcf66}
.station.idle{color:#3a4042;text-shadow:none}
.sub{display:flex;gap:10px;margin-top:14px;position:relative}
.cell{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.cell .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cell .v{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:20px;margin-top:3px}
.v.L{color:var(--blue)}.v.R{color:var(--orange)}
.acc-good{color:var(--good)}.acc-mid{color:var(--amber)}.acc-bad{color:var(--bad)}

/* buttons */
.row{display:flex;gap:10px}
.btn{flex:1;font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:13px;cursor:pointer;
  transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:scale(.98)}
.btn.go{background:var(--amber);color:#1a1300;border-color:var(--amber)}
.btn.go.on{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.ghost{background:transparent}
.btn.small{padding:9px;font-size:12px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.wide{width:100%;margin-top:10px}

/* inputs */
.field{margin-bottom:12px}
.field label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;color:var(--ink);padding:10px 12px;font-family:'Oswald';font-size:14px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber)}
.field .mono{font-family:'JetBrains Mono',monospace;font-size:12px}
.two{display:flex;gap:10px}.two>*{flex:1}
.check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.check input{width:auto}

/* filezone */
.filezone{border:1.5px dashed var(--line);border-radius:13px;padding:18px;text-align:center;cursor:pointer;transition:.15s}
.filezone:hover{border-color:var(--amber);background:#ffb00008}
.filezone .big{font-weight:600;letter-spacing:.05em}
.filezone .hint{font-size:11px;color:var(--dim);margin-top:5px;font-family:'JetBrains Mono',monospace}
input[type=file]{display:none}

/* sim */
.slbl{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);font-family:'JetBrains Mono',monospace;margin:14px 0 6px}
input[type=range]{width:100%;-webkit-appearance:none;height:4px;border-radius:4px;background:var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--amber);cursor:pointer;box-shadow:0 0 0 4px #ffb00022}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--amber)}

/* map */
svg.mini{width:100%;height:150px;display:block;background:#0a0d0c;border:1px solid var(--line);border-radius:11px}

/* logs / lists */
.log{border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-top:9px;background:var(--panel2)}
.log .top{display:flex;justify-content:space-between;align-items:baseline}
.log .sta{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--amber);font-size:16px}
.log .tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.log .note{font-size:13px;color:var(--ink);margin-top:5px}
.log .meta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);margin-top:5px}
.log img{margin-top:8px;border-radius:8px;max-width:100%;border:1px solid var(--line)}
.empty{color:var(--dim);font-size:12px;text-align:center;padding:14px;font-family:'JetBrains Mono',monospace}

.note-txt{font-size:11px;color:var(--dim);line-height:1.5;font-family:'JetBrains Mono',monospace}
.err{color:var(--bad);font-size:11px;font-family:'JetBrains Mono',monospace;min-height:14px;margin-top:8px}
.ok{color:var(--good)}
.warns{color:var(--orange);font-size:11px;font-family:'JetBrains Mono',monospace;margin-top:6px}
.pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--panel2);
  border:1px solid var(--line);border-radius:7px;padding:4px 8px;margin:2px 4px 2px 0;color:var(--dim)}
.pill b{color:var(--ink)}

/* layer legend (design overlays) */
.legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lchip{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 8px;color:var(--ink);
  cursor:pointer;transition:.12s;letter-spacing:.02em}
.lchip:active{transform:scale(.97)}
.lchip.off{opacity:.38;text-decoration:line-through}
.lchip.lc-cl{cursor:default;border-style:dashed}
.lchip .sw{width:11px;height:3px;border-radius:2px;display:inline-block;flex:none}

/* go-to-station compass */
.navbox{display:flex;gap:14px;align-items:center;margin-top:12px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}
.rose{width:74px;height:74px;flex:none}
.navnums{flex:1;display:flex;flex-direction:column;gap:5px}
.navrow{display:flex;justify-content:space-between;align-items:baseline;font-family:'JetBrains Mono',monospace}
.navrow .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.navrow b{font-size:15px;color:var(--ink)}
#navDist,#navAlong{color:var(--amber)}

/* plan-sheet georeference */
.planwrap{position:relative;margin-top:10px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#0a0d0c;line-height:0}
.planwrap img{width:100%;display:block;cursor:crosshair}
.planov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cprow{display:flex;gap:7px;align-items:center;margin-top:8px}
.cprow .cplab{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--amber);width:32px;flex:none}
.cprow .cpsta{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:8px 10px;font-size:13px}
.cprow .cpoff{width:56px;flex:none;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:8px;font-size:13px;text-align:center}
.cprow .cptap{flex:none;width:130px}

/* multi-format readout strip */
.fmtstrip{display:flex;gap:10px;align-items:center;margin-top:10px;position:relative}
.fmtcell{flex:1;display:flex;flex-direction:column;gap:2px}
.fmtcell .fk{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fmtcell .fv{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink)}
.fmtcopy{flex:none;width:78px}

/* takeoff: tap-to-measure cursor */
svg.mini.tapping{cursor:crosshair}

/* issues: dim helper text */
.dim{color:var(--dim)}