:root{--bg:#071523;--panel:#152b3e;--panel2:#0d2233;--line:#31536c;--text:#f4f8fb;--muted:#9db2c4;--accent:#40b8ff;--good:#4bd59b;--warn:#ffcf57;--bad:#ff747b}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#123554 0,var(--bg) 42%);color:var(--text);font:16px system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.wrap{width:min(1320px,calc(100% - 40px));margin:auto}.top{background:#091827;border-bottom:1px solid #203b50}.topin{display:flex;justify-content:space-between;align-items:center;padding:20px 0}.brand{display:flex;gap:14px;align-items:center}.brand strong{display:block;font-size:1.3rem}.brand small{display:block;color:var(--muted)}.logo{font-size:2rem;color:var(--accent)}a{color:inherit;text-decoration:none}.button,button{border:0;border-radius:15px;padding:14px 20px;background:var(--accent);color:#04111d;font-weight:800;font-size:1rem;cursor:pointer}.secondary{background:#203d55;color:var(--text);border:1px solid #45667e}.danger{background:var(--bad);color:#1b0b0c}.head-actions{display:flex;gap:14px;align-items:center}.summary{display:flex;justify-content:space-between;align-items:end;padding:48px 0 26px}.summary h1,.login-hero h1{font-size:clamp(2.3rem,5vw,4rem);line-height:1.05;margin:8px 0 16px}.summary p,.login-hero p{color:var(--muted);font-size:1.15rem}.eyebrow{color:var(--accent);font-weight:900;letter-spacing:.15em;font-size:.8rem}.panel{background:linear-gradient(145deg,#183249,#11283a);border:1px solid var(--line);border-radius:25px;padding:28px}.notice{margin-top:28px;padding:18px 22px;border-radius:16px}.notice.error{background:#5a3034}.notice.success{background:#174b3b}.login-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding:70px 0}.auth{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:grid;gap:8px;font-weight:750;margin:15px 0}input,select{width:100%;padding:15px;border:1px solid #416078;border-radius:14px;background:#091d2d;color:var(--text);font-size:1rem}.tabs{display:flex;gap:12px;overflow:auto;padding:5px 0 22px}.tab{min-width:180px;text-align:left;background:#11283a;color:var(--text);border:1px solid var(--line)}.tab.active{border:2px solid var(--accent)}.tab b,.tab small{display:block}.tab small{color:var(--muted);margin-top:5px}.dashboard{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(310px,.9fr);gap:22px}.panelhead{display:flex;justify-content:space-between;align-items:start;gap:16px}.panelhead h2{margin:7px 0}.badge,.state{padding:9px 13px;border-radius:999px;font-weight:850;font-size:.8rem}.badge.good,.state.approach{background:#175a43;color:#78f3bd}.badge.bad{background:#6a3035;color:#ffc4c8}.state.nearby{background:#315c43;color:#b8ffd8}.scope{position:relative;aspect-ratio:1;max-height:610px;margin:18px auto;border:1px solid #41637c;border-radius:50%;overflow:hidden;background:radial-gradient(circle,rgba(57,168,236,.1),transparent 60%)}.ring{position:absolute;border:1px solid #355a74;border-radius:50%;inset:16%}.ring.two{inset:32%}.ring.three{inset:43%}.axis{position:absolute;background:#355a74}.axis.vertical{width:1px;height:100%;left:50%}.axis.horizontal{height:1px;width:100%;top:50%}.north{position:absolute;top:2%;left:49%;color:var(--accent);font-weight:900}.home{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:2rem}.blip{position:absolute;transform:translate(-50%,-50%) rotate(-12deg);padding:0;background:none;border:0;color:var(--good);font-size:1.55rem}.blip.approach{color:var(--bad);filter:drop-shadow(0 0 6px var(--bad))}.legend{display:flex;gap:20px;color:var(--muted)}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}.dot.approach{background:var(--bad)}.dot.nearby{background:var(--good)}aside{display:grid;gap:22px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px}.metric{background:#142b3e;border:1px solid var(--line);border-radius:20px;padding:22px}.metric span{display:block;color:var(--muted)}.metric b{font-size:2.2rem}.status>div:not(.actions){display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #29495f}.status span{color:var(--muted)}.ok{color:var(--good)}.fail{color:var(--bad)}.actions{display:flex;gap:10px;margin-top:18px}.contacts{margin:22px 0 50px}.contact{display:grid;grid-template-columns:130px 1fr 230px auto;align-items:center;gap:20px;padding:18px 0;border-top:1px solid #315067}.photo{display:grid;gap:5px}.photo img{width:120px;height:75px;object-fit:contain;border-radius:10px}.photo>span{display:grid;place-items:center;width:120px;height:75px;background:#0b1d2a;border-radius:10px;font-size:2rem}.photo small{color:var(--muted);font-size:.7rem}.identity b,.position b{display:block;font-size:1.08rem}.identity span,.position span{color:var(--muted)}.position{text-align:right}.empty{text-align:center;padding:70px}.target{font-size:3rem;color:var(--accent)}.emptyline{padding:30px;color:var(--muted);text-align:center}.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;place-items:center;padding:20px;z-index:20;overflow:auto}.modal.open{display:grid}.modalcard{position:relative;background:#102b3f;border:1px solid #3b6783;border-radius:28px;padding:34px;width:min(760px,100%);max-height:94vh;overflow:auto}.close{position:absolute;right:18px;top:18px;background:#21455e;color:white;font-size:1.4rem}.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}.postcode-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}.full{width:100%}.hint{color:var(--muted);font-size:.9rem}.diag,.install{margin-top:45px}.diagrow{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid #315067}.eventlist>div{display:grid;gap:6px;padding:14px 0;border-top:1px solid #315067}.eventlist time,.eventlist code{color:var(--muted);white-space:pre-wrap}.command{display:block;padding:16px;background:#071a29;border-radius:12px;margin:15px 0}footer{text-align:center;color:var(--muted);padding:25px}@media(max-width:850px){.wrap{width:min(100% - 24px,1320px)}.login-hero,.dashboard{grid-template-columns:1fr}.auth{grid-template-columns:1fr}.summary{align-items:start}.summary h1{font-size:2.6rem}.contact{grid-template-columns:90px 1fr auto}.photo img,.photo>span{width:82px;height:58px}.position{grid-column:2;text-align:left}.state{grid-column:3;grid-row:1/3}.two,.postcode-row{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.head-actions>a:first-child{display:none}}@media(max-width:520px){.summary{display:grid;gap:18px}.metrics{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr}.photo img,.photo>span{width:100%;height:160px}.position,.state{grid-column:auto;grid-row:auto;text-align:left}.actions{display:grid}.topin{padding:14px 0}.brand small{font-size:.75rem}}


/* v3.2.0 nationality awareness and foreign-aircraft focus glow */
.contact{
    position:relative;
    border-radius:18px;
    padding-left:14px;
    padding-right:14px;
    isolation:isolate;
}
.contact.uk{
    background:linear-gradient(90deg,rgba(64,184,255,.035),transparent 42%);
}
.contact.foreign,
.contact.unknown{
    border-top-color:transparent;
    background:
      linear-gradient(#142f44,#142f44) padding-box,
      conic-gradient(from var(--ft-angle),
        transparent 0 12%,
        rgba(64,184,255,.95) 20%,
        rgba(125,90,255,.92) 31%,
        rgba(255,116,123,.92) 42%,
        transparent 55% 100%) border-box;
    border:2px solid transparent;
    animation:ft-border-spin 5s linear infinite,ft-row-pulse 2.8s ease-in-out infinite;
}
.contact.unknown{
    background:
      linear-gradient(#142f44,#142f44) padding-box,
      conic-gradient(from var(--ft-angle),
        transparent 0 18%,
        rgba(188,116,255,.98) 28%,
        rgba(116,210,255,.92) 40%,
        transparent 55% 100%) border-box;
}
.contact.foreign.contact-approaching{
    animation:ft-border-spin 2.4s linear infinite,ft-row-pulse-strong 1.35s ease-in-out infinite;
}
@property --ft-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}
@keyframes ft-border-spin{to{--ft-angle:360deg}}
@keyframes ft-row-pulse{
    0%,100%{box-shadow:0 0 0 rgba(64,184,255,0)}
    50%{box-shadow:0 0 22px rgba(64,184,255,.18)}
}
@keyframes ft-row-pulse-strong{
    0%,100%{box-shadow:0 0 0 rgba(255,116,123,0)}
    50%{box-shadow:0 0 28px rgba(255,116,123,.35)}
}
.nation{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:6px;
    color:var(--muted);
    font-size:.82rem;
    font-weight:800;
}
.nation .flag{font-size:1.15rem}
.nation small{
    opacity:.65;
    font-size:.65rem;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.photo-links{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.photo-links a{
    padding:4px 7px;
    border:1px solid #45667e;
    border-radius:7px;
    color:#b9dcf4;
    font-size:.67rem;
    font-weight:800;
}
.photo-links a:hover{border-color:var(--accent);color:white}
@media (prefers-reduced-motion:reduce){
    .contact.foreign,.contact.unknown,.contact.foreign.contact-approaching{animation:none}
}


/* v3.3.0 fixed aircraft-photo box and USA nationality styling */
.contact{
    grid-template-columns:minmax(150px,190px) minmax(0,1fr) minmax(155px,230px) auto;
    align-items:center;
}
.photo{
    min-width:0;
    align-self:stretch;
    align-content:center;
}
.photo-frame{
    width:100%;
    aspect-ratio:16/10;
    min-height:88px;
    max-height:118px;
    overflow:hidden;
    border-radius:12px;
    background:#081a28;
    border:1px solid rgba(157,178,196,.22);
    display:grid;
    place-items:center;
}
.photo-frame a{
    display:block;
    width:100%;
    height:100%;
}
.photo-frame img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
    object-position:center;
    border-radius:0;
}
.photo-placeholder span{
    font-size:2rem;
    color:#fff;
}
.identity,.position{
    min-width:0;
}
.identity b,.identity span,.position b,.position span{
    overflow-wrap:anywhere;
}
.contact.foreign[data-country="US"],
.contact.foreign.us{
    background:
      linear-gradient(#142f44,#142f44) padding-box,
      conic-gradient(from var(--ft-angle),
        transparent 0 10%,
        rgba(43,118,255,.98) 18%,
        rgba(255,255,255,.98) 28%,
        rgba(235,58,74,.98) 38%,
        transparent 52% 100%) border-box;
}
@media(max-width:850px){
    .contact{
        grid-template-columns:120px minmax(0,1fr) auto;
    }
    .photo-frame{
        min-height:74px;
        max-height:90px;
    }
}
@media(max-width:520px){
    .contact{
        grid-template-columns:112px minmax(0,1fr);
        gap:14px;
    }
    .photo{
        grid-row:1 / span 2;
    }
    .photo-frame{
        min-height:78px;
        max-height:92px;
    }
    .position{
        grid-column:2;
    }
    .state{
        grid-column:1 / -1;
        width:max-content;
    }
}


/* v3.3.1: make the inline photograph visually dominant without overlap */
.photo-frame{
    background:#071725;
    padding:3px;
}
.photo-frame img{
    background:#071725;
}
.photo > small{
    display:block;
    margin-top:5px;
    line-height:1.2;
    text-align:left;
}


/* v3.4.0 altitude and GMT/BST-aware visibility estimates */
.position{
    display:flex;
    flex-direction:column;
    gap:4px;
    line-height:1.25;
}
.position .altitude-line{
    color:#fff;
    font-weight:850;
}
.position .visibility-line{
    color:#7ff0c1;
    font-weight:850;
}
.contact-approaching .position .visibility-line{
    color:#fff39b;
}
@media(max-width:850px){
    .contact{
        align-items:start;
    }
    .position{
        padding-top:2px;
    }
}


/* v3.5.0 heading-aware continuously moving live radar */
#scope{
    overflow:hidden;
}
.blip{
    --plane-heading:0deg;
    position:absolute;
    transform:translate(-50%,-50%);
    transition:
        left .35s linear,
        top .35s linear,
        opacity .4s ease;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    z-index:4;
    will-change:left,top;
}
.blip .radar-plane-svg{
    width:30px;
    height:30px;
    display:block;
    fill:currentColor;
    transform:rotate(var(--plane-heading));
    transform-origin:50% 50%;
    transition:transform .65s ease;
    filter:drop-shadow(0 0 4px currentColor);
}
.blip.approach{
    color:#ff6f7d;
}
.blip.nearby{
    color:#52e2ad;
}
.blip.approach .radar-plane-svg{
    animation:live-plane-pulse 1.35s ease-in-out infinite;
}
.blip.radar-stale{
    opacity:.52;
}
@keyframes live-plane-pulse{
    0%,100%{
        filter:drop-shadow(0 0 3px currentColor);
    }
    50%{
        filter:drop-shadow(0 0 9px currentColor);
    }
}
@media(prefers-reduced-motion:reduce){
    .blip{
        transition:none;
    }
    .blip .radar-plane-svg{
        transition:none;
    }
    .blip.approach .radar-plane-svg{
        animation:none;
    }
}


/* v3.6.0 OpenStreetMap radar background */
.radar-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.map-toggle{
    width:auto;
    min-height:40px;
    padding:8px 13px;
    border:1px solid #426780;
    border-radius:12px;
    background:#17334a;
    color:#dceeff;
    font-weight:850;
    cursor:pointer;
}
.map-toggle[aria-pressed="true"]{
    border-color:#51bfff;
    background:#17557a;
    color:#fff;
}
.osm-map{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    border-radius:50%;
    overflow:hidden;
    background:#0b2131;
}
.osm-map.enabled{
    opacity:.62;
}
.scope.map-enabled{
    background:#0b2131;
}
.scope.map-enabled .ring,
.scope.map-enabled .axis{
    z-index:2;
}
.scope.map-enabled .north,
.scope.map-enabled .home{
    z-index:5;
}
.scope .blip{
    z-index:6;
}
.osm-map .leaflet-control-attribution{
    font-size:9px;
    line-height:1.2;
    background:rgba(5,18,28,.78);
    color:#d8e9f5;
    max-width:70%;
}
.osm-map .leaflet-control-attribution a{
    color:#79cfff;
}
.osm-map .leaflet-tile-pane{
    filter:saturate(.62) brightness(.72) contrast(1.12);
}
@media(max-width:520px){
    .radar-actions{gap:6px}
    .map-toggle{
        min-height:36px;
        padding:7px 10px;
        font-size:.78rem;
    }
    .osm-map .leaflet-control-attribution{
        font-size:8px;
        max-width:78%;
    }
}
@media(prefers-reduced-motion:reduce){
    .osm-map{transition:none}
}




/* v3.6.3 — reliable Leaflet rendering */
.scope{
    isolation:isolate;
}
.osm-map{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:100% !important;
    min-height:100% !important;
    display:block !important;
    z-index:1 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    border-radius:50%;
    overflow:hidden;
    background:#cfd8dc !important;
}
.osm-map.enabled{
    opacity:1 !important;
    visibility:visible !important;
}
.osm-map.leaflet-container{
    background:#cfd8dc !important;
}
.osm-map .leaflet-map-pane,
.osm-map .leaflet-tile-pane,
.osm-map .leaflet-overlay-pane,
.osm-map .leaflet-marker-pane,
.osm-map .leaflet-shadow-pane{
    position:absolute;
    left:0;
    top:0;
}
.osm-map .leaflet-tile{
    opacity:1 !important;
    visibility:visible !important;
}
.osm-map .leaflet-tile-pane{
    filter:saturate(.78) brightness(.82) contrast(1.06);
}
.scope.map-enabled{
    background:transparent !important;
}
.scope.map-enabled .ring,
.scope.map-enabled .axis{
    z-index:3 !important;
    opacity:.72;
    pointer-events:none;
}
.scope.map-enabled .north,
.scope.map-enabled .home{
    z-index:5 !important;
    pointer-events:none;
    text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.scope .blip{
    z-index:7 !important;
}
.osm-map .leaflet-control-attribution{
    z-index:20;
    font-size:8px;
    line-height:1.15;
    background:rgba(5,18,28,.78);
    color:#d8e9f5;
}
.osm-map .leaflet-control-attribution a{
    color:#79cfff;
}
.map-toggle.map-error{
    border-color:#ff727d;
    color:#fff;
    background:#6a2f38;
}


/* v3.7.0 shared radar and map scale control */
.radar-scale-control{
    display:grid;
    grid-template-columns:auto minmax(120px,1fr) auto auto;
    align-items:center;
    gap:10px;
    margin:2px 0 14px;
    padding:10px 12px;
    border:1px solid #35576f;
    border-radius:14px;
    background:#122c40;
}
.radar-scale-control label{
    color:#a9c3d6;
    font-size:.82rem;
    font-weight:850;
}
.radar-scale-control input[type="range"]{
    width:100%;
    min-width:0;
    accent-color:#4bbfff;
}
.radar-scale-control output{
    min-width:54px;
    color:#fff;
    font-weight:900;
    text-align:right;
}
.scale-reset{
    width:auto;
    min-height:36px;
    padding:7px 10px;
    border:1px solid #426780;
    border-radius:10px;
    background:#18364d;
    color:#dceeff;
    font-weight:850;
    cursor:pointer;
}
.scale-reset:active{
    transform:translateY(1px);
}
@media(max-width:620px){
    .radar-scale-control{
        grid-template-columns:1fr auto;
    }
    .radar-scale-control label{
        grid-column:1;
    }
    .radar-scale-control output{
        grid-column:2;
    }
    .radar-scale-control input[type="range"]{
        grid-column:1 / -1;
    }
    .scale-reset{
        grid-column:1 / -1;
        justify-self:start;
    }
}


/* v4.0.0 enhanced radar, layers and music */
.music-control{
    display:flex;
    align-items:center;
    gap:7px;
}
.music-toggle{
    width:auto;
    min-height:38px;
    padding:7px 11px;
    border:1px solid #426780;
    border-radius:11px;
    background:#17334a;
    color:#fff;
    font-weight:850;
}
.music-volume{
    display:flex;
    align-items:center;
    gap:4px;
}
.music-volume input{
    width:72px;
}
.radar-control-centre{
    display:grid;
    gap:10px;
    margin-bottom:14px;
}
.radar-control-centre .radar-scale-control{
    margin:0;
}
.radar-layer-controls{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:end;
    padding:10px;
    border:1px solid #35576f;
    border-radius:14px;
    background:#10283a;
}
.radar-layer-controls label{
    display:grid;
    gap:4px;
    color:#a9c3d6;
    font-size:.72rem;
    font-weight:850;
}
.radar-layer-controls select{
    min-height:38px;
    padding:7px 30px 7px 10px;
    border:1px solid #426780;
    border-radius:10px;
    background:#17334a;
    color:#fff;
}
.layer-toggle{
    width:auto;
    min-height:38px;
    padding:7px 10px;
    border:1px solid #426780;
    border-radius:10px;
    background:#17334a;
    color:#dceeff;
    font-size:.78rem;
    font-weight:850;
}
.layer-toggle[aria-pressed="true"]{
    border-color:#4cc2ff;
    background:#17557a;
    color:#fff;
}
.radar-sweep{
    position:absolute;
    inset:0;
    z-index:2;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    background:conic-gradient(
        from 0deg,
        transparent 0deg 318deg,
        rgba(79,229,177,.02) 320deg,
        rgba(79,229,177,.25) 350deg,
        rgba(79,229,177,.58) 359deg,
        transparent 360deg
    );
    transform-origin:center;
}
.scope.sweep-enabled .radar-sweep{
    opacity:1;
    animation:ft-radar-sweep 5s linear infinite;
}
@keyframes ft-radar-sweep{to{transform:rotate(360deg)}}
.alert-ring,.visual-ring{
    position:absolute;
    left:50%;
    top:50%;
    translate:-50% -50%;
    z-index:4;
    border-radius:50%;
    pointer-events:none;
}
.alert-ring{
    border:2px dashed rgba(255,104,118,.9);
    box-shadow:0 0 10px rgba(255,104,118,.18);
}
.visual-ring{
    border:1px dashed rgba(255,224,115,.9);
}
.bearing-label{
    position:absolute;
    z-index:5;
    color:#9cc8df;
    font-size:.55rem;
    font-weight:900;
    pointer-events:none;
    text-shadow:0 1px 2px #06131d;
}
.bearing-0{left:50%;top:2%;translate:-50% 0}
.bearing-30{left:74%;top:8%}
.bearing-60{right:7%;top:25%}
.bearing-90{right:2%;top:50%;translate:0 -50%}
.bearing-120{right:7%;bottom:25%}
.bearing-150{left:74%;bottom:8%}
.bearing-180{left:50%;bottom:2%;translate:-50% 0}
.bearing-210{right:74%;bottom:8%}
.bearing-240{left:7%;bottom:25%}
.bearing-270{left:2%;top:50%;translate:0 -50%}
.bearing-300{left:7%;top:25%}
.bearing-330{right:74%;top:8%}
.trail-dot{
    position:absolute;
    width:5px;
    height:5px;
    translate:-50% -50%;
    border-radius:50%;
    z-index:5;
    background:#51e1ae;
    box-shadow:0 0 5px currentColor;
    pointer-events:none;
}
.trail-dot.approach{
    background:#ff6f7d;
}
.radar-aircraft-info{
    position:absolute;
    right:5%;
    bottom:7%;
    z-index:12;
    min-width:135px;
    max-width:48%;
    padding:10px 12px;
    display:grid;
    gap:3px;
    border:1px solid #55c8ff;
    border-radius:12px;
    background:rgba(5,24,37,.94);
    color:#dceeff;
    box-shadow:0 10px 25px rgba(0,0,0,.28);
    font-size:.74rem;
}
.radar-aircraft-info[hidden]{display:none}
.radar-aircraft-info b{color:#fff;font-size:.9rem}
.radar-info-close{
    position:absolute;
    right:3px;
    top:2px;
    width:25px;
    min-height:25px;
    padding:0;
    background:transparent;
    border:0;
    color:#fff;
    font-size:1.15rem;
}
.contact-selected{
    outline:3px solid #50c7ff;
    box-shadow:0 0 28px rgba(80,199,255,.42)!important;
}
.scope.map-enabled .leaflet-tile-pane{
    filter:saturate(.82) brightness(.83) contrast(1.06);
}
.scope.map-enabled .leaflet-overlay-pane{
    z-index:4;
}
.scope.map-enabled .leaflet-marker-pane{
    z-index:5;
}
@media(max-width:700px){
    .head-actions{
        flex-wrap:wrap;
        justify-content:flex-end;
    }
    .music-volume{
        display:none;
    }
    .radar-layer-controls{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .radar-layer-controls label{
        grid-column:1 / -1;
    }
    .layer-toggle{
        width:100%;
    }
    .bearing-label{
        font-size:.48rem;
    }
}
@media(prefers-reduced-motion:reduce){
    .scope.sweep-enabled .radar-sweep{animation:none;opacity:.15}
}


/* v4.1.0 default-on music state */
.music-toggle.music-waiting{
    border-color:#ffc861;
    color:#fff3c4;
    box-shadow:0 0 0 2px rgba(255,200,97,.12);
}
.music-toggle.music-error{
    border-color:#ff6f7d;
    color:#ffd5d9;
}


/* v4.2.0 fullscreen radar, aircraft detail panel and location editing */
.panel.radar:fullscreen{
    width:100vw;
    height:100vh;
    max-width:none;
    margin:0;
    border-radius:0;
    padding:18px;
    overflow:auto;
    background:#071827;
}
.panel.radar.radar-fullscreen{
    display:flex;
    flex-direction:column;
}
.panel.radar.radar-fullscreen .radar-control-centre{
    flex:0 0 auto;
}
.panel.radar.radar-fullscreen .scope{
    width:min(88vh,94vw);
    height:min(88vh,94vw);
    max-width:none;
    max-height:none;
    margin:auto;
    flex:0 0 auto;
}
.panel.radar.radar-fullscreen .legend{
    justify-content:center;
    padding-top:10px;
}
.radar-aircraft-info{
    max-width:360px;
}
.panel.radar.radar-fullscreen .radar-aircraft-info{
    position:fixed;
    right:18px;
    bottom:18px;
    width:min(390px,calc(100vw - 36px));
    max-width:390px;
    max-height:72vh;
    overflow:auto;
    z-index:50;
    font-size:.84rem;
}
.radar-detail-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    padding-right:22px;
}
.radar-detail-head>div{
    display:grid;
    gap:3px;
}
.radar-detail-head b{
    font-size:1.12rem;
}
.radar-photo-toggle{
    width:auto;
    min-height:34px;
    padding:6px 9px;
    border:1px solid #4a738e;
    border-radius:9px;
    background:#17384f;
    color:#fff;
    font-weight:850;
}
.radar-detail-photo{
    margin-top:9px;
    display:grid;
    gap:5px;
}
.radar-detail-photo[hidden]{display:none!important}
.radar-detail-photo img{
    width:100%;
    max-height:210px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid #45657a;
}
.radar-detail-photo small{
    color:#9fb6c5;
}
.radar-detail-photo.unavailable{
    padding:12px;
    border:1px dashed #527186;
    border-radius:10px;
    color:#9fb6c5;
}
.radar-detail-grid{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:5px 12px;
    margin-top:10px;
}
.radar-detail-grid span{
    color:#9eb5c5;
}
.radar-detail-grid strong{
    color:#fff;
    text-align:right;
}
.radar-visibility-box{
    display:grid;
    gap:4px;
    margin-top:10px;
    padding:10px;
    border-radius:10px;
    background:rgba(67,119,97,.18);
    border:1px solid rgba(83,213,166,.4);
}
.radar-visibility-box strong{color:#fff0a6}
.radar-visibility-box span{color:#c6d7e2}
@media(max-width:700px){
    .panel.radar.radar-fullscreen{padding:10px}
    .panel.radar.radar-fullscreen .panelhead{align-items:center}
    .panel.radar.radar-fullscreen .radar-actions{flex-wrap:wrap;justify-content:flex-end}
    .panel.radar.radar-fullscreen .radar-control-centre{display:none}
    .panel.radar.radar-fullscreen .scope{
        width:min(82vh,96vw);
        height:min(82vh,96vw);
    }
    .panel.radar.radar-fullscreen .radar-aircraft-info{
        right:8px;
        bottom:8px;
        width:calc(100vw - 16px);
        max-width:none;
        max-height:46vh;
    }
}


/* v4.2.2 — temporary current-device GPS tracking */
.gps-tracker{
    margin:0 0 14px;
    padding:12px 14px;
    border:1px solid rgba(75,173,225,.28);
    border-radius:18px;
    background:rgba(18,52,73,.72);
}
.gps-tracker-head{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.gps-track-button{
    width:auto;
    min-height:42px;
}
.gps-track-button[aria-pressed="true"]{
    border-color:#46d9a2;
    box-shadow:0 0 0 1px rgba(70,217,162,.25) inset;
}
.gps-state{
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#91a9b9;
}
.gps-state.live{color:#4ddba7}
.gps-controls{
    margin-top:12px;
    display:grid;
    grid-template-columns:auto minmax(220px,1fr);
    gap:12px 18px;
    align-items:center;
}
.gps-controls[hidden]{display:none!important}
.gps-follow{
    display:flex;
    align-items:center;
    gap:9px;
    cursor:pointer;
    font-weight:700;
}
.gps-follow input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.gps-follow i{
    width:46px;
    height:25px;
    border-radius:999px;
    background:#39566a;
    position:relative;
    transition:.2s ease;
}
.gps-follow i::after{
    content:"";
    position:absolute;
    width:19px;
    height:19px;
    left:3px;
    top:3px;
    border-radius:50%;
    background:white;
    transition:.2s ease;
}
.gps-follow input:checked + i{background:#16875f}
.gps-follow input:checked + i::after{transform:translateX(21px)}
.gps-range{
    display:grid;
    grid-template-columns:auto minmax(110px,1fr) 58px;
    gap:10px;
    align-items:center;
}
.gps-range label{
    margin:0;
    white-space:nowrap;
}
.gps-range input{width:100%}
.gps-range output{
    font-weight:800;
    text-align:right;
}
#gpsAccuracy{
    grid-column:1 / -1;
    color:#91a9b9;
}
body.gps-mode .status .actions{
    opacity:.42;
    pointer-events:none;
}
body.gps-mode .tab{
    opacity:.7;
}
@media(max-width:700px){
    .gps-controls{grid-template-columns:1fr}
    .gps-range{
        grid-template-columns:1fr 60px;
    }
    .gps-range label{grid-column:1 / -1}
}


/* v4.2.3 GPS/radar synchronisation */
.gps-range-note{
    color:#91a9b9;
    line-height:1.35;
}
body.gps-mode #radarScaleValue{
    min-width:58px;
}
body.gps-mode #radarScale{
    accent-color:currentColor;
}
.blip{
    touch-action:manipulation;
    pointer-events:auto;
    z-index:8;
}


/* v4.2.4 — clearer aircraft symbols and larger mobile hit target */
.scope .blip{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    padding:4px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:rgba(4,20,30,.50);
    border:1px solid currentColor;
    box-shadow:0 0 8px rgba(0,0,0,.45);
    cursor:pointer;
}
.scope .blip .radar-plane-svg{
    width:29px;
    height:29px;
    fill:currentColor;
    stroke:rgba(255,255,255,.82);
    stroke-width:.55px;
    paint-order:stroke fill;
}
.scope .blip.approach{
    background:rgba(94,16,29,.58);
}
.scope .blip.nearby{
    background:rgba(7,72,54,.52);
}
.scope .blip:active{
    transform:translate(-50%,-50%) scale(.92);
}


/* v4.2.5 — current aircraft must be visually distinct from trail dots */
.scope .blip{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:5px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    opacity:1;
}
.scope .blip .radar-plane-svg{
    display:block !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    overflow:visible !important;
    fill:currentColor !important;
    stroke:#06131d !important;
    stroke-width:1.15px !important;
    paint-order:stroke fill !important;
    filter:drop-shadow(0 0 5px currentColor) !important;
}
.scope .blip.approach .radar-plane-svg{
    color:#ff6f7d !important;
}
.scope .blip.nearby .radar-plane-svg{
    color:#52e2ad !important;
}
.scope .trail-dot{
    width:4px !important;
    height:4px !important;
    opacity:.38;
}
#gpsTrackToggle{
    position:relative;
    z-index:20;
    pointer-events:auto !important;
    touch-action:manipulation;
}


/* v4.2.6 — Android-safe directional aircraft marker */
.scope .blip{
    color:#52e2ad !important;
    font-size:32px !important;
    line-height:1 !important;
}
.scope .blip.approach{
    color:#ff6f7d !important;
}
.scope .blip.nearby{
    color:#52e2ad !important;
}
.scope .blip .radar-plane-glyph{
    display:block !important;
    width:34px;
    height:34px;
    line-height:34px;
    text-align:center;
    font-size:31px !important;
    font-family:Arial, "Segoe UI Symbol", sans-serif;
    color:currentColor !important;
    transform:rotate(var(--plane-heading));
    transform-origin:50% 50%;
    transition:transform .45s linear;
    filter:drop-shadow(0 0 5px currentColor);
    pointer-events:none;
}
.scope .blip.radar-stale .radar-plane-glyph{
    opacity:.62;
}
.scope .trail-dot{
    z-index:3 !important;
}
.scope .blip{
    z-index:9 !important;
}