[hidden]{display:none!important}
:root{
  --panel:#16202C; --panel2:#1F2C3B; --line:#2E3E52;
  --text:#EEF2F6; --dim:#8FA0B3;
  --mag:#E23FC0; --amber:#F2B233; --red:#E5484D; --green:#3FB950; --blue:#4F8FE8;
  --font:"sans-serif-condensed","Roboto Condensed","Arial Narrow",Roboto,sans-serif;
  --top: env(safe-area-inset-top,0px); --bot: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--panel);color:var(--text);font-family:var(--font);overflow:hidden;user-select:none}
button{font-family:var(--font);color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:10px;font-size:16px;cursor:pointer}
button:active{background:#2A3A4E}
button.on{border-color:var(--mag);color:#fff}

#strip{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--panel);padding-top:var(--top);border-bottom:1px solid var(--line)}
#strip .row{display:flex}
#strip .cell{flex:1;padding:4px 8px 5px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
#strip .cell:last-child{border-right:0}
#strip .k{font-size:12px;color:var(--dim);letter-spacing:.02em}
#strip .v{font-size:30px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#strip .u{font-size:12px;color:var(--dim)}
#strip .dto{border-top:1px solid var(--line)}
#strip .dto .v{color:var(--mag);font-size:22px}
#strip .dto .wide{flex:1.4}
#gpsState{position:absolute;right:6px;bottom:-22px;font-size:12px;padding:2px 8px;border-radius:0 0 8px 8px;background:var(--panel)}
.gps-off{color:var(--red)} .gps-sim{color:#6FC3FF}
#strip.sim{border-bottom:3px solid #6FC3FF}
#gpsState{cursor:pointer} .gps-weak{color:var(--amber)} .gps-ok{color:var(--green)}

#map{position:fixed;inset:0;background:#cfd6dd}
#alert{position:fixed;left:8px;right:8px;z-index:1001;padding:8px 12px;border-radius:10px;font-size:16px;font-weight:700;background:var(--amber);color:#1a1300;box-shadow:0 2px 10px rgba(0,0,0,.35)}
#alert.inside{background:var(--red);color:#fff}

#side{position:fixed;right:8px;z-index:1000;display:flex;flex-direction:column;gap:8px}
#side button{width:52px;height:52px;font-size:24px;font-weight:700;background:rgba(22,32,44,.92);display:flex;align-items:center;justify-content:center}
#side #bOrient{font-size:15px}
#bottom{position:fixed;left:8px;bottom:calc(8px + var(--bot));z-index:1000;display:flex;gap:8px}
#bottom button{height:46px;padding:0 14px;background:rgba(22,32,44,.92)}

#sheet{position:fixed;left:0;right:0;bottom:0;z-index:1100;max-height:62vh;overflow:auto;background:var(--panel);border-top:1px solid var(--line);border-radius:16px 16px 0 0;padding:6px 16px calc(16px + var(--bot));box-shadow:0 -6px 24px rgba(0,0,0,.4)}
#sheet .grab{width:44px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 8px}
#sheetClose{position:absolute;right:10px;top:8px;width:40px;height:40px;font-size:24px;border-radius:20px}
#sheet h2{margin:2px 48px 2px 0;font-size:22px}
#sheet .sub{color:var(--dim);font-size:14px;margin-bottom:10px}
#sheet h3{font-size:14px;color:var(--dim);margin:14px 0 6px;font-weight:600}
#sheet pre{white-space:pre-wrap;word-break:break-word;background:var(--panel2);border-radius:8px;padding:8px 10px;margin:0;font-size:14px;line-height:1.35;font-family:var(--font)}
#sheet table{border-collapse:collapse;width:100%;font-size:15px}
#sheet td{padding:5px 4px;border-bottom:1px solid var(--line);vertical-align:top}
#sheet td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#sheet .actions{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
#sheet .actions button{height:46px;padding:0 16px}
#sheet button.primary{background:var(--mag);border-color:var(--mag);color:#fff;font-weight:700}
#sheet label{display:block;margin:10px 0 4px;color:var(--dim);font-size:14px}
#sheet input[type=text],#sheet input[type=password],#sheet input[type=number]{width:100%;height:44px;font-size:16px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:0 10px;font-family:var(--font)}
#sheet .check{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:16px}
#sheet .check input{width:22px;height:22px}
#sheet .note{font-size:13px;color:var(--dim);line-height:1.4}
#sheet .seg{display:flex;gap:6px;flex-wrap:wrap}
#sheet .seg button{height:40px;padding:0 12px}
.cat{display:inline-block;padding:1px 7px;border-radius:6px;font-weight:700;font-size:13px;color:#fff}
.cat.VFR{background:var(--green)} .cat.MVFR{background:var(--blue)} .cat.IFR{background:var(--red)} .cat.LIFR{background:#B042C8} .cat.UNK{background:#667}
.notam{background:var(--panel2);border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:14px;line-height:1.35;white-space:pre-wrap}
.notam b{color:var(--amber)}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(66px + var(--bot));z-index:1200;background:var(--panel2);border:1px solid var(--line);padding:8px 14px;border-radius:10px;font-size:15px;max-width:90vw}

/* map symbols */
.ad{width:20px;height:20px;margin:-10px 0 0 -10px}
.lbl{position:absolute;left:14px;top:-2px;white-space:nowrap;font:700 12px var(--font);color:#12203a;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff}
.rp .lbl{color:#0a4a2a}
.wxdot .lbl{left:12px;top:-18px;color:#222}
.map-lo .lbl{display:none}
.map-mid .rp .lbl{display:none}
.ship{width:44px;height:44px;margin:-22px 0 0 -22px;transition:transform .25s linear}
.leaflet-container{font-family:var(--font);background:#cfd6dd}
.leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.6)!important}
.leaflet-control-scale{margin-bottom:62px!important}
@media (orientation:landscape){
  #strip .v{font-size:26px}
  #sheet{left:auto;width:min(460px,60vw);max-height:80vh}
}

#bottom{flex-wrap:wrap;right:72px}
#bottom button{padding:0 12px}
#start{position:fixed;inset:0;z-index:2000;background:rgba(22,32,44,.96);display:flex;align-items:center;justify-content:center;padding:24px}
.startbox{max-width:420px;text-align:left}
.startbox h1{margin:0 0 8px;font-size:32px}
.startbox p{color:var(--dim);line-height:1.45}
.startbox button{height:52px;padding:0 28px;font-size:18px;background:var(--mag);border-color:var(--mag);font-weight:700}
.list-item{display:flex;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.list-item .t{font-size:16px}
.list-item .s{font-size:13px;color:var(--dim)}
.list-item .r{font-size:13px;color:var(--dim);white-space:nowrap;text-align:right}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.tabs button{height:38px;padding:0 12px;font-size:15px}
.reftext{white-space:pre-wrap;font-size:14px;line-height:1.45;color:var(--text)}
.src{font-size:12px;color:var(--dim);margin-top:4px}
.pill{display:inline-block;font-size:12px;padding:1px 7px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);color:var(--dim);margin-left:4px}
input[type=range]{width:100%}
.rt-lbl{font:700 11px var(--font);color:#5a1a7a;text-shadow:0 0 3px #fff,0 0 3px #fff;white-space:nowrap}
.obst{width:12px;height:12px;margin:-12px 0 0 -6px}
@media (min-width:900px) and (orientation:landscape){
  #sheet{left:auto;right:0;top:0;bottom:0;width:420px;max-height:none;border-radius:0;border-left:1px solid var(--line);border-top:0;padding-top:calc(12px + var(--top))}
  #sheet .grab{display:none}
  body.sheet-open #side{right:432px}
}

#sheet a{color:#8AB4FF}

#sheet td.r{white-space:normal}
#sheet td:first-child{width:46%}