/* ===================== SkyTrace — dark radar UI ===================== */
:root{
  --bg:#070b15;
  --panel:rgba(12,18,33,0.86);
  --panel-solid:#0b111f;
  --border:rgba(120,160,220,0.18);
  --border-strong:rgba(120,160,220,0.34);
  --text:#e9f1ff;
  --muted:#93a8c9;
  --faint:#5f7298;
  --cyan:#2de2e6;
  --cyan-dim:rgba(45,226,230,0.14);
  --violet:#8b7cff;
  --green:#34d399;
  --amber:#ffb454;
  --pink:#ff7eb6;
  --red:#ff5d6c;
  --shadow:0 12px 44px rgba(0,0,0,0.58), 0 0 0 1px rgba(0,0,0,0.25);
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}

#map{position:fixed;inset:0;background:#070b15;z-index:0}
#planes-canvas{position:absolute;top:0;left:0;pointer-events:none;z-index:450}
#map::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:460;
  background:radial-gradient(120% 120% at 50% 38%, transparent 58%, rgba(0,0,0,0.5) 100%)}

/* ---------- Leaflet ---------- */
.leaflet-container{background:#070b15;font-family:var(--sans)}
.leaflet-control-zoom a{background:var(--panel)!important;color:var(--text)!important;
  border:1px solid var(--border)!important;backdrop-filter:blur(8px)}
.leaflet-control-zoom a:hover{background:#17223e!important;color:var(--cyan)!important}
.leaflet-bar{box-shadow:var(--shadow)!important;border:none!important}

/* ---------- shared panel ---------- */
.panel,#legend,#status-pill{
  background:var(--panel);border:1px solid var(--border);border-radius:15px;
  backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);
  box-shadow:var(--shadow);
}
.panel{position:fixed;z-index:1000;padding:13px 15px}
.panel::before{content:"";position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--cyan),var(--violet) 70%,var(--pink));opacity:.85}
.panel.dragging{box-shadow:0 22px 60px rgba(0,0,0,.72), 0 0 0 1px var(--cyan);cursor:grabbing}

.panel-head{display:flex;align-items:center;gap:8px;cursor:move;user-select:none;-webkit-user-select:none;
  margin:-2px 0 4px;padding:2px 0;touch-action:none}
.panel-head .grip{color:var(--faint);font-size:15px;line-height:1;letter-spacing:-3px;margin-right:1px}
.panel-head:hover .grip{color:var(--cyan)}
.panel-title{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---------- topbar ---------- */
#topbar{top:16px;left:16px;width:324px;max-width:calc(100vw - 32px)}
#topbar-head{gap:9px}
.brand-mark{color:var(--cyan);font-size:19px;filter:drop-shadow(0 0 8px rgba(45,226,230,0.6));transform:rotate(45deg)}
.brand-name{font-weight:600;letter-spacing:3px;font-size:17px}
.brand-name b{color:var(--cyan);font-weight:800}
.live-pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
  letter-spacing:1.3px;color:var(--green);background:rgba(52,211,153,0.12);
  border:1px solid rgba(52,211,153,0.3);padding:3px 9px;border-radius:999px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,0.6)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

.clock{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:7px;letter-spacing:1px}
.clock span{color:var(--text)}

.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:11px}
.chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 7px;
  background:rgba(255,255,255,0.03);border:1px solid var(--border);border-top-width:2px;border-radius:10px;cursor:default}
.chip-val{font-family:var(--mono);font-size:13px;font-weight:800;line-height:1.1;text-align:center}
.chip-key{font-size:8px;text-transform:uppercase;letter-spacing:0.4px;color:var(--faint);text-align:center}
.stats .chip:nth-child(1){border-top-color:var(--cyan)}   .stats .chip:nth-child(1) .chip-val{color:var(--cyan)}
.stats .chip:nth-child(2){border-top-color:var(--green)}  .stats .chip:nth-child(2) .chip-val{color:var(--green)}
.stats .chip:nth-child(3){border-top-color:var(--amber)}  .stats .chip:nth-child(3) .chip-val{color:var(--amber)}
.stats .chip:nth-child(4){border-top-color:var(--violet)} .stats .chip:nth-child(4) .chip-val{color:var(--violet)}
.stats .chip:nth-child(5){border-top-color:var(--pink)}   .stats .chip:nth-child(5) .chip-val{color:var(--pink)}

/* ---------- detail ---------- */
#detail{top:188px;left:16px;width:324px;max-width:calc(100vw - 32px);max-height:64vh;overflow-y:auto}
#detail.hidden{display:none}
#detail::-webkit-scrollbar{width:8px}
#detail::-webkit-scrollbar-thumb{background:rgba(120,160,220,0.25);border-radius:4px}
#detail-head .panel-title{flex:1}
#detail-close{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,0.05);
  border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:11px;flex:0 0 auto}
#detail-close:hover{color:var(--text);background:rgba(255,93,108,0.16);border-color:rgba(255,93,108,0.4)}

