*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:#07091a;--bg2:#0c0f22;--bg3:#101428;--card:#111527;--border:#1e2340;
      --cyan:#00d4ff;--green:#00ff88;--red:#ff4466;--orange:#ffaa00;--purple:#b47aff;
      --text:#e8ecf4;--muted:#8892aa;
      --font:'Inter',system-ui,sans-serif;--display:'Space Grotesk',system-ui,sans-serif;
      --sidebar:360px;
    }
    html,body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg);color:var(--text);}

    /* TOPBAR */
    #topbar{position:fixed;top:0;left:0;right:0;z-index:1001;height:56px;
      background:rgba(7,9,26,.97);border-bottom:1px solid var(--border);
      display:flex;align-items:center;padding:0 1.25rem;gap:1rem;}
    .tb-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;}
    .tb-logo-text{font-family:var(--display);font-size:1rem;font-weight:700;color:#fff;}
    .tb-logo-text span{color:var(--cyan);}
    .tb-sep{width:1px;height:24px;background:var(--border);}
    .tb-title{font-size:.88rem;font-weight:600;color:var(--muted);letter-spacing:.04em;}
    .tb-back{margin-left:auto;color:var(--muted);font-size:.82rem;text-decoration:none;display:flex;align-items:center;gap:.4rem;transition:color .2s;}
    .tb-back:hover{color:var(--cyan);}
    .live-badge{display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;color:var(--green);
      letter-spacing:.1em;background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.2);
      padding:.25rem .75rem;border-radius:50px;}
    .live-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite;}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4;transform:scale(1.3)}}

    /* SEARCH BAR */
    #search-wrap{flex:1;max-width:380px;position:relative;min-width:0;}
    #search-input{
      width:100%;box-sizing:border-box;
      background:rgba(255,255,255,.06);border:1px solid rgba(0,212,255,.2);border-radius:8px;
      color:var(--text);font-size:.82rem;padding:.35rem .75rem .35rem 2rem;
      outline:none;transition:border-color .2s,background .2s;
    }
    #search-input::placeholder{color:var(--muted);}
    #search-input:focus{border-color:rgba(0,212,255,.5);background:rgba(255,255,255,.09);}
    #search-ico{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--muted);pointer-events:none;}
    #search-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;
      color:var(--muted);cursor:pointer;font-size:.85rem;padding:0;display:none;line-height:1;}
    #search-drop{
      display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;
      background:var(--bg2);border:1px solid var(--border);border-radius:10px;
      box-shadow:0 8px 32px rgba(0,0,0,.65);z-index:3000;
      max-height:400px;overflow-y:auto;
      scrollbar-width:thin;scrollbar-color:var(--border) transparent;
    }
    #search-drop.show{display:block;}
    .sd-label{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted);padding:.5rem .85rem .25rem;}
    .sd-item{display:flex;align-items:center;gap:.65rem;padding:.45rem .85rem;
      cursor:pointer;transition:background .15s;}
    .sd-item:hover,.sd-item.sd-focused{background:rgba(0,212,255,.06);}
    .sd-ico{font-size:.9rem;width:1.1rem;text-align:center;flex-shrink:0;}
    .sd-body{flex:1;min-width:0;}
    .sd-main{font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .sd-sub{font-size:.68rem;color:var(--muted);margin-top:.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .sd-tag{margin-left:auto;font-size:.6rem;font-weight:700;letter-spacing:.05em;
      padding:.15rem .4rem;border-radius:4px;flex-shrink:0;white-space:nowrap;}
    .sd-ap{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2);color:#00d4ff;}
    .sd-ac{background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.2);color:#00ff88;}
    .sd-pl{background:rgba(255,170,0,.1);border:1px solid rgba(255,170,0,.2);color:#ffaa00;}
    .sd-div{height:1px;background:var(--border);margin:.25rem 0;}
    .sd-empty{padding:.85rem;font-size:.78rem;color:var(--muted);text-align:center;}
    .sd-spin{padding:.6rem;text-align:center;font-size:.75rem;color:var(--muted);}

    /* LAYOUT */
    #layout{display:flex;height:100%;padding-top:56px;}

    /* SIDEBAR */
    #sidebar{width:var(--sidebar);flex-shrink:0;background:var(--bg2);
      border-right:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;}

    /* SIDEBAR TABS */
    .sb-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--border);}
    .sb-tab{padding:.6rem .25rem;font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
      color:var(--muted);cursor:pointer;text-align:center;border-bottom:2px solid transparent;
      transition:all .2s;background:none;border-top:none;border-left:none;border-right:none;}
    .sb-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);}
    .sb-tab:hover:not(.active){color:var(--text);}

    /* AIRPORT / WX STYLES */
    .ap-tip{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:7px!important;
      color:var(--text)!important;font-size:.75rem!important;box-shadow:0 4px 16px rgba(0,0,0,.5)!important;
      padding:.4rem .7rem!important;}
    .ap-tip::before{display:none!important;}
    .wx-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .8rem;font-size:.75rem;}
    .wx-lbl{color:var(--muted);font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:.1rem;}
    .wx-val{font-weight:600;color:var(--text);}
    .wx-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:.9rem;}
    .flt-cat{font-size:.65rem;font-weight:700;letter-spacing:.08em;border-radius:4px;padding:.15rem .45rem;}
    .cat-vfr {background:rgba(0,255,136,.1); border:1px solid rgba(0,255,136,.3); color:#00ff88;}
    .cat-mvfr{background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.3); color:#00d4ff;}
    .cat-ifr {background:rgba(255,68,102,.1); border:1px solid rgba(255,68,102,.3);color:#ff4466;}
    .cat-lifr{background:rgba(180,122,255,.1);border:1px solid rgba(180,122,255,.3);color:#b47aff;}

    .sb-page{display:none;flex-direction:column;overflow-y:auto;min-height:0;
      scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
    .sb-page::-webkit-scrollbar{width:4px;}
    .sb-page::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
    .sb-page.active{display:flex;flex:1;}

    .sb-section{padding:1.1rem 1.25rem;border-bottom:1px solid var(--border);}
    .sb-label{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem;}

    /* STATS */
    .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;}
    .stat-box{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.6rem .5rem;text-align:center;}
    .stat-box .sv{font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--cyan);line-height:1;}
    .stat-box .sl{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem;}
    .stat-box.g .sv{color:var(--green);}
    .stat-box.o .sv{color:var(--orange);}

    /* CONTROLS */
    .ctrl-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
    .btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .9rem;border-radius:7px;
      font-size:.8rem;font-weight:600;cursor:pointer;border:none;font-family:var(--font);transition:all .2s;}
    .btn-cyan{background:linear-gradient(135deg,var(--cyan),#0099cc);color:#000;}
    .btn-ghost{background:var(--bg3);border:1.5px solid var(--border);color:var(--muted);}
    .btn-ghost.on{border-color:var(--green);color:var(--green);background:rgba(0,255,136,.06);}
    .btn:hover:not(:disabled){transform:translateY(-1px);}
    .btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;}

    #countdown{font-size:.72rem;color:var(--muted);margin-left:auto;}
    #rbar{height:2px;background:var(--border);border-radius:1px;margin-top:.6rem;overflow:hidden;}
    #rfill{height:100%;width:100%;background:var(--cyan);border-radius:1px;transition:width linear;}

    /* FILTER CHIPS */
    .chips{display:flex;flex-wrap:wrap;gap:.35rem;}
    .chip{padding:.25rem .65rem;border-radius:50px;font-size:.72rem;font-weight:600;
      border:1px solid var(--border);background:var(--bg3);color:var(--muted);cursor:pointer;transition:all .2s;}
    .chip.active{border-color:var(--cyan);color:var(--cyan);background:rgba(0,212,255,.08);}

    /* SEARCH BAR */
    #flight-search-wrap{padding:.65rem 1.25rem .3rem;position:relative;}
    #flight-search{width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--border);
      border-radius:7px;padding:.45rem .75rem .45rem 2.1rem;color:#fff;font-size:.8rem;outline:none;
      transition:border-color .2s;}
    #flight-search:focus{border-color:var(--cyan);}
    #flight-search::placeholder{color:var(--muted);}
    #search-icon{position:absolute;left:1.9rem;top:50%;transform:translateY(-50%);
      color:var(--muted);font-size:.85rem;pointer-events:none;}
    #search-clear{position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);
      color:var(--muted);font-size:.8rem;cursor:pointer;display:none;padding:2px 4px;}
    #search-clear:hover{color:#fff;}
    #search-result{padding:.4rem 1.25rem .1rem;font-size:.72rem;color:var(--muted);}

    /* AIRCRAFT LIST */
    #ac-list{display:flex;flex-direction:column;gap:.3rem;padding:.75rem 1.25rem;}
    .ac-item{display:flex;align-items:center;gap:.65rem;background:var(--bg3);
      border:1px solid var(--border);border-radius:7px;padding:.5rem .75rem;
      font-size:.78rem;cursor:pointer;transition:all .2s;}
    .ac-item:hover,.ac-item.sel{border-color:rgba(0,212,255,.4);background:rgba(0,212,255,.04);}
    .ac-item.gnd{opacity:.65;}
    .ac-plane{font-size:1rem;flex-shrink:0;}
    .ac-info{flex:1;min-width:0;}
    .ac-cs{font-weight:700;color:#fff;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .ac-airline{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .ac-right{text-align:right;flex-shrink:0;}
    .ac-alt{font-size:.78rem;font-weight:600;}
    .ac-spd{font-size:.67rem;color:var(--muted);}
    .ac-empty{color:var(--muted);font-size:.82rem;text-align:center;padding:2rem 1.25rem;line-height:1.8;}

    /* DETAIL PANEL */
    #detail-wrap{padding:1.1rem 1.25rem;}
    #detail-box{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:1.1rem;}
    .det-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem;}
    .det-plane{font-size:2rem;line-height:1;}
    .det-cs{font-family:var(--display);font-size:1.15rem;font-weight:700;color:#fff;}
    .det-airline{font-size:.8rem;color:var(--muted);margin-top:.15rem;}
    .det-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;
      border-radius:50px;font-size:.65rem;font-weight:700;letter-spacing:.06em;margin-top:.3rem;}
    .badge-air{background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.25);color:var(--cyan);}
    .badge-gnd{background:rgba(136,146,170,.1);border:1px solid rgba(136,146,170,.2);color:var(--muted);}

    /* ROUTE BAR */
    .route-bar{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;
      background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.12);
      border-radius:9px;padding:.7rem .85rem;}
    .route-airport{text-align:center;flex:1;min-width:0;}
    .route-iata{font-family:var(--display);font-size:1.1rem;font-weight:700;color:#fff;}
    .route-city{font-size:.65rem;color:var(--muted);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .route-arrow{color:var(--cyan);font-size:1rem;flex-shrink:0;}
    .route-none{color:var(--muted);font-size:.78rem;text-align:center;padding:.6rem;width:100%;}

    .det-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
    .dg{display:flex;flex-direction:column;gap:.12rem;}
    .dg-l{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
    .dg-v{font-size:.88rem;font-weight:600;color:var(--text);}
    .dg-v.cyan{color:var(--cyan);}
    .dg-v.green{color:var(--green);}
    .dg-v.purple{color:var(--purple);}
    .dg-v.red{color:var(--red);}

    .det-empty{color:var(--muted);font-size:.82rem;text-align:center;padding:1.5rem 0;line-height:1.8;}

    /* ADSB KEY INPUT */
    .key-input-wrap{display:flex;gap:.4rem;align-items:center;}
    .key-input{flex:1;background:var(--bg3);border:1.5px solid var(--border);border-radius:7px;
      color:var(--text);font-family:var(--font);font-size:.8rem;padding:.45rem .7rem;outline:none;
      transition:border-color .2s;}
    .key-input:focus{border-color:var(--cyan);}
    .key-input::placeholder{color:rgba(136,146,170,.5);}
    .key-save{padding:.45rem .8rem;font-size:.78rem;border-radius:7px;}

    /* API INFO TAB */
    .api-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;
      padding:1rem;margin-bottom:.75rem;}
    .api-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;}
    .api-name{font-weight:700;color:#fff;font-size:.88rem;}
    .api-badge{font-size:.65rem;font-weight:700;padding:.2rem .55rem;border-radius:50px;letter-spacing:.06em;}
    .free{background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.25);color:var(--green);}
    .freemium{background:rgba(255,170,0,.1);border:1px solid rgba(255,170,0,.25);color:var(--orange);}
    .paid{background:rgba(255,68,102,.1);border:1px solid rgba(255,68,102,.25);color:var(--red);}
    .api-desc{font-size:.78rem;color:var(--muted);line-height:1.6;margin-bottom:.6rem;}
    .api-pros{display:flex;flex-direction:column;gap:.25rem;}
    .api-pro{font-size:.72rem;color:var(--text);display:flex;align-items:flex-start;gap:.4rem;}
    .api-pro::before{content:'✓';color:var(--green);flex-shrink:0;font-weight:700;}
    .api-pro.con::before{content:'✗';color:var(--red);}
    .api-url{font-size:.7rem;color:var(--cyan);font-family:monospace;margin-top:.5rem;word-break:break-all;}

    /* MAP */
    #map{flex:1;z-index:1;position:relative;}

    /* ANOMALY ALERT PANEL */
    #anomaly-panel{position:absolute;top:10px;left:50%;transform:translateX(-50%);
      z-index:900;display:none;flex-direction:column;gap:4px;min-width:280px;max-width:420px;
      pointer-events:none;}
    .anomaly-row{display:flex;align-items:center;gap:8px;padding:7px 12px;
      border-radius:8px;border:1px solid;backdrop-filter:blur(8px);
      cursor:pointer;pointer-events:all;font-size:.78rem;
      animation:anomaly-flash 1.2s ease-in-out infinite alternate;}
    .anomaly-row.level-critical{background:rgba(180,0,0,.55);border-color:#ff2244;color:#fff;}
    .anomaly-row.level-emergency{background:rgba(160,20,0,.5);border-color:#ff4400;color:#fff;}
    .anomaly-row.level-warning{background:rgba(140,90,0,.5);border-color:#ffaa00;color:#ffe;}
    .anomaly-badge{font-weight:700;font-size:.75rem;letter-spacing:.04em;white-space:nowrap;}
    .anomaly-cs{font-weight:600;}
    .anomaly-detail{margin-left:auto;opacity:.8;white-space:nowrap;}
    @keyframes anomaly-flash{from{opacity:1}to{opacity:.6}}

    /* CONFLICT PANEL */
    /* ── Conflict / alert floating window ─────────────────────────────────── */
    #conflict-panel{
      position:absolute;bottom:62px;left:14px;
      z-index:900;display:none;flex-direction:column;
      width:340px;max-width:calc(100vw - 28px);
      background:rgba(18,21,32,.88);backdrop-filter:blur(14px);
      border:1px solid rgba(255,34,68,.45);border-radius:10px;
      box-shadow:0 6px 28px rgba(0,0,0,.6);
      pointer-events:all;overflow:hidden;
    }
    #conf-header{
      display:flex;align-items:center;gap:6px;
      padding:7px 10px;cursor:grab;user-select:none;
      border-bottom:1px solid rgba(255,255,255,.07);
      background:rgba(255,34,68,.12);
    }
    #conf-header:active{cursor:grabbing;}
    #conf-header-icon{font-size:.9rem;}
    #conf-header-title{font-weight:700;font-size:.78rem;letter-spacing:.04em;color:#f0f0f5;flex:1;}
    #conf-count-badge{
      font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:9px;
      background:#ff2244;color:#fff;min-width:18px;text-align:center;
    }
    #conf-count-badge.advisory{background:#ffaa00;color:#111;}
    #conf-minimize{
      background:none;border:none;color:#aaa;font-size:1rem;
      cursor:pointer;padding:0 2px;line-height:1;transition:color .15s;
    }
    #conf-minimize:hover{color:#fff;}
    #conf-body{display:flex;flex-direction:column;gap:0;max-height:240px;overflow-y:auto;}
    #conflict-panel.minimized #conf-body{display:none;}
    #conflict-panel.minimized{border-color:rgba(255,34,68,.3);}
    #conflict-panel.minimized.has-active #conf-header{
      animation:anomaly-flash 1.4s ease-in-out infinite alternate;
    }
    .conf-row{
      display:flex;align-items:center;gap:8px;padding:7px 11px;
      border-bottom:1px solid rgba(255,255,255,.06);
      cursor:pointer;font-size:.75rem;white-space:nowrap;
      transition:background .15s;
    }
    .conf-row:last-child{border-bottom:none;}
    .conf-row:hover{filter:brightness(1.15);}
    .conf-row.conf-active{background:rgba(180,10,10,.45);color:#fff;
      animation:anomaly-flash 1.4s ease-in-out infinite alternate;}
    .conf-row.conf-advisory{background:rgba(150,90,0,.4);color:#ffe;}
    .conf-badge{font-weight:700;font-size:.67rem;letter-spacing:.05em;padding:1px 5px;border-radius:4px;flex-shrink:0;}
    .conf-active  .conf-badge{background:#ff2244;color:#fff;}
    .conf-advisory .conf-badge{background:#ffaa00;color:#111;}
    .conf-pair{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;}
    .conf-sep{opacity:.8;font-size:.71rem;margin-left:auto;flex-shrink:0;}
    .conf-cpa{opacity:.75;font-size:.71rem;}

    /* LIVE STREAMING BUTTON */
    #btn-live{position:relative;}
    #btn-live.live-on{border-color:#ff4466!important;color:#ff4466!important;background:rgba(255,68,102,.08)!important;}
    #btn-live.live-on::before{content:'';display:inline-block;width:7px;height:7px;
      border-radius:50%;background:#ff4466;margin-right:5px;animation:pulse 1s infinite;}

    /* FULLSCREEN BUTTON */
    #btn-fullscreen{position:absolute;top:10px;right:10px;z-index:800;
      width:34px;height:34px;border-radius:6px;border:1px solid rgba(255,255,255,.15);
      background:rgba(10,12,28,.82);color:#fff;cursor:pointer;
      display:flex;align-items:center;justify-content:center;font-size:1rem;
      backdrop-filter:blur(4px);transition:background .2s,border-color .2s;}
    #btn-fullscreen:hover{background:rgba(0,212,255,.15);border-color:var(--cyan);color:var(--cyan);}
    /* hide sidebar in fullscreen for a clean map view */
    :fullscreen #sidebar, :-webkit-full-screen #sidebar, :-moz-full-screen #sidebar{display:none!important;}
    :fullscreen #layout,  :-webkit-full-screen #layout,  :-moz-full-screen #layout{padding-top:0!important;}
    :fullscreen #topbar,  :-webkit-full-screen #topbar,  :-moz-full-screen #topbar{display:none!important;}

    /* ROUTE AIRPORT LABEL */
    .ap-route-lbl{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;}
    .ap-route-lbl::before{display:none!important;}
    .ap-route-inner{background:rgba(10,12,28,.82);border-radius:4px;padding:2px 7px;
      font-size:.68rem;font-weight:700;white-space:nowrap;line-height:1.5;text-align:center;
      pointer-events:none;}

    /* AIRCRAFT PHOTO */
    #ac-photo-wrap{position:relative;width:100%;background:#0a0c1c;overflow:hidden;
      border-radius:8px;margin-bottom:.85rem;cursor:zoom-in;}
    #ac-photo-wrap img{width:100%;display:block;border-radius:8px;
      transition:transform .2s;max-height:180px;object-fit:cover;}
    #ac-photo-wrap:hover img{transform:scale(1.02);}
    #ac-photo-credit{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;
      font-size:.62rem;color:rgba(255,255,255,.7);background:linear-gradient(transparent,rgba(0,0,0,.6));
      border-radius:0 0 8px 8px;}
    #btn-flt-hist{width:100%;margin-bottom:.75rem;padding:.45rem;font-size:.75rem;
      border-radius:7px;border:1px solid var(--border);background:rgba(255,255,255,.04);
      color:var(--muted);cursor:pointer;transition:all .2s;letter-spacing:.03em;}
    #btn-flt-hist:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,212,255,.06);}
    #btn-flt-hist.active{border-color:#ffcc00;color:#ffcc00;background:rgba(255,204,0,.08);}
    /* PHOTO LIGHTBOX */
    #photo-lightbox{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.92);
      display:flex;align-items:center;justify-content:center;cursor:zoom-out;}
    #photo-lightbox.off{display:none;}
    #photo-lightbox img{max-width:92vw;max-height:88vh;border-radius:8px;
      box-shadow:0 8px 40px rgba(0,0,0,.8);}
    #photo-lightbox-close{position:absolute;top:18px;right:22px;font-size:1.6rem;
      color:#fff;cursor:pointer;opacity:.7;line-height:1;}
    #photo-lightbox-close:hover{opacity:1;}
    #photo-lightbox-caption{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
      color:rgba(255,255,255,.6);font-size:.75rem;text-align:center;white-space:nowrap;}

    /* LOADING */
    #loading{position:absolute;inset:0;z-index:800;background:rgba(7,9,26,.85);
      backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;
      justify-content:center;gap:1rem;}
    #loading.off{display:none;}
    .spin{width:38px;height:38px;border-radius:50%;border:3px solid var(--border);
      border-top-color:var(--cyan);animation:spin .8s linear infinite;}
    @keyframes spin{to{transform:rotate(360deg)}}
    .load-text{color:var(--muted);font-size:.85rem;}
    /* Silent top-bar fetch indicator (fast refresh mode) */
    #fetch-bar{position:absolute;top:10px;left:50%;transform:translateX(-50%);
      z-index:810;background:rgba(10,12,28,.82);border:1px solid rgba(0,212,255,.3);
      border-radius:20px;padding:4px 14px;font-size:.72rem;color:var(--cyan);
      display:flex;align-items:center;gap:6px;pointer-events:none;
      transition:opacity .3s;opacity:0;}
    #fetch-bar.show{opacity:1;}
    #fetch-bar::before{content:'';width:7px;height:7px;border-radius:50%;
      background:var(--cyan);animation:pulse 1s infinite;flex-shrink:0;}

    /* ERROR */
    #err{position:absolute;top:1rem;left:50%;transform:translateX(-50%);z-index:810;
      background:rgba(255,68,102,.12);border:1px solid rgba(255,68,102,.3);
      border-radius:8px;padding:.6rem 1.2rem;font-size:.8rem;color:var(--red);
      display:flex;align-items:center;gap:.5rem;white-space:nowrap;}
    #err.off{display:none;}

    /* LEGEND */
    #legend{position:absolute;bottom:2rem;right:1rem;z-index:800;
      background:rgba(7,9,26,.92);border:1px solid var(--border);
      border-radius:10px;padding:.55rem .85rem;font-size:.73rem;backdrop-filter:blur(8px);
      cursor:pointer;user-select:none;}
    .leg-t{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
      font-size:.62rem;margin-bottom:.4rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
    .leg-t-arrow{font-size:.55rem;transition:transform .2s;}
    #legend.collapsed .leg-t-arrow{transform:rotate(-90deg);}
    #legend.collapsed .leg-rows{display:none;}
    .leg-r{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;color:var(--muted);}
    .leg-r:last-child{margin-bottom:0;}
    .leg-d{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
    /* AR button — sits just above the legend */
    #ar-btn{position:absolute;bottom:175px;right:12px;z-index:1100;
    /* Data inspector */
    .di-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .5rem;margin-bottom:.75rem;}
    .di-stat{background:var(--bg3);border-radius:7px;padding:.45rem .6rem;}
    .di-stat-label{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.15rem;}
    .di-stat-val{font-size:1rem;font-weight:700;color:var(--cyan);}
    .di-stat-sub{font-size:.62rem;color:var(--muted);margin-top:.1rem;}
    .di-section{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:.6rem 0 .35rem;}
    .di-bar{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.5rem;}
    .di-chip{font-size:.65rem;padding:.2rem .45rem;border-radius:4px;font-weight:600;}
    .di-chip.on{background:rgba(0,212,255,.15);color:var(--cyan);}
    .di-chip.off{background:rgba(136,146,170,.1);color:var(--muted);}
    .di-chip.warn{background:rgba(255,160,0,.15);color:#ffa000;}
    .di-raw{background:var(--bg3);border-radius:8px;border:1px solid var(--border);overflow:hidden;}
    .di-row{display:flex;align-items:baseline;gap:.4rem;padding:.3rem .65rem;border-bottom:1px solid rgba(255,255,255,.04);font-size:.72rem;}
    .di-row:last-child{border-bottom:none;}
    .di-key{color:var(--muted);min-width:68px;flex-shrink:0;font-size:.65rem;}
    .di-val{color:var(--text);font-family:monospace;word-break:break-all;}
    .di-val.hi{color:var(--cyan);}
    .di-val.ok{color:var(--green);}
    .di-val.bad{color:#ffa000;}
    .di-val.none{color:var(--muted);font-style:italic;}
    .di-clf{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;margin-top:.4rem;}
    .di-clf-item{background:var(--bg3);border-radius:6px;padding:.3rem .4rem;text-align:center;font-size:.65rem;}
    .di-clf-name{color:var(--muted);margin-bottom:.15rem;}
    .di-clf-yes{color:var(--green);font-weight:700;}
    .di-clf-no{color:rgba(136,146,170,.4);}
    .di-cat-legend{font-size:.6rem;color:var(--muted);margin-top:.25rem;line-height:1.6;}
    /* Weather section */
    .wx-section{margin:.6rem 0 0;border-top:1px solid var(--border);padding-top:.6rem;}
    .wx-section-title{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.5rem;}
    .wx-cards{display:flex;flex-wrap:nowrap;gap:.45rem;}
    .wx-cards .wx-card{flex:1 1 0;min-width:0;overflow:hidden;border-radius:9px;padding:.55rem .65rem;border:none!important;border-left:3px solid var(--border)!important;}
    .wx-card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem;}
    .wx-card-iata{font-size:.75rem;font-weight:700;color:var(--text);}
    .wx-cat-chip{font-size:.58rem;font-weight:800;padding:.1rem .35rem;border-radius:3px;letter-spacing:.05em;}
    .wx-row{font-size:.67rem;color:var(--muted);line-height:1.75;}
    .wx-row b{color:var(--text);}
    .wx-phenom{font-size:.68rem;font-weight:600;margin:.25rem 0 0;padding:.18rem .4rem;border-radius:4px;display:inline-block;}
    .wx-loading{font-size:.7rem;color:var(--muted);font-style:italic;padding:.3rem 0;}
    /* Map weather callout */
    .wx-callout{background:rgba(10,12,28,.92);border:1px solid rgba(255,255,255,.12);border-radius:8px;
      padding:.35rem .6rem;font-size:.65rem;color:var(--text);white-space:nowrap;pointer-events:none;
      box-shadow:0 2px 10px rgba(0,0,0,.5);line-height:1.7;}

    /* Leaflet overrides */
    .leaflet-container{background:#0c0f22;font-family:var(--font);}
    .leaflet-popup-content-wrapper{background:var(--card);border:1px solid var(--border);border-radius:10px;color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,.6);}
    .leaflet-popup-tip{background:var(--card);}
    .leaflet-popup-content{margin:12px 16px;font-size:.8rem;line-height:1.8;min-width:200px;}
    .trail-dot-popup .leaflet-popup-content{margin:8px 12px;min-width:0;}
    .zone-popup .leaflet-popup-content{margin:10px 14px;min-width:0;}
    .zone-popup details summary::-webkit-details-marker{color:#888;}
    .zone-popup details[open] summary{margin-bottom:2px;}
    .leaflet-popup-content .pc{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--cyan);margin-bottom:4px;}
    .leaflet-popup-content .pr{display:flex;justify-content:space-between;gap:1rem;}
    .leaflet-popup-content .pk{color:var(--muted);font-size:.72rem;}
    .leaflet-popup-content .pv{color:var(--text);font-weight:600;font-size:.75rem;}
    /* time-label tooltip — strips Leaflet chrome so inner div styling shows through */
    .leaflet-tooltip.lbl-tooltip{background:transparent!important;background-color:transparent!important;
      border:none!important;box-shadow:none!important;padding:0!important;
      pointer-events:none!important;color:inherit!important;}
    .leaflet-tooltip.lbl-tooltip::before,.leaflet-tooltip.lbl-tooltip::after{display:none!important;}
    /* Zoom control — full dark theme */
    .leaflet-bar,.leaflet-touch .leaflet-bar{
      background:rgba(11,14,30,.82)!important;
      border:1px solid var(--border)!important;
      box-shadow:0 2px 12px rgba(0,0,0,.55)!important;
      border-radius:8px!important;}
    .leaflet-bar a,.leaflet-bar a:hover,.leaflet-bar a:focus{
      background:transparent!important;
      background-color:transparent!important;
      color:var(--text)!important;
      border-bottom:1px solid var(--border)!important;}
    .leaflet-bar a:last-child{border-bottom:none!important;}
    .leaflet-bar a:hover,.leaflet-bar a:focus{color:var(--cyan)!important;}
    .leaflet-bar a.leaflet-disabled{color:var(--muted)!important;opacity:.4!important;}

    /* GEOLOCATION MODAL (Airports tab trigger) */
    #geo-modal{position:fixed;inset:0;z-index:2000;background:rgba(7,9,26,.82);
      backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;}
    #geo-modal.off{display:none;}
    .geo-box{background:var(--card);border:1px solid var(--border);border-radius:16px;
      padding:2rem;max-width:360px;width:90%;box-shadow:0 16px 48px rgba(0,0,0,.6);text-align:center;}
    .geo-icon{font-size:2.5rem;margin-bottom:1rem;}
    .geo-title{font-family:var(--display);font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:.6rem;}
    .geo-desc{font-size:.82rem;color:var(--muted);line-height:1.7;margin-bottom:1.4rem;}
    .geo-note{font-size:.72rem;color:var(--muted);margin-top:.85rem;line-height:1.6;
      background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.1);border-radius:8px;padding:.6rem .8rem;}
    .geo-btns{display:flex;gap:.65rem;justify-content:center;}
    /* LOCATION BOTTOM BANNER */
    #loc-banner{position:fixed;bottom:0;left:0;right:0;z-index:1800;
      background:rgba(7,9,26,.96);border-top:1px solid rgba(0,212,255,.2);
      padding:.55rem 1.1rem;display:flex;align-items:center;gap:.8rem;
      font-size:.78rem;color:var(--text);backdrop-filter:blur(8px);
      transition:transform .3s ease;}
    #loc-banner.hidden{transform:translateY(110%);pointer-events:none;}
    #loc-banner-close{background:none;border:none;color:var(--muted);cursor:pointer;
      font-size:1.05rem;padding:.15rem .35rem;line-height:1;transition:color .2s;}
    #loc-banner-close:hover{color:#fff;}
    #btn-location.loc-on{border-color:#00d4ff!important;color:#00d4ff!important;background:rgba(0,212,255,.08)!important;}
    #zone-legend{position:absolute;bottom:8px;right:10px;z-index:900;display:none;
      flex-direction:column;gap:3px;background:rgba(10,12,20,.88);border:1px solid #1e2340;
      border-radius:8px;padding:7px 10px;font-size:.68rem;backdrop-filter:blur(6px);}
    #zone-legend.on{display:flex;}
    .zl-row{display:flex;align-items:center;gap:6px;color:#ccc;}
    .zl-swatch{width:12px;height:3px;border-radius:1px;flex-shrink:0;}

    /* AR button */
      display:flex;flex-direction:column;align-items:center;gap:3px;
      background:rgba(7,9,26,.82);border:1px solid rgba(0,212,255,.35);
      border-radius:12px;padding:.55rem .65rem;text-decoration:none;
      color:#00d4ff;font-size:.62rem;font-weight:700;letter-spacing:.06em;
      box-shadow:0 4px 16px rgba(0,0,0,.5);transition:border-color .2s,background .2s;
      cursor:pointer;}
    #ar-btn span:first-child{font-size:1.2rem;line-height:1;}
    #ar-btn:hover{background:rgba(0,212,255,.12);border-color:rgba(0,212,255,.6);}
    /* In landscape mobile, collapse legend and use compact 2×2 layer buttons */
    @media (max-height:480px) and (orientation:landscape){
      #legend{bottom:.5rem;}
      #ar-btn{bottom:120px;}
    }

    #follow-badge{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);
      z-index:900;background:rgba(20,28,42,.88);color:#7ec8e3;font-size:.72rem;
      padding:4px 10px 4px 9px;border-radius:14px;border:1px solid rgba(94,168,212,.35);
      display:none;align-items:center;gap:6px;backdrop-filter:blur(6px);white-space:nowrap;}
    #follow-badge.on{display:flex;}
    #follow-stop{background:none;border:none;color:var(--muted);cursor:pointer;
      font-size:.9rem;padding:0;line-height:1;transition:color .15s;}
    #follow-stop:hover{color:#fff;}

    /* ── MOBILE ── map full-screen, sidebar slides in as drawer ────────── */
    #mob-menu-btn{display:none;}
    #mob-overlay{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:1001;backdrop-filter:blur(2px);}

    @media(max-width:768px){
      :root{--sidebar:85vw;}

      /* Map fills entire screen */
      #layout{padding-top:0;position:relative;}
      #map{position:fixed!important;inset:0;height:100vh!important;width:100vw!important;z-index:1;}

      /* Sidebar is a fixed drawer, hidden off-screen to the left */
      #sidebar{
        position:fixed;top:56px;left:0;bottom:0;
        width:var(--sidebar);max-width:320px;
        transform:translateX(-100%);
        transition:transform .3s ease;
        z-index:1002;overflow:hidden;
        border-right:1px solid var(--border);
        padding-bottom:env(safe-area-inset-bottom);
        display:flex;flex-direction:column;
      }
      #sidebar.mob-open{transform:translateX(0);}
      #mob-overlay{display:block;opacity:0;pointer-events:none;transition:opacity .3s;}
      #mob-overlay.show{opacity:1;pointer-events:auto;}

      /* Tab row: fixed height, never scrolls */
      .sb-tabs{
        flex-shrink:0;
        grid-template-columns:repeat(auto-fit,minmax(48px,1fr));
      }
      /* Only the content area below tabs scrolls */
      .sb-page.active{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}

      /* Hide title text to make room for search on mobile */
      .tb-title{display:none;}
      /* Search bar on mobile — narrower */
      #search-wrap{max-width:160px;}
      #search-drop{position:fixed;left:8px;right:8px;top:60px;width:auto;}

      /* Hamburger button — inline inside topbar on mobile */
      #mob-menu-btn{
        display:flex;align-items:center;justify-content:center;
        flex-shrink:0;
        width:36px;height:36px;border-radius:8px;
        background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.25);
        color:#00d4ff;font-size:1.15rem;cursor:pointer;
        margin-right:4px;
      }

      /* Floating LIVE / refresh buttons — keep visible over map */
      #map-btns-top{
        position:fixed;top:68px;right:12px;z-index:400;
        display:flex;flex-direction:column;gap:6px;
      }

      /* Region chips — horizontal scroll, no wrap */
      #region-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
      #region-chips::-webkit-scrollbar{display:none;}

      /* Larger tap targets */
      .btn{min-height:40px;}
      .chip{min-height:36px;white-space:nowrap;}
      .sb-tab{padding:.7rem .2rem;}

      /* Fetch bar and error bar — below topbar */
      #fetch-bar{top:56px;}
      #err{top:56px;}

      /* Aircraft popup — constrain width on mobile */
      #ac-popup-wrap{max-width:calc(100vw - 24px)!important;width:calc(100vw - 24px)!important;}

      /* Leaflet popups */
      .leaflet-popup-content{max-width:calc(100vw - 48px)!important;}
    }

    @media(max-width:420px){
      :root{--sidebar:92vw;}
    }

    /* ── DROP PIN DIALOG ─────────────────────────────────────────────── */
    #pin-range-dialog{
      display:none;position:fixed;inset:0;z-index:1100;
      background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
      align-items:center;justify-content:center;
    }
    #pin-range-dialog.open{display:flex;}
    #pin-range-box{
      background:#0c0f22;border:1px solid rgba(0,212,255,.3);
      border-radius:16px;padding:1.8rem 1.6rem;width:min(340px,90vw);
    }
    #pin-range-title{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.3rem;}
    #pin-range-sub{font-size:.78rem;color:#8892aa;margin-bottom:1.2rem;}
    #pin-range-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;}
    #pin-range-input{
      flex:1;padding:.55rem .8rem;background:#07091a;border:1px solid #1e2340;
      border-radius:8px;color:#e8ecf4;font-size:1rem;font-weight:600;outline:none;
      transition:border .2s;text-align:center;
    }
    #pin-range-input:focus{border-color:#00d4ff;}
    #pin-range-unit{color:#8892aa;font-size:.85rem;flex-shrink:0;}
    #pin-range-slider{
      width:100%;accent-color:#00d4ff;margin-bottom:1.2rem;cursor:pointer;
    }
    #pin-range-actions{display:flex;gap:.8rem;}
    #pin-cancel-btn{
      flex:1;padding:.65rem;background:transparent;border:1px solid #1e2340;
      border-radius:8px;color:#8892aa;cursor:pointer;font-size:.88rem;
    }
    #pin-cancel-btn:hover{border-color:#8892aa;color:#fff;}
    #pin-apply-btn{
      flex:2;padding:.65rem;background:linear-gradient(135deg,#00d4ff,#0099bb);
      border:none;border-radius:8px;color:#000;font-weight:700;cursor:pointer;font-size:.88rem;
    }
    #pin-apply-btn:hover{opacity:.9;}

    /* ── CESIUM 3D PANEL ──────────────────────────────────────────────── */
    #cesium-panel{position:absolute;top:0;left:0;right:0;bottom:0;z-index:850;
      display:none;flex-direction:column;background:#07091a;}
    #cesium-panel.open{display:flex;}
    #cesium-header{display:flex;align-items:center;gap:.5rem;padding:.38rem .7rem;
      background:rgba(7,9,26,.95);border-bottom:1px solid rgba(0,212,255,.15);
      flex-shrink:0;z-index:1;}
    #cesium-ac-title{color:#7ec8e3;font-size:.8rem;font-weight:600;flex:1;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .cam-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
      color:var(--muted);border-radius:5px;padding:3px 11px;font-size:.7rem;
      cursor:pointer;transition:all .15s;}
    .cam-btn:hover{color:#fff;border-color:rgba(255,255,255,.35);}
    .cam-btn.on{background:rgba(0,212,255,.15);border-color:#00d4ff;color:#00d4ff;}
    #cesium-close-btn{background:none;border:none;color:var(--muted);font-size:1.05rem;
      cursor:pointer;padding:2px 6px;margin-left:.2rem;transition:color .15s;}
    #cesium-close-btn:hover{color:#fff;}
    #cesium-container{flex:1;position:relative;}
    .cesium-msg{display:flex;align-items:center;justify-content:center;height:100%;
      color:var(--muted);font-size:.85rem;flex-direction:column;gap:.5rem;}
    #btn-3d-view{display:block;width:100%;margin:.45rem 0 .1rem;padding:.38rem;
      background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.3);
      color:#7ec8e3;border-radius:6px;font-size:.72rem;cursor:pointer;
      transition:all .15s;letter-spacing:.04em;text-align:center;text-decoration:none;
      box-sizing:border-box;}
    #btn-3d-view:hover{background:rgba(0,212,255,.18);border-color:#00d4ff;color:#00d4ff;}