:root{
  --bg:#090d17; --panel:#0f1524; --panel2:#161e33; --line:#1e2a44;
  --gold:#c8a84b; --gold-bright:#e2c270; --gold-dim:#7a6428;
  --ink:#f0e8d5; --dim:#9a9080; --mute:#6f6850;
  --in:#6bcb8b; --out:#6b8fc8; --red:#d98b7f;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:
  radial-gradient(1200px 600px at 70% -10%, rgba(200,168,75,.07), transparent 60%),
  var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
a{color:var(--gold);text-decoration:none}
code{background:var(--panel2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-family:'DM Mono',monospace;font-size:12px}

.top{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);
  background:rgba(9,13,23,.86);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{font-family:Oswald,system-ui,sans-serif;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  font-size:20px;color:var(--gold);display:flex;align-items:center;gap:10px}
.brand .dot{width:9px;height:9px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
.top .sub{color:var(--dim);font-size:13px}
.top .grow{flex:1}
.updated{font-family:'DM Mono',monospace;font-size:12px;color:var(--mute)}
.updated.stale{color:var(--red)}
.home{font-size:13px;color:var(--dim)}.home:hover{color:var(--gold)}

/* live satellite map */
.mapwrap{max-width:1100px;margin:22px auto 0;padding:0 22px}
.maptools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;font-size:12px;color:var(--dim)}
.maptools .lg-plane{color:var(--gold-bright)}
.live-meta{margin-left:auto;font-family:'DM Mono',monospace;color:var(--mute)}
.live-meta.stale{color:var(--red)}
.map{height:460px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0c1120;
  isolation:isolate}   /* confine Leaflet's internal z-indexes so the map stays behind the header */
@media (max-width:760px){ .map{height:360px} }
.leaflet-container{background:#0c1120;font-family:inherit}
/* plane markers (rotated by heading; the airport hub) */
.pm{font-size:18px;line-height:1;text-shadow:0 0 6px rgba(0,0,0,.9);will-change:transform;transition:font-size .15s}
.pm span{display:inline-block}
.pm.in{color:var(--in)}        /* inbound (arriving KPIT) */
.pm.out{color:var(--gold-bright)}  /* outbound (departing KPIT) */
.pm.big{font-size:30px;color:#fff;text-shadow:0 0 12px #fff,0 0 5px #000}
.maptools .lg-in{color:var(--in)}.maptools .lg-out{color:var(--gold-bright)}
.hub-star{color:var(--gold);font-size:16px;text-shadow:0 0 12px var(--gold)}
.leaflet-tooltip.flt{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  font-family:'DM Mono',monospace;font-size:11px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.leaflet-tooltip.flt::before{display:none}

/* boards */
.boards{max-width:1100px;margin:24px auto 0;padding:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){ .boards{grid-template-columns:1fr} }
.board h2{font-family:Oswald,system-ui,sans-serif;font-weight:600;letter-spacing:.05em;font-size:15px;
  text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:9px;margin:0 0 12px;
  display:flex;align-items:center;gap:10px}
.board h2 .arrow{font-size:16px}.arrow.in{color:var(--in)}.arrow.out{color:var(--out)}
.board h2 .cnt{margin-left:auto;color:var(--mute);font-size:12px;font-family:'DM Mono',monospace}
.rows{display:flex;flex-direction:column;gap:7px}   /* no inner scroll — columns flow with the page */
.row{display:grid;grid-template-columns:94px 1fr auto;gap:12px;align-items:center;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:10px;padding:10px 13px;transition:border-color .15s,background .15s}
.row.hl{border-color:var(--gold);background:rgba(200,168,75,.08)}
.row .time{font-family:'DM Mono',monospace;white-space:nowrap}
.row .time .tl{display:block;font-size:12.5px;color:var(--ink)}
.row .time .tl.arr{color:var(--dim);margin-top:3px}   /* arrival line slightly dimmer than departure */
.row .time .tl i{font-style:normal;color:var(--mute);font-size:10px;margin-right:1px}
.row .mid .fl{font-size:14px;color:var(--ink);font-weight:600}
.row .mid .fl .carrier{color:var(--mute);font-weight:400;font-size:12px}
.row .mid .ap{font-size:12px;color:var(--dim);margin-top:2px}
/* full city on desktop, bare IATA on mobile */
.ap-m{display:none}
@media (max-width:640px){ .ap-d{display:none} .ap-m{display:inline} }
/* departure flight-progress bar + ETA (spans the row) */
.row .prog{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:3px}
.row .prog .bar{position:relative;flex:1;height:5px;background:var(--bg);border-radius:999px}
.row .prog .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--out),var(--gold-bright));transition:width .6s}
.row .prog .bar .pp{position:absolute;top:50%;font-size:11px;line-height:1;transform:translate(-50%,-50%) rotate(45deg);
  color:var(--gold-bright);text-shadow:0 0 4px rgba(0,0,0,.6);transition:left .6s}
.row .prog .eta{flex:none;font-family:'DM Mono',monospace;font-size:10.5px;color:var(--dim);white-space:nowrap}
.row .right{text-align:right}
.row .st{font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:6px;
  border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.st.active,.st.en-route,.st.boarding{color:var(--in);border-color:#2e5a3c}
.st.cancelled{color:var(--red);border-color:#5a2b27}
.st.landed{color:var(--out);border-color:#2b3f5a}
.row .gate{font-size:11px;color:var(--mute);margin-top:4px;font-family:'DM Mono',monospace}
.empty{color:var(--mute);text-align:center;padding:40px 12px}
.err{color:var(--red);text-align:center;padding:16px;font-size:13px}

.foot{max-width:1100px;margin:26px auto;padding:14px 22px 50px;display:flex;align-items:center;gap:14px;
  color:var(--mute);font-size:12px}
.foot .refresh{margin-left:auto;background:transparent;border:1px solid var(--line);color:var(--dim);
  border-radius:8px;padding:7px 16px;font:inherit;font-size:12px;cursor:pointer}
.foot .refresh:hover{color:var(--gold);border-color:var(--gold-dim)}

/* live / history toggle */
.board-mode{max-width:1100px;margin:28px auto 0;padding:0 22px;display:flex;align-items:center;gap:10px}
.bm{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:999px;
  padding:7px 16px;font:inherit;font-size:13px;cursor:pointer}
.bm.active{color:#0e1424;background:var(--gold);border-color:var(--gold);font-weight:600}
.bm-note{color:var(--mute);font-size:12px;font-family:'DM Mono',monospace}

/* full-width scheduled / history tables */
.bigtable{max-width:1100px;margin:22px auto 0;padding:0 22px}
.bigtable h2{font-family:Oswald,system-ui,sans-serif;font-weight:600;letter-spacing:.05em;font-size:15px;
  text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:9px;margin:0 0 12px;
  display:flex;align-items:center;gap:10px}
.bigtable h2 .cnt{margin-left:auto;color:var(--mute);font-size:12px;font-family:'DM Mono',monospace}
.ftab{width:100%;border-collapse:collapse;font-size:13px}
.ftab thead th{text-align:left;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);font-weight:500;padding:6px 10px;border-bottom:1px solid var(--line)}
.ftab tbody td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--dim);vertical-align:middle}
.ftab tbody tr:hover{background:rgba(200,168,75,.05)}
.ftab .c-dir{font-size:15px;width:22px}.ftab .c-dir.arr{color:var(--in)}.ftab .c-dir.dep{color:var(--out)}
.ftab .c-time{font-family:'DM Mono',monospace;color:var(--ink);white-space:nowrap}
.ftab .c-fl{color:var(--ink);font-weight:600;white-space:nowrap}
.ftab .c-rt{color:var(--dim)}
.ftab .c-gate{font-family:'DM Mono',monospace;color:var(--mute);white-space:nowrap}
@media (max-width:640px){
  .ftab .c-car,.ftab thead th:nth-child(4){display:none}   /* hide carrier col on phones */
  .ftab .c-gate,.ftab thead th:last-child{display:none}
}

/* nicer scrollbars (page + any overflow areas) */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dim);background-clip:content-box}

/* history search + extra table columns */
.hist-q{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:9px;
  padding:10px 14px;font:inherit;font-size:14px;margin-bottom:14px}
.hist-q:focus{outline:none;border-color:var(--gold-dim)}
.hist-q::placeholder{color:var(--mute)}
.ftab .c-date{font-family:'DM Mono',monospace;color:var(--dim);white-space:nowrap}
.ftab .c-time .te{display:block;font-size:10px;color:var(--mute);margin-top:1px}
.ftab .c-time .te.delay{color:var(--red)}
.ftab .c-rt .r2{color:var(--gold-dim)}
.ftab .c-ac,.ftab .c-dur{font-family:'DM Mono',monospace;color:var(--mute);white-space:nowrap}
@media (max-width:760px){ .ftab .c-ac,.ftab .c-dur,.ftab thead th:nth-last-child(2),.ftab thead th:nth-last-child(3){display:none} }