.d-call{font-family:var(--mono);font-size:25px;font-weight:800;letter-spacing:1px;line-height:1;
  background:linear-gradient(90deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.d-sub{color:var(--muted);font-size:12.5px;margin-top:6px}
.d-flag{font-size:13.5px;margin-top:9px;color:var(--text)}
.d-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:13px}
.d-tile{background:rgba(255,255,255,0.035);border:1px solid var(--border);border-radius:10px;padding:9px}
.d-tile .k{font-size:8.5px;text-transform:uppercase;letter-spacing:0.6px;color:var(--faint)}
.d-tile .v{font-family:var(--mono);font-size:15px;font-weight:700;margin-top:3px;color:var(--text)}
.d-tile .v small{font-size:10px;color:var(--muted);font-weight:500}
.d-foot{display:flex;justify-content:space-between;align-items:center;margin-top:13px;
  padding-top:11px;border-top:1px solid var(--border);font-size:11px;color:var(--faint)}
.d-foot a{color:var(--cyan);text-decoration:none}
.d-foot a:hover{text-decoration:underline}
.up{color:var(--green)} .down{color:var(--amber)}

/* ---------- route box ---------- */
.route-box{margin-top:13px;padding:12px;border:1px solid var(--border);border-radius:12px;
  background:linear-gradient(180deg,rgba(45,226,230,0.07),rgba(139,124,255,0.04))}
.route-box.loading,.route-box.none{color:var(--muted);font-size:12.5px;text-align:center;padding:14px 12px}
.route-box .sub{display:block;color:var(--faint);font-size:11px;margin-top:4px}
.airline{font-size:12.5px;color:var(--text);margin-bottom:11px;font-weight:600}
.airline .tele{color:var(--cyan);font-family:var(--mono);font-weight:500;font-size:11px}
.od{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.ep{min-width:0}
.ep.arr{text-align:right}
.iata{font-family:var(--mono);font-size:23px;font-weight:800;letter-spacing:1px;line-height:1;
  background:linear-gradient(180deg,#fff,#bfe9ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.city{font-size:11px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrow{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--cyan);font-size:15px}
#fit-route{width:23px;height:23px;border-radius:7px;border:1px solid var(--border);background:rgba(255,255,255,0.04);
  color:var(--muted);cursor:pointer;font-size:11px;line-height:1}
#fit-route:hover{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dim)}
.prog{height:6px;border-radius:4px;background:rgba(255,255,255,0.09);margin-top:13px;overflow:hidden;position:relative}
.prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .6s ease;
  box-shadow:0 0 10px rgba(45,226,230,0.5)}
.prog-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:7px}
.prog-meta .eta{color:var(--cyan);font-weight:600}

/* ---------- airport markers ---------- */
.apt{display:flex;align-items:center;gap:4px;transform:translate(-5px,-5px);white-space:nowrap;pointer-events:none}
.apt-dot{width:9px;height:9px;border-radius:50%;border:2px solid #0b111f;flex:0 0 auto}
.apt.dep .apt-dot{background:var(--green);box-shadow:0 0 9px var(--green)}
.apt.arr .apt-dot{background:var(--amber);box-shadow:0 0 9px var(--amber)}
.apt-code{font-family:var(--mono);font-size:11px;font-weight:700;color:#e9f1ff;
  background:rgba(6,10,20,0.74);padding:1px 5px;border-radius:5px;border:1px solid var(--border)}

/* ---------- controls ---------- */
#controls{top:16px;right:16px;width:268px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:15px}
#controls .panel-head{margin-bottom:0}
.ctl-group{display:flex;flex-direction:column;gap:8px}
.ctl-label{font-size:10px;text-transform:uppercase;letter-spacing:0.7px;color:var(--muted);font-weight:600}
.ctl-label b{color:var(--cyan);font-family:var(--mono)}
.search-wrap{position:relative}
#search-input{width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--border);
  background:rgba(0,0,0,0.32);color:var(--text);font-family:var(--mono);font-size:13px;outline:none}
#search-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-dim)}
#search-input::placeholder{color:var(--faint)}
#search-hint{font-size:11px;color:var(--amber);min-height:14px;display:block;margin-top:4px}

.hub-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hub-btn,.btn-wide{font-family:var(--sans);font-size:12px;color:var(--text);cursor:pointer;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:9px;padding:7px 8px;transition:all .15s}
.hub-btn:hover,.btn-wide:hover{background:var(--cyan-dim);border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)}
.btn-wide{width:100%;margin-top:2px}

.toggle{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.toggle input{accent-color:var(--cyan);width:15px;height:15px;cursor:pointer}
.toggle:hover{color:var(--text)}
input[type=range]{width:100%;accent-color:var(--cyan);cursor:pointer}

/* ---------- legend ---------- */
#legend{position:fixed;left:16px;bottom:16px;width:238px;padding:12px 14px;z-index:1000}
.legend-title{font-size:10px;text-transform:uppercase;letter-spacing:0.8px;color:var(--muted);margin-bottom:7px;font-weight:600}
.legend-bar{height:9px;border-radius:5px;background:linear-gradient(90deg,
  rgb(255,90,90),rgb(255,174,52) 22%,rgb(255,230,109) 44%,rgb(95,227,154) 62%,rgb(54,211,255) 84%,rgb(139,156,255));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08)}
.legend-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--faint);margin-top:5px}
.attribution{margin-top:10px;padding-top:9px;border-top:1px solid var(--border);font-size:10px;color:var(--faint);line-height:1.5}
.attribution a{color:var(--muted);text-decoration:none}
.attribution a:hover{color:var(--cyan)}

/* ---------- status pill ---------- */
#status-pill{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:1000;
  display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.status-dot.refreshing{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.status-dot.error{background:var(--red);box-shadow:0 0 8px var(--red)}
.status-dot.connecting{background:var(--amber);box-shadow:0 0 8px var(--amber)}
#status-text{color:var(--text);font-weight:600}
#status-sep{color:var(--faint)}

/* ---------- responsive ---------- */
@media (max-width:760px){
  #topbar,#detail{width:calc(100vw - 32px)}
  #controls{width:calc(100vw - 32px)}
  #legend{display:none}
  .d-call{font-size:22px}
}