/* assets/css/radar.css */
:root {
    --bg: #050a0f;
    --panel: rgba(7, 17, 25, .82);
    --line: rgba(19, 245, 53, .24);
    --green: #13F535;
    --green2: #00C82B;
    --text: #ecffef;
    --muted: #8ca890;
    --danger: #ff5c6c;
    --warn: #ffd166;
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--text); font-family:Inter,Segoe UI,Roboto,Arial,sans-serif; }
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
body { user-select:none; }
#app { height:100dvh; display:grid; grid-template-rows:calc(64px + var(--safe-top)) 1fr; padding-bottom:var(--safe-bottom); }
.topbar { position:relative; z-index:1200; display:flex; align-items:flex-end; justify-content:space-between; padding:var(--safe-top) 18px 0 0; min-height:calc(64px + var(--safe-top)); border-bottom:1px solid var(--line); background:rgba(3,8,12,.96); box-shadow:0 6px 24px rgba(0,0,0,.25); overflow:hidden; }
.brand-wrap { min-width:0; display:flex; align-items:flex-end; height:64px; flex:1; }
.brand { min-width:0; height:64px; display:flex; flex-direction:column; justify-content:space-between; padding:12px 0 12px 12px; }
.brand-mainline { display:flex; align-items:center; gap:10px; min-height:0; min-width:0; line-height:1; margin:0; }
.brand-logo { width:64px; height:64px; display:block; flex:0 0 64px; object-fit:cover; object-position:center; align-self:flex-end; border-radius:0; }
.brand-title { font-weight:800; letter-spacing:.18em; font-size:15px; white-space:nowrap; line-height:1; }
.brand-sub { margin:0; color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; line-height:1; }
.top-status { display:flex; align-items:center; gap:12px; height:64px; padding-bottom:0; flex-shrink:0; }
.software-version { color:var(--green); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 0 9px rgba(19,245,53,.24); white-space:nowrap; line-height:1; }
.live-pill { display:flex; align-items:center; gap:7px; border:1px solid rgba(19,245,53,.26); padding:6px 9px; border-radius:999px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.12em; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green2); box-shadow:0 0 10px var(--green2); animation:pulse 1.5s infinite; }
.live-pill.offline { color:var(--danger); border-color:rgba(255,92,108,.35); }
.live-pill.offline .live-dot { background:var(--danger); box-shadow:0 0 10px var(--danger); }
.clock { font-variant-numeric:tabular-nums; letter-spacing:.1em; font-weight:700; font-size:16px; }
.radar-shell { position:relative; min-height:0; overflow:hidden; }
#map { position:absolute; inset:0; background:#e6eaed; }
.leaflet-tile-pane { filter:none; }
.leaflet-control-attribution { background:rgba(255,255,255,.78) !important; color:#52665e !important; font-size:9px !important; }
.leaflet-control-attribution a { color:#315e50 !important; }
.glass { background:var(--panel); border:1px solid var(--line); box-shadow:0 12px 35px rgba(0,0,0,.28), inset 0 0 24px rgba(19,245,53,.02); backdrop-filter: blur(12px); }
.control-panel { position:absolute; z-index:800; left:14px; top:14px; min-width:360px; padding:10px 12px; border-radius:10px; }
.leaflet-top.leaflet-left { top:108px; }
.control-row { display:flex; align-items:center; gap:10px; }
.control-row + .control-row { margin-top:9px; padding-top:9px; border-top:1px solid rgba(19,245,53,.11); }
.control-row.compact { justify-content:flex-start; }
.label { font-size:10px; letter-spacing:.14em; color:var(--muted); font-weight:800; }
.label.normal { letter-spacing:.05em; text-transform:none; }
.unit { color:var(--muted); font-size:10px; font-weight:700; }
.segmented { display:flex; gap:4px; flex:1; }
.segmented button, .ghost-btn { appearance:none; border:1px solid rgba(19,245,53,.18); background:rgba(19,245,53,.04); color:#caffd1; border-radius:6px; padding:7px 9px; font-weight:800; font-size:10px; cursor:pointer; }
.segmented button.active { color:#06120d; background:var(--green); border-color:var(--green); }
.ghost-btn { padding:6px 9px; }
.toggle { position:relative; width:34px; height:18px; display:inline-block; }
.toggle input { display:none; }
.toggle span { position:absolute; inset:0; border-radius:999px; background:#1d2c34; border:1px solid rgba(19,245,53,.18); }
.toggle span:after { content:""; position:absolute; width:12px; height:12px; left:2px; top:2px; border-radius:50%; background:#8aa89c; transition:.15s; }
.toggle input:checked + span { background:rgba(19,245,53,.2); }
.toggle input:checked + span:after { transform:translateX(16px); background:var(--green); }
.stats { position:absolute; z-index:800; left:14px; bottom:calc(14px + var(--safe-bottom)); display:grid; grid-template-columns:repeat(4,minmax(90px,1fr)); border-radius:10px; overflow:hidden; }
.stats > div { padding:10px 14px; min-width:105px; border-right:1px solid rgba(19,245,53,.12); }
.stats > div:last-child { border-right:0; }
.stats strong { display:block; font-size:14px; line-height:1.2; font-variant-numeric:tabular-nums; color:var(--green); }
.stats span { display:block; margin-top:3px; font-size:8px; letter-spacing:.14em; color:var(--muted); }
.details { position:absolute; z-index:900; right:14px; top:14px; width:360px; border-radius:12px; padding:15px; transition:opacity .15s, transform .15s; }
.details.hidden { opacity:0; pointer-events:none; transform:translateX(18px); }
.close-btn { position:absolute; right:10px; top:10px; width:30px; height:30px; border:1px solid rgba(19,245,53,.14); border-radius:999px; background:rgba(3,8,12,.92); color:var(--muted); font-size:22px; line-height:1; display:grid; place-items:center; cursor:pointer; z-index:5; }
.detail-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-right:44px; }
.callsign { font-size:25px; font-weight:900; letter-spacing:.08em; color:var(--green); }
.subline { color:var(--muted); font-size:11px; margin-top:4px; }
.dotsep { padding:0 4px; opacity:.5; }
.mini-plane { width:32px; height:32px; color:var(--green); transform-origin:center; transition:transform .25s; }
.mini-plane svg { display:block; width:32px; height:32px; fill:currentColor; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:14px; background:rgba(19,245,53,.1); }
.detail-grid > div { background:rgba(7,17,25,.98); padding:10px; }
.detail-grid span { display:block; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.detail-grid strong { display:block; margin-top:4px; font-size:13px; font-variant-numeric:tabular-nums; }
.detail-foot { display:flex; justify-content:space-between; margin-top:10px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.error-banner { position:absolute; z-index:1000; top:15px; left:50%; transform:translateX(-50%); background:rgba(72,9,18,.94); border:1px solid rgba(255,92,108,.35); color:#ffdce0; padding:9px 14px; border-radius:8px; font-size:11px; }
.hidden { display:none; }
.range-rings { pointer-events:none; position:absolute; z-index:500; left:50%; top:50%; width:min(66vw,66vh); aspect-ratio:1; transform:translate(-50%,-50%); opacity:.62; }
.radar-sweep { pointer-events:none; position:absolute; z-index:490; left:50%; top:50%; width:min(66vw,66vh); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; overflow:hidden; mix-blend-mode:screen; }
.radar-sweep .sweep-glow, .radar-sweep .sweep-line { position:absolute; inset:0; border-radius:50%; }
.radar-sweep .sweep-glow {
    background: conic-gradient(from 0deg, rgba(19,245,53,0) 0deg, rgba(19,245,53,0) 334deg, rgba(19,245,53,.05) 344deg, rgba(19,245,53,.13) 352deg, rgba(19,245,53,.22) 357deg, rgba(19,245,53,0) 360deg);
    animation: radarSweep 5.5s linear infinite;
    filter: blur(1px);
    opacity:.95;
}
.radar-sweep .sweep-line { animation: radarSweep 5.5s linear infinite; }
.radar-sweep .sweep-line::before {
    content:""; position:absolute; left:50%; top:50%; width:50%; height:2px; transform-origin:0 50%; transform:translateY(-50%);
    background: linear-gradient(90deg, rgba(19,245,53,.95) 0%, rgba(19,245,53,.8) 68%, rgba(19,245,53,.12) 100%);
    box-shadow: 0 0 10px rgba(19,245,53,.7), 0 0 18px rgba(19,245,53,.22);
}
.crosshair { position:absolute; background:var(--green); opacity:.6; }
.crosshair.h { height:1px; left:0; right:0; top:50%; }.crosshair.v { width:1px; top:0; bottom:0; left:50%; }
.aircraft-marker { background:transparent; border:0; }
.plane-wrap { position:relative; width:72px; height:40px; transform:none; }
.plane-icon { position:absolute; left:19px; top:8px; width:22px; height:22px; display:grid; place-items:center; color:#006C12; transform-origin:center; transition:transform .9s linear; filter:drop-shadow(0 1px 1px rgba(255,255,255,.95)) drop-shadow(0 0 4px rgba(0,0,0,.28)); }
.plane-icon svg { display:block; width:22px; height:22px; fill:currentColor; }
.plane-label { position:absolute; left:40px; top:3px; white-space:nowrap; color:#17392f; font-size:9px; line-height:1.15; text-shadow:0 1px 1px rgba(255,255,255,.98),0 0 3px rgba(255,255,255,.92); }
.plane-label b { display:block; font-size:9px; letter-spacing:.04em; color:#102d25; }
.plane-label span { color:#28644f; font-variant-numeric:tabular-nums; }
.plane-wrap.emergency .plane-icon, .plane-wrap.emergency .plane-label b { color:var(--danger); text-shadow:0 0 10px rgba(255,92,108,.75); }
.plane-wrap.ground .plane-icon { color:#7f9d90; opacity:.75; }

.ring-label-icon { background:transparent !important; border:0 !important; }
.ring-label-icon span { display:block; width:max-content; margin:auto; padding:2px 5px; border-radius:4px; background:rgba(255,255,255,.82); border:1px solid rgba(0,108,18,.18); color:#087A1B; font-size:8px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.photo-card { margin-top:12px; overflow:hidden; border:1px solid rgba(19,245,53,.14); border-radius:9px; background:rgba(2,8,12,.72); }
.photo-card > a { display:block; position:relative; height:150px; background:linear-gradient(135deg,rgba(19,245,53,.04),rgba(141,200,255,.05)); }
.photo-card img { display:block; width:100%; height:100%; object-fit:cover; }
.photo-credit { padding:6px 8px; color:#78968a; font-size:8px; letter-spacing:.02em; line-height:1.35; }
.photo-credit a { color:#aaffb4; text-decoration:none; }
.photo-loading { margin-top:12px; padding:10px; border:1px dashed rgba(19,245,53,.14); border-radius:8px; color:#78968a; font-size:8px; letter-spacing:.1em; text-align:center; }
.route-card { margin-top:10px; padding:10px; border:1px solid rgba(141,200,255,.18); border-radius:9px; background:rgba(8,20,31,.78); }
.route-airline { color:#9db9c9; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.route-line { display:grid; grid-template-columns:1fr 30px 1fr; gap:7px; align-items:center; margin-top:7px; }
.route-line strong { display:block; color:#dff6ff; font-size:18px; letter-spacing:.08em; }
.route-line span { display:block; margin-top:2px; color:#8299a5; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.route-arrow { text-align:center; color:#8dc8ff; font-size:18px; }
.route-destination { text-align:right; }
.airport-marker-icon { background:transparent !important; border:0 !important; }
.airport-marker { position:relative; display:grid; grid-template-columns:14px auto; grid-template-rows:17px 13px; min-width:115px; align-items:center; color:#dff6ff; text-shadow:0 1px 3px #000,0 0 4px #000; }
.airport-marker .airport-dot { grid-row:1 / span 2; width:9px; height:9px; border:2px solid #8dc8ff; border-radius:50%; box-shadow:0 0 10px rgba(141,200,255,.55); }
.airport-marker b { font-size:10px; letter-spacing:.08em; }
.airport-marker small { color:#9ab0bb; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }
.airport-marker.destination .airport-dot { border-color:#79ffc5; box-shadow:0 0 10px rgba(19,245,53,.55); }
.airport-marker.midpoint .airport-dot { border-color:#ffd166; box-shadow:0 0 10px rgba(255,209,102,.45); }

.home-marker { width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid #062015;box-shadow:0 0 0 5px rgba(19,245,53,.13),0 0 14px rgba(19,245,53,.6); }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.35} }
@media (max-width:720px) {
    .leaflet-top.leaflet-left { top:108px; }
    #app { grid-template-rows:calc(54px + var(--safe-top)) 1fr; }
    .topbar { padding:var(--safe-top) 10px 0 0; min-height:calc(54px + var(--safe-top)); }
    .brand-wrap { min-width:0; height:54px; }
    .brand { height:54px; padding:8px 0 8px 10px; }
    .brand-logo { width:54px; height:54px; flex-basis:54px; border-radius:0; }
    .top-status { height:54px; }
    .brand-title { font-size:12px; letter-spacing:.12em; }
    .brand-sub { font-size:8px; }
    .clock { font-size:13px; }
    .software-version { font-size:8px; }
    .brand-mainline { gap:7px; }
    .live-pill { padding:5px 7px; font-size:8px; }
    .control-panel { left:8px; top:8px; right:8px; min-width:0; }
    .stats { left:8px; right:8px; bottom:calc(8px + var(--safe-bottom)); grid-template-columns:repeat(4,1fr); }
    .stats > div { min-width:0; padding:8px 6px; }
    .stats strong { font-size:11px; }
    .stats span { font-size:7px; }
    .details { left:8px; right:8px; top:auto; bottom:calc(72px + var(--safe-bottom)); width:auto; max-height:72vh; overflow:auto; padding-top:16px; }
    .detail-head { align-items:flex-start; padding-right:52px; }
    .mini-plane { width:28px; height:28px; margin-top:2px; }
    .mini-plane svg { width:28px; height:28px; }
    .close-btn { right:8px; top:8px; width:28px; height:28px; font-size:20px; }
    .photo-card > a { height:125px; }
    .range-rings, .radar-sweep { width:74vw; }
}

/* v1.1.3 – Kartenlesbarkeit / Radar / Zoom */
.leaflet-top.leaflet-left { top: 0; }
.range-rings { opacity: .62; }
.crosshair { background: #00931A; opacity: .7; }
.ring-label-icon span { background: rgba(255,255,255,.96); border: 1px solid rgba(8,124,105,.42); color: #075b4d; font-size: 9px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.plane-icon { color: #ffd400; width: 26px; height: 26px; left: 17px; top: 7px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.plane-icon svg { width: 26px; height: 26px; }
.plane-icon svg path { stroke: #5a4600; stroke-width: .8; paint-order: stroke fill; vector-effect: non-scaling-stroke; }
.plane-wrap.ground .plane-icon { color: #ffd400; opacity: .82; }
.plane-wrap.emergency .plane-icon { color: var(--danger); }
.plane-label { left: 44px; top: -1px; min-width: 72px; padding: 3px 5px 4px; border-radius: 5px; background: rgba(255,255,255,.92); border: 1px solid rgba(20,48,40,.18); box-shadow: 0 1px 4px rgba(0,0,0,.16); text-shadow: none; line-height: 1.08; }
.plane-label b { font-size: 10px; color: #102d25; letter-spacing: .035em; }
.plane-label span { display: block; color: #183d32; font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plane-label .alt-m { color: #436b5e; font-size: 8px; margin-top: 1px; }
.mini-plane { color: #ffd400; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.mini-plane svg path { stroke: #5a4600; stroke-width: .7; paint-order: stroke fill; }
@media (max-width:720px) {
    .leaflet-top.leaflet-left { top: 0; }
}

/* v1.1.4 – Callsign-Suche + wechselbarer Radar-Standort */
.center-name-btn {
    appearance:none; border:0; padding:0; margin:0; background:transparent; color:var(--muted);
    font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; border-bottom:1px dashed rgba(19,245,53,.42);
}
.center-name-btn:hover, .center-name-btn:focus-visible { color:var(--green); outline:none; border-bottom-color:var(--green); }
.callsign-search { display:flex; align-items:center; gap:7px; margin-top:9px; padding-top:9px; border-top:1px solid rgba(19,245,53,.11); }
.callsign-search input, .location-form input {
    min-width:0; flex:1; height:32px; border:1px solid rgba(19,245,53,.22); border-radius:6px;
    background:rgba(3,11,16,.86); color:#effff8; padding:0 10px; font-size:11px; font-weight:700; letter-spacing:.04em;
    outline:none; user-select:text;
}
.callsign-search input:focus, .location-form input:focus { border-color:rgba(19,245,53,.65); box-shadow:0 0 0 2px rgba(19,245,53,.08); }
.callsign-search input::placeholder, .location-form input::placeholder { color:#6f8c81; font-weight:500; }
.callsign-search button, .location-form button {
    height:32px; border:1px solid rgba(19,245,53,.24); border-radius:6px; background:rgba(19,245,53,.1);
    color:var(--green); padding:0 11px; font-size:9px; font-weight:900; letter-spacing:.08em; cursor:pointer;
}
.search-status { margin-top:6px; padding:5px 7px; border-radius:5px; font-size:9px; font-weight:700; letter-spacing:.03em; }
.search-status.ok { color:#caffd0; background:rgba(0,200,43,.1); }
.search-status.error { color:#ffd6db; background:rgba(255,92,108,.12); }
.plane-wrap.searched .plane-label { border-color:rgba(255,212,0,.8); box-shadow:0 0 0 2px rgba(255,212,0,.14),0 1px 4px rgba(0,0,0,.2); }
.plane-wrap.searched .plane-icon { filter:drop-shadow(0 0 5px rgba(255,212,0,.9)) drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.modal-backdrop { position:absolute; inset:0; z-index:1600; display:grid; place-items:start center; padding:clamp(16px,8vh,90px) 0 calc(16px + var(--safe-bottom)); background:rgba(0,0,0,.44); backdrop-filter:blur(2px); overflow:hidden; }
.modal-backdrop.hidden { display:none; }
.location-dialog { position:relative; width:min(520px,calc(100vw - 24px)); padding:18px; border-radius:12px; }
.modal-close { position:absolute; right:10px; top:6px; border:0; background:transparent; color:var(--muted); font-size:25px; cursor:pointer; }
.location-title { color:var(--green); font-size:17px; font-weight:900; letter-spacing:.06em; }
.location-sub { margin-top:3px; color:var(--muted); font-size:10px; }
.location-form { display:flex; gap:8px; margin-top:14px; }
.location-results { display:grid; gap:6px; margin-top:10px; max-height:310px; overflow:auto; }
.location-result { width:100%; border:1px solid rgba(19,245,53,.12); border-radius:7px; background:rgba(3,11,16,.7); color:var(--text); padding:9px 10px; text-align:left; cursor:pointer; }
.location-result:hover { border-color:rgba(19,245,53,.4); background:rgba(19,245,53,.06); }
.location-result strong { display:block; color:#eafff6; font-size:11px; }
.location-result span { display:block; margin-top:3px; color:#819d92; font-size:9px; line-height:1.3; }
.location-empty { padding:12px 8px; color:#8ca59b; font-size:10px; text-align:center; }
.location-empty.error { color:#ffd0d6; }
.location-actions { display:flex; justify-content:flex-end; margin-top:10px; }
.location-credit { margin-top:10px; color:#667f75; font-size:8px; text-align:right; }

@media (max-width:720px) {
    .callsign-search input { font-size:10px; }
    .modal-backdrop { padding:calc(10px + var(--safe-top)) 0 calc(10px + var(--safe-bottom)); }
    .location-dialog { max-height:calc(100vh - 76px); overflow:auto; }
}

/* v1.1.6 – Funk-Kurzsuche über die letzten drei oder vier Callsign-Zeichen */
.callsign-results {
    display:grid; gap:5px; margin-top:6px; max-height:190px; overflow:auto;
    padding-right:2px;
}
.callsign-results.hidden { display:none; }
.callsign-result {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    border:1px solid rgba(255,212,0,.28); border-radius:6px; background:rgba(3,11,16,.88);
    color:var(--text); padding:7px 8px; text-align:left; cursor:pointer;
}
.callsign-result:hover, .callsign-result:focus-visible {
    border-color:rgba(255,212,0,.75); background:rgba(255,212,0,.08); outline:none;
}
.callsign-result .cs-main, .callsign-result .cs-meta { display:flex; flex-direction:column; min-width:0; }
.callsign-result .cs-main strong { color:#ffe56a; font-size:11px; letter-spacing:.05em; white-space:nowrap; }
.callsign-result .cs-main small { margin-top:2px; color:#9ab0a8; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.callsign-result .cs-meta { align-items:flex-end; flex-shrink:0; }
.callsign-result .cs-meta b { color:#eafff6; font-size:9px; }
.callsign-result .cs-meta small { margin-top:2px; color:#9ab0a8; font-size:8px; }


/* v1.1.7 – ausgewähltes Flugzeug + Distanzanzeige */
.plane-wrap.selected .plane-label {
    background: #fff3a6;
    border-color: #d7b83b;
    box-shadow: 0 0 0 2px rgba(255,212,0,.20), 0 2px 6px rgba(0,0,0,.20);
}
.plane-wrap.selected .plane-label b { color: #3b3100; }
.plane-wrap.selected .plane-label span { color: #51430a; }
.plane-wrap.selected .plane-icon {
    filter: drop-shadow(0 0 6px rgba(255,212,0,.95)) drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

/* v1.1.9 – Helikopter-Erkennung / neue Silhouette */
.plane-wrap.helicopter .plane-icon {
    left: 14px;
    top: 4px;
    width: 32px;
    height: 32px;
}
.plane-wrap.helicopter .plane-icon svg {
    width: 32px;
    height: 32px;
}
.plane-wrap.helicopter .plane-label b::after {
    content: " HELI";
    color: #7a6500;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .05em;
}
.mini-plane.helicopter svg {
    transform: scale(1.06);
}

/* v1.2.2 – Header-Logo + mobiles Close-X */
.brand-mainline .software-version { margin-left:2px; }
.close-btn:hover, .close-btn:focus-visible { color:var(--green); border-color:rgba(19,245,53,.4); outline:none; }
@media (max-width:520px) {
    .brand-mainline { gap:5px; }
    .brand-title { font-size:11px; letter-spacing:.11em; }
    .software-version { font-size:7px; }
    .brand-wrap { min-width:0; }
    .brand { padding:8px 0 8px 8px; }
    .brand-sub { max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* v1.2.4 – iPhone PWA safe areas */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .leaflet-control-attribution { margin-bottom: calc(2px + var(--safe-bottom)) !important; }
}
@supports (padding: max(0px)) {
    .control-panel { max-width: calc(100vw - 16px); }
}

/* v1.2.5 – Header-Zeilenabstand angleichen */
.brand-mainline .software-version { align-self:center; }
.center-name-btn { line-height:1; }

/* v1.2.6 – Header-Abstände deterministisch */
.brand {
    box-sizing:border-box;
    height:64px;
    justify-content:space-between;
    padding-top:12px;
    padding-bottom:12px;
}
.brand-mainline, .brand-sub { margin-block:0; }
.brand-mainline { line-height:1; }
.brand-sub, .center-name-btn { line-height:1; }
@media (max-width:720px) {
    .brand {
        height:54px;
        padding-top:8px;
        padding-bottom:8px;
    }
}


/* v1.2.9 – drehende Radarlinie */
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* v1.2.1.10 – Sweep bei manuellem Zoom aus + 3 gespeicherte Orte */
.radar-sweep { transition: opacity .18s ease, visibility .18s ease; }
.radar-sweep.sweep-hidden { opacity:0; visibility:hidden; }
.saved-locations-wrap { margin-top:13px; padding-top:10px; border-top:1px solid rgba(19,245,53,.11); }
.saved-locations-head { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.1em; }
.saved-locations-head small { color:#647f74; font-size:8px; letter-spacing:.04em; text-transform:none; }
.saved-locations { display:grid; gap:6px; margin-top:7px; }
.saved-location-row { display:grid; grid-template-columns:minmax(0,1fr) 31px; gap:5px; }
.saved-location-select { min-width:0; border:1px solid rgba(19,245,53,.14); border-radius:7px; background:rgba(3,11,16,.72); color:var(--text); padding:7px 9px; text-align:left; cursor:pointer; }
.saved-location-select:hover, .saved-location-select:focus-visible { outline:none; border-color:rgba(19,245,53,.45); background:rgba(19,245,53,.06); }
.saved-location-select strong { display:block; color:#eafff6; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.saved-location-select span { display:block; margin-top:2px; color:#718d82; font-size:8px; font-variant-numeric:tabular-nums; }
.saved-location-remove { border:1px solid rgba(255,92,108,.18); border-radius:7px; background:rgba(255,92,108,.05); color:#bd8b91; font-size:18px; cursor:pointer; }
.saved-location-remove:hover, .saved-location-remove:focus-visible { outline:none; color:#ffd2d7; border-color:rgba(255,92,108,.45); }
.saved-location-empty { padding:8px 4px 3px; color:#657e75; font-size:9px; }


/* v1.3.1 – Anzeigeeinstellungen für Aircraft-Labels */
.control-actions { margin-left:auto; display:flex; align-items:center; gap:6px; }
.settings-icon-btn {
    appearance:none; width:30px; height:30px; display:grid; place-items:center; padding:0;
    border:1px solid rgba(19,245,53,.18); border-radius:6px; background:rgba(19,245,53,.04);
    color:#caffd1; cursor:pointer;
}
.settings-icon-btn:hover, .settings-icon-btn:focus-visible { border-color:rgba(19,245,53,.48); color:var(--green); outline:none; }
.settings-icon-btn svg { width:16px; height:16px; fill:currentColor; }
.settings-dialog {
    position:relative;
    width:min(560px,calc(100vw - 24px));
    max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);
    padding:18px;
    border-radius:12px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
}
.label-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.setting-check {
    position:relative; display:flex; align-items:center; gap:9px; min-height:38px; padding:8px 10px;
    border:1px solid rgba(19,245,53,.12); border-radius:8px; background:rgba(3,11,16,.72);
    color:#dff6eb; font-size:10px; font-weight:700; cursor:pointer;
}
.setting-check:hover { border-color:rgba(19,245,53,.34); background:rgba(19,245,53,.05); }
.setting-check input { position:absolute; opacity:0; pointer-events:none; }
.setting-box { width:17px; height:17px; flex:0 0 17px; border:1px solid rgba(19,245,53,.38); border-radius:4px; background:#0a1720; position:relative; }
.setting-check input:checked + .setting-box { background:var(--green); border-color:var(--green); }
.setting-check input:checked + .setting-box::after { content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #06120d; border-width:0 2px 2px 0; transform:rotate(45deg); }
.settings-actions { display:flex; justify-content:flex-end; margin-top:14px; }
.settings-actions .ghost-btn { margin-left:0; }
.plane-label .meta { color:#304f45; font-size:8px; font-weight:700; margin-top:1px; }
@media (max-width:720px) {
    .settings-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px); }
    .label-settings-grid { grid-template-columns:1fr; gap:6px; }
    .setting-check { min-height:36px; font-size:10px; }
    .control-actions { gap:5px; }
    .settings-icon-btn { width:29px; height:29px; }
}

/* v1.3.4 – Steig-/Sinkpfeil im vorhandenen Datenkasten */
.plane-label { position:absolute; }
.plane-label.has-vertical { padding-right:29px; }
.plane-label-content { display:block; min-width:0; }
.vertical-indicator {
    position:absolute;
    right:5px;
    top:50%;
    transform:translateY(-50%);
    width:19px;
    display:block !important;
    text-align:center;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0;
    margin:0;
    font-size:24px !important;
    line-height:1;
    font-weight:1000 !important;
    pointer-events:none;
    text-shadow:0 1px 1px rgba(255,255,255,.45);
    -webkit-text-stroke:1.1px currentColor;
}
.vertical-indicator.up { color:#159447 !important; }
.vertical-indicator.down { color:#f28a00 !important; }
.plane-wrap.selected .vertical-indicator { background:transparent; border:0; box-shadow:none; }
@media (max-width:720px) {
    .plane-label.has-vertical { padding-right:27px; }
    .vertical-indicator { right:4px; width:18px; font-size:23px !important; }
}


/* v1.3.5 – Einstellungsdialog bei geringer Höhe scrollbar */
.settings-dialog::-webkit-scrollbar { width:8px; }
.settings-dialog::-webkit-scrollbar-track { background:rgba(19,245,53,.035); border-radius:999px; }
.settings-dialog::-webkit-scrollbar-thumb { background:rgba(19,245,53,.28); border-radius:999px; }
.settings-dialog::-webkit-scrollbar-thumb:hover { background:rgba(19,245,53,.42); }
@media (max-height:620px) {
    .settings-dialog { padding:14px 16px; }
    .label-settings-grid { margin-top:12px; gap:6px; }
    .setting-check { min-height:34px; padding:6px 9px; }
    .settings-actions { margin-top:10px; }
}


/* v1.3.6 – Positionspräzision
   Der Leaflet-Anker [30,20] liegt exakt im Mittelpunkt des Flugzeug-SVGs.
   Kein zusätzlicher Wrapper-Offset mehr. */
.plane-wrap { transform:none !important; }


/* v1.3.8 – Höhenstaffelung + Flightlevel-Filter */
.filter-icon-btn.active { color:#06120d; background:var(--green); border-color:var(--green); box-shadow:0 0 0 2px rgba(19,245,53,.12); }
.filter-dialog {
    position:relative; width:min(480px,calc(100vw - 24px)); max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);
    padding:18px; border-radius:12px; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.flightlevel-current { margin-top:16px; padding:12px; border:1px solid rgba(19,245,53,.18); border-radius:9px; background:rgba(19,245,53,.055); color:var(--green); font-size:18px; font-weight:900; letter-spacing:.08em; text-align:center; font-variant-numeric:tabular-nums; }
.flightlevel-inputs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.flightlevel-inputs label > span { display:block; margin-bottom:5px; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.1em; }
.fl-input-wrap { display:flex; align-items:center; border:1px solid rgba(19,245,53,.16); border-radius:8px; background:rgba(3,11,16,.78); overflow:hidden; }
.fl-input-wrap b { padding:0 0 0 10px; color:#78968a; font-size:10px; letter-spacing:.08em; }
.fl-input-wrap input { width:100%; min-width:0; height:38px; border:0; outline:0; background:transparent; color:#effff8; padding:0 10px 0 6px; font-size:15px; font-weight:900; font-variant-numeric:tabular-nums; }
.flightlevel-presets { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:12px; }
.flightlevel-presets button { min-width:0; border:1px solid rgba(19,245,53,.14); border-radius:7px; background:rgba(19,245,53,.04); color:#aacdc0; padding:8px 4px; font-size:8px; font-weight:900; cursor:pointer; }
.flightlevel-presets button:hover, .flightlevel-presets button:focus-visible { outline:none; border-color:rgba(19,245,53,.42); color:var(--green); }
.flightlevel-presets button.active { background:rgba(19,245,53,.16); color:var(--green); border-color:rgba(19,245,53,.48); }
.filter-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.filter-actions .ghost-btn { margin-left:0; }
.filter-apply-btn { border:1px solid var(--green); border-radius:7px; background:var(--green); color:#06120d; padding:8px 13px; font-size:9px; font-weight:900; letter-spacing:.08em; cursor:pointer; }
@media (max-width:720px) {
    .filter-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px); }
    .flightlevel-presets { grid-template-columns:repeat(2,1fr); }
    .flightlevel-presets button:last-child { grid-column:1 / -1; }
}
@media (max-height:560px) {
    .filter-dialog { padding:14px 16px; }
    .flightlevel-current { margin-top:10px; padding:8px; font-size:15px; }
    .flightlevel-inputs, .flightlevel-presets { margin-top:8px; }
    .filter-actions { margin-top:10px; }
}


/* v1.3.9 – UI-Grün an Logo-Verlauf angepasst: #13F535 / #00C82B */


/* v1.4.0 – Radar-Kreise im Hauptgrün, gut sichtbar und 2.4 px stark */
.leaflet-overlay-pane .radar-range-circle {
    filter: drop-shadow(0 0 1px rgba(0,74,12,.95)) drop-shadow(0 0 1px rgba(0,74,12,.75));
}


/* v1.4.3 – aircraft-panel header + sticker logo (based on v1.4.1) */
.topbar {
    align-items:center;
    padding:var(--safe-top) 18px 0 0;
    min-height:calc(64px + var(--safe-top));
    background:
        linear-gradient(180deg, rgba(19,30,39,.98) 0%, rgba(11,20,27,.98) 42%, rgba(6,12,17,.99) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 34px);
    border-bottom:1px solid rgba(19,245,53,.12);
    box-shadow:0 8px 24px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.55);
}
.topbar::before {
    content:""; position:absolute; left:14px; right:14px; top:calc(var(--safe-top) + 8px); height:10px; pointer-events:none; border-radius:6px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)); opacity:.85;
}
.topbar::after {
    content:""; position:absolute; left:16px; top:calc(var(--safe-top) + 14px); width:6px; height:6px; border-radius:50%; background:#63717a;
    box-shadow:0 0 0 1px rgba(0,0,0,.65), 0 0 0 2px rgba(255,255,255,.06), calc(100vw - 52px) 0 0 0 #63717a, calc(100vw - 52px) 0 0 1px rgba(0,0,0,.65), calc(100vw - 52px) 0 0 2px rgba(255,255,255,.06);
    pointer-events:none; opacity:.9;
}
.brand-wrap { align-items:center; gap:12px; }
.logo-sticker {
    position:relative; width:64px; height:64px; flex:0 0 64px; display:grid; place-items:center;
    transform:rotate(-3deg);
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)) drop-shadow(0 6px 10px rgba(0,0,0,.22));
}
.logo-sticker::before {
    content:""; position:absolute; inset:3px; border-radius:11px; background:rgba(255,255,255,.95);
    box-shadow:0 1px 0 rgba(255,255,255,.85), 0 0 0 1px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.92);
}
.logo-sticker::after {
    content:""; position:absolute; top:4px; right:6px; width:18px; height:8px; border-radius:2px;
    background:linear-gradient(180deg, rgba(255,244,190,.92), rgba(214,195,128,.72));
    transform:rotate(11deg); opacity:.78; box-shadow:0 1px 2px rgba(0,0,0,.22);
}
.brand-logo {
    position:relative; z-index:1; width:54px; height:54px; flex:0 0 54px; align-self:center; border-radius:10px; object-fit:cover; object-position:center;
}
.brand {
    height:56px; justify-content:center; gap:4px; padding:0 0 0 2px;
}
.brand-mainline { gap:8px; }
.brand-title {
    letter-spacing:.2em; font-size:15px; text-shadow:0 1px 0 rgba(0,0,0,.7);
}
.brand-sub { color:#9aaba0; letter-spacing:.16em; }
.software-version { color:var(--green); text-shadow:0 0 10px rgba(19,245,53,.25); }
.top-status { height:56px; padding:0 10px 0 12px; margin-right:6px; border:1px solid rgba(255,255,255,.04); border-radius:11px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.06)); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); }
.live-pill { background:rgba(5,14,12,.52); }
@media (max-width:720px) {
    .topbar { padding:var(--safe-top) 10px 0 0; min-height:calc(54px + var(--safe-top)); }
    .topbar::before { left:8px; right:8px; top:calc(var(--safe-top) + 6px); height:8px; }
    .topbar::after { left:10px; top:calc(var(--safe-top) + 10px); width:5px; height:5px; box-shadow:0 0 0 1px rgba(0,0,0,.65), 0 0 0 2px rgba(255,255,255,.06), calc(100vw - 36px) 0 0 0 #63717a, calc(100vw - 36px) 0 0 1px rgba(0,0,0,.65), calc(100vw - 36px) 0 0 2px rgba(255,255,255,.06); }
    .brand-wrap { gap:8px; height:54px; }
    .logo-sticker { width:50px; height:50px; flex-basis:50px; }
    .logo-sticker::before { inset:2px; border-radius:9px; }
    .logo-sticker::after { top:3px; right:4px; width:15px; height:7px; }
    .brand-logo { width:42px; height:42px; border-radius:8px; }
    .brand { height:50px; gap:3px; }
    .brand-title { font-size:12px; }
    .brand-sub { font-size:8px; }
    .top-status { height:46px; margin-right:2px; padding:0 8px; }
}


/* v1.4.4 – cleaner aircraft panel header, straight logo, dark 3D square */
.topbar::after { display:none; }
.brand-wrap { gap:10px; }
.logo-sticker {
    width:64px; height:64px; flex-basis:64px; transform:none;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.42)) drop-shadow(0 7px 12px rgba(0,0,0,.18));
}
.logo-sticker::before {
    inset:0; border-radius:0;
    background:linear-gradient(180deg, #4f5960 0%, #363e44 18%, #1f272d 58%, #151c21 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.48), inset 1px 0 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.35);
}
.logo-sticker::after { display:none; }
.brand-logo { width:54px; height:54px; flex-basis:54px; border-radius:9px; }
.brand { padding-left:4px; }
.brand-title { letter-spacing:.19em; }
@media (max-width:720px) {
    .logo-sticker { width:54px; height:54px; flex-basis:54px; }
    .logo-sticker::before { inset:0; border-radius:0; }
    .logo-sticker::after { display:none; }
    .brand-logo { width:44px; height:44px; border-radius:8px; }
}


/* v1.4.5 – Map/Satellite switch left of altitude filter */
.map-view-btn.active {
    color:#06120d; background:var(--green); border-color:var(--green);
    box-shadow:0 0 0 2px rgba(19,245,53,.12), 0 0 12px rgba(19,245,53,.18);
}
.map-view-btn.active svg { fill:currentColor; }


/* v1.4.6 – better satellite button and satellite-centering fix */
.map-view-btn { position:relative; overflow:hidden; }
.map-view-btn svg { width:18px; height:18px; }
.map-view-btn::after {
    content:""; position:absolute; inset:3px; border-radius:5px;
    background:linear-gradient(180deg, rgba(19,245,53,.05), rgba(19,245,53,0));
    pointer-events:none; opacity:.65;
}
.map-view-btn.active::after { opacity:.15; }


/* v1.4.8 – VOR/DME overlay switch */
.vor-dme-btn.active {
    color:#06120d; background:var(--green); border-color:var(--green);
    box-shadow:0 0 0 2px rgba(19,245,53,.12), 0 0 12px rgba(19,245,53,.18);
}
.vor-dme-btn svg { width:18px; height:18px; }
.vor-dme-marker-icon { background:transparent !important; border:0 !important; }
.vor-dme-marker {
    position:relative; width:112px; height:40px; display:flex; align-items:center; gap:6px; pointer-events:auto;
    color:#6ed8ff; text-shadow:0 1px 2px rgba(0,0,0,.85);
}
.vor-symbol {
    position:relative; width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center;
    border:2px solid #6ed8ff; clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);
    background:rgba(4,18,24,.72); box-shadow:0 0 8px rgba(110,216,255,.25);
}
.vor-symbol::before, .vor-symbol::after { content:""; position:absolute; background:#6ed8ff; opacity:.9; }
.vor-symbol::before { width:2px; height:18px; left:9px; top:1px; }
.vor-symbol::after { height:2px; width:18px; left:1px; top:9px; }
.vor-symbol i { width:5px; height:5px; border-radius:50%; background:#6ed8ff; box-shadow:0 0 6px rgba(110,216,255,.85); z-index:1; }
.vor-dme-marker.dme-only .vor-symbol { border-radius:50%; clip-path:none; }
.vor-dme-label { display:flex; flex-direction:column; min-width:0; padding:2px 4px; border-radius:4px; background:rgba(4,12,18,.72); border:1px solid rgba(110,216,255,.12); }
.vor-dme-label b { color:#a9eaff; font-size:9px; letter-spacing:.08em; line-height:1.1; }
.vor-dme-label small { margin-top:1px; color:#75bed8; font-size:7px; font-weight:800; white-space:nowrap; }
.navaid-popup { display:flex; flex-direction:column; gap:2px; min-width:130px; color:#132b34; }
.navaid-popup strong { font-size:15px; }
.navaid-popup span { font-size:11px; }
.navaid-popup b { font-size:10px; color:#356276; }
@media (max-width:720px) {
    .vor-dme-marker { transform:scale(.92); transform-origin:left center; }
}


/* v1.4.9 – clearer VOR/DME button icon */
.vor-dme-btn svg text { font-family: Inter, Segoe UI, Arial, sans-serif; dominant-baseline: middle; }
.vor-dme-btn.active svg rect:first-child { filter: drop-shadow(0 0 4px rgba(19,245,53,.18)); }


/* v1.4.10 – uploaded green VOR/DME symbol */
.vor-dme-btn { color: var(--green); }
.vor-dme-btn svg { width: 19px; height: 19px; fill: currentColor; }
@media (max-width:720px) {
    .vor-dme-btn svg { width: 18px; height: 18px; }
}


/* v1.5.2 – compact map copyright with expandable full attribution */
.map-copyright-control {
    position:relative;
    margin:0 6px calc(4px + var(--safe-bottom)) 0 !important;
    font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
    z-index:1000;
}
.map-copyright-toggle {
    appearance:none;
    border:1px solid rgba(19,245,53,.18);
    border-radius:6px;
    padding:4px 8px;
    background:rgba(4,10,14,.84);
    color:#c9d8cf;
    font-size:9px;
    font-weight:700;
    letter-spacing:.02em;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.22);
    backdrop-filter:blur(8px);
}
.map-copyright-toggle:hover,
.map-copyright-toggle:focus-visible {
    outline:none;
    color:var(--green);
    border-color:rgba(19,245,53,.42);
}
.map-copyright-details {
    position:absolute;
    right:0;
    bottom:calc(100% + 7px);
    width:min(430px,calc(100vw - 24px));
    padding:12px 34px 12px 13px;
    border:1px solid rgba(19,245,53,.22);
    border-radius:10px;
    background:rgba(4,10,14,.96);
    color:#cbd9d0;
    font-size:10px;
    line-height:1.45;
    box-shadow:0 14px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(12px);
}
.map-copyright-details[hidden] { display:none !important; }
.map-copyright-details strong {
    display:block;
    margin-bottom:7px;
    color:var(--green);
    font-size:11px;
    letter-spacing:.06em;
}
.map-copyright-details > div + div { margin-top:4px; }
.map-copyright-details a { color:#baf8c5; text-decoration:none; }
.map-copyright-details a:hover { text-decoration:underline; }
.map-copyright-close {
    position:absolute;
    right:7px;
    top:5px;
    width:24px;
    height:24px;
    border:0;
    background:transparent;
    color:#91a298;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}
.map-copyright-close:hover { color:var(--green); }
.map-copyright-tech { color:#7f9187; font-size:9px; }
@media (max-width:720px) {
    .map-copyright-control { margin-right:4px !important; }
    .map-copyright-toggle { font-size:8px; padding:4px 7px; }
    .map-copyright-details { width:min(360px,calc(100vw - 16px)); font-size:9px; }
}


/* v1.5.3 – localized copyright + plain detail close X on every device */
#detailsPanel .close-btn {
    width:auto;
    height:auto;
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:#a9bbb0;
    font-size:27px;
    line-height:1;
}
#detailsPanel .close-btn:hover,
#detailsPanel .close-btn:focus-visible {
    border:0;
    background:transparent;
    box-shadow:none;
    color:var(--green);
    outline:none;
}
@media (max-width:720px) {
    #detailsPanel .close-btn {
        width:auto;
        height:auto;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        font-size:25px;
    }
}


/* v2.2.29 – zusätzliche AIRRADAR-Symbole */
.plane-wrap.glider .plane-icon,
.plane-wrap.military .plane-icon,
.plane-wrap.ground-vehicle .plane-icon { width:30px; height:30px; left:15px; top:5px; }
.plane-wrap.glider .plane-icon svg,
.plane-wrap.military .plane-icon svg,
.plane-wrap.ground-vehicle .plane-icon svg { width:30px; height:30px; }
.plane-wrap.balloon .plane-icon { width:30px; height:30px; left:15px; top:4px; }
.plane-wrap.balloon .plane-icon svg { width:30px; height:30px; }
.plane-wrap.glider .plane-icon { color:#e7f7ff; }
.plane-wrap.balloon .plane-icon { color:#ffcf5d; }
.plane-wrap.military .plane-icon { color:#c9f08e; }
.plane-wrap.ground-vehicle .plane-icon { color:#9fd7ff; }
.plane-wrap.glider .plane-label b::after { content:" GLD"; color:#4e6a76; font-size:7px; font-weight:900; letter-spacing:.05em; }
.plane-wrap.balloon .plane-label b::after { content:" BAL"; color:#7c5800; font-size:7px; font-weight:900; letter-spacing:.05em; }
.plane-wrap.military .plane-label b::after { content:" MIL"; color:#557031; font-size:7px; font-weight:900; letter-spacing:.05em; }
.plane-wrap.ground-vehicle .plane-label b::after { content:" GND"; color:#2d617e; font-size:7px; font-weight:900; letter-spacing:.05em; }
.mini-plane.glider svg,
.mini-plane.balloon svg,
.mini-plane.military svg,
.mini-plane.ground-vehicle svg { transform:scale(1.04); }


/* v2.3.1 – dedicated receiver-source indicator in aircraft detail footer */
.detail-foot {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    column-gap:8px;
}
.detail-foot #dHex {
    justify-self:start;
}
.detail-foot #dRx {
    justify-self:center;
    color:#86c9a2;
    font-weight:900;
    letter-spacing:.09em;
    white-space:nowrap;
}
.detail-foot #dSeen {
    justify-self:end;
    text-align:right;
    white-space:nowrap;
}

/* assets/css/airradar-screws.css */
/*
  J.W. AIRRADAR – Screw Standard v1
  ---------------------------------
  Standard screw: normal panel corners
  Mini screw: small header/interior modules

  Optional:
  style="--screw-angle: 27deg"
*/

:root{
  --ar-screw-standard-size:14px;
  --ar-screw-mini-size:8px;
  --ar-screw-corner-offset:7px;
}

/* core geometry */
.ar-screw{
  --screw-size:var(--ar-screw-standard-size);
  --screw-angle:27deg;

  position:relative;
  display:inline-block;
  width:var(--screw-size);
  height:var(--screw-size);
  flex:0 0 var(--screw-size);
  border-radius:50%;

  /* dark recessed hole + bronze screw head */
  background:
    radial-gradient(circle at 36% 29%,
      rgba(255,235,192,.98) 0 4%,
      #d6a96d 5% 10%,
      #9a693d 18%,
      #684426 34%,
      #342012 53%,
      #160d08 69%,
      #050302 82%,
      #010101 100%);

  border:1px solid #020202;

  box-shadow:
    /* tiny metal highlight */
    inset calc(var(--screw-size) * .05) calc(var(--screw-size) * .06)
      calc(var(--screw-size) * .10) rgba(255,255,255,.24),

    /* deep lower-right shading */
    inset calc(var(--screw-size) * -.08) calc(var(--screw-size) * -.11)
      calc(var(--screw-size) * .18) rgba(0,0,0,.76),

    /* dark recess around the head */
    0 0 0 1px rgba(0,0,0,.88),
    0 0 0 2px rgba(37,22,12,.55),

    /* panel contact shadow */
    1px 2px 2px rgba(0,0,0,.85);
}

/* brushed/slotted cut */
.ar-screw::before{
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  top:16%;
  width:max(1px,calc(var(--screw-size) * .105));
  height:68%;
  transform:
    translateX(-50%)
    rotate(var(--screw-angle));
  transform-origin:center;

  border-radius:2px;

  background:
    linear-gradient(90deg,
      #090402 0%,
      #2c170b 18%,
      #a17243 45%,
      #3c1e0d 57%,
      #090402 100%);

  box-shadow:
    1px 0 0 rgba(255,205,134,.08),
    -1px 0 0 rgba(0,0,0,.46);
}

/* controlled specular glint */
.ar-screw::after{
  content:"";
  position:absolute;
  z-index:3;
  left:18%;
  top:12%;
  width:31%;
  height:20%;
  border-radius:50%;
  transform:rotate(-28deg);

  background:
    radial-gradient(ellipse,
      rgba(255,244,219,.34) 0%,
      rgba(255,216,158,.10) 48%,
      rgba(255,255,255,0) 74%);

  pointer-events:none;
}

.ar-screw--standard{
  --screw-size:var(--ar-screw-standard-size);
}

.ar-screw--mini{
  --screw-size:var(--ar-screw-mini-size);

  /* Mini screws need slightly tighter recess shadows */
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.20),
    inset 0 -1px 2px rgba(0,0,0,.80),
    0 0 0 1px rgba(0,0,0,.84),
    0 0 0 1.5px rgba(37,22,12,.50),
    1px 1px 2px rgba(0,0,0,.78);
}

/* reusable corner positions */
.ar-screw--tl,
.ar-screw--tr,
.ar-screw--bl,
.ar-screw--br{
  position:absolute;
  z-index:20;
}

.ar-screw--tl{
  left:var(--ar-screw-corner-offset);
  top:var(--ar-screw-corner-offset);
}

.ar-screw--tr{
  right:var(--ar-screw-corner-offset);
  top:var(--ar-screw-corner-offset);
}

.ar-screw--bl{
  left:var(--ar-screw-corner-offset);
  bottom:var(--ar-screw-corner-offset);
}

.ar-screw--br{
  right:var(--ar-screw-corner-offset);
  bottom:var(--ar-screw-corner-offset);
}

/* assets/css/airradar-cockpit.css */

/* SOURCE: header-panel.css */
:root{
  --green:#00f579;
  --green-hi:#62ffad;
  --cyan:#19e5be;
  --white:#f4fff9;
  --metal-edge:#294247;
}

*{box-sizing:border-box}
html,body{min-height:100%}

body{
  margin:0;
  background:
    radial-gradient(circle at 50% 0%,rgba(0,245,121,.035),transparent 35%),
    linear-gradient(180deg,#060b0d 0%,#010304 100%);
  font-family:"Segoe UI",Arial,sans-serif;
}

.demo-stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
}

/* -------------------------------------------------------------
   HEADER – ONE COMPLETE COMPONENT
   ------------------------------------------------------------- */

.airradar-header{
  position:relative;
  isolation:isolate;

  width:min(1500px,98vw);
  height:88px;

  display:grid;
  grid-template-columns:minmax(220px,1fr) 82px minmax(430px,520px) 82px minmax(220px,1fr);
  gap:7px;
  padding:4px;

  border:1px solid #2a4246;
  border-radius:4px;

  background:
    linear-gradient(180deg,#132326 0%,#081416 28%,#040a0c 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.9),
    0 8px 24px rgba(0,0,0,.55);
}

.header-texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/header-metal.webp") repeat;
  background-size:1200px 160px;
  opacity:.58;
  mix-blend-mode:soft-light;
  pointer-events:none;
}

.header-reflection{
  position:absolute;
  z-index:1;
  top:0;
  left:6%;
  width:58%;
  height:13px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(220,255,252,.12),rgba(220,255,252,0));
  filter:blur(4px);
  pointer-events:none;
}

/* -------------------------------------------------------------
   SIDE PLATES – SAME LEFT / RIGHT
   ------------------------------------------------------------- */

.side-plate{
  position:relative;
  z-index:2;
  border-radius:4px;
  overflow:hidden;

  background:
    linear-gradient(180deg,
      #112326 0%,
      #0a1719 28%,
      #071113 72%,
      #030709 100%);

  border:1px solid #263f44;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 4px rgba(0,0,0,.72),
    0 0 0 1px rgba(0,0,0,.44);
}

.side-plate::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:2px;
  border:1px solid rgba(137,182,180,.045);
  box-shadow:inset 0 0 14px rgba(0,0,0,.34);
}

/* -------------------------------------------------------------
   STATUS MODULES
   ------------------------------------------------------------- */

.status-module{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
  border-radius:4px;

  background:
    linear-gradient(180deg,#122326 0%,#081315 48%,#030708 100%);
  border:1px solid #243b3f;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 5px rgba(0,0,0,.76),
    0 0 0 1px rgba(0,0,0,.42);
}

.module-bezel{
  position:relative;
  width:46px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:2px;

  background:
    linear-gradient(180deg,#102124 0%,#071113 100%);
  border:1px solid #28464a;

  box-shadow:
    inset 0 0 0 2px #020607,
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.52);
}

.module-bezel::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(0,245,121,.22);
  border-radius:1px;
  box-shadow:
    inset 0 0 8px rgba(0,245,121,.09),
    0 0 7px rgba(0,245,121,.08);
}

.module-led{
  width:16px;
  height:22px;
  border-radius:1px;

  background:
    linear-gradient(180deg,#b8ffd4 0%,#44ff98 20%,#00ed72 62%,#00a84e 100%);

  border:1px solid #87ffc0;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.72),
    inset 0 -2px 3px rgba(0,80,34,.36),
    0 0 6px #00f579,
    0 0 14px rgba(0,245,121,.72),
    0 0 25px rgba(0,245,121,.32);
}

/* -------------------------------------------------------------
   BRAND CORE
   ------------------------------------------------------------- */

.brand-core{
  position:relative;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;

  border-radius:4px;
  border:1px solid #213b3f;

  background:
    linear-gradient(180deg,#0e1c1f 0%,#071315 58%,#030809 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 5px rgba(0,0,0,.75),
    0 0 0 1px rgba(0,0,0,.4);
}

.brand-core::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:2px;
  border:1px solid rgba(114,177,173,.045);
  pointer-events:none;
}

.brand-radar{
  position:relative;
  flex:0 0 66px;
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
}

.brand-radar--logo{
  filter:
    drop-shadow(0 0 10px rgba(0,245,121,.22))
    drop-shadow(0 0 18px rgba(0,245,121,.10));
}

.brand-radar__image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.brand-copy{
  min-width:0;
  text-align:left;
  transform:translateY(-1px);
}

.brand-line{
  display:flex;
  align-items:baseline;
  gap:9px;
  white-space:nowrap;
  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-weight:900;
  letter-spacing:.015em;
  text-shadow:0 1px 0 #000;
}

.brand-jw{
  color:#fff;
  font-size:31px;
}

.brand-airradar{
  color:#18dca5;
  font-size:33px;
  letter-spacing:.025em;
}

.brand-subtitle{
  margin-top:1px;
  color:#00ef8b;
  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.025em;
  white-space:nowrap;
  text-shadow:0 0 5px rgba(0,245,121,.2);
}

/* -------------------------------------------------------------
   SCREWS
   ------------------------------------------------------------- */

.screw,
.module-screw,
.core-screw{
  position:absolute;
  z-index:10;
  width:11px;
  height:11px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 28%,
      #d6b47d 0 7%,
      #8d633c 16%,
      #462d1a 37%,
      #1a100a 58%,
      #040201 82%);
  border:1px solid #050302;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.28),
    0 0 0 1px rgba(0,0,0,.65);
}

.screw::after,
.module-screw::after,
.core-screw::after{
  content:"";
  position:absolute;
  left:50%;
  top:17%;
  width:1px;
  height:66%;
  transform:translateX(-50%) rotate(30deg);
  background:linear-gradient(#100805,#8b623d 46%,#211007 56%,#080403);
}

.screw--tl,.module-screw--tl,.core-screw--tl{left:7px;top:7px}
.screw--tr,.module-screw--tr,.core-screw--tr{right:7px;top:7px}
.screw--bl,.module-screw--bl,.core-screw--bl{left:7px;bottom:7px}
.screw--br,.module-screw--br,.core-screw--br{right:7px;bottom:7px}

.module-screw,
.core-screw{
  width:7px;
  height:7px;
  opacity:.75;
}

.module-screw--tl,.core-screw--tl{left:5px;top:5px}
.module-screw--tr,.core-screw--tr{right:5px;top:5px}
.module-screw--bl,.core-screw--bl{left:5px;bottom:5px}
.module-screw--br,.core-screw--br{right:5px;bottom:5px}

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */

@media(max-width:980px){
  .airradar-header{
    grid-template-columns:minmax(90px,1fr) 70px minmax(340px,1.5fr) 70px minmax(90px,1fr);
    height:82px;
  }

  .brand-radar{
    width:58px;
    height:58px;
    flex-basis:58px;
  }

  .brand-jw{font-size:26px}
  .brand-airradar{font-size:28px}
  .brand-subtitle{font-size:8px}
}

@media(max-width:700px){
  .airradar-header{
    width:98vw;
    grid-template-columns:56px minmax(0,1fr) 56px;
    gap:5px;
  }

  .side-plate{display:none}
  .brand-core{grid-column:auto}
  .status-module{min-width:0}
  .module-bezel{width:38px;height:46px}
  .brand-radar{display:none}
  .brand-core{gap:0}
  .brand-jw{font-size:21px}
  .brand-airradar{font-size:23px}
  .brand-subtitle{font-size:7px}
}


/* SOURCE: layers-panel.css */
:root{
  --green:#00f579;
  --green-hi:#65ffad;
  --green-dark:#00b85d;
  --white:#f0fff8;
  --text-dim:#b6cbc6;
}

*{box-sizing:border-box}
html,body{min-height:100%}
button{font:inherit}

body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,245,121,.05),transparent 36%),
    linear-gradient(180deg,#070c0e 0%,#010304 100%);
}

.demo-stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:26px;
}

/* -------------------------------------------------------------
   ONE COMPLETE LAYERS PANEL
   ------------------------------------------------------------- */

.layers-panel{
  position:relative;
  isolation:isolate;
  width:min(310px,94vw);
  padding:18px 18px 20px;
  overflow:hidden;
  border-radius:9px;

  background:
    linear-gradient(180deg,
      #1a2f33 0%,
      #0b181b 8%,
      #091417 57%,
      #040a0c 100%);

  border:1px solid #294247;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.92),
    inset 0 -10px 18px rgba(0,0,0,.50),
    0 2px 0 #020303,
    0 14px 28px rgba(0,0,0,.54);
}

.layers-panel::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border-radius:6px;
  border:1px solid rgba(163,206,205,.09);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.58);
  pointer-events:none;
}

.panel-texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/panel-metal.webp") repeat;
  background-size:900px 180px;
  mix-blend-mode:soft-light;
  opacity:.72;
  pointer-events:none;
}

.panel-reflection{
  position:absolute;
  z-index:1;
  pointer-events:none;
  left:2%;
  right:18%;
  top:0;
  height:19%;
  transform:skewX(-18deg);
  background:
    linear-gradient(180deg,
      rgba(226,255,252,.075),
      rgba(226,255,252,.015) 43%,
      transparent);
  filter:blur(3px);
}

.layers-panel__inner{
  position:relative;
  z-index:3;
  padding:2px 4px 0;
}

.layers-panel__title{
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 12px;

  color:#f0fff8;
  font-size:19px;
  font-weight:500;
  letter-spacing:.035em;

  text-shadow:
    0 1px 0 #000,
    0 0 6px rgba(0,245,121,.05);
}

/* -------------------------------------------------------------
   BUTTON GRID
   ------------------------------------------------------------- */

.layers-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:0 2px;
}

.layer-button{
  position:relative;
  height:48px;
  border-radius:4px;
  cursor:pointer;

  color:#e6f4f0;
  background:
    linear-gradient(180deg,
      #15292c 0%,
      #0b1719 55%,
      #061012 100%);

  border:1px solid #2e4c51;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 3px rgba(0,0,0,.60),
    0 0 0 2px rgba(0,0,0,.32),
    0 3px 5px rgba(0,0,0,.43);

  font:600 16px/1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.015em;

  transition:
    transform .08s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

.layer-button::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:2px;
  border-top:1px solid rgba(255,255,255,.025);
  pointer-events:none;
}

.layer-button:hover{
  color:#ffffff;
  border-color:rgba(0,245,121,.55);
}

.layer-button:active{
  transform:translateY(1px);
}

.layer-button:focus-visible{
  outline:1px solid var(--green-hi);
  outline-offset:2px;
}

/* active layer button, same family as Flight Level v4 */
.layer-button.is-active{
  color:#021008;
  border-color:#69ffb0;

  background:
    linear-gradient(180deg,
      #5affaa 0%,
      #19f083 47%,
      #00b95e 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -2px 3px rgba(0,60,25,.23),
    0 0 0 2px rgba(0,31,15,.45),
    0 0 12px rgba(0,245,121,.27),
    0 3px 5px rgba(0,0,0,.46);

  font-weight:800;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}

/* -------------------------------------------------------------
   SMALL AIRRADAR SCREWS
   ------------------------------------------------------------- */

.screw{
  position:absolute;
  z-index:20;
  width:14px;
  aspect-ratio:1;
  border-radius:50%;

  background:
    radial-gradient(circle at 35% 28%,
      #e4c69c 0 6%,
      #9b7148 14%,
      #523822 34%,
      #21140d 54%,
      #050302 78%);

  border:1px solid #050302;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    0 0 0 1px rgba(0,0,0,.75),
    1px 2px 2px rgba(0,0,0,.85);
}

.screw::after{
  content:"";
  position:absolute;
  left:50%;
  top:18%;
  width:1px;
  height:64%;
  transform:translateX(-50%) rotate(27deg);
  background:
    linear-gradient(#100805,#a77a4c 46%,#211007 56%,#080403);
}

.screw--tl{left:7px;top:7px}
.screw--tr{right:7px;top:7px}
.screw--bl{left:7px;bottom:7px}
.screw--br{right:7px;bottom:7px}

@media(max-width:420px){
  .demo-stage{padding:10px}
  .layers-panel{width:100%}
  .layer-button{font-size:14px}
}


/* SOURCE: location-panel.css */
:root{
  --green:#00f579;
  --green-hi:#65ffad;
  --green-dark:#00b85d;
  --white:#f0fff8;
  --text-dim:#a9beb9;
}

*{box-sizing:border-box}
html,body{min-height:100%}
button,input{font:inherit}

body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,245,121,.05),transparent 36%),
    linear-gradient(180deg,#070c0e 0%,#010304 100%);
}

.demo-stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:26px;
}

/* -------------------------------------------------------------
   COMPLETE LOCATION PANEL
   ------------------------------------------------------------- */

.location-panel{
  position:relative;
  isolation:isolate;
  width:min(310px,94vw);
  padding:18px 18px 20px;
  overflow:hidden;
  border-radius:9px;

  background:
    linear-gradient(180deg,
      #1a2f33 0%,
      #0b181b 8%,
      #091417 57%,
      #040a0c 100%);

  border:1px solid #294247;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.92),
    inset 0 -10px 18px rgba(0,0,0,.50),
    0 2px 0 #020303,
    0 14px 28px rgba(0,0,0,.54);
}

.location-panel::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border-radius:6px;
  border:1px solid rgba(163,206,205,.09);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.58);
  pointer-events:none;
}

.panel-texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/panel-metal.webp") repeat;
  background-size:900px 180px;
  mix-blend-mode:soft-light;
  opacity:.72;
  pointer-events:none;
}

.panel-reflection{
  position:absolute;
  z-index:1;
  pointer-events:none;
  left:2%;
  right:18%;
  top:0;
  height:17%;
  transform:skewX(-18deg);
  background:
    linear-gradient(180deg,
      rgba(226,255,252,.075),
      rgba(226,255,252,.015) 43%,
      transparent);
  filter:blur(3px);
}

.location-panel__inner{
  position:relative;
  z-index:3;
  padding:2px 4px 0;
}

.location-panel__title{
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 11px;

  color:#f0fff8;
  font-size:19px;
  font-weight:500;
  letter-spacing:.035em;

  text-shadow:
    0 1px 0 #000,
    0 0 6px rgba(0,245,121,.05);
}

/* -------------------------------------------------------------
   SEARCH INPUT
   ------------------------------------------------------------- */

.location-search{
  position:relative;
  display:flex;
  align-items:center;
  height:43px;
  margin:0 2px 11px;
  padding:0 37px 0 39px;
  border-radius:5px;

  background:
    linear-gradient(180deg,
      #081315 0%,
      #040b0d 100%);

  border:1px solid #304d52;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 12px rgba(0,0,0,.56),
    0 2px 4px rgba(0,0,0,.38);

  transition:
    border-color .14s ease,
    box-shadow .14s ease;
}

.location-search:focus-within{
  border-color:rgba(0,245,121,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 12px rgba(0,0,0,.56),
    0 0 8px rgba(0,245,121,.10),
    0 2px 4px rgba(0,0,0,.38);
}

.location-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;

  color:#f0fff8;
  caret-color:var(--green);

  font-size:12px;
  font-weight:500;
  letter-spacing:.005em;
}

.location-search input::placeholder{
  color:#8ca09c;
  opacity:1;
}

/* CSS magnifying glass */
.search-icon{
  position:absolute;
  left:13px;
  top:50%;
  width:15px;
  height:15px;
  transform:translateY(-57%);
  border:2px solid #e9fff7;
  border-radius:50%;
  opacity:.93;
}

.search-icon::after{
  content:"";
  position:absolute;
  width:7px;
  height:2px;
  right:-6px;
  bottom:-3px;
  transform:rotate(45deg);
  transform-origin:left center;
  border-radius:2px;
  background:#e9fff7;
}

.input-clear{
  position:absolute;
  right:8px;
  top:50%;
  width:24px;
  height:24px;
  transform:translateY(-50%);
  padding:0;
  border:0;
  background:transparent;
  color:#7d9791;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s,color .12s;
}

.location-search.has-value .input-clear{
  opacity:1;
  pointer-events:auto;
}

.input-clear:hover{
  color:var(--green-hi);
}

/* -------------------------------------------------------------
   ACTION BUTTONS
   ------------------------------------------------------------- */

.location-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:0 2px;
}

.location-button{
  min-width:0;
  height:43px;
  border-radius:4px;
  cursor:pointer;

  color:#e6f4f0;

  background:
    linear-gradient(180deg,
      #15292c 0%,
      #0b1719 55%,
      #061012 100%);

  border:1px solid #2e4c51;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 3px rgba(0,0,0,.60),
    0 0 0 2px rgba(0,0,0,.32),
    0 3px 5px rgba(0,0,0,.43);

  font:600 13px/1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.01em;

  transition:
    transform .08s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

.location-button:hover{
  color:#fff;
  border-color:rgba(0,245,121,.55);
}

.location-button:active{
  transform:translateY(1px);
}

.location-button:focus-visible{
  outline:1px solid var(--green-hi);
  outline-offset:2px;
}

.location-button--primary{
  color:#021008;
  border-color:#69ffb0;

  background:
    linear-gradient(180deg,
      #5affaa 0%,
      #19f083 47%,
      #00b95e 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -2px 3px rgba(0,60,25,.23),
    0 0 0 2px rgba(0,31,15,.45),
    0 0 12px rgba(0,245,121,.27),
    0 3px 5px rgba(0,0,0,.46);

  font-weight:800;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}

/* -------------------------------------------------------------
   SMALL STATUS LINE
   ------------------------------------------------------------- */

.location-status{
  display:flex;
  align-items:center;
  gap:7px;
  height:18px;
  margin:9px 4px -5px;

  color:#6f8e88;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}

.status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#55706b;
  box-shadow:0 0 4px rgba(0,0,0,.4);
  transition:.14s ease;
}

.location-status.is-active{
  color:#7abf9d;
}

.location-status.is-active .status-dot{
  background:var(--green);
  box-shadow:
    0 0 5px rgba(0,245,121,.58),
    0 0 10px rgba(0,245,121,.22);
}

/* -------------------------------------------------------------
   SMALL AIRRADAR SCREWS
   ------------------------------------------------------------- */

.screw{
  position:absolute;
  z-index:20;
  width:14px;
  aspect-ratio:1;
  border-radius:50%;

  background:
    radial-gradient(circle at 35% 28%,
      #e4c69c 0 6%,
      #9b7148 14%,
      #523822 34%,
      #21140d 54%,
      #050302 78%);

  border:1px solid #050302;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    0 0 0 1px rgba(0,0,0,.75),
    1px 2px 2px rgba(0,0,0,.85);
}

.screw::after{
  content:"";
  position:absolute;
  left:50%;
  top:18%;
  width:1px;
  height:64%;
  transform:translateX(-50%) rotate(27deg);
  background:
    linear-gradient(#100805,#a77a4c 46%,#211007 56%,#080403);
}

.screw--tl{left:7px;top:7px}
.screw--tr{right:7px;top:7px}
.screw--bl{left:7px;bottom:7px}
.screw--br{right:7px;bottom:7px}

@media(max-width:420px){
  .demo-stage{padding:10px}
  .location-panel{width:100%}
  .location-button{font-size:12px}
}


/* SOURCE: maptype-panel.css */
:root{
  --green:#00f579;
  --green-hi:#65ffad;
  --green-dark:#00b85d;
  --white:#f0fff8;
  --text-dim:#b6cbc6;
}

*{box-sizing:border-box}
html,body{min-height:100%}
button{font:inherit}

body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,245,121,.05),transparent 36%),
    linear-gradient(180deg,#070c0e 0%,#010304 100%);
}

.demo-stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:26px;
}

/* -------------------------------------------------------------
   ONE COMPLETE LAYERS PANEL
   ------------------------------------------------------------- */

.maptype-panel{
  position:relative;
  isolation:isolate;
  width:min(310px,94vw);
  padding:16px 18px 18px;
  overflow:hidden;
  border-radius:9px;

  background:
    linear-gradient(180deg,
      #1a2f33 0%,
      #0b181b 8%,
      #091417 57%,
      #040a0c 100%);

  border:1px solid #294247;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.92),
    inset 0 -10px 18px rgba(0,0,0,.50),
    0 2px 0 #020303,
    0 14px 28px rgba(0,0,0,.54);
}

.maptype-panel::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border-radius:6px;
  border:1px solid rgba(163,206,205,.09);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.58);
  pointer-events:none;
}

.panel-texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/panel-metal.webp") repeat;
  background-size:900px 180px;
  mix-blend-mode:soft-light;
  opacity:.72;
  pointer-events:none;
}

.panel-reflection{
  position:absolute;
  z-index:1;
  pointer-events:none;
  left:2%;
  right:18%;
  top:0;
  height:19%;
  transform:skewX(-18deg);
  background:
    linear-gradient(180deg,
      rgba(226,255,252,.075),
      rgba(226,255,252,.015) 43%,
      transparent);
  filter:blur(3px);
}

.maptype-panel__inner{
  position:relative;
  z-index:3;
  padding:2px 4px 0;
}

.maptype-panel__title{
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 10px;

  color:#f0fff8;
  font-size:19px;
  font-weight:500;
  letter-spacing:.035em;

  text-shadow:
    0 1px 0 #000,
    0 0 6px rgba(0,245,121,.05);
}

/* -------------------------------------------------------------
   BUTTON GRID
   ------------------------------------------------------------- */

.maptype-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:0 2px;
}

.maptype-button{
  position:relative;
  height:46px;
  border-radius:4px;
  cursor:pointer;

  color:#e6f4f0;
  background:
    linear-gradient(180deg,
      #15292c 0%,
      #0b1719 55%,
      #061012 100%);

  border:1px solid #2e4c51;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 3px rgba(0,0,0,.60),
    0 0 0 2px rgba(0,0,0,.32),
    0 3px 5px rgba(0,0,0,.43);

  font:700 15px/1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.015em;

  transition:
    transform .08s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

.maptype-button::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:2px;
  border-top:1px solid rgba(255,255,255,.025);
  pointer-events:none;
}

.maptype-button:hover{
  color:#ffffff;
  border-color:rgba(0,245,121,.55);
}

.maptype-button:active{
  transform:translateY(1px);
}

.maptype-button:focus-visible{
  outline:1px solid var(--green-hi);
  outline-offset:2px;
}

/* active layer button, same family as Flight Level v4 */
.maptype-button.is-active{
  color:#021008;
  border-color:#69ffb0;

  background:
    linear-gradient(180deg,
      #5affaa 0%,
      #19f083 47%,
      #00b95e 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -2px 3px rgba(0,60,25,.23),
    0 0 0 2px rgba(0,31,15,.45),
    0 0 12px rgba(0,245,121,.27),
    0 3px 5px rgba(0,0,0,.46);

  font-weight:800;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}

/* -------------------------------------------------------------
   SMALL AIRRADAR SCREWS
   ------------------------------------------------------------- */

.screw{
  position:absolute;
  z-index:20;
  width:14px;
  aspect-ratio:1;
  border-radius:50%;

  background:
    radial-gradient(circle at 35% 28%,
      #e4c69c 0 6%,
      #9b7148 14%,
      #523822 34%,
      #21140d 54%,
      #050302 78%);

  border:1px solid #050302;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    0 0 0 1px rgba(0,0,0,.75),
    1px 2px 2px rgba(0,0,0,.85);
}

.screw::after{
  content:"";
  position:absolute;
  left:50%;
  top:18%;
  width:1px;
  height:64%;
  transform:translateX(-50%) rotate(27deg);
  background:
    linear-gradient(#100805,#a77a4c 46%,#211007 56%,#080403);
}

.screw--tl{left:7px;top:7px}
.screw--tr{right:7px;top:7px}
.screw--bl{left:7px;bottom:7px}
.screw--br{right:7px;bottom:7px}

@media(max-width:420px){
  .demo-stage{padding:10px}
  .maptype-panel{width:100%}
  .maptype-button{font-size:14px}
}


/* SOURCE: settings-panel.css */
:root{
  --green:#00f579;
  --green-hi:#65ffad;
  --green-dark:#00b85d;
  --white:#f0fff8;
  --text-dim:#b6cbc6;
}

*{box-sizing:border-box}
html,body{min-height:100%}
button{font:inherit}

body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,245,121,.05),transparent 36%),
    linear-gradient(180deg,#070c0e 0%,#010304 100%);
}

.demo-stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:26px;
}

/* -------------------------------------------------------------
   ONE COMPLETE LAYERS PANEL
   ------------------------------------------------------------- */

.settings-panel{
  position:relative;
  isolation:isolate;
  width:min(310px,94vw);
  padding:18px 18px 20px;
  overflow:hidden;
  border-radius:9px;

  background:
    linear-gradient(180deg,
      #1a2f33 0%,
      #0b181b 8%,
      #091417 57%,
      #040a0c 100%);

  border:1px solid #294247;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.92),
    inset 0 -10px 18px rgba(0,0,0,.50),
    0 2px 0 #020303,
    0 14px 28px rgba(0,0,0,.54);
}

.settings-panel::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border-radius:6px;
  border:1px solid rgba(163,206,205,.09);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.58);
  pointer-events:none;
}

.panel-texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/panel-metal.webp") repeat;
  background-size:900px 180px;
  mix-blend-mode:soft-light;
  opacity:.72;
  pointer-events:none;
}

.panel-reflection{
  position:absolute;
  z-index:1;
  pointer-events:none;
  left:2%;
  right:18%;
  top:0;
  height:19%;
  transform:skewX(-18deg);
  background:
    linear-gradient(180deg,
      rgba(226,255,252,.075),
      rgba(226,255,252,.015) 43%,
      transparent);
  filter:blur(3px);
}

.settings-panel__inner{
  position:relative;
  z-index:3;
  padding:2px 4px 0;
}

.settings-panel__title{
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 12px;

  color:#f0fff8;
  font-size:19px;
  font-weight:500;
  letter-spacing:.035em;

  text-shadow:
    0 1px 0 #000,
    0 0 6px rgba(0,245,121,.05);
}

/* -------------------------------------------------------------
   BUTTON GRID
   ------------------------------------------------------------- */

.settings-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:0 2px;
}

.settings-button{
  position:relative;
  height:48px;
  border-radius:4px;
  cursor:pointer;

  color:#e6f4f0;
  background:
    linear-gradient(180deg,
      #15292c 0%,
      #0b1719 55%,
      #061012 100%);

  border:1px solid #2e4c51;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 3px rgba(0,0,0,.60),
    0 0 0 2px rgba(0,0,0,.32),
    0 3px 5px rgba(0,0,0,.43);

  font:600 16px/1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.015em;

  transition:
    transform .08s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

.settings-button::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:2px;
  border-top:1px solid rgba(255,255,255,.025);
  pointer-events:none;
}

.settings-button:hover{
  color:#ffffff;
  border-color:rgba(0,245,121,.55);
}

.settings-button:active{
  transform:translateY(1px);
}

.settings-button:focus-visible{
  outline:1px solid var(--green-hi);
  outline-offset:2px;
}

/* INFO action */
.settings-button--info{
  color:#eaf8f4;
}

/* currently unassigned buttons */
.settings-button--empty{
  cursor:default;
  color:#60716d;
  border-color:#22383c;
  background:
    linear-gradient(180deg,
      #101b1e 0%,
      #091113 58%,
      #05090b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -2px 3px rgba(0,0,0,.64),
    0 0 0 2px rgba(0,0,0,.30),
    0 3px 5px rgba(0,0,0,.38);
  text-shadow:none;
  opacity:.76;
}

.settings-button--empty:hover{
  color:#60716d;
  border-color:#22383c;
}

.settings-button--empty:active{
  transform:none;
}

.settings-button--empty:disabled{
  opacity:.76;
}

/* brief press feedback for INFO */
.settings-button--info.is-pressed{
  color:#021008;
  border-color:#69ffb0;
  background:
    linear-gradient(180deg,
      #5affaa 0%,
      #19f083 47%,
      #00b95e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -2px 3px rgba(0,60,25,.23),
    0 0 0 2px rgba(0,31,15,.45),
    0 0 12px rgba(0,245,121,.27),
    0 3px 5px rgba(0,0,0,.46);
  font-weight:800;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}

/* -------------------------------------------------------------
   SMALL AIRRADAR SCREWS
   ------------------------------------------------------------- */

.screw{
  position:absolute;
  z-index:20;
  width:14px;
  aspect-ratio:1;
  border-radius:50%;

  background:
    radial-gradient(circle at 35% 28%,
      #e4c69c 0 6%,
      #9b7148 14%,
      #523822 34%,
      #21140d 54%,
      #050302 78%);

  border:1px solid #050302;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    0 0 0 1px rgba(0,0,0,.75),
    1px 2px 2px rgba(0,0,0,.85);
}

.screw::after{
  content:"";
  position:absolute;
  left:50%;
  top:18%;
  width:1px;
  height:64%;
  transform:translateX(-50%) rotate(27deg);
  background:
    linear-gradient(#100805,#a77a4c 46%,#211007 56%,#080403);
}

.screw--tl{left:7px;top:7px}
.screw--tr{right:7px;top:7px}
.screw--bl{left:7px;bottom:7px}
.screw--br{right:7px;bottom:7px}

@media(max-width:420px){
  .demo-stage{padding:10px}
  .settings-panel{width:100%}
  .settings-button{font-size:14px}
}


/* SOURCE: main-display.css */

:root{
  --bg0:#020405;
  --bg1:#071012;

  --metal-deep:#061012;
  --metal-mid:#0d1b1e;
  --metal-light:#183137;
  --metal-edge:#304b50;
  --metal-cool:#193136;

  --screen-green:#00ff78;
  --screen-green-dim:rgba(0,255,120,.18);
  --screen-cyan:#26eac0;
}

*{ box-sizing:border-box; }

html,body{
  min-height:100%;
}

body{
  margin:0;
  background:
    radial-gradient(circle at 50% -10%, rgba(50,132,126,.13), transparent 35%),
    linear-gradient(180deg,#070c0e 0%,#020405 100%);
  color:#edfef7;
  font-family:"Segoe UI",Arial,sans-serif;
}

.demo-stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  align-content:center;
  gap:18px;
  padding:22px;
}

/* ================================================================
   MAIN DISPLAY – WHOLE COMPONENT
   ================================================================ */

.main-display{
  position:relative;
  width:min(1600px,97vw);
  aspect-ratio:16 / 8.7;

  /* not just a box-shadow: this is the "mass" of the complete module */
  filter:
    drop-shadow(0 34px 45px rgba(0,0,0,.86))
    drop-shadow(0 6px 8px rgba(0,0,0,.72));
}

.main-display__outer-shell{
  position:absolute;
  inset:0;
  isolation:isolate;
  overflow:hidden;

  padding:30px;
  border-radius:16px;

  /*
    Layered blackened metal:
    top receives the strongest light, lower edge is almost black.
  */
  background:
    linear-gradient(180deg,
      rgba(196,238,235,.10) 0%,
      rgba(97,139,143,.05) 1.1%,
      rgba(16,31,35,.97) 2.4%,
      rgba(8,18,21,1) 7%,
      rgba(12,25,29,1) 31%,
      rgba(11,23,27,1) 61%,
      rgba(6,13,16,1) 90%,
      rgba(1,4,5,1) 100%);

  border:1px solid #344c51;

  box-shadow:
    /* razor-thin top specular edge */
    inset 0 1px 0 rgba(224,255,251,.22),

    /* cold metal edge */
    inset 0 2px 0 rgba(79,118,123,.16),

    /* lower mass / shadow */
    inset 0 -2px 0 rgba(0,0,0,.96),
    inset 0 -14px 24px rgba(0,0,0,.64),

    /* side roundness */
    inset 10px 0 24px rgba(255,255,255,.012),
    inset -13px 0 26px rgba(0,0,0,.32),

    /* outer lip */
    0 1px 0 rgba(90,129,133,.46),
    0 3px 0 #010303,
    0 8px 14px rgba(0,0,0,.54);
}

/* Outer fine seam */
.main-display__outer-shell::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:5px;
  pointer-events:none;
  border-radius:12px;
  border:1px solid rgba(164,210,210,.105);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.62),
    inset 0 0 18px rgba(0,0,0,.2);
}

/* Directional highlight: top-left light source */
.main-display__outer-shell::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  border-radius:inherit;

  background:
    /* cool glint across upper edge */
    linear-gradient(104deg,
      rgba(255,255,255,.085) 0%,
      rgba(180,224,222,.032) 15%,
      transparent 31%,
      transparent 66%,
      rgba(255,255,255,.012) 88%,
      transparent 100%),

    /* soft corner highlight */
    radial-gradient(circle at 11% 4%,
      rgba(228,255,251,.065),
      transparent 17%),

    /* right/bottom natural darkening */
    radial-gradient(circle at 93% 91%,
      rgba(0,0,0,.32),
      transparent 28%);
}

/* Real texture file over metal */
.main-display__metal-grain{
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;

  background-image:url("assets/brushed-metal.webp");
  background-repeat:repeat;
  background-size:1200px 220px;

  opacity:.74;
  mix-blend-mode:soft-light;
}

/* Broad reflected light strip – deliberately irregular */
.main-display__outer-gloss{
  position:absolute;
  z-index:4;
  left:-5%;
  top:-2%;
  width:108%;
  height:22%;
  pointer-events:none;

  background-image:url("assets/specular-reflection.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 100%;

  opacity:.62;
  transform:rotate(-.35deg);
  mix-blend-mode:screen;
}

/* ================================================================
   RECESS / BEVEL INTO THE DISPLAY
   ================================================================ */

.main-display__recess{
  position:relative;
  z-index:5;
  width:100%;
  height:100%;
  border-radius:10px;

  padding:7px;

  /*
    This is the deep recess into the housing.
    Bright upper-left lip, dark lower-right lip.
  */
  background:
    linear-gradient(145deg,
      #1c3034 0%,
      #0c171a 10%,
      #030809 46%,
      #010405 74%,
      #111f22 100%);

  border:1px solid #263d42;

  box-shadow:
    /* upper lip */
    inset 0 1px 1px rgba(180,229,223,.10),

    /* strong cavity shadows */
    inset 0 10px 15px rgba(0,0,0,.62),
    inset 0 -8px 15px rgba(0,0,0,.84),
    inset 8px 0 12px rgba(0,0,0,.53),
    inset -8px 0 14px rgba(0,0,0,.72),

    /* seam separation from metal shell */
    0 0 0 1px rgba(0,0,0,.84),
    0 2px 5px rgba(0,0,0,.7);
}

.main-display__inner-bevel{
  position:relative;
  width:100%;
  height:100%;
  padding:5px;
  border-radius:10px;

  background:
    linear-gradient(145deg,
      #071214 0%,
      #020708 31%,
      #010404 72%,
      #0c191b 100%);

  border:1px solid #1e3439;

  box-shadow:
    inset 0 1px 0 rgba(194,239,234,.06),
    inset 0 0 0 1px rgba(0,0,0,.9),
    inset 0 8px 11px rgba(0,0,0,.65),
    inset 0 -6px 9px rgba(0,0,0,.9);
}

/* ================================================================
   SCREEN
   ================================================================ */

.main-display__screen{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;

  border-radius:6px;
  background:
    radial-gradient(circle at 50% 45%,rgba(0,255,120,.04),transparent 44%),
    linear-gradient(180deg,#00120e 0%,#000b08 63%,#000504 100%);

  border:1px solid rgba(21,218,143,.44);

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.92),
    inset 0 0 30px rgba(0,0,0,.73),
    inset 0 0 90px rgba(0,0,0,.31),
    0 0 10px rgba(0,255,120,.08);
}

/* screen glass reflection != metal reflection */
.main-display__screen-glass{
  position:absolute;
  z-index:20;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(118deg,
      rgba(224,255,250,.046) 0%,
      rgba(224,255,250,.018) 13%,
      transparent 23%,
      transparent 67%,
      rgba(255,255,255,.010) 91%,
      transparent 100%),

    radial-gradient(circle at 25% -5%,
      rgba(142,255,230,.027),
      transparent 30%);

  mix-blend-mode:screen;
}

.main-display__screen-vignette{
  position:absolute;
  z-index:21;
  inset:0;
  pointer-events:none;

  box-shadow:
    inset 0 0 24px rgba(0,0,0,.65),
    inset 0 0 92px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(161,255,224,.045);
}

/* ================================================================
   PHOTOREAL SCREWS
   ================================================================ */

.screw{
  position:absolute;
  z-index:30;
  width:18px;
  aspect-ratio:1;
  border-radius:50%;

  /*
    Brass-like screw:
    bright top-left, oxidized dark lower-right.
  */
  background:
    radial-gradient(circle at 34% 27%,
      #fff0ce 0 4%,
      #d9a46b 7%,
      #a86836 17%,
      #74411f 32%,
      #3a1d0e 48%,
      #160a05 63%,
      #030101 78%);

  border:1px solid #070302;

  box-shadow:
    /* tiny highlight */
    inset 0 1px 1px rgba(255,255,255,.54),

    /* body depth */
    inset -2px -3px 4px rgba(0,0,0,.86),

    /* black seat around screw */
    0 0 0 2px rgba(0,0,0,.64),
    0 0 0 3px rgba(114,70,39,.19),

    /* cast shadow */
    2px 3px 4px rgba(0,0,0,.92);
}

.screw::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;

  background:
    radial-gradient(circle at 31% 27%,
      rgba(255,255,255,.22),
      transparent 28%);

  box-shadow:
    inset 1px 1px 1px rgba(255,225,184,.12),
    inset -1px -2px 2px rgba(0,0,0,.65);
}

.screw::after{
  content:"";
  position:absolute;
  left:50%;
  top:17%;
  width:2px;
  height:66%;

  transform:translateX(-50%) rotate(28deg);
  border-radius:2px;

  background:
    linear-gradient(90deg,
      #080302 0%,
      #2c1409 24%,
      #8c512c 48%,
      #c88a53 53%,
      #34170a 70%,
      #080302 100%);

  box-shadow:
    1px 0 0 rgba(255,255,255,.08),
    -1px 0 0 rgba(0,0,0,.75);
}

.screw--tl{ left:10px; top:10px; }
.screw--tr{ right:10px; top:10px; }
.screw--bl{ left:10px; bottom:10px; }
.screw--br{ right:10px; bottom:10px; }

/* ================================================================
   DEMO CONTENT – only to judge the frame
   ================================================================ */

.screen-demo{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(0,228,111,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,228,111,.055) 1px,transparent 1px);
  background-size:40px 40px;
}

.screen-demo__radar{
  position:absolute;
  width:64%;
  aspect-ratio:1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid rgba(240,255,248,.72);
}

.screen-demo__rings{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle,
      transparent 0 43px,
      rgba(0,239,120,.52) 44px 45px,
      transparent 46px 87px);
}

.screen-demo__axis{
  position:absolute;
  background:rgba(0,244,120,.55);
}

.screen-demo__axis--v{
  left:50%;
  top:-8%;
  bottom:-8%;
  width:1px;
}

.screen-demo__axis--h{
  top:50%;
  left:-8%;
  right:-8%;
  height:1px;
}

.screen-demo__sweep{
  position:absolute;
  inset:4%;
  border-radius:50%;
  background:conic-gradient(
    from 18deg,
    transparent 0 316deg,
    rgba(0,255,117,.02) 320deg,
    rgba(0,255,117,.24) 347deg,
    rgba(51,255,160,.62) 357deg,
    transparent 360deg);
  animation:sweep 8s linear infinite;
}

@keyframes sweep{
  to{ transform:rotate(360deg); }
}

.demo-plane{
  position:absolute;
  font-size:clamp(19px,2vw,33px);
  color:#f6fff9;
  text-shadow:0 0 4px rgba(255,255,255,.18);
}

.demo-plane.p1{ left:19%; top:26%; transform:rotate(27deg); }
.demo-plane.p2{ left:41%; top:34%; transform:rotate(-14deg); color:#ffd000; }
.demo-plane.p3{ left:61%; top:31%; transform:rotate(34deg); color:#ffd000; }
.demo-plane.p4{ left:68%; top:58%; transform:rotate(3deg); }

.main-display__overlay-layer{
  position:absolute;
  inset:0;
  z-index:15;
  pointer-events:none;
}

.caption{
  margin:0;
  color:#82999c;
  font-size:13px;
  letter-spacing:.035em;
  text-align:center;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media(max-width:900px){
  .demo-stage{ padding:10px; }

  .main-display{
    width:100%;
    aspect-ratio:4 / 3;
  }

  .main-display__outer-shell{
    padding:24px;
    border-radius:12px;
  }

  .main-display__recess{
    padding:7px;
  }

  .main-display__inner-bevel{
    padding:4px;
  }

  .screw{
    width:14px;
  }

  .screw--tl{ left:8px; top:8px; }
  .screw--tr{ right:8px; top:8px; }
  .screw--bl{ left:8px; bottom:8px; }
  .screw--br{ right:8px; bottom:8px; }

  .screen-demo__radar{
    width:73%;
  }
}


/* SOURCE: hud-time-status.css */
:root{
  --bg0:#040708;
  --bg1:#071012;
  --screen-green:#00ff7a;
  --screen-green-soft:rgba(0,255,122,.14);
  --screen-green-line:rgba(0,255,122,.75);
  --screen-cyan:#1fe6c6;
  --text-main:#effff7;
  --text-soft:#9fc5bc;
  --panel-dark:#071112;
  --panel-dark-2:#020809;
  --panel-edge:#1a3838;
}

*{box-sizing:border-box}
html,body{min-height:100%}

body{
  margin:0;
  font-family:"Segoe UI", Arial, sans-serif;
  color:var(--text-main);
  background:
    radial-gradient(circle at 50% 0%, rgba(0,255,122,.05), transparent 35%),
    linear-gradient(180deg,#05090a 0%, #010203 100%);
}

.demo-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.screen-stage{
  position:relative;
  width:min(1400px, 96vw);
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(0,255,122,.25);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,255,122,.04), transparent 42%),
    linear-gradient(180deg,#00110d 0%, #000805 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.85),
    inset 0 0 34px rgba(0,0,0,.72),
    0 24px 42px rgba(0,0,0,.65);
}

.screen-stage__radar{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(0,230,115,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,230,115,.06) 1px, transparent 1px);
  background-size:42px 42px;
}

.screen-stage__radar::before{
  content:"";
  position:absolute;
  width:58%;
  aspect-ratio:1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid rgba(236,255,245,.72);
  box-shadow:0 0 0 1px rgba(0,255,122,.12);
}

.screen-stage__radar::after{
  content:"";
  position:absolute;
  width:54%;
  aspect-ratio:1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    repeating-radial-gradient(circle,
      transparent 0 42px,
      rgba(0,240,119,.45) 43px 44px,
      transparent 45px 85px);
  opacity:.72;
}

/* HUD TIME / STATUS COMPONENT */
.hud-time-status{
  position:absolute;
  top:18px;
  left:18px;
  width:min(350px, 34%);
  min-width:260px;
  border-radius:8px;
  overflow:hidden;
  isolation:isolate;

  background:
    linear-gradient(180deg,
      rgba(16,31,31,.96) 0%,
      rgba(4,13,13,.96) 48%,
      rgba(1,8,8,.97) 100%);

  border:1px solid var(--screen-green-line);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 18px rgba(0,0,0,.42),
    0 0 10px rgba(0,255,122,.06),
    0 8px 18px rgba(0,0,0,.46);
}

.hud-time-status::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%),
    radial-gradient(circle at 12% 0%, rgba(0,255,122,.08), transparent 30%);
}

.hud-time-status__inner{
  position:relative;
  z-index:1;
  padding:14px 16px 12px 16px;
}

.hud-time-status__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:30px;
}

.hud-time-status__row--top{
  min-height:38px;
}

.hud-time-status__row--accent{
  margin-top:2px;
}

.hud-label{
  color:var(--text-soft);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.hud-value{
  color:var(--text-main);
  font-family:Consolas, "Roboto Mono", monospace;
  font-size:16px;
  letter-spacing:.04em;
  text-shadow:0 0 5px rgba(0,255,122,.08);
}

.hud-value--time{
  font-size:24px;
  font-weight:700;
  letter-spacing:.08em;
}

.hud-value--accent{
  color:var(--screen-cyan);
  font-size:20px;
  font-weight:700;
}

.hud-time-status__separator{
  height:1px;
  margin:10px 0 10px 0;
  background:
    linear-gradient(90deg,
      rgba(230,255,248,.08) 0%,
      rgba(0,255,122,.70) 18%,
      rgba(0,255,122,.35) 82%,
      rgba(255,255,255,.04) 100%);
  box-shadow:0 0 4px rgba(0,255,122,.10);
}

.hud-time-status__footer{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding-top:2px;
}

.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--screen-green);
  box-shadow:
    0 0 8px rgba(0,255,122,.55),
    0 0 1px rgba(255,255,255,.8);
}

.hud-footer-text{
  color:var(--screen-cyan);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.hud-time-status__glass{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.05) 0%,
      rgba(255,255,255,.015) 12%,
      transparent 24%,
      transparent 72%,
      rgba(255,255,255,.010) 100%);
  mix-blend-mode:screen;
}

@media (max-width:900px){
  .demo-page{padding:10px}
  .screen-stage{width:100%; aspect-ratio:4 / 3}
  .hud-time-status{
    top:12px;
    left:12px;
    width:min(82%, 340px);
    min-width:unset;
  }
  .hud-time-status__inner{padding:12px}
  .hud-value--time{font-size:20px}
  .hud-value{font-size:14px}
}


/* SOURCE: range-panel.css */
:root{
  --green:#00f579;
  --green-hi:#6affb2;
  --white:#f0fff8;
  --panel-edge:#294247;
}

*{box-sizing:border-box}
html,body{min-height:100%}
button{font:inherit}

body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,245,121,.05),transparent 36%),
    linear-gradient(180deg,#070c0e 0%,#010304 100%);
}

.demo-stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:26px;
}

.range-panel{
  position:relative;
  isolation:isolate;
  width:min(470px,96vw);
  aspect-ratio:470 / 241;
  overflow:hidden;
  border-radius:9px;
  background:
    linear-gradient(180deg,#1a2f33 0%,#0b181b 8%,#091417 57%,#040a0c 100%);
  border:1px solid var(--panel-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.92),
    inset 0 -10px 18px rgba(0,0,0,.50),
    0 2px 0 #020303,
    0 14px 28px rgba(0,0,0,.54);
}

.range-panel::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border-radius:6px;
  border:1px solid rgba(163,206,205,.09);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.58);
  pointer-events:none;
}

.panel-texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/panel-metal.webp") repeat;
  background-size:900px 180px;
  mix-blend-mode:soft-light;
  opacity:.72;
  pointer-events:none;
}

.panel-reflection{
  position:absolute;
  z-index:1;
  pointer-events:none;
  left:2%;
  right:18%;
  top:0;
  height:17%;
  transform:skewX(-18deg);
  background:linear-gradient(180deg,rgba(226,255,252,.07),rgba(226,255,252,.012) 43%,transparent);
  filter:blur(3px);
}

.range-panel__inner{
  position:relative;
  z-index:3;
  width:100%;
  height:100%;
}

.range-panel__title{
  position:absolute;
  left:0;
  right:0;
  top:16px;
  text-align:center;
  color:#f0fff8;
  font-size:20px;
  font-weight:500;
  letter-spacing:.03em;
  text-shadow:0 1px 0 #000,0 0 6px rgba(0,245,121,.05);
}

.dial{
  --center-x: 170px;
  --center-y: 102px;
  --label-radius: 84px;
  position:absolute;
  left:50%;
  top:50px;
  width:340px;
  height:176px;
  transform:translateX(-50%);
}

.dial__guide-ring{
  display:none;
}

/* label groups are positioned via JS on the same exact radius */
.range-mark{
  position:absolute;
  width:62px;
  height:44px;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#dffef0;
  cursor:pointer;
  transform:translate(-50%,-50%);
}

.range-mark__label{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  font-size:16px;
  line-height:1;
  font-weight:500;
  text-shadow:0 1px 0 #000;
  white-space:nowrap;
}

.range-mark__tick{
  position:absolute;
  left:50%;
  top:24px;
  width:6px;
  height:6px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(112,255,176,.62);
  box-shadow:
    0 0 4px rgba(0,245,121,.08),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.range-mark:hover .range-mark__label{
  color:#ffffff;
  text-shadow:
    0 1px 0 #000,
    0 0 8px rgba(0,245,121,.25);
}

.range-mark:hover .range-mark__tick{
  background:rgba(121,255,182,.92);
  box-shadow:
    0 0 7px rgba(0,245,121,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.range-mark--active .range-mark__label{
  color:var(--green-hi);
  font-weight:700;
  text-shadow:
    0 1px 0 #000,
    0 0 7px rgba(0,245,121,.92),
    0 0 18px rgba(0,245,121,.56);
}

.range-mark--active .range-mark__tick{
  background:var(--green-hi);
  box-shadow:
    0 0 7px rgba(0,245,121,.86),
    0 0 16px rgba(0,245,121,.48),
    inset 0 1px 0 rgba(255,255,255,.30);
}

/* completely rebuilt knob */
.dial__knob{
  position:absolute;
  z-index:8;
  left:50%;
  top:39px;
  width:126px;
  height:126px;
  transform:translateX(-50%);
  padding:0;
  border-radius:50%;
  cursor:grab;
  border:0;
  background:transparent;
  filter:
    drop-shadow(0 8px 8px rgba(0,0,0,.62))
    drop-shadow(0 0 10px rgba(0,245,121,.10));
}

.dial__knob:active{
  cursor:grabbing;
}

.dial__knob-outer{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      #182326 0 51%,
      #081113 52% 58%,
      rgba(90,255,165,.92) 59% 61.2%,
      rgba(11,42,28,.85) 62% 67%,
      #081113 68% 79%,
      #121e21 80% 100%);
  border:1px solid #050d0f;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.05),
    inset 0 -5px 9px rgba(0,0,0,.80),
    inset 0 0 0 1px rgba(255,255,255,.015),
    0 0 10px rgba(0,245,121,.16),
    0 0 0 2px rgba(0,0,0,.64);
}

.dial__knob-ring{
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1px solid rgba(90,255,165,.22);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.38),
    0 0 8px rgba(0,245,121,.10);
  pointer-events:none;
}

.dial__knob-inner{
  position:absolute;
  inset:15px;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 30%,
      rgba(110,145,150,.20) 0%,
      rgba(51,70,74,.12) 18%,
      rgba(19,31,33,.98) 35%,
      #111b1d 55%,
      #0b1113 78%,
      #040809 100%);
  box-shadow:
    inset 0 10px 16px rgba(255,255,255,.018),
    inset 0 -12px 18px rgba(0,0,0,.76),
    inset 0 0 0 1px rgba(255,255,255,.02);
}

.dial__knob-shadow{
  position:absolute;
  inset:14px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 76%,
      rgba(0,0,0,.34),
      rgba(0,0,0,0) 52%);
  pointer-events:none;
}

.dial__knob-gloss{
  position:absolute;
  inset:11px;
  border-radius:50%;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.07) 0%,
      rgba(255,255,255,.03) 13%,
      transparent 27%,
      transparent 70%,
      rgba(255,255,255,.01) 100%);
  pointer-events:none;
}

.dial__led-arm{
  position:absolute;
  z-index:12;
  left:50%;
  top:50%;
  width:0;
  height:0;
  transform:rotate(0deg);
  transform-origin:0 0;
  pointer-events:none;
  transition:transform .16s ease-out;
}

.dial__led-core{
  position:absolute;
  left:0;
  top:-3px;
  width:44px;
  height:6px;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      rgba(0,245,121,0) 0%,
      rgba(127,255,191,.68) 10%,
      rgba(233,255,244,.98) 16%,
      rgba(32,255,142,.98) 38%,
      rgba(0,225,112,.92) 72%,
      rgba(0,150,78,0) 100%);
  box-shadow:
    0 0 4px rgba(179,255,217,.75),
    0 0 10px rgba(0,245,121,.78),
    0 0 18px rgba(0,245,121,.44);
}

.dial__led-glow{
  position:absolute;
  left:11px;
  top:-13px;
  width:34px;
  height:26px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,245,121,.30) 0%, rgba(0,245,121,.13) 38%, rgba(0,245,121,0) 72%);
  filter:blur(3px);
}

.dial__knob--new::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  border:1px solid rgba(90,255,165,.12);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.24),
    0 0 6px rgba(0,245,121,.08);
  pointer-events:none;
}

/* v4-style screws */
.screw{
  position:absolute;
  z-index:20;
  width:14px;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 28%,
      #e4c69c 0 6%,
      #9b7148 14%,
      #523822 34%,
      #21140d 54%,
      #050302 78%);
  border:1px solid #050302;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    0 0 0 1px rgba(0,0,0,.75),
    1px 2px 2px rgba(0,0,0,.85);
}
.screw::after{
  content:"";
  position:absolute;
  left:50%;
  top:18%;
  width:1px;
  height:64%;
  transform:translateX(-50%) rotate(27deg);
  background:linear-gradient(#100805,#a77a4c 46%,#211007 56%,#080403);
}
.screw--tl{left:8px;top:8px}
.screw--tr{right:8px;top:8px}
.screw--bl{left:8px;bottom:8px}
.screw--br{right:8px;bottom:8px}

@media(max-width:500px){
  .demo-stage{padding:10px}
  .range-panel{ width:100%; }
  .dial{
    transform:translateX(-50%) scale(.92);
    transform-origin:50% 0;
  }
}


/* SOURCE: flightlevel-filter.css */
:root{
  --green:#00f579;
  --green-hi:#4dff9f;
  --white:#f0fff8;
  --thumb-size:26px;
  --thumb-radius:13px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,245,121,.05),transparent 36%),
    linear-gradient(180deg,#070c0e 0%,#010304 100%);
}
.demo-stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:26px;
}
.flight-level-filter{
  position:relative;
  isolation:isolate;
  width:min(1040px,97vw);
  padding:14px;
  overflow:hidden;
  border-radius:10px;
  background:
    linear-gradient(180deg,#1b3034 0%,#0b181b 8%,#091417 55%,#040a0c 100%);
  border:1px solid #294247;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.92),
    inset 0 -10px 18px rgba(0,0,0,.50),
    0 2px 0 #020303,
    0 14px 28px rgba(0,0,0,.54);
}
.flight-level-filter::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border-radius:7px;
  border:1px solid rgba(163,206,205,.09);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.58);
  pointer-events:none;
}
.panel-texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/panel-metal.webp") repeat;
  background-size:1100px 180px;
  mix-blend-mode:soft-light;
  opacity:.70;
  pointer-events:none;
}
.panel-reflection{
  position:absolute;
  z-index:1;
  pointer-events:none;
  left:2%;
  right:16%;
  top:0;
  height:16%;
  transform:skewX(-18deg);
  background:linear-gradient(180deg,rgba(226,255,252,.07),rgba(226,255,252,.012) 43%,transparent);
  filter:blur(3px);
}
.flight-level-filter__inner{
  position:relative;
  z-index:3;
  padding:8px 10px 9px;
}
.panel-title{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:13px;
  height:38px;
  margin-bottom:8px;
  color:#ecfff7;
  font-size:19px;
  font-weight:600;
  letter-spacing:.055em;
  text-shadow:0 1px 0 #000,0 0 7px rgba(0,245,121,.05);
}
.panel-title__plane{
  display:inline-block;
  color:#f3fff9;
  font-size:28px;
  line-height:1;
}
.preset-row{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin:0 6px 11px;
}
.preset{
  min-width:0;
  height:44px;
  border-radius:4px;
  cursor:pointer;
  color:#e7f6f2;
  background:linear-gradient(180deg,#13272a 0%,#091516 55%,#061011 100%);
  border:1px solid #28494d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -2px 3px rgba(0,0,0,.58),
    0 0 0 2px rgba(0,0,0,.34),
    0 3px 5px rgba(0,0,0,.42);
  font:600 15px/1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.01em;
}
.preset:hover{ border-color:rgba(0,245,121,.62); color:#fff; }
.preset:active{ transform:translateY(1px); }
.preset--active{
  color:#021008;
  border-color:#69ffb0;
  background:linear-gradient(180deg,#59ffa8 0%,#17ef80 48%,#00ba5d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -2px 3px rgba(0,60,25,.23),
    0 0 0 2px rgba(0,31,15,.45),
    0 0 12px rgba(0,245,121,.27),
    0 3px 5px rgba(0,0,0,.46);
  font-weight:800;
}
.filter-body{
  display:grid;
  grid-template-columns:145px minmax(430px,1fr) 145px;
  gap:14px;
  align-items:end;
}
.fl-caption{
  height:20px;
  margin-bottom:1px;
  color:#e9fff7;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.025em;
  text-shadow:0 1px 0 #000;
}
.readout-line{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:8px;
}
.step-stack{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:5px;
  width:38px;
}
.step{
  width:38px;
  height:29px;
  padding:0;
  border-radius:4px;
  cursor:pointer;
  color:#eafff6;
  background:linear-gradient(180deg,#14272a 0%,#081315 100%);
  border:1px solid #31545a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 3px rgba(0,0,0,.52),
    0 2px 3px rgba(0,0,0,.45);
  font:400 26px/1 Arial,sans-serif;
}
.step:hover{ color:var(--green-hi); border-color:rgba(0,245,121,.62); }
.step:active{ transform:translateY(1px); }
.fl-readout{
  display:grid;
  place-items:center;
  width:65px;
  min-width:65px;
  height:63px;
  border-radius:4px;
  color:var(--green);
  background:
    radial-gradient(circle at 50% 40%,rgba(0,245,121,.055),transparent 62%),
    linear-gradient(180deg,#061212,#020707);
  border:1px solid #31575a;
  box-shadow:
    inset 0 0 13px rgba(0,0,0,.76),
    inset 0 1px 0 rgba(255,255,255,.03),
    0 1px 2px rgba(0,0,0,.62);
  font:400 27px/1 "Arial Narrow",Consolas,monospace;
  letter-spacing:.01em;
  text-shadow:0 0 6px rgba(0,245,121,.24);
}

/* manual range area with one exact axis */
.slider-module{
  position:relative;
  height:89px;
  padding:8px 0 0;
  border-radius:5px;
  background:linear-gradient(180deg,#071111 0%,#020707 100%);
  border:1px solid #152b2d;
  box-shadow:
    inset 0 0 13px rgba(0,0,0,.64),
    inset 0 1px 0 rgba(255,255,255,.018),
    0 1px 2px rgba(0,0,0,.60);
}
.slider-track-wrap{
  position:relative;
  height:80px;
  padding:0 var(--thumb-radius);
}
.slider-track{
  position:absolute;
  left:var(--thumb-radius);
  right:var(--thumb-radius);
  top:20px;
  height:7px;
  background:#06462e;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.85);
}
.slider-fill{
  position:absolute;
  top:20px;
  left:var(--thumb-radius);
  width:calc(100% - (2 * var(--thumb-radius)));
  height:7px;
  z-index:2;
  background:linear-gradient(90deg,#05b85e,#13f17d,#08c968);
  box-shadow:0 0 9px rgba(0,245,121,.18);
}
.ticks{
  position:absolute;
  left:var(--thumb-radius);
  right:var(--thumb-radius);
  top:31px;
  height:16px;
}
.tick{
  position:absolute;
  left:calc(var(--pct) * 1%);
  transform:translateX(-50%);
  width:2px;
  background:#0feb77;
  opacity:.88;
}
.tick--major{ height:13px; top:0; }
.tick--minor{ height:7px; top:6px; }
.scale-labels{
  position:absolute;
  left:var(--thumb-radius);
  right:var(--thumb-radius);
  top:50px;
  height:16px;
}
.scale-label{
  position:absolute;
  left:calc(var(--pct) * 1%);
  transform:translateX(-50%);
  color:#f2fff8;
  font:400 11px/1 "Arial Narrow",Arial,sans-serif;
  white-space:nowrap;
}
.scale-label:first-child{ transform:translateX(0); }
.scale-label:last-child{ transform:translateX(-100%); }

.slider-track-wrap input[type="range"]{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:42px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  pointer-events:none;
  z-index:5;
}
.slider-track-wrap input[type="range"]::-webkit-slider-runnable-track{
  height:7px;
  background:transparent;
}
.slider-track-wrap input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:var(--thumb-size);
  height:var(--thumb-size);
  margin-top:7px;
  border-radius:50%;
  cursor:grab;
  pointer-events:auto;
  background:
    radial-gradient(circle at 36% 31%,#f3fff9 0 8%,#65ffaf 11%,#00ce69 38%,#005c37 65%,#00160f 83%);
  border:2px solid #8bffbe;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    0 0 0 2px rgba(0,51,29,.85),
    0 0 10px rgba(0,245,121,.36);
}
.slider-track-wrap input[type="range"]::-moz-range-track{
  height:7px;
  background:transparent;
}
.slider-track-wrap input[type="range"]::-moz-range-thumb{
  width:var(--thumb-size);
  height:var(--thumb-size);
  border-radius:50%;
  cursor:grab;
  pointer-events:auto;
  background:
    radial-gradient(circle at 36% 31%,#f3fff9 0 8%,#65ffaf 11%,#00ce69 38%,#005c37 65%,#00160f 83%);
  border:2px solid #8bffbe;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    0 0 0 2px rgba(0,51,29,.85),
    0 0 10px rgba(0,245,121,.36);
}

.screw{
  position:absolute;
  z-index:20;
  width:14px;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 28%,#e4c69c 0 6%,#9b7148 14%,#523822 34%,#21140d 54%,#050302 78%);
  border:1px solid #050302;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    0 0 0 1px rgba(0,0,0,.75),
    1px 2px 2px rgba(0,0,0,.85);
}
.screw::after{
  content:"";
  position:absolute;
  left:50%;
  top:18%;
  width:1px;
  height:64%;
  transform:translateX(-50%) rotate(27deg);
  background:linear-gradient(#100805,#a77a4c 46%,#211007 56%,#080403);
}
.screw--tl{left:8px;top:8px}
.screw--tr{right:8px;top:8px}
.screw--bl{left:8px;bottom:8px}
.screw--br{right:8px;bottom:8px}

@media(max-width:850px){
  .flight-level-filter{ width:100%; }
  .preset-row{ gap:6px; }
  .preset{ font-size:12px; }
  .filter-body{
    grid-template-columns:126px minmax(310px,1fr) 126px;
    gap:8px;
  }
}
@media(max-width:680px){
  .preset-row{ grid-template-columns:repeat(3,1fr); }
  .filter-body{ grid-template-columns:1fr; }
  .slider-module{ grid-row:2; }
  .min-control,.max-control{ max-width:170px; margin:auto; }
}


/* SOURCE: callsign-search.css */
:root{
  --green:#00f579;
  --green-hi:#65ffad;
  --green-dark:#00b85d;
  --white:#f0fff8;
  --text-dim:#a9beb9;
}

*{box-sizing:border-box}
html,body{min-height:100%}
button,input{font:inherit}

body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 50% 0%,rgba(0,245,121,.05),transparent 36%),
    linear-gradient(180deg,#070c0e 0%,#010304 100%);
}

.demo-stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:26px;
}

/* -------------------------------------------------------------
   COMPLETE LOCATION PANEL
   ------------------------------------------------------------- */

.callsign-panel{
  position:relative;
  isolation:isolate;
  width:min(310px,94vw);
  padding:18px 18px 20px;
  overflow:hidden;
  border-radius:9px;

  background:
    linear-gradient(180deg,
      #1a2f33 0%,
      #0b181b 8%,
      #091417 57%,
      #040a0c 100%);

  border:1px solid #294247;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.92),
    inset 0 -10px 18px rgba(0,0,0,.50),
    0 2px 0 #020303,
    0 14px 28px rgba(0,0,0,.54);
}

.callsign-panel::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border-radius:6px;
  border:1px solid rgba(163,206,205,.09);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.58);
  pointer-events:none;
}

.panel-texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/panel-metal.webp") repeat;
  background-size:900px 180px;
  mix-blend-mode:soft-light;
  opacity:.72;
  pointer-events:none;
}

.panel-reflection{
  position:absolute;
  z-index:1;
  pointer-events:none;
  left:2%;
  right:18%;
  top:0;
  height:17%;
  transform:skewX(-18deg);
  background:
    linear-gradient(180deg,
      rgba(226,255,252,.075),
      rgba(226,255,252,.015) 43%,
      transparent);
  filter:blur(3px);
}

.callsign-panel__inner{
  position:relative;
  z-index:3;
  padding:2px 4px 0;
}

.callsign-panel__title{
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 11px;

  color:#f0fff8;
  font-size:19px;
  font-weight:500;
  letter-spacing:.035em;

  text-shadow:
    0 1px 0 #000,
    0 0 6px rgba(0,245,121,.05);
}

/* -------------------------------------------------------------
   SEARCH INPUT
   ------------------------------------------------------------- */

.callsign-search{
  position:relative;
  display:flex;
  align-items:center;
  height:43px;
  margin:0 2px 11px;
  padding:0 37px 0 39px;
  border-radius:5px;

  background:
    linear-gradient(180deg,
      #081315 0%,
      #040b0d 100%);

  border:1px solid #304d52;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 12px rgba(0,0,0,.56),
    0 2px 4px rgba(0,0,0,.38);

  transition:
    border-color .14s ease,
    box-shadow .14s ease;
}

.callsign-search:focus-within{
  border-color:rgba(0,245,121,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 12px rgba(0,0,0,.56),
    0 0 8px rgba(0,245,121,.10),
    0 2px 4px rgba(0,0,0,.38);
}

.callsign-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;

  color:#f0fff8;
  caret-color:var(--green);

  font-family:"Consolas","Courier New",monospace;
  font-size:13px;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.callsign-search input::placeholder{
  color:#8ca09c;
  opacity:1;
  font-family:"Segoe UI",Arial,sans-serif;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

/* CSS magnifying glass */
.search-icon{
  position:absolute;
  left:13px;
  top:50%;
  width:15px;
  height:15px;
  transform:translateY(-57%);
  border:2px solid #e9fff7;
  border-radius:50%;
  opacity:.93;
}

.search-icon::after{
  content:"";
  position:absolute;
  width:7px;
  height:2px;
  right:-6px;
  bottom:-3px;
  transform:rotate(45deg);
  transform-origin:left center;
  border-radius:2px;
  background:#e9fff7;
}

.input-clear{
  position:absolute;
  right:8px;
  top:50%;
  width:24px;
  height:24px;
  transform:translateY(-50%);
  padding:0;
  border:0;
  background:transparent;
  color:#7d9791;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s,color .12s;
}

.callsign-search.has-value .input-clear{
  opacity:1;
  pointer-events:auto;
}

.input-clear:hover{
  color:var(--green-hi);
}

/* -------------------------------------------------------------
   ACTION BUTTONS
   ------------------------------------------------------------- */

.callsign-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:0 2px;
}

.callsign-button{
  min-width:0;
  height:43px;
  border-radius:4px;
  cursor:pointer;

  color:#e6f4f0;

  background:
    linear-gradient(180deg,
      #15292c 0%,
      #0b1719 55%,
      #061012 100%);

  border:1px solid #2e4c51;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 3px rgba(0,0,0,.60),
    0 0 0 2px rgba(0,0,0,.32),
    0 3px 5px rgba(0,0,0,.43);

  font:600 13px/1 "Arial Narrow","Segoe UI",Arial,sans-serif;
  letter-spacing:.01em;

  transition:
    transform .08s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

.callsign-button:hover{
  color:#fff;
  border-color:rgba(0,245,121,.55);
}

.callsign-button:active{
  transform:translateY(1px);
}

.callsign-button:focus-visible{
  outline:1px solid var(--green-hi);
  outline-offset:2px;
}

.callsign-button--primary{
  color:#021008;
  border-color:#69ffb0;

  background:
    linear-gradient(180deg,
      #5affaa 0%,
      #19f083 47%,
      #00b95e 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -2px 3px rgba(0,60,25,.23),
    0 0 0 2px rgba(0,31,15,.45),
    0 0 12px rgba(0,245,121,.27),
    0 3px 5px rgba(0,0,0,.46);

  font-weight:800;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}

/* -------------------------------------------------------------
   SMALL STATUS LINE
   ------------------------------------------------------------- */

.callsign-status{
  display:flex;
  align-items:center;
  gap:7px;
  height:18px;
  margin:9px 4px -5px;

  color:#6f8e88;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}

.status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#55706b;
  box-shadow:0 0 4px rgba(0,0,0,.4);
  transition:.14s ease;
}

.callsign-status.is-active{
  color:#7abf9d;
}

.callsign-status.is-active .status-dot{
  background:var(--green);
  box-shadow:
    0 0 5px rgba(0,245,121,.58),
    0 0 10px rgba(0,245,121,.22);
}

/* -------------------------------------------------------------
   SMALL AIRRADAR SCREWS
   ------------------------------------------------------------- */

.screw{
  position:absolute;
  z-index:20;
  width:14px;
  aspect-ratio:1;
  border-radius:50%;

  background:
    radial-gradient(circle at 35% 28%,
      #e4c69c 0 6%,
      #9b7148 14%,
      #523822 34%,
      #21140d 54%,
      #050302 78%);

  border:1px solid #050302;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    0 0 0 1px rgba(0,0,0,.75),
    1px 2px 2px rgba(0,0,0,.85);
}

.screw::after{
  content:"";
  position:absolute;
  left:50%;
  top:18%;
  width:1px;
  height:64%;
  transform:translateX(-50%) rotate(27deg);
  background:
    linear-gradient(#100805,#a77a4c 46%,#211007 56%,#080403);
}

.screw--tl{left:7px;top:7px}
.screw--tr{right:7px;top:7px}
.screw--bl{left:7px;bottom:7px}
.screw--br{right:7px;bottom:7px}

@media(max-width:420px){
  .demo-stage{padding:10px}
  .callsign-panel{width:100%}
  .callsign-button{font-size:12px}
}


/* =====================================================================
   J.W. AIRRADAR – COMPLETE LAYOUT v1
   Integration-only rules. Individual component visuals stay intact.
   ===================================================================== */

:root{
  --cockpit-gap:12px;
  --cockpit-max:1500px;
}

html{
  min-width:1180px;
  background:#010304;
}

body{
  margin:0;
  min-width:1180px;
  min-height:100vh;
  color:#effff7;
  font-family:"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 50% -5%,rgba(33,113,107,.10),transparent 34%),
    linear-gradient(180deg,#071012 0%,#020506 48%,#010203 100%);
  overflow-x:auto;
}

button,input{
  font-family:inherit;
}

.airradar-app{
  width:min(var(--cockpit-max),calc(100vw - 20px));
  min-width:1160px;
  margin:0 auto;
  padding:10px 0 14px;
}

.airradar-app .airradar-header{
  width:100%;
}

.airradar-workspace{
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  gap:var(--cockpit-gap);
  align-items:start;
  margin-top:var(--cockpit-gap);
}

.airradar-left-stack{
  display:grid;
  gap:var(--cockpit-gap);
  align-content:start;
}

.airradar-left-stack > *{
  width:100% !important;
}

/* MainDisplay occupies the right-hand cockpit bay */
.airradar-main-cell{
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.airradar-main-cell .main-display{
  width:100%;
  max-width:none;
  aspect-ratio:16 / 8.7;
  filter:
    drop-shadow(0 22px 28px rgba(0,0,0,.78))
    drop-shadow(0 5px 7px rgba(0,0,0,.65));
}

/* Slightly more compact housing in the assembled cockpit without changing its look */
.airradar-main-cell .main-display__outer-shell{
  padding:26px;
}

/* HUD is a fixed screen element, not a separate external panel */
.airradar-main-cell .hud-time-status{
  z-index:24;
  top:18px;
  left:18px;
  width:min(310px,31%);
  min-width:245px;
}

.airradar-main-cell .hud-time-status__inner{
  padding:11px 14px 10px;
}

.airradar-main-cell .hud-time-status__row{
  min-height:27px;
}

.airradar-main-cell .hud-time-status__row--top{
  min-height:34px;
}

.airradar-main-cell .hud-value--time{
  font-size:21px;
}

.airradar-main-cell .hud-value{
  font-size:13px;
}

.airradar-main-cell .hud-value--accent{
  font-size:18px;
}

/* Keep HUD status dot independent from Location/Callsign generic status dots. */
.airradar-main-cell .hud-time-status .status-dot{
  width:8px;
  height:8px;
  background:#00ff7a;
  box-shadow:
    0 0 8px rgba(0,255,122,.55),
    0 0 1px rgba(255,255,255,.8);
}

/* Bottom cockpit controls */
.airradar-bottom-row{
  display:grid;
  grid-template-columns:minmax(365px,.92fr) minmax(670px,2fr) minmax(300px,.78fr);
  gap:var(--cockpit-gap);
  align-items:stretch;
  margin-top:var(--cockpit-gap);
}

.airradar-bottom-row .range-panel,
.airradar-bottom-row .flight-level-filter,
.airradar-bottom-row .callsign-panel{
  width:100% !important;
  max-width:none;
}

/* Range remains the exact v10 geometry; panel width may flex, dial stays centered. */
.airradar-bottom-row .range-panel{
  min-width:365px;
  height:241px;
  aspect-ratio:auto;
}

/* Flight Level remains the v4 control, sized for the center bay */
.airradar-bottom-row .flight-level-filter{
  min-width:670px;
}

/* Callsign follows the Location-panel family */
.airradar-bottom-row .callsign-panel{
  min-width:300px;
}

/* Shared panel textures after source CSS cascade */
.layers-panel .panel-texture,
.location-panel .panel-texture,
.maptype-panel .panel-texture,
.settings-panel .panel-texture,
.range-panel .panel-texture,
.flight-level-filter .panel-texture,
.callsign-panel .panel-texture{
  background-image:url("assets/panel-metal.webp");
}

/* Use the binding screw standard instead of historical per-component screws. */
.airradar-app .screw,
.airradar-app .module-screw,
.airradar-app .core-screw{
  display:none !important;
}

/* The four outer panel screws should always sit above panel content. */
.airradar-app .ar-screw{
  z-index:40;
}

/* Header mini screws need a smaller corner offset. */
.airradar-header .ar-screw--mini{
  --ar-screw-corner-offset:5px;
}

/* Make Location and Callsign status dots independent from HUD dot styling. */
.location-status .status-dot,
.callsign-status .status-dot{
  width:6px;
  height:6px;
  background:#55706b;
  box-shadow:0 0 4px rgba(0,0,0,.4);
}

.location-status.is-active .status-dot,
.callsign-status.is-active .status-dot{
  background:#00f579;
  box-shadow:
    0 0 5px rgba(0,245,121,.58),
    0 0 10px rgba(0,245,121,.22);
}

/* MainDisplay screw positions use the canonical screw system. */
.main-display__outer-shell > .ar-screw--tl{left:10px;top:10px}
.main-display__outer-shell > .ar-screw--tr{right:10px;top:10px}
.main-display__outer-shell > .ar-screw--bl{left:10px;bottom:10px}
.main-display__outer-shell > .ar-screw--br{right:10px;bottom:10px}

/* Prevent demo-page rules from standalone components from participating. */
.demo-stage,.demo-page,.screen-stage{all:unset}

/* Top-left screen HUD should never intercept map interaction. */
.hud-time-status{
  pointer-events:none;
}

/* Screen overlays / demo air-traffic content stay under HUD and glass. */
.main-display__overlay-layer{z-index:18}
.main-display__screen-glass{z-index:28}
.main-display__screen-vignette{z-index:27}
.hud-time-status{z-index:26}

/* Ensure the HUD remains visible beneath the screen-glass highlight. */
.main-display__screen-glass{pointer-events:none;opacity:.45}

/* Match selected map-type and active layer logic in assembled UI. */
.maptype-button.is-active,
.layer-button.is-active{
  color:#021008;
}

/* Integration footer – deliberately unobtrusive */
.integration-tag{
  text-align:right;
  margin:7px 5px 0;
  color:#42605b;
  font:600 9px/1.2 Consolas,monospace;
  letter-spacing:.10em;
}

/* Desktop compression for common 1366–1500 px widths. */
@media(max-width:1519px){
  :root{--cockpit-max:1460px}
  .airradar-workspace{grid-template-columns:290px minmax(0,1fr)}
  .airradar-left-stack .layers-panel,
  .airradar-left-stack .location-panel,
  .airradar-left-stack .maptype-panel,
  .airradar-left-stack .settings-panel{width:100% !important}
  .airradar-bottom-row{
    grid-template-columns:minmax(350px,.92fr) minmax(650px,2fr) minmax(290px,.78fr);
  }
}

/* Narrow desktop/tablet: preserve cockpit proportions using horizontal scroll. */
@media(max-width:1180px){
  .airradar-app{
    width:1160px;
    padding-left:10px;
    padding-right:10px;
  }
}


/* =====================================================================
   COMPLETE LAYOUT v2 – refinements from cockpit master reference
   1) no rounded corners
   2) no screws around the two green header light modules
   3) no screws on the central J.W. AIRRADAR branding panel
   ===================================================================== */

/* Global "no rounded corners" adjustment based on the provided reference */
.airradar-header,
.side-plate,
.status-module,
.module-bezel,
.brand-core,
.layers-panel,
.location-panel,
.maptype-panel,
.settings-panel,
.range-panel,
.flight-level-filter,
.callsign-panel,
.main-display,
.main-display__outer-shell,
.main-display__recess,
.main-display__inner-bevel,
.main-display__screen,
.hud-time-status,
.hud-time-status__inner,
.location-search,
.callsign-search,
.location-button,
.callsign-button,
.layer-button,
.maptype-button,
.settings-button,
.preset,
.fl-readout,
.step,
.readout-line,
.readout-line--max,
.preset-row,
.filter-body,
.dial,
.range-mark__tick,
.main-display__overlay-layer{
  border-radius:0 !important;
}

/* Buttons and inputs should follow the sharper cockpit geometry */
.layer-button::before,
.location-search,
.callsign-search,
.main-display__outer-shell::before,
.main-display__recess::before,
.side-plate::after,
.brand-core::after,
.airradar-header::before{
  border-radius:0 !important;
}

/* Slightly sharper feel for the green status-light housing and brand box */
.status-module,
.brand-core{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 5px rgba(0,0,0,.75),
    0 0 0 1px rgba(0,0,0,.42);
}

/* Keep only the intended header outer screws on the left and right plates */
.status-module .ar-screw,
.brand-core .ar-screw{
  display:none !important;
}


/* =====================================================================
   COMPLETE LAYOUT v3 – MainDisplay enlarged downward
   Ziel: Das MainDisplay soll unten deutlich tiefer reichen und optisch
   an das Flight Level Panel heranreichen.
   ===================================================================== */

/* MainDisplay insgesamt höher anlegen */
.airradar-main-cell .main-display{
  aspect-ratio: 16 / 10.3 !important;
}

/* Metallrahmen proportional leicht anpassen, damit das Display größer wirkt */
.airradar-main-cell .main-display__outer-shell{
  padding:24px !important;
}

/* Der Abstand zur unteren Panel-Reihe wird deutlich reduziert */
.airradar-bottom-row{
  margin-top:4px !important;
}

/* Auf typischen Desktop-Breiten ebenfalls die höhere MainDisplay-Proportion behalten */
@media(max-width:1519px){
  .airradar-main-cell .main-display{
    aspect-ratio: 16 / 10.15 !important;
  }
}


/* =====================================================================
   COMPLETE LAYOUT v4 – einheitlicher Panel-Abstand
   MainDisplay bleibt vergrößert, aber der Abstand zur unteren Panel-Reihe
   entspricht wieder exakt dem allgemeinen AIRRADAR Panel-Gap.
   ===================================================================== */

.airradar-bottom-row{
  margin-top:var(--cockpit-gap) !important;
}


/* =====================================================================
   COMPLETE LAYOUT v5 – MainDisplay exakt bis zur Bottom-Row
   Ursache des falschen Abstands in v4:
   Die Workspace-Höhe wurde vom höheren linken Panel-Stapel bestimmt,
   während das MainDisplay seine eigene, kleinere Aspect-Ratio-Höhe hatte.
   Dadurch entstand unter dem MainDisplay zusätzlicher Leerraum, obwohl
   die Bottom-Row selbst bereits den korrekten 12px-Abstand hatte.

   Lösung:
   - linke Panel-Spalte bestimmt die Höhe der Workspace-Zeile
   - MainDisplay füllt diese Höhe exakt aus
   - Bottom-Row folgt danach mit exakt --cockpit-gap
   ===================================================================== */

.airradar-workspace{
  align-items:stretch !important;
}

.airradar-main-cell{
  position:relative !important;
  align-self:stretch !important;
  align-items:stretch !important;
  min-height:0 !important;
}

/* MainDisplay wird nicht mehr über eine Aspect Ratio dimensioniert,
   sondern füllt exakt die Höhe des linken Panel-Stapels. */
.airradar-main-cell .main-display{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  max-width:none !important;
}

/* Der Abstand zur unteren Panel-Reihe ist jetzt wirklich der sichtbare Abstand. */
.airradar-bottom-row{
  margin-top:var(--cockpit-gap) !important;
}

/* Alte v3-Media-Aspect-Ratio vollständig neutralisieren. */
@media(max-width:1519px){
  .airradar-main-cell .main-display{
    aspect-ratio:auto !important;
    height:100% !important;
  }
}

/* assets/css/cockpit-integration.css */

/* J.W. AIRRADAR v1.5.4 -> Cockpit Integration v1
   Core radar.js remains untouched. This file only re-houses/proxies the UI. */

html,body{min-width:1180px!important;background:#010304!important}
body.cockpit-integrated{overflow-x:auto!important}

/* Legacy visual controls stay alive for radar.js but are hidden from the user. */
body.cockpit-integrated #app > .topbar,
body.cockpit-integrated .control-panel,
body.cockpit-integrated .stats{
  position:fixed!important;
  left:-10000px!important;
  top:-10000px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
}

/* Original shell should no longer impose its old layout after the map has moved. */
body.cockpit-integrated .radar-shell{
  position:static!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  background:none!important;
}

/* Keep existing dialogs/details functionality above the new cockpit. */
body.cockpit-integrated .modal-backdrop{z-index:5000!important}
body.cockpit-integrated #detailsPanel{
  z-index:4200!important;
  position:fixed!important;
  right:28px!important;
  top:118px!important;
}
body.cockpit-integrated #errorBanner{z-index:4300!important}

/* Our integrated app reuses the saved v5 component design. */
#cockpitRoot{
  width:min(1500px,calc(100vw - 20px));
  min-width:1160px;
  margin:0 auto;
  padding:10px 0 14px;
}

/* Map inside the saved MainDisplay frame. */
#cockpitRoot .main-display__screen{
  position:relative!important;
  overflow:hidden!important;
  background:#010403!important;
}
#cockpitRoot #map{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:1!important;
}
#cockpitRoot .range-rings,
#cockpitRoot .radar-sweep{
  position:absolute!important;
  inset:0!important;
  z-index:6!important;
  pointer-events:none!important;
}

/* Existing Leaflet controls are not part of the cockpit design. */
#cockpitRoot .leaflet-control-container{
  opacity:.35;
}
#cockpitRoot .leaflet-control-container:hover{opacity:1}

/* NONE = black radar background, while aircraft/radar overlays stay visible. */
#cockpitRoot .main-display__screen.maptype-none{
  background:
    radial-gradient(circle at 50% 50%,rgba(0,245,121,.06),transparent 52%),
    #000!important;
}
#cockpitRoot .main-display__screen.maptype-none::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(0,245,121,.21) 0 1px,
      transparent 1px 11.2%),
    linear-gradient(90deg,
      transparent calc(50% - .5px),
      rgba(0,245,121,.20) 50%,
      transparent calc(50% + .5px)),
    linear-gradient(0deg,
      transparent calc(50% - .5px),
      rgba(0,245,121,.20) 50%,
      transparent calc(50% + .5px));
}
#cockpitRoot .main-display__screen.maptype-none #map .leaflet-tile-pane{
  opacity:0!important;
}

/* Layer buttons: traffic is permanently on in this integration stage. */
#uiTrafficBtn{cursor:default}
#uiWeatherBtn[aria-disabled="true"]{
  opacity:.58;
  cursor:default;
}

/* Settings first button has slightly longer integration label. */
#uiLabelSettingsBtn{
  font-size:12px;
}

/* Callsign TRACK intentionally has no function yet. */
#uiTrackBtn{
  opacity:.66;
}

/* Integration status text */
.integration-tag{
  user-select:none;
}

/* Main display uses the exact workspace-height solution from v5. */
.airradar-workspace{align-items:stretch!important}
.airradar-main-cell{position:relative!important;align-self:stretch!important;align-items:stretch!important;min-height:0!important}
.airradar-main-cell .main-display{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important}

/* New FL max is the running application's 600, not the design-demo 500. */
#uiFlightLevel .scale-label{font-size:10px}


/* ============================================================
   INTEGRATION v2
   1) Page vertically scrollable for testing lower controls
   2) Radar sweep/rings exactly centered inside MainDisplay
   ============================================================ */

/* The original v1.5.4 shell locked the page to one viewport.
   Integration testing needs normal document scrolling. */
html,
body{
  height:auto !important;
  min-height:100% !important;
  overflow-x:auto !important;
  overflow-y:auto !important;
}

body.cockpit-integrated{
  overflow-x:auto !important;
  overflow-y:auto !important;
}

/* Keep the original application only as a hidden functional host.
   Do not let its old 100dvh grid add a second viewport-height below
   the new cockpit. Fixed dialogs/details continue to work. */
body.cockpit-integrated #app{
  position:static !important;
  display:block !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}

/* The sweep/ring container is a centered SQUARE. Its exact pixel
   size is supplied by the integration ResizeObserver. This prevents
   the sweep pivot from drifting in a rectangular display. */
#cockpitRoot .range-rings,
#cockpitRoot .radar-sweep{
  position:absolute !important;
  inset:auto !important;
  left:50% !important;
  top:50% !important;
  width:var(--radar-overlay-size, 600px) !important;
  height:var(--radar-overlay-size, 600px) !important;
  aspect-ratio:1 / 1 !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  pointer-events:none !important;
}

#cockpitRoot .range-rings{
  z-index:6 !important;
}

#cockpitRoot .radar-sweep{
  z-index:7 !important;
  overflow:hidden !important;
}

/* Both rotating layers use the exact center of the square overlay. */
#cockpitRoot .radar-sweep .sweep-glow,
#cockpitRoot .radar-sweep .sweep-line{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  transform-origin:50% 50% !important;
}

#cockpitRoot .radar-sweep .sweep-line::before{
  left:50% !important;
  top:50% !important;
  width:50% !important;
  transform-origin:0 50% !important;
  transform:translateY(-50%) !important;
}

/* Crosshair center must coincide with the sweep pivot. */
#cockpitRoot .range-rings .crosshair.h{
  left:0 !important;
  right:0 !important;
  top:50% !important;
}

#cockpitRoot .range-rings .crosshair.v{
  top:0 !important;
  bottom:0 !important;
  left:50% !important;
}


/* ============================================================
   INTEGRATION v3
   Full viewport auto-fit for desktop + mobile.
   The complete cockpit should be visible by default.
   ============================================================ */

html,
body{
  width:100% !important;
  height:100% !important;
  min-height:100dvh !important;
  overflow:hidden !important;
}

body.cockpit-integrated{
  width:100% !important;
  height:100% !important;
  min-height:100dvh !important;
  overflow:hidden !important;
}

#cockpitViewport{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:8px;
  background:
    radial-gradient(circle at 50% -5%,rgba(33,113,107,.10),transparent 34%),
    linear-gradient(180deg,#071012 0%,#020506 48%,#010203 100%);
}

#cockpitScaleWrap{
  position:relative;
  transform-origin:top center;
  will-change:transform;
}

#cockpitRoot,
#cockpitRoot.airradar-app{
  width:1500px !important;
  min-width:1500px !important;
  margin:0 !important;
  padding:10px 0 14px !important;
}

body.cockpit-integrated #app{
  position:fixed !important;
  left:-10000px !important;
  top:-10000px !important;
  width:1px !important;
  height:1px !important;
  min-height:0 !important;
  overflow:hidden !important;
}

body.cockpit-integrated #detailsPanel{ z-index:4200 !important; }
body.cockpit-integrated .modal-backdrop{ z-index:5000 !important; }

@media (max-width: 900px){
  #cockpitViewport{ padding:5px; }
}
@media (max-width: 640px){
  #cockpitViewport{ padding:4px; }
}


/* ============================================================
   INTEGRATION v4
   Layout refinement according to current cockpit master request:
   1. Main display row spans the full header width
   2. All six smaller panels use the same width: half of FL panel width
   3. Bottom order: Callsign | Flight Level | Range
   4. No gaps between panels
   ============================================================ */

:root{
  --cockpit-gap:0px !important;
}

/* No visible gaps anywhere between cockpit panels */
.airradar-header,
.airradar-workspace,
.airradar-left-stack,
.airradar-bottom-row{
  gap:0 !important;
}

.airradar-workspace{
  margin-top:0 !important;
  grid-template-columns:375px minmax(0,1125px) !important;
}

.airradar-left-stack{
  width:375px !important;
}

.airradar-left-stack > .layers-panel,
.airradar-left-stack > .location-panel,
.airradar-left-stack > .maptype-panel,
.airradar-left-stack > .settings-panel{
  width:375px !important;
  min-width:375px !important;
  max-width:375px !important;
}

.airradar-main-cell{
  width:1125px !important;
  min-width:1125px !important;
  max-width:1125px !important;
}

.airradar-main-cell .main-display{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
}

.airradar-bottom-row{
  margin-top:0 !important;
  grid-template-columns:375px 750px 375px !important;
}

.airradar-bottom-row .callsign-panel,
.airradar-bottom-row .range-panel{
  width:375px !important;
  min-width:375px !important;
  max-width:375px !important;
}

.airradar-bottom-row .flight-level-filter{
  width:750px !important;
  min-width:750px !important;
  max-width:750px !important;
}

/* Callsign left, FL center, Range right */
.airradar-bottom-row .callsign-panel{ order:1 !important; }
.airradar-bottom-row .flight-level-filter{ order:2 !important; }
.airradar-bottom-row .range-panel{ order:3 !important; }


/* ============================================================
   INTEGRATION v5
   1. Range labels: exact radial positioning around the knob
   2. Flight Level green selected range: exact fill between thumbs
   ============================================================ */

/* Range labels are positioned by JS from the same mathematical center
   as the knob/LED. Keep their own geometry neutral here. */
#uiRangeDial .range-mark{
  position:absolute !important;
}

/* The selected FL range must not keep the old fixed full-width value. */
#uiFlightLevel .slider-fill{
  width:auto !important;
}


/* ============================================================
   INTEGRATION v6
   - bottom titles aligned to RANGE title height/position
   - MAX FL geometry corrected for 750px center panel
   - selected-aircraft HUD mirrors v1.5.4 flight information
   ============================================================ */

/* All three bottom titles share exactly the RANGE title vertical axis. */
.airradar-bottom-row .range-panel__title,
.airradar-bottom-row .flight-level-filter .panel-title,
.airradar-bottom-row .callsign-panel__title{
  position:absolute !important;
  top:16px !important;
  left:0 !important;
  right:0 !important;
  height:24px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:24px !important;
}

/* Once titles are absolute, keep the controls at their intended vertical positions. */
#uiFlightLevel .flight-level-filter__inner,
.airradar-bottom-row .callsign-panel__inner{
  position:relative !important;
}

#uiFlightLevel .preset-row{
  margin-top:48px !important;
}

.airradar-bottom-row .callsign-search{
  margin:48px 2px 11px !important;
}

/* Force the desktop FL structure even when the full cockpit is scaled on phones.
   112 + 10 + flexible slider + 10 + 112 fits the 730px inner content width exactly. */
#uiFlightLevel .filter-body{
  grid-template-columns:112px minmax(0,1fr) 112px !important;
  gap:10px !important;
  align-items:end !important;
}

#uiFlightLevel .min-control,
#uiFlightLevel .max-control{
  width:112px !important;
  max-width:112px !important;
  min-width:112px !important;
  margin:0 !important;
}

#uiFlightLevel .readout-line,
#uiFlightLevel .readout-line--max{
  width:112px !important;
  gap:8px !important;
  justify-content:center !important;
}

#uiFlightLevel .slider-module{
  grid-row:auto !important;
  min-width:0 !important;
}

#uiFlightLevel .preset-row{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:12px !important;
}

/* Selected aircraft HUD ------------------------------------------------ */
.aircraft-info-hud{
  position:absolute;
  z-index:26;
  right:18px;
  top:18px;
  width:306px;
  min-height:172px;
  padding:10px 12px 11px;
  color:#eafff6;
  background:
    linear-gradient(180deg,rgba(3,18,16,.94),rgba(1,8,8,.91));
  border:1px solid rgba(0,245,121,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 24px rgba(0,245,121,.035),
    0 0 12px rgba(0,245,121,.12),
    0 5px 16px rgba(0,0,0,.44);
  font-family:Consolas,"Courier New",monospace;
  pointer-events:auto;
}

.aircraft-info-hud::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 25%,transparent 76%,rgba(0,245,121,.018));
}

.aircraft-info-hud__head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:24px;
  padding-bottom:6px;
  margin-bottom:7px;
  border-bottom:1px solid rgba(0,245,121,.45);
}

.aircraft-info-hud__title{
  color:#27f08c;
  font:700 12px/1 "Segoe UI",Arial,sans-serif;
  letter-spacing:.095em;
}

.aircraft-info-hud__close{
  width:22px;
  height:22px;
  padding:0;
  border:0;
  background:transparent;
  color:#83aa9f;
  cursor:pointer;
  font:400 18px/20px Arial,sans-serif;
}
.aircraft-info-hud__close:hover{ color:#61ffad; }

.aircraft-info-hud__call{
  position:relative;
  z-index:2;
  display:flex;
  align-items:baseline;
  gap:9px;
  min-height:31px;
  margin-bottom:4px;
}

.aircraft-info-hud__callsign{
  color:#27f08c;
  font-size:25px;
  line-height:1;
  font-weight:800;
  letter-spacing:.055em;
  text-shadow:0 0 8px rgba(0,245,121,.28);
}

.aircraft-info-hud__reg{
  color:#9dbab2;
  font-size:10px;
  letter-spacing:.025em;
}

.aircraft-info-hud__type,
.aircraft-info-hud__route{
  position:relative;
  z-index:2;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.aircraft-info-hud__type{
  min-height:16px;
  margin-bottom:5px;
  color:#cbe3dc;
  font-size:10px;
}

.aircraft-info-hud__route{
  display:none;
  min-height:17px;
  margin-bottom:5px;
  color:#56f0a0;
  font-size:10px;
  border-bottom:1px solid rgba(74,133,117,.25);
  padding-bottom:5px;
}
.aircraft-info-hud__route.is-visible{ display:block; }

.aircraft-info-hud__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:15px;
  row-gap:0;
}

.aircraft-info-hud__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  min-width:0;
  height:21px;
  border-bottom:1px solid rgba(81,127,116,.20);
}

.aircraft-info-hud__label{
  color:#6f9b8e;
  font-size:9px;
  letter-spacing:.045em;
}

.aircraft-info-hud__value{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#effff8;
  font-size:10px;
  text-align:right;
}

.aircraft-info-hud__foot{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-top:6px;
  color:#6b9388;
  font-size:9px;
}

.aircraft-info-hud.is-empty .aircraft-info-hud__callsign{
  color:#66877e;
  font-size:15px;
  letter-spacing:.06em;
  text-shadow:none;
}

/* Original v1.5.4 details card remains the data source but is no longer shown separately. */
body.cockpit-integrated #detailsPanel{
  position:fixed !important;
  left:-10000px !important;
  right:auto !important;
  top:-10000px !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* ============================================================
   INTEGRATION v7 – Header LCD + connection indicator
   ============================================================ */

.header-lcd-host{
  position:relative !important;
  overflow:hidden !important;
}

.header-lcd{
  position:absolute;
  left:14px;
  right:14px;
  top:12px;
  bottom:12px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  padding:0 18px;

  border:1px solid rgba(44,255,137,.74);

  background:
    linear-gradient(180deg,
      rgba(0,77,41,.96) 0%,
      rgba(0,44,25,.98) 48%,
      rgba(0,27,16,.99) 100%);

  box-shadow:
    inset 0 1px 0 rgba(185,255,213,.18),
    inset 0 -5px 12px rgba(0,0,0,.48),
    inset 0 0 20px rgba(0,245,121,.11),
    0 0 8px rgba(0,245,121,.17);

  color:#5dffa7;
  font-family:Consolas,"Courier New",monospace;

  text-shadow:
    0 0 4px rgba(0,255,126,.86),
    0 0 10px rgba(0,245,121,.38);
}

.header-lcd::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.20;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0 1px,
      rgba(0,0,0,.06) 1px 3px
    );
}

.header-lcd__live,
.header-lcd__utc{
  position:relative;
  z-index:1;
  white-space:nowrap;
}

.header-lcd__live{
  font-size:17px;
  font-weight:800;
  letter-spacing:.16em;
}

.header-lcd__utc{
  margin-left:auto;
  font-size:17px;
  font-weight:700;
  letter-spacing:.055em;
  text-align:right;
}

.module-led--connection{
  transition:
    opacity .15s ease,
    filter .15s ease,
    box-shadow .15s ease;
}

.module-led--connection.is-connected{
  animation:airradar-connection-blink 1.05s steps(1,end) infinite;
}

.module-led--connection.is-disconnected{
  animation:none !important;
  opacity:.27;
  filter:saturate(.55) brightness(.62);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.22),
    inset 0 -2px 3px rgba(0,60,28,.36),
    0 0 4px rgba(0,245,121,.18);
}

@keyframes airradar-connection-blink{
  0%,44%{
    opacity:1;
    filter:saturate(1.12) brightness(1.08);

    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.76),
      inset 0 -2px 3px rgba(0,80,34,.36),
      0 0 7px #00f579,
      0 0 16px rgba(0,245,121,.78),
      0 0 28px rgba(0,245,121,.36);
  }

  45%,100%{
    opacity:.30;
    filter:saturate(.70) brightness(.68);

    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.22),
      inset 0 -2px 3px rgba(0,60,28,.36),
      0 0 4px rgba(0,245,121,.18);
  }
}


/* ============================================================
   INTEGRATION v8 – Header refinements
   1) LCD moved to the right outer header panel
   2) Connection LED: green blink = connected, red blink = server unavailable
   3) Entire header completely screw-free
   ============================================================ */

/* No screws anywhere in the full header assembly. */
.airradar-header .ar-screw,
.airradar-header .screw,
.airradar-header .module-screw,
.airradar-header .core-screw{
  display:none !important;
}

/* Right-side LCD keeps the same styling, now anchored on the right outer plate. */
.side-plate--right.header-lcd-host .header-lcd{
  left:14px;
  right:14px;
}

/* Green blink while server/live source is available. */
.module-led--connection.is-connected{
  background:
    linear-gradient(180deg,
      #c9ffdc 0%,
      #4dff9d 20%,
      #00ef74 62%,
      #00a84e 100%) !important;

  border-color:#8bffc3 !important;

  animation:airradar-connection-green 1.05s steps(1,end) infinite !important;
}

/* Red blink when the server/data query is not available. */
.module-led--connection.is-server-error{
  background:
    linear-gradient(180deg,
      #ffd4d4 0%,
      #ff6262 20%,
      #f01d2d 62%,
      #9c0712 100%) !important;

  border-color:#ff9b9b !important;

  animation:airradar-connection-red .82s steps(1,end) infinite !important;
}

@keyframes airradar-connection-green{
  0%,44%{
    opacity:1;
    filter:saturate(1.12) brightness(1.08);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.76),
      inset 0 -2px 3px rgba(0,80,34,.36),
      0 0 7px #00f579,
      0 0 16px rgba(0,245,121,.78),
      0 0 28px rgba(0,245,121,.36);
  }
  45%,100%{
    opacity:.28;
    filter:saturate(.70) brightness(.68);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.22),
      inset 0 -2px 3px rgba(0,60,28,.36),
      0 0 4px rgba(0,245,121,.18);
  }
}

@keyframes airradar-connection-red{
  0%,44%{
    opacity:1;
    filter:saturate(1.16) brightness(1.10);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.72),
      inset 0 -2px 3px rgba(90,0,8,.45),
      0 0 7px #ff2133,
      0 0 16px rgba(255,30,48,.80),
      0 0 28px rgba(255,30,48,.38);
  }
  45%,100%{
    opacity:.28;
    filter:saturate(.72) brightness(.66);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.18),
      inset 0 -2px 3px rgba(90,0,8,.38),
      0 0 4px rgba(255,30,48,.20);
  }
}

/* Disable the old disconnected look from v7. */
.module-led--connection.is-disconnected{
  animation:none !important;
}


/* ============================================================
   INTEGRATION v9
   - centered main-display status banner
   - old time/date HUD removed
   - selected-aircraft HUD can be dismissed with X
   ============================================================ */

.main-status-banner{
  position:absolute;
  z-index:28;
  left:50%;
  top:16px;
  transform:translateX(-50%);
  width:min(76%, 860px);
  pointer-events:none;
}

.main-status-banner.is-hidden{
  display:none !important;
}

.main-status-banner__inner{
  min-height:34px;
  padding:8px 16px 9px;
  border-radius:8px;
  text-align:center;
  font:600 12px/1.35 "Segoe UI", Arial, sans-serif;
  color:#f8fbff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 7px 18px rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
}

.main-status-banner__text{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.main-status-banner.is-error .main-status-banner__inner{
  background:rgba(109,18,24,.92);
  border:1px solid rgba(255,124,124,.42);
  color:#ffe4e8;
}

.main-status-banner.is-warning .main-status-banner__inner{
  background:rgba(90,69,7,.90);
  border:1px solid rgba(255,215,107,.40);
  color:#fff0bf;
}

.main-status-banner.is-info .main-status-banner__inner{
  background:rgba(9,61,33,.88);
  border:1px solid rgba(75,255,150,.34);
  color:#dfffe9;
}

/* Old time/date HUD is removed in v9. Keep selector silent if remnants exist. */
.hud-time-status{
  display:none !important;
}

/* Selected-aircraft HUD can now be explicitly hidden by its close X. */
.aircraft-info-hud.is-hidden{
  display:none !important;
}


/* ============================================================
   INTEGRATION v10
   - LCD LIVE text follows the real v1.5.4 live state immediately
   - header LED reacts directly to #liveText / #errorBanner
   - original v1.5.4 details card is mounted 1:1 at MainDisplay right edge
   ============================================================ */

.header-lcd__live{
  visibility:hidden;
}
.header-lcd__live.is-visible{
  visibility:visible;
}

/* Neutral connection state while connecting: no blink, dim green. */
.module-led--connection.is-neutral{
  animation:none !important;
  opacity:.38;
  filter:saturate(.65) brightness(.72);
  background:
    linear-gradient(180deg,#9fd4b1 0%,#3d8f61 24%,#17653e 66%,#0b3b24 100%) !important;
  border-color:#48765b !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.24),
    inset 0 -2px 3px rgba(0,45,24,.38),
    0 0 4px rgba(0,245,121,.10) !important;
}

/* Exact original 1.5.4 details window, only re-positioned inside MainDisplay. */
body.cockpit-integrated #uiMainScreen #detailsPanel{
  position:absolute !important;
  z-index:30 !important;
  right:14px !important;
  top:14px !important;
  left:auto !important;
  bottom:auto !important;
  width:360px !important;
  max-height:calc(100% - 28px) !important;
  overflow:auto !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:none !important;
}

body.cockpit-integrated #uiMainScreen #detailsPanel.hidden{
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(18px) !important;
}

/* Undo the v6 off-screen data-source treatment. */
body.cockpit-integrated #detailsPanel{
  left:auto !important;
  right:14px !important;
  top:14px !important;
}

/* The custom aircraft HUD is no longer used. */
.aircraft-info-hud{
  display:none !important;
}


/* ============================================================
   INTEGRATION v11 – Location LCD + left location-status LED
   ============================================================ */

/* Left outer header display: clickable green LCD */
.header-location-host{
  position:relative !important;
  overflow:hidden !important;
}

.header-location-lcd{
  position:absolute;
  inset:12px 14px;

  width:auto;
  height:auto;
  padding:0 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(44,255,137,.74);
  border-radius:0;

  background:
    linear-gradient(180deg,
      rgba(0,77,41,.96) 0%,
      rgba(0,44,25,.98) 48%,
      rgba(0,27,16,.99) 100%);

  box-shadow:
    inset 0 1px 0 rgba(185,255,213,.18),
    inset 0 -5px 12px rgba(0,0,0,.48),
    inset 0 0 20px rgba(0,245,121,.11),
    0 0 8px rgba(0,245,121,.17);

  color:#5dffa7;
  cursor:pointer;

  font-family:Consolas,"Courier New",monospace;
  text-shadow:
    0 0 4px rgba(0,255,126,.86),
    0 0 10px rgba(0,245,121,.38);
}

.header-location-lcd::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.20;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0 1px,
      rgba(0,0,0,.06) 1px 3px
    );
}

.header-location-lcd:hover,
.header-location-lcd:focus-visible{
  border-color:#70ffad;
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(210,255,226,.22),
    inset 0 -5px 12px rgba(0,0,0,.48),
    inset 0 0 24px rgba(0,245,121,.16),
    0 0 11px rgba(0,245,121,.26);
}

.header-location-lcd__text{
  position:relative;
  z-index:1;

  display:block;
  max-width:100%;

  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;

  font-size:17px;
  font-weight:800;
  letter-spacing:.075em;
  text-align:center;
}

/* Left LED = location status.
   No saved location -> orange.
   Saved location -> green.
   This is independent from the right server-status LED. */
.module-led--location{
  animation:none !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.module-led--location.is-location-missing{
  opacity:1 !important;
  filter:none !important;

  background:
    linear-gradient(180deg,
      #ffe1a1 0%,
      #ffae34 20%,
      #f27b00 62%,
      #9a4300 100%) !important;

  border-color:#ffc36e !important;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.72),
    inset 0 -2px 3px rgba(110,45,0,.42),
    0 0 7px #ff9500,
    0 0 16px rgba(255,149,0,.66),
    0 0 26px rgba(255,149,0,.28) !important;
}

.module-led--location.is-location-set{
  opacity:1 !important;
  filter:none !important;

  background:
    linear-gradient(180deg,
      #c9ffdc 0%,
      #4dff9d 20%,
      #00ef74 62%,
      #00a84e 100%) !important;

  border-color:#8bffc3 !important;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.76),
    inset 0 -2px 3px rgba(0,80,34,.36),
    0 0 7px #00f579,
    0 0 16px rgba(0,245,121,.72),
    0 0 26px rgba(0,245,121,.30) !important;
}


/* ============================================================
   INTEGRATION v12 – location modal opens centered in Main Display
   ============================================================ */
body.cockpit-integrated #uiMainScreen > #locationModal.modal-backdrop{
  position:absolute !important;
  inset:0 !important;
  z-index:85 !important;
  display:grid;
  place-items:center !important;
  padding:18px !important;
  background:rgba(3,10,12,.40) !important;
  backdrop-filter:blur(2px);
  overflow:hidden !important;
}

body.cockpit-integrated #uiMainScreen > #locationModal.hidden{
  display:none !important;
}

body.cockpit-integrated #uiMainScreen > #locationModal .location-dialog{
  width:min(560px, calc(100% - 32px)) !important;
  max-height:calc(100% - 26px) !important;
  overflow:auto !important;
  margin:0 !important;
}


/* ============================================================
   INTEGRATION v13
   Left stack:
   - MCDU Keypad Panel v3
   - empty brushed-metal four-screw panel
   Layers / Location / Map Type / Settings panels removed
   ============================================================ */

.airradar-left-stack--mcdu{
  width:375px !important;
  min-width:375px !important;
  max-width:375px !important;
  height:620px !important;

  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  align-content:stretch !important;
}

/* ---------------- MCDU outer housing ---------------- */

.mcdu-integrated-panel{
  position:relative;
  isolation:isolate;

  flex:0 0 270px;
  width:375px;
  height:270px;
  overflow:hidden;

  border:1px solid #294247;
  border-radius:0;

  background:
    linear-gradient(180deg,
      #1b3034 0%,
      #101f22 8%,
      #0b171a 62%,
      #050a0c 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 0 rgba(0,0,0,.94),
    inset 0 -14px 24px rgba(0,0,0,.38),
    0 2px 0 #020303;
}

.mcdu-integrated-panel::before,
.airradar-empty-panel::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:0;
  border:1px solid rgba(151,204,201,.10);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.58),
    inset 0 0 24px rgba(0,0,0,.18);
  pointer-events:none;
}

.mcdu-integrated-panel__texture,
.airradar-empty-panel__texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/brushed-metal.webp") repeat;
  background-size:900px 620px;
  mix-blend-mode:soft-light;
  opacity:.78;
  pointer-events:none;
}

.mcdu-integrated-panel__reflection,
.airradar-empty-panel__reflection{
  position:absolute;
  z-index:1;
  left:3%;
  top:0;
  width:72%;
  height:14%;
  transform:skewX(-14deg);
  background:
    linear-gradient(180deg,
      rgba(225,255,252,.075),
      rgba(225,255,252,.016) 44%,
      transparent);
  filter:blur(4px);
  pointer-events:none;
}

.mcdu-integrated-panel__viewport{
  position:absolute;
  z-index:4;
  left:10px;
  right:10px;
  top:11px;
  bottom:10px;
  overflow:hidden;
}

/* Original v3 canvas is 920px wide.
   We keep its geometry intact and scale it into the 375px cockpit bay. */
.mcdu-integrated-panel__canvas{
  --mcdu-key-glow:.76;

  position:absolute;
  left:0;
  top:0;

  width:920px;
  padding:18px 22px 20px;

  transform:scale(.384);
  transform-origin:top left;
}

/* ---------------- MCDU v3 geometry ---------------- */

.mcdu-top{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.mcdu-main{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(420px,1.4fr);
  gap:28px;
  align-items:start;
}

.mcdu-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  height:434px;
}

.nav-block{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,64px);
  gap:10px;
  margin-bottom:10px;
}

.numeric-pad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(4,64px);
  gap:10px;
}

.alpha-pad{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(6,64px);
  gap:10px;
  margin-top:0;
  height:434px;
}

/* ---------------- MCDU keys ---------------- */

.mcdu-key{
  position:relative;
  min-width:0;
  height:62px;
  padding:4px 7px;

  border:1px solid #385158;
  border-radius:2px;

  cursor:pointer;

  color:#8cffbd;

  background:
    linear-gradient(180deg,
      #18272a 0%,
      #101a1c 46%,
      #080f11 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -4px 6px rgba(0,0,0,.58),
    inset 0 0 0 3px rgba(0,0,0,.33),
    0 0 0 2px #020607,
    0 4px 6px rgba(0,0,0,.52);

  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1;
  letter-spacing:.015em;

  text-shadow:
    0 1px 0 #000,
    0 0 calc(9px * var(--mcdu-key-glow)) rgba(0,245,121,calc(.78 * var(--mcdu-key-glow))),
    0 0 calc(17px * var(--mcdu-key-glow)) rgba(0,245,121,calc(.32 * var(--mcdu-key-glow)));

  transition:
    transform .06s ease,
    border-color .10s ease,
    box-shadow .10s ease,
    color .10s ease;
}

.mcdu-key::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(220,240,236,.08);
  border-radius:1px;
  pointer-events:none;
}

.mcdu-key:hover{
  border-color:rgba(0,245,121,.58);
}

.mcdu-key:active,
.mcdu-key.is-pressed{
  transform:translateY(2px);
  color:#d9ffe9;
  border-color:rgba(0,245,121,.82);

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.72),
    inset 0 0 12px rgba(0,245,121,.08),
    0 0 0 2px #020607,
    0 1px 2px rgba(0,0,0,.56);
}

.mcdu-key:focus-visible{
  outline:1px solid rgba(0,245,121,.90);
  outline-offset:3px;
}

.function-key{
  height:54px;
  font-size:15px;
  font-weight:800;
  letter-spacing:.025em;
}

.utility-key{
  font-size:15px;
}

.key-double{
  line-height:.86;
}

.key-empty{
  cursor:default;
  color:transparent;
  background:linear-gradient(180deg,#101b1d,#071012);
  border-color:#2a4146;
  text-shadow:none;
}

.key-empty:hover{
  border-color:#2a4146;
}

.key-empty:active{
  transform:none;
}

.arrow-key{
  height:64px;
  font-size:32px;
  font-weight:400;
}

.numeric-key{
  width:64px;
  height:64px;
  justify-self:center;
  align-self:center;
  border-radius:50%;
  font-size:25px;

  background:
    radial-gradient(circle at 40% 27%,
      #1b292c 0%,
      #111b1d 42%,
      #060b0d 78%,
      #020405 100%);

  border-color:#445d62;

  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.10),
    inset 0 -5px 8px rgba(0,0,0,.68),
    0 0 0 2px #020607,
    0 4px 6px rgba(0,0,0,.55);
}

.numeric-key::before{
  border-radius:50% !important;
}

.key-plusminus span{
  opacity:.72;
  margin:0 2px;
}

.alpha-key{
  height:64px;
  font-size:27px;
}

.alpha-key.small-key{
  font-size:17px;
  font-weight:800;
}

/* ---------------- Empty panel ---------------- */

.airradar-empty-panel{
  position:relative;
  isolation:isolate;

  flex:1 1 auto;
  min-height:0;
  width:375px;

  overflow:hidden;

  border:1px solid #294247;
  border-radius:0;

  background:
    linear-gradient(180deg,
      #1a2f33 0%,
      #0b181b 8%,
      #091417 57%,
      #040a0c 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.92),
    inset 0 -10px 18px rgba(0,0,0,.50);
}

/* prevent older integration left-panel constraints from affecting new stack */
.airradar-left-stack--mcdu > .mcdu-integrated-panel,
.airradar-left-stack--mcdu > .airradar-empty-panel{
  min-width:375px !important;
  max-width:375px !important;
}


/* ============================================================
   INTEGRATION v14
   - MCDU panel removed
   - empty left panel removed
   - MainDisplay spans full 1500px width
   - Callsign Search replaced by Input Keypad Panel v2
   ============================================================ */

/* Full-width monitor row. Keep the established 620px workspace height. */
.airradar-workspace.airradar-workspace--full-monitor{
  display:block !important;
  width:1500px !important;
  min-width:1500px !important;
  max-width:1500px !important;
  height:620px !important;
  min-height:620px !important;
  margin-top:0 !important;
}

.airradar-main-cell.airradar-main-cell--full{
  position:relative !important;
  display:block !important;
  width:1500px !important;
  min-width:1500px !important;
  max-width:1500px !important;
  height:620px !important;
  min-height:620px !important;
}

.airradar-main-cell.airradar-main-cell--full .main-display{
  position:absolute !important;
  inset:0 !important;
  width:1500px !important;
  min-width:1500px !important;
  max-width:1500px !important;
  height:620px !important;
  min-height:620px !important;
  aspect-ratio:auto !important;
}

/* Bottom geometry remains exactly: half-FL | FL | half-FL. */
.airradar-bottom-row{
  grid-template-columns:375px 750px 375px !important;
}

.airradar-bottom-row .input-keypad-panel,
.airradar-bottom-row .range-panel{
  width:375px !important;
  min-width:375px !important;
  max-width:375px !important;
  height:241px !important;
  min-height:241px !important;
  max-height:241px !important;
}

.airradar-bottom-row .input-keypad-panel{order:1 !important;}
.airradar-bottom-row .flight-level-filter{order:2 !important;}
.airradar-bottom-row .range-panel{order:3 !important;}

/* ---------------- Input Keypad v2 outer panel ---------------- */
.input-keypad-panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:0;
  background:
    linear-gradient(180deg,#1a2f33 0%,#0b181b 8%,#091417 57%,#040a0c 100%);
  border:1px solid #294247;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.92),
    inset 0 -10px 18px rgba(0,0,0,.50),
    0 2px 0 #020303,
    0 14px 28px rgba(0,0,0,.54);
}

.input-keypad-panel::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border:1px solid rgba(163,206,205,.09);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.58);
  pointer-events:none;
}

.input-keypad-panel > .panel-texture{
  background-image:url("../panel-metal.webp") !important;
  background-size:900px 180px !important;
}

.input-keypad-panel__viewport{
  position:absolute;
  z-index:3;
  inset:12px 14px 10px 14px;
  overflow:hidden;
}

/* v2 content geometry retained, scaled to the exact 375x241 panel. */
.input-keypad-panel__canvas{
  --input-key-glow:.76;
  position:absolute;
  left:3px;
  top:1px;
  width:700px;
  height:434px;
  transform:scale(.49);
  transform-origin:top left;
}

.input-keypad-block{
  display:grid;
  grid-template-columns:210px 462px;
  gap:28px;
  align-items:start;
  width:700px;
  height:434px;
}

.input-keypad-left{
  min-width:0;
  height:434px;
  display:flex;
  flex-direction:column;
}

.input-arrow-pad{
  display:grid;
  grid-template-columns:repeat(2,100px);
  grid-template-rows:repeat(2,64px);
  gap:10px;
  margin-bottom:10px;
}

.input-numeric-pad{
  display:grid;
  grid-template-columns:repeat(3,64px);
  grid-template-rows:repeat(4,64px);
  justify-content:space-between;
  gap:10px 0;
}

.input-alpha-pad{
  display:grid;
  grid-template-columns:repeat(5,84.4px);
  grid-template-rows:repeat(6,64px);
  gap:10px;
  width:462px;
  height:434px;
}

.input-key{
  position:relative;
  min-width:0;
  height:64px;
  padding:4px 7px;

  border:1px solid #385158;
  border-radius:2px;

  cursor:pointer;
  color:#8cffbd;

  background:
    linear-gradient(180deg,#18272a 0%,#101a1c 46%,#080f11 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -4px 6px rgba(0,0,0,.58),
    inset 0 0 0 3px rgba(0,0,0,.33),
    0 0 0 2px #020607,
    0 4px 6px rgba(0,0,0,.52);

  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1;

  text-shadow:
    0 1px 0 #000,
    0 0 calc(9px * var(--input-key-glow)) rgba(0,245,121,calc(.78 * var(--input-key-glow))),
    0 0 calc(17px * var(--input-key-glow)) rgba(0,245,121,calc(.32 * var(--input-key-glow)));

  transition:
    transform .06s ease,
    border-color .10s ease,
    box-shadow .10s ease,
    color .10s ease;
}

.input-key::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(220,240,236,.08);
  border-radius:1px;
  pointer-events:none;
}

.input-key:hover{
  border-color:rgba(0,245,121,.58);
}

.input-key:active,
.input-key.is-pressed{
  transform:translateY(2px);
  color:#d9ffe9;
  border-color:rgba(0,245,121,.82);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.72),
    inset 0 0 12px rgba(0,245,121,.08),
    0 0 0 2px #020607,
    0 1px 2px rgba(0,0,0,.56);
}

.input-key:focus-visible{
  outline:1px solid rgba(0,245,121,.90);
  outline-offset:3px;
}

.input-arrow-key{
  width:100px;
  font-size:32px;
  font-weight:400;
}

.input-numeric-key{
  width:64px;
  height:64px;
  justify-self:center;
  align-self:center;
  border-radius:50%;
  font-size:25px;
  background:
    radial-gradient(circle at 40% 27%,#1b292c 0%,#111b1d 42%,#060b0d 78%,#020405 100%);
  border-color:#445d62;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.10),
    inset 0 -5px 8px rgba(0,0,0,.68),
    0 0 0 2px #020607,
    0 4px 6px rgba(0,0,0,.55);
}

.input-numeric-key::before{
  border-radius:50% !important;
}

.input-alpha-key{
  width:84.4px;
  font-size:27px;
}

.input-alpha-key.input-small-key{
  font-size:17px;
  font-weight:800;
}

/* Old v13 left-side MCDU/empty-panel rules remain inert because those nodes no longer exist. */


/* ============================================================
   INTEGRATION v15 – Flight Level function row
   FLIGHT LEVEL FILTER title + aircraft icon removed.
   Replaced by six buttons using the exact preset-button geometry:
   CTR / CS / SAT / VOR / LABL / GND
   ============================================================ */

/* Old integration spacing reserved 48px for the removed title.
   The new function row now occupies that space itself. */
#uiFlightLevel .flight-level-filter__inner{
  padding-top:8px !important;
}

#uiFlightLevel .fl-mode-row{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 6px 11px !important;
}

/* The standard FL range presets remain directly below the new row. */
#uiFlightLevel .preset-row--fl-standard{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 6px 11px !important;
}

/* Same button dimensions, bevel, typography and alignment as FL presets.
   This rule intentionally adds no alternate geometry. */
#uiFlightLevel .fl-mode-key{
  min-width:0 !important;
  height:44px !important;
}

/* The removed title must never reserve layout space. */
#uiFlightLevel .panel-title{
  display:none !important;
}


/* ============================================================
   INTEGRATION v16 – Callsign search window inside MainDisplay
   ============================================================ */

#uiCallsignModal.callsign-modal{
  position:absolute;
  inset:0;
  z-index:92;

  display:grid;
  place-items:center;

  padding:24px;

  background:rgba(1,8,9,.46);
  backdrop-filter:blur(2px);

  pointer-events:auto;
}

#uiCallsignModal.callsign-modal.is-hidden{
  display:none !important;
}

.callsign-modal__card{
  position:relative;

  width:min(590px,calc(100% - 50px));
  max-height:calc(100% - 48px);
  overflow:auto;

  padding:22px 24px 24px;

  border:1px solid #34575b;
  border-radius:0;

  background:
    linear-gradient(180deg,
      rgba(20,39,42,.985) 0%,
      rgba(8,20,23,.992) 22%,
      rgba(4,12,14,.995) 100%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.82),
    inset 0 0 34px rgba(0,245,121,.025),
    0 18px 44px rgba(0,0,0,.68),
    0 0 0 1px rgba(0,0,0,.72);
}

.callsign-modal__card::before{
  content:"";
  position:absolute;
  inset:7px;
  pointer-events:none;

  border:1px solid rgba(151,204,201,.09);

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.007) 0 1px,
      rgba(0,0,0,.01) 1px 3px
    );

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.38);
}

.callsign-modal__title,
.callsign-modal__sub,
.callsign-modal__host,
.callsign-modal__close{
  position:relative;
  z-index:2;
}

.callsign-modal__title{
  color:#78ffad;

  font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
  font-size:20px;
  font-weight:900;
  letter-spacing:.10em;

  text-shadow:
    0 0 6px rgba(0,245,121,.48),
    0 0 15px rgba(0,245,121,.16);
}

.callsign-modal__sub{
  margin-top:4px;
  margin-bottom:17px;

  color:#789b8d;

  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}

.callsign-modal__close{
  position:absolute;
  top:9px;
  right:12px;

  width:32px;
  height:32px;

  padding:0;

  border:0;
  background:transparent;
  color:#84a399;

  cursor:pointer;

  font-size:26px;
  line-height:28px;
}

.callsign-modal__close:hover{
  color:#7dffb2;
  text-shadow:0 0 7px rgba(0,245,121,.50);
}

/* Original v1.5.4 form, now visually adapted to the cockpit window. */
#uiCallsignModal .callsign-search{
  display:grid !important;
  grid-template-columns:1fr auto;
  align-items:center;

  gap:9px;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
}

#uiCallsignModal #callsignInput{
  min-width:0;
  height:46px;

  padding:0 14px;

  border:1px solid rgba(0,245,121,.46);
  border-radius:0;

  outline:0;

  background:
    linear-gradient(180deg,
      rgba(0,48,27,.95),
      rgba(0,24,16,.98));

  color:#8cffbd;

  font-family:Consolas,"Courier New",monospace;
  font-size:18px;
  font-weight:800;
  letter-spacing:.08em;

  text-transform:uppercase;

  box-shadow:
    inset 0 1px 0 rgba(181,255,211,.08),
    inset 0 -5px 11px rgba(0,0,0,.32),
    0 0 8px rgba(0,245,121,.08);

  text-shadow:
    0 0 5px rgba(0,245,121,.66),
    0 0 12px rgba(0,245,121,.20);
}

#uiCallsignModal #callsignInput:focus{
  border-color:#45ff98;
  box-shadow:
    inset 0 1px 0 rgba(181,255,211,.10),
    inset 0 -5px 11px rgba(0,0,0,.32),
    0 0 0 1px rgba(0,245,121,.18),
    0 0 12px rgba(0,245,121,.15);
}

#uiCallsignModal #callsignForm button[type="submit"]{
  height:46px;
  min-width:110px;

  border:1px solid #315047;
  border-radius:0;

  background:
    linear-gradient(180deg,#182a25,#0c1815);

  color:#75ffab;

  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;

  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -3px 5px rgba(0,0,0,.52),
    0 0 0 1px rgba(0,0,0,.55);
}

#uiCallsignModal #callsignForm button[type="submit"]:hover{
  border-color:rgba(0,245,121,.60);
  color:#b4ffd2;
}

#uiCallsignModal #searchStatus{
  margin:11px 0 0 !important;
  min-height:17px;

  color:#8ba79c;

  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
}

#uiCallsignModal #searchStatus.hidden{
  display:none !important;
}

/* Trefferliste from the original v1.5.4 radar.js */
#uiCallsignModal #callsignResults{
  display:grid;
  gap:7px;

  margin-top:10px;
  padding:0;

  max-height:260px;
  overflow:auto;
}

#uiCallsignModal #callsignResults.hidden{
  display:none !important;
}

#uiCallsignModal .callsign-result{
  min-height:55px;

  border:1px solid rgba(0,245,121,.22) !important;
  border-radius:0 !important;

  background:
    linear-gradient(180deg,
      rgba(10,27,24,.96),
      rgba(4,14,13,.98)) !important;

  color:#eafff2 !important;

  padding:9px 11px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -2px 5px rgba(0,0,0,.34);
}

#uiCallsignModal .callsign-result:hover,
#uiCallsignModal .callsign-result:focus-visible{
  outline:none !important;
  border-color:rgba(0,245,121,.70) !important;

  background:
    linear-gradient(180deg,
      rgba(12,42,32,.98),
      rgba(5,23,18,.99)) !important;
}

#uiCallsignModal .callsign-result .cs-main strong{
  color:#7effb2 !important;

  font-size:13px !important;
  letter-spacing:.08em !important;

  text-shadow:0 0 6px rgba(0,245,121,.30);
}

#uiCallsignModal .callsign-result .cs-main small,
#uiCallsignModal .callsign-result .cs-meta small{
  color:#8ba79c !important;
  font-size:9px !important;
}

#uiCallsignModal .callsign-result .cs-meta b{
  color:#d9ffea !important;
  font-size:10px !important;
}


/* ============================================================
   INTEGRATION v17
   Callsign search styling = aircraft-info-card language
   ============================================================ */

/* Soft overlay only; the card itself is no longer brushed metal. */
#uiCallsignModal.callsign-modal{
  background:rgba(0,0,0,.32) !important;
  backdrop-filter:blur(3px) !important;
}

/* Same visual family as the original v1.5.4 aircraft detail card:
   rounded glass card, soft green line, no metal texture / no bezel. */
#uiCallsignModal .callsign-modal__card{
  width:min(470px,calc(100% - 48px)) !important;
  max-height:calc(100% - 44px) !important;

  padding:15px !important;

  border:1px solid var(--line) !important;
  border-radius:12px !important;

  background:var(--panel) !important;

  box-shadow:
    0 12px 35px rgba(0,0,0,.38),
    inset 0 0 24px rgba(19,245,53,.02) !important;

  backdrop-filter:blur(12px) !important;
}

/* Remove the earlier technical/brushed inner frame entirely. */
#uiCallsignModal .callsign-modal__card::before{
  display:none !important;
}

/* Aircraft-info-card-like header hierarchy. */
#uiCallsignModal .callsign-modal__title{
  padding-right:44px !important;

  color:var(--green) !important;

  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;

  text-shadow:none !important;
}

#uiCallsignModal .callsign-modal__sub{
  margin-top:4px !important;
  margin-bottom:14px !important;

  color:var(--muted) !important;

  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
}

/* Circular X – same family as original aircraft card close control. */
#uiCallsignModal .callsign-modal__close{
  top:10px !important;
  right:10px !important;

  width:30px !important;
  height:30px !important;

  display:grid !important;
  place-items:center !important;

  border:1px solid rgba(19,245,53,.14) !important;
  border-radius:999px !important;

  background:rgba(3,8,12,.92) !important;
  color:var(--muted) !important;

  font-size:22px !important;
  line-height:1 !important;
}

#uiCallsignModal .callsign-modal__close:hover,
#uiCallsignModal .callsign-modal__close:focus-visible{
  outline:none !important;
  color:var(--green) !important;
  border-color:rgba(19,245,53,.40) !important;
}

/* Search input/button become rounded like the original application UI. */
#uiCallsignModal #callsignInput{
  height:38px !important;
  border:1px solid rgba(19,245,53,.22) !important;
  border-radius:7px !important;

  background:rgba(3,11,16,.86) !important;
  color:#effff8 !important;

  box-shadow:none !important;
  text-shadow:none !important;

  font-family:"Segoe UI",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
}

#uiCallsignModal #callsignInput:focus{
  border-color:rgba(19,245,53,.65) !important;
  box-shadow:0 0 0 2px rgba(19,245,53,.08) !important;
}

#uiCallsignModal #callsignForm button[type="submit"]{
  height:38px !important;
  min-width:92px !important;

  border:1px solid rgba(19,245,53,.24) !important;
  border-radius:7px !important;

  background:rgba(19,245,53,.10) !important;
  color:var(--green) !important;

  box-shadow:none !important;
}

/* Hit list cards follow the soft rounded aircraft-info style too. */
#uiCallsignModal .callsign-result{
  min-height:52px !important;

  border:1px solid rgba(19,245,53,.12) !important;
  border-radius:8px !important;

  background:rgba(3,11,16,.72) !important;

  box-shadow:none !important;
}

#uiCallsignModal .callsign-result:hover,
#uiCallsignModal .callsign-result:focus-visible{
  border-color:rgba(19,245,53,.42) !important;
  background:rgba(19,245,53,.06) !important;
}

#uiCallsignModal .callsign-result .cs-main strong{
  color:#eafff6 !important;
  text-shadow:none !important;
}

/* ------------------------------------------------------------
   Callsign tracking state
   ------------------------------------------------------------ */

/* CS stays green while a callsign-selected aircraft is active. */
#uiFlCsBtn.preset--active{
  color:#06120d !important;
  background:var(--green) !important;
  border-color:var(--green) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 0 0 2px rgba(19,245,53,.10),
    0 0 11px rgba(19,245,53,.24) !important;
}

/* radar.js internally retains its last searchedHex until the next search.
   When CS tracking is intentionally cleared, suppress that old yellow
   "searched" visualization so the aircraft is visibly unmarked. */
body.cockpit-integrated:not(.callsign-track-active) .plane-wrap.searched .plane-label{
  border-color:rgba(20,48,40,.18) !important;
  box-shadow:0 1px 4px rgba(0,0,0,.16) !important;
}

body.cockpit-integrated:not(.callsign-track-active) .plane-wrap.searched .plane-icon{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.95))
    drop-shadow(0 1px 3px rgba(0,0,0,.55)) !important;
}


/* ============================================================
   INTEGRATION v18 – Callsign interaction refinements
   ============================================================ */

/* Close control is now ONLY the X symbol, without a black circle. */
#uiCallsignModal .callsign-modal__close{
  top:8px !important;
  right:10px !important;

  width:32px !important;
  height:32px !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  box-shadow:none !important;

  color:var(--muted) !important;

  font-size:27px !important;
  font-weight:400 !important;
  line-height:30px !important;
}

#uiCallsignModal .callsign-modal__close:hover,
#uiCallsignModal .callsign-modal__close:focus-visible{
  border:0 !important;
  outline:none !important;
  background:transparent !important;
  box-shadow:none !important;

  color:var(--green) !important;
  text-shadow:0 0 7px rgba(19,245,53,.35) !important;
}

/* CS green state now means: an aircraft info card is currently active,
   regardless of whether selection came from callsign search or map click. */
#uiFlCsBtn.preset--active{
  color:#06120d !important;
  background:var(--green) !important;
  border-color:var(--green) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 0 0 2px rgba(19,245,53,.10),
    0 0 11px rgba(19,245,53,.24) !important;
}

/* radar.js keeps its internal searchedHex/suffix set after the aircraft info
   card is closed. Hide that stale search marking whenever no aircraft card
   is active so close/CS visually removes the marking immediately. */
body.cockpit-integrated:not(.callsign-track-active) .plane-wrap.searched .plane-label{
  border-color:rgba(20,48,40,.18) !important;
  box-shadow:0 1px 4px rgba(0,0,0,.16) !important;
}

body.cockpit-integrated:not(.callsign-track-active) .plane-wrap.searched .plane-icon{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.95))
    drop-shadow(0 1px 3px rgba(0,0,0,.55)) !important;
}


/* ============================================================
   INTEGRATION v19 – Label settings inside MainDisplay
   ============================================================ */

body.cockpit-integrated #uiMainScreen > #settingsModal.modal-backdrop{
  position:absolute !important;
  inset:0 !important;
  z-index:91 !important;

  display:grid;
  place-items:center !important;

  padding:18px !important;

  background:rgba(0,0,0,.32) !important;
  backdrop-filter:blur(3px);

  overflow:hidden !important;
}

body.cockpit-integrated #uiMainScreen > #settingsModal.hidden{
  display:none !important;
}

body.cockpit-integrated #uiMainScreen > #settingsModal .settings-dialog{
  width:min(520px,calc(100% - 40px)) !important;
  max-height:calc(100% - 36px) !important;

  overflow:auto !important;
  margin:0 !important;

  border-radius:12px !important;
}

/* GND active state is deliberately persistent, not a short flash. */
#uiFlGroundBtn.preset--active{
  color:#06120d !important;
  background:var(--green) !important;
  border-color:var(--green) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 0 0 2px rgba(19,245,53,.10),
    0 0 11px rgba(19,245,53,.24) !important;
}




/* ============================================================
   AIRRADAR v2.0.0 RC3 – safe performance hotfix
   ============================================================ */

/* RC2's CSS zoom was removed because it could make the entire cockpit
   disappear after the intro screen. The known-good transform fit is active. */
#cockpitScaleWrap{
  zoom:normal !important;
  transform-origin:top center !important;
  will-change:transform;
}

/* Safe reductions only: no layout containment and no Leaflet pane overrides. */
#cockpitRoot .main-display__screen-glass{
  mix-blend-mode:normal !important;
  opacity:.30 !important;
  pointer-events:none !important;
}

#cockpitRoot .main-display__screen-vignette{
  pointer-events:none !important;
}

#cockpitRoot .radar-sweep{
  mix-blend-mode:normal !important;
}

/* Removing blur from the rotating sweep saves paint work without touching
   Leaflet marker geometry or the cockpit's sizing. */
#cockpitRoot .radar-sweep .sweep-glow{
  filter:none !important;
  opacity:.70 !important;
}


/* ============================================================
   AIRRADAR v2.0.3 – Callsign dialog matches Location dialog
   ============================================================ */

/* Same overlay feel as Radar-Standort ändern. */
body.cockpit-integrated #uiMainScreen > #uiCallsignModal.callsign-modal{
  position:absolute !important;
  inset:0 !important;
  z-index:92 !important;
  display:grid !important;
  place-items:center !important;
  padding:18px !important;

  background:rgba(3,10,12,.40) !important;
  backdrop-filter:blur(2px) !important;
  overflow:hidden !important;
}

body.cockpit-integrated #uiMainScreen > #uiCallsignModal.is-hidden{
  display:none !important;
}

/* Same outer size, padding, round corners and glass panel as location dialog. */
#uiCallsignModal .callsign-modal__card{
  position:relative !important;
  width:min(560px, calc(100% - 32px)) !important;
  max-height:calc(100% - 26px) !important;

  margin:0 !important;
  padding:18px !important;
  overflow:auto !important;

  border:1px solid var(--line) !important;
  border-radius:12px !important;

  background:var(--panel) !important;
  backdrop-filter:blur(12px) !important;

  box-shadow:
    0 12px 35px rgba(0,0,0,.38),
    inset 0 0 24px rgba(19,245,53,.02) !important;
}

/* Same heading typography as .location-title. */
#uiCallsignModal .callsign-modal__title{
  padding-right:38px !important;
  color:var(--green) !important;

  font-family:inherit !important;
  font-size:17px !important;
  font-weight:900 !important;
  line-height:normal !important;
  letter-spacing:.06em !important;

  text-shadow:none !important;
}

/* Same subheading typography as .location-sub. */
#uiCallsignModal .callsign-modal__sub{
  margin-top:3px !important;
  margin-bottom:0 !important;

  color:var(--muted) !important;

  font-family:inherit !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:normal !important;
  letter-spacing:normal !important;
}

/* Same form spacing as location search. */
#uiCallsignModal .callsign-search{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;

  margin-top:14px !important;
  padding-top:0 !important;
  border-top:0 !important;
}

/* Exact location-form input geometry. */
#uiCallsignModal #callsignInput{
  min-width:0 !important;
  flex:1 !important;
  height:32px !important;

  border:1px solid rgba(19,245,53,.22) !important;
  border-radius:6px !important;

  background:rgba(3,11,16,.86) !important;
  color:#effff8 !important;

  padding:0 10px !important;

  font-family:inherit !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;

  outline:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* Exact location-form button geometry. */
#uiCallsignModal #callsignForm button[type="submit"]{
  height:32px !important;

  border:1px solid rgba(19,245,53,.24) !important;
  border-radius:6px !important;

  background:rgba(19,245,53,.10) !important;
  color:var(--green) !important;

  padding:0 11px !important;

  font-family:inherit !important;
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;

  box-shadow:none !important;
}

/* X identical in spirit to the location dialog: symbol only. */
#uiCallsignModal .callsign-modal__close{
  position:absolute !important;
  right:10px !important;
  top:6px !important;

  width:auto !important;
  height:auto !important;

  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;

  color:var(--muted) !important;

  padding:0 !important;
  font-family:inherit !important;
  font-size:25px !important;
  font-weight:400 !important;
  line-height:1 !important;

  cursor:pointer !important;
}

/* Results use the same soft rounded geometry as location results. */
#uiCallsignModal #callsignResults{
  display:grid;
  gap:6px !important;
  margin-top:10px !important;
  max-height:310px !important;
  overflow:auto !important;
}

#uiCallsignModal .callsign-result{
  min-height:0 !important;

  border:1px solid rgba(19,245,53,.12) !important;
  border-radius:7px !important;

  background:rgba(3,11,16,.70) !important;
  color:var(--text) !important;

  padding:9px 10px !important;
  box-shadow:none !important;
}

#uiCallsignModal .callsign-result:hover,
#uiCallsignModal .callsign-result:focus-visible{
  border-color:rgba(19,245,53,.40) !important;
  background:rgba(19,245,53,.06) !important;
}



/* ============================================================
   AIRRADAR v2.0.7 – CS button + bottom-row geometry fixes
   1) CS button glows with the same active look as the VOR button
   2) Keypad panel and Range panel use the same outer height as FL panel
   3) Keypad content is moved inward so the corner screws do not sit in keys
   ============================================================ */

/* Keep the entire bottom row visually uniform. */
.airradar-bottom-row .input-keypad-panel,
.airradar-bottom-row .flight-level-filter,
.airradar-bottom-row .range-panel{
  height:241px !important;
  min-height:241px !important;
  max-height:241px !important;
}

/* Callsign button should light exactly like the regular active function keys. */
#uiFlCsBtn.preset--active{
  color:#021008 !important;
  border-color:#69ffb0 !important;
  background:linear-gradient(180deg,#59ffa8 0%,#17ef80 48%,#00ba5d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -2px 3px rgba(0,60,25,.23),
    0 0 0 2px rgba(0,31,15,.45),
    0 0 12px rgba(0,245,121,.27),
    0 3px 5px rgba(0,0,0,.46) !important;
  font-weight:800 !important;
}

/* Give the keypad panel a protected screw margin. */
.input-keypad-panel__viewport{
  inset:18px 22px 16px 22px !important;
}

.input-keypad-panel__canvas{
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) scale(.47) !important;
  transform-origin:center center !important;
}



/* ============================================================
   AIRRADAR v2.1.1 – Flight Level LED-style button theme
   - inactive: black button with white label
   - active: dark button stays dark, only the text glows green
   ============================================================ */

/* All preset/function buttons inside the Flight Level panel share the same dark shell. */
.flight-level-filter .preset{
  color:#eef6f3 !important;
  background:linear-gradient(180deg,#101b1d 0%, #071012 52%, #040a0c 100%) !important;
  border:1px solid #284247 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -2px 3px rgba(0,0,0,.72),
    0 0 0 2px rgba(0,0,0,.34),
    0 3px 5px rgba(0,0,0,.42) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.95) !important;
}

.flight-level-filter .preset:hover{
  color:#ffffff !important;
  border-color:#3a5f64 !important;
  background:linear-gradient(180deg,#132124 0%, #081214 52%, #050c0e 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -2px 3px rgba(0,0,0,.72),
    0 0 0 2px rgba(0,0,0,.34),
    0 0 7px rgba(255,255,255,.05),
    0 3px 5px rgba(0,0,0,.42) !important;
}

/* Active state: keep the button dark, let the text behave like an internal green LED. */
.flight-level-filter .preset.preset--active,
.flight-level-filter #uiFlCtrBtn.preset--active,
.flight-level-filter #uiFlCsBtn.preset--active,
.flight-level-filter #uiFlSatBtn.preset--active,
.flight-level-filter #uiFlVorBtn.preset--active,
.flight-level-filter #uiFlLabelBtn.preset--active,
.flight-level-filter #uiFlGroundBtn.preset--active{
  color:#79ffb2 !important;
  background:linear-gradient(180deg,#101b1d 0%, #071012 52%, #040a0c 100%) !important;
  border-color:#3b6663 !important;
  text-shadow:
    0 0 2px rgba(121,255,178,.85),
    0 0 6px rgba(0,245,121,.82),
    0 0 11px rgba(0,245,121,.62),
    0 1px 0 rgba(0,0,0,.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -2px 3px rgba(0,0,0,.72),
    0 0 0 2px rgba(0,0,0,.34),
    inset 0 0 14px rgba(0,245,121,.10),
    0 0 10px rgba(0,245,121,.10),
    0 3px 5px rgba(0,0,0,.42) !important;
  font-weight:800 !important;
}



/* ============================================================
   AIRRADAR v2.1.1 – LED button surround + LCD readouts + black screws
   ============================================================ */

/* Active function/range preset buttons: dark body, LED text, plus surrounding LED glow. */
.flight-level-filter .preset.preset--active,
.flight-level-filter #uiFlCtrBtn.preset--active,
.flight-level-filter #uiFlCsBtn.preset--active,
.flight-level-filter #uiFlSatBtn.preset--active,
.flight-level-filter #uiFlVorBtn.preset--active,
.flight-level-filter #uiFlLabelBtn.preset--active,
.flight-level-filter #uiFlGroundBtn.preset--active{
  color:#7effb8 !important;
  background:linear-gradient(180deg,#111a1c 0%, #071012 52%, #04090b 100%) !important;
  border-color:#4b736d !important;
  text-shadow:
    0 0 2px rgba(126,255,184,.96),
    0 0 6px rgba(0,245,121,.92),
    0 0 12px rgba(0,245,121,.66),
    0 1px 0 rgba(0,0,0,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -2px 4px rgba(0,0,0,.74),
    inset 0 0 12px rgba(0,245,121,.14),
    0 0 0 1px rgba(0,0,0,.64),
    0 0 0 2px rgba(27,56,47,.84),
    0 0 7px rgba(0,245,121,.28),
    0 0 16px rgba(0,245,121,.18),
    0 3px 5px rgba(0,0,0,.42) !important;
}

/* MIN FL / MAX FL: small LCD modules similar to the header displays. */
.fl-readout{
  position:relative;
  display:grid;
  place-items:center;
  width:70px;
  min-width:70px;
  height:54px;
  border-radius:5px;
  color:#64ffac;
  background:
    linear-gradient(180deg, rgba(36,255,164,.06) 0%, rgba(36,255,164,0) 22%),
    radial-gradient(circle at 50% 34%, rgba(72,255,180,.10), transparent 62%),
    linear-gradient(180deg,#061212 0%, #051012 42%, #020707 100%);
  border:1px solid rgba(0,245,121,.72);
  box-shadow:
    inset 0 1px 0 rgba(175,255,221,.14),
    inset 0 0 12px rgba(0,245,121,.09),
    inset 0 -8px 18px rgba(0,0,0,.48),
    0 0 0 1px rgba(0,0,0,.54),
    0 0 10px rgba(0,245,121,.10),
    0 1px 2px rgba(0,0,0,.62);
  font:400 27px/1 "Arial Narrow",Consolas,monospace;
  letter-spacing:.045em;
  text-shadow:
    0 0 3px rgba(100,255,172,.92),
    0 0 8px rgba(0,245,121,.32);
}

.fl-readout::before{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  top:4px;
  height:34%;
  border-radius:4px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(230,255,245,.13), rgba(230,255,245,.02) 68%, rgba(230,255,245,0));
}

.fl-caption{
  color:#edfef6;
  text-shadow:0 1px 0 #000, 0 0 5px rgba(0,245,121,.04);
}

/* Black screw set for the main panel hardware. */
.range-panel .ar-screw,
.flight-level-filter .ar-screw,
.input-keypad-panel .ar-screw,
.airradar-sidebar-panel .ar-screw,
.airradar-main-display-shell .ar-screw,
.airradar-header-panel .ar-screw{
  background:
    radial-gradient(circle at 34% 28%,
      rgba(236,243,246,.34) 0 4%,
      #768086 6% 11%,
      #3e454b 19%,
      #23282c 36%,
      #14181b 54%,
      #090b0d 73%,
      #020303 88%,
      #000 100%) !important;
  border-color:#010101 !important;
  box-shadow:
    inset calc(var(--screw-size) * .05) calc(var(--screw-size) * .06) calc(var(--screw-size) * .10) rgba(255,255,255,.15),
    inset calc(var(--screw-size) * -.08) calc(var(--screw-size) * -.11) calc(var(--screw-size) * .18) rgba(0,0,0,.86),
    0 0 0 1px rgba(0,0,0,.96),
    0 0 0 2px rgba(20,20,20,.72),
    1px 2px 2px rgba(0,0,0,.90) !important;
}

.range-panel .ar-screw::before,
.flight-level-filter .ar-screw::before,
.input-keypad-panel .ar-screw::before,
.airradar-sidebar-panel .ar-screw::before,
.airradar-main-display-shell .ar-screw::before,
.airradar-header-panel .ar-screw::before{
  background:
    linear-gradient(90deg,
      #010101 0%,
      #111417 18%,
      #8a939a 48%,
      #181c1f 62%,
      #010101 100%) !important;
  box-shadow:
    1px 0 0 rgba(255,255,255,.06),
    -1px 0 0 rgba(0,0,0,.66) !important;
}

.range-panel .ar-screw::after,
.flight-level-filter .ar-screw::after,
.input-keypad-panel .ar-screw::after,
.airradar-sidebar-panel .ar-screw::after,
.airradar-main-display-shell .ar-screw::after,
.airradar-header-panel .ar-screw::after{
  background:
    radial-gradient(ellipse,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.06) 42%,
      rgba(255,255,255,0) 75%) !important;
}



/* ============================================================
   AIRRADAR v2.1.1 – Main display screw removal + FL LCD size adjust
   ============================================================ */

/* 1) Remove screws from the main display shell only. */
.airradar-main-display-shell .ar-screw{
  display:none !important;
}

/* 2) Make MIN FL / MAX FL LCDs the same overall height as the stacked
      + / - step buttons (29 + 29 + 5 gap = 63px). */
.flight-level-filter .fl-readout{
  height:63px !important;
  min-height:63px !important;
  max-height:63px !important;
}



/* ============================================================
   AIRRADAR v2.1.1 – precise main-display screw removal fix
   The main display uses .main-display__outer-shell, not the older
   .airradar-main-display-shell selector.
   ============================================================ */
.main-display__outer-shell > .ar-screw,
.main-display__outer-shell .ar-screw{
  display:none !important;
}

/* assets/css/header-new-logo.css */

/* ============================================================
   J.W. AIRRADAR v2.0.4
   New user-supplied full logo in the ORIGINAL v2.0.3 header.
   No other header function or cockpit component is changed.
   ============================================================ */

.brand-core.brand-core--new-logo{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:0 !important;
  padding:2px 10px !important;
  overflow:hidden !important;
}

/* Keep the decorative inner frame above the panel background but below logo. */
.brand-core.brand-core--new-logo::after{
  z-index:1 !important;
}

.brand-core--new-logo .brand-logo-new{
  position:relative !important;
  z-index:2 !important;

  display:block !important;

  width:auto !important;
  height:auto !important;
  max-width:98% !important;
  max-height:74px !important;

  margin:0 auto !important;

  object-fit:contain !important;

  filter:
    drop-shadow(0 0 7px rgba(0,245,121,.24))
    drop-shadow(0 2px 4px rgba(0,0,0,.52)) !important;
}

/* The old split radar/text elements no longer exist in this panel. */
.brand-core--new-logo .brand-radar,
.brand-core--new-logo .brand-copy{
  display:none !important;
}

/* ============================================================
   J.W. AIRRADAR v2.1.1 – HEADER DESIGN REVISION H1
   Reference-matched avionics housing treatment.

   IMPORTANT:
   - visual scope is strictly limited to .airradar-header
   - no dimensions/grid positions are changed
   - no header IDs, events or state classes are replaced
   - LEDs keep the existing location/server state logic
   ============================================================ */

/* Shared material tokens for a single, coherent header light model. */
.airradar-header{
  --hdr-edge-hi:rgba(215,238,238,.44);
  --hdr-edge-mid:rgba(113,148,151,.32);
  --hdr-edge-low:rgba(0,0,0,.94);
  --hdr-metal-top:#26383b;
  --hdr-metal-mid:#101c1f;
  --hdr-metal-low:#050a0c;
  --hdr-recess:#010405;
  --hdr-green:#00f579;

  /* Keep v2.1.1 geometry exactly as-is; only material/depth changes. */
  border-color:#536d71 !important;
  border-radius:10px !important;
  background:
    linear-gradient(180deg,
      #35484b 0%,
      #203236 8%,
      #111f22 28%,
      #0a1417 63%,
      #04090b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(237,255,255,.52),
    inset 0 2px 0 rgba(141,181,183,.19),
    inset 0 -1px 0 rgba(0,0,0,.96),
    inset 0 -4px 8px rgba(0,0,0,.64),
    0 1px 0 rgba(171,205,205,.15),
    0 6px 14px rgba(0,0,0,.52) !important;
}

/* Fine brushed grain follows the same top/front illumination as the shell. */
.airradar-header > .header-texture{
  inset:1px !important;
  border-radius:9px !important;
  background-image:url("../header-metal.webp") !important;
  background-repeat:repeat !important;
  background-size:1200px 160px !important;
  opacity:.17 !important;
  mix-blend-mode:screen !important;
  filter:contrast(.86) brightness(.74) !important;
}

/* Narrow specular line: one light source, slightly above/front. */
.airradar-header > .header-reflection{
  top:1px !important;
  left:2.2% !important;
  width:72% !important;
  height:7px !important;
  border-radius:50% !important;
  background:linear-gradient(180deg,rgba(236,255,255,.22),rgba(212,244,244,.05) 52%,transparent) !important;
  filter:blur(2.2px) !important;
  opacity:.78 !important;
}

/* A subtle inner chassis line makes all five modules read as one instrument. */
.airradar-header::before{
  content:"" !important;
  position:absolute !important;
  inset:3px !important;
  z-index:1 !important;
  pointer-events:none !important;
  border:1px solid rgba(136,172,174,.19) !important;
  border-bottom-color:rgba(0,0,0,.72) !important;
  border-radius:7px !important;
  box-shadow:
    inset 0 1px 0 rgba(220,244,244,.10),
    inset 0 -2px 3px rgba(0,0,0,.48) !important;
}

/* Same alloy, edge treatment and depth for every header bay. */
.airradar-header .side-plate,
.airradar-header .status-module,
.airradar-header .brand-core{
  border-top-color:rgba(138,174,177,.44) !important;
  border-left-color:rgba(83,112,115,.40) !important;
  border-right-color:rgba(7,13,15,.95) !important;
  border-bottom-color:rgba(0,0,0,.98) !important;
  border-radius:7px !important;
  background:
    linear-gradient(180deg,
      rgba(41,58,61,.98) 0%,
      rgba(23,37,40,.98) 10%,
      rgba(11,21,24,.99) 45%,
      rgba(5,11,13,1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(235,255,255,.22),
    inset 0 2px 3px rgba(166,205,205,.05),
    inset 0 -2px 0 rgba(0,0,0,.88),
    inset 0 -8px 14px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.76),
    0 2px 4px rgba(0,0,0,.48) !important;
}

/* All internal frames use the same recessed machining language. */
.airradar-header .side-plate::after,
.airradar-header .brand-core::after{
  inset:5px !important;
  border:1px solid rgba(130,167,169,.17) !important;
  border-top-color:rgba(205,231,231,.20) !important;
  border-bottom-color:rgba(0,0,0,.76) !important;
  border-radius:4px !important;
  box-shadow:
    inset 0 1px 1px rgba(224,247,247,.04),
    inset 0 0 10px rgba(0,0,0,.42) !important;
}

/* Central logo bay: slightly calmer surface, same metal and same light source. */
.airradar-header .brand-core.brand-core--new-logo{
  padding:2px 10px !important;
  background:
    radial-gradient(ellipse at 50% -15%,rgba(125,165,166,.09),transparent 46%),
    linear-gradient(180deg,#273a3d 0%,#17272a 12%,#0b1719 52%,#050b0d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(235,255,255,.23),
    inset 0 -2px 0 rgba(0,0,0,.90),
    inset 0 -10px 18px rgba(0,0,0,.20),
    0 0 0 1px rgba(0,0,0,.80),
    0 2px 4px rgba(0,0,0,.50) !important;
}

.airradar-header .brand-core--new-logo .brand-logo-new{
  /* Keep the supplied logo itself unchanged; only seat it naturally in the bay. */
  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,.05))
    drop-shadow(0 2px 3px rgba(0,0,0,.72))
    drop-shadow(0 0 4px rgba(0,245,121,.11)) !important;
}

/* Status bays are recessed into the same chassis rather than sitting on top. */
.airradar-header .status-module{
  background:
    radial-gradient(ellipse at 50% 2%,rgba(145,183,184,.08),transparent 50%),
    linear-gradient(180deg,#26393c 0%,#152528 13%,#091416 56%,#04090b 100%) !important;
}

.airradar-header .module-bezel{
  border-color:#344b4f !important;
  border-top-color:rgba(155,192,194,.42) !important;
  border-bottom-color:rgba(0,0,0,.98) !important;
  border-radius:4px !important;
  background:
    linear-gradient(180deg,#152629 0%,#0a1517 48%,#030708 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.92),
    0 0 0 2px rgba(97,128,130,.12),
    inset 0 1px 0 rgba(227,250,250,.13),
    inset 0 -3px 6px rgba(0,0,0,.82),
    0 2px 3px rgba(0,0,0,.64) !important;
}

.airradar-header .module-bezel::before{
  inset:7px !important;
  border-color:rgba(81,126,119,.42) !important;
  border-radius:2px !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.88),
    inset 0 0 7px rgba(0,0,0,.58) !important;
}

.airradar-header .module-bezel::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:8px;
  height:34%;
  z-index:2;
  pointer-events:none;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(229,255,247,.12),rgba(229,255,247,0));
}

.airradar-header .module-led{
  position:relative !important;
  z-index:1 !important;
  border-radius:2px !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.66),
    inset 0 -2px 3px rgba(0,60,30,.44),
    0 0 4px rgba(0,245,121,.52),
    0 0 9px rgba(0,245,121,.24) !important;
}

/* Location-state colours remain exactly state-driven; glow is simply more realistic. */
.airradar-header .module-led--location.is-location-missing{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.70),
    inset 0 -2px 3px rgba(110,45,0,.48),
    0 0 4px rgba(255,149,0,.72),
    0 0 9px rgba(255,149,0,.30) !important;
}

.airradar-header .module-led--location.is-location-set{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.72),
    inset 0 -2px 3px rgba(0,80,34,.40),
    0 0 4px rgba(0,245,121,.66),
    0 0 9px rgba(0,245,121,.28) !important;
}

/* LCDs: machined frame + dark glass + very restrained reflection. */
.airradar-header .header-location-lcd,
.airradar-header .header-lcd{
  border-color:rgba(44,255,137,.64) !important;
  border-radius:2px !important;
  background:
    linear-gradient(180deg,
      rgba(0,73,39,.98) 0%,
      rgba(0,48,27,.99) 18%,
      rgba(0,33,19,.995) 58%,
      rgba(0,22,13,1) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.98),
    0 0 0 3px rgba(37,59,61,.96),
    0 0 0 4px rgba(151,184,184,.17),
    inset 0 1px 0 rgba(198,255,220,.15),
    inset 0 -5px 10px rgba(0,0,0,.52),
    inset 0 0 14px rgba(0,245,121,.075),
    0 2px 3px rgba(0,0,0,.58) !important;
}

.airradar-header .header-location-lcd::before,
.airradar-header .header-lcd::before{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:2px;
  height:34%;
  z-index:2;
  pointer-events:none;
  border-radius:1px;
  background:linear-gradient(180deg,rgba(218,255,232,.105),rgba(218,255,232,.018) 68%,transparent);
}

.airradar-header .header-location-lcd::after,
.airradar-header .header-lcd::after{
  opacity:.12 !important;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.020) 0 1px,
      rgba(0,0,0,.055) 1px 3px) !important;
}

.airradar-header .header-location-lcd__text,
.airradar-header .header-lcd__live,
.airradar-header .header-lcd__utc{
  z-index:3 !important;
  text-shadow:
    0 0 3px rgba(94,255,168,.72),
    0 0 7px rgba(0,245,121,.24) !important;
}

/* Keep the clickable LCD feedback, but avoid a modern neon halo. */
.airradar-header .header-location-lcd:hover,
.airradar-header .header-location-lcd:focus-visible{
  border-color:rgba(112,255,173,.80) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.98),
    0 0 0 3px rgba(41,65,66,.98),
    0 0 0 4px rgba(165,198,198,.19),
    inset 0 1px 0 rgba(210,255,226,.18),
    inset 0 -5px 10px rgba(0,0,0,.52),
    inset 0 0 16px rgba(0,245,121,.10),
    0 2px 3px rgba(0,0,0,.58) !important;
}

/* Preserve the existing blink cadence/state logic, only reduce bloom. */
@keyframes airradar-connection-green{
  0%,44%{
    opacity:1;
    filter:saturate(1.06) brightness(1.03);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.70),
      inset 0 -2px 3px rgba(0,80,34,.40),
      0 0 4px rgba(0,245,121,.68),
      0 0 9px rgba(0,245,121,.30);
  }
  45%,100%{
    opacity:.31;
    filter:saturate(.72) brightness(.72);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.20),
      inset 0 -2px 3px rgba(0,60,28,.38),
      0 0 3px rgba(0,245,121,.14);
  }
}

@keyframes airradar-connection-red{
  0%,44%{
    opacity:1;
    filter:saturate(1.08) brightness(1.04);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.68),
      inset 0 -2px 3px rgba(90,0,8,.46),
      0 0 4px rgba(255,30,48,.70),
      0 0 9px rgba(255,30,48,.30);
  }
  45%,100%{
    opacity:.31;
    filter:saturate(.73) brightness(.70);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.17),
      inset 0 -2px 3px rgba(90,0,8,.38),
      0 0 3px rgba(255,30,48,.16);
  }
}

/* Explicitly retain the v2.1.1 screw-free header rule. */
.airradar-header .ar-screw,
.airradar-header .screw,
.airradar-header .module-screw,
.airradar-header .core-screw{
  display:none !important;
}

/* assets/css/main-display-r2.css */
/* ============================================================
   J.W. AIRRADAR v2.1.1 – MAINDISPLAY DESIGN REVISION R2
   Scope: optical enclosure/frame of the existing MainDisplay only.

   Invariants:
   - no MainDisplay dimensions or #map geometry are changed
   - no MainDisplay content, controls, overlays or logic are changed
   - no JS selectors/IDs/events are replaced
   - no header or lower-panel styling is targeted
   - MainDisplay screws remain hidden
   ============================================================ */

/* Local material model matched to the approved Header R1 lighting. */
#cockpitRoot .airradar-main-cell .main-display{
  --md-metal-hi:#33474a;
  --md-metal-top:#26383b;
  --md-metal-mid:#111f22;
  --md-metal-low:#050a0c;
  --md-edge-hi:rgba(222,244,244,.44);
  --md-edge-mid:rgba(117,151,153,.28);
  --md-edge-low:rgba(0,0,0,.96);

  /* Geometry stays untouched. Only the apparent physical mass changes. */
  filter:
    drop-shadow(0 9px 12px rgba(0,0,0,.72))
    drop-shadow(0 2px 3px rgba(0,0,0,.84)) !important;
}

/* Stage 1: massive outer housing. */
#cockpitRoot .airradar-main-cell .main-display__outer-shell{
  /* Existing padding is intentionally not changed. */
  border:1px solid #50696d !important;
  border-top-color:rgba(166,199,200,.66) !important;
  border-left-color:rgba(93,122,125,.54) !important;
  border-right-color:rgba(7,13,15,.98) !important;
  border-bottom-color:#010303 !important;
  border-radius:14px !important;

  background:
    radial-gradient(ellipse at 20% -18%,rgba(194,225,225,.11),transparent 34%),
    linear-gradient(180deg,
      #3a4e51 0%,
      #263a3d 3%,
      #17282b 10%,
      #0d191c 35%,
      #091315 67%,
      #04090b 91%,
      #020506 100%) !important;

  box-shadow:
    /* common top/front light source */
    inset 0 1px 0 rgba(242,255,255,.58),
    inset 0 2px 0 rgba(129,163,165,.19),
    inset 1px 0 0 rgba(124,155,157,.08),

    /* lower/right mass */
    inset -1px 0 0 rgba(0,0,0,.74),
    inset 0 -1px 0 rgba(0,0,0,.98),
    inset 0 -8px 14px rgba(0,0,0,.46),

    /* machined outer separation */
    0 0 0 1px rgba(0,0,0,.92),
    0 2px 0 rgba(95,123,124,.11),
    0 5px 9px rgba(0,0,0,.62) !important;
}

/* Stage 2: narrow machined light/metal ridge inside the housing. */
#cockpitRoot .airradar-main-cell .main-display__outer-shell::before{
  content:"" !important;
  position:absolute !important;
  inset:5px !important;
  z-index:1 !important;
  pointer-events:none !important;
  border:1px solid rgba(119,153,155,.27) !important;
  border-top-color:rgba(218,239,239,.34) !important;
  border-left-color:rgba(137,169,170,.19) !important;
  border-right-color:rgba(0,0,0,.76) !important;
  border-bottom-color:rgba(0,0,0,.91) !important;
  border-radius:10px !important;
  background:transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(244,255,255,.08),
    inset 0 -2px 3px rgba(0,0,0,.48),
    0 1px 0 rgba(255,255,255,.025) !important;
}

/* Directional reflection is restrained and follows the header light model. */
#cockpitRoot .airradar-main-cell .main-display__outer-shell::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:
    linear-gradient(180deg,
      rgba(232,250,250,.105) 0,
      rgba(199,229,229,.028) 8%,
      transparent 19%),
    linear-gradient(108deg,
      rgba(255,255,255,.04) 0%,
      transparent 27%,
      transparent 75%,
      rgba(0,0,0,.10) 100%),
    radial-gradient(ellipse at 88% 108%,rgba(0,0,0,.28),transparent 38%) !important;
}

/* Fine satin/brushed structure – corrected relative asset path. */
#cockpitRoot .airradar-main-cell .main-display__metal-grain{
  background-image:url("../brushed-metal.webp") !important;
  background-repeat:repeat !important;
  background-size:1200px 220px !important;
  opacity:.22 !important;
  mix-blend-mode:soft-light !important;
  filter:contrast(.92) brightness(.72) !important;
}

/* Very narrow upper-front reflection, not a glossy app-card sheen. */
#cockpitRoot .airradar-main-cell .main-display__outer-gloss{
  left:2.2% !important;
  top:2px !important;
  width:68% !important;
  height:8px !important;
  border-radius:50% !important;
  background:
    linear-gradient(180deg,
      rgba(236,255,255,.22),
      rgba(204,235,235,.055) 52%,
      transparent 100%) !important;
  background-image:none !important;
  opacity:.72 !important;
  filter:blur(2.1px) !important;
  transform:none !important;
  mix-blend-mode:screen !important;
}

/* Stage 3: dark cavity / recess between chassis and monitor bezel. */
#cockpitRoot .airradar-main-cell .main-display__recess{
  /* Existing padding remains unchanged to preserve the visible map area. */
  border:1px solid #111d1f !important;
  border-top-color:rgba(104,134,136,.22) !important;
  border-left-color:rgba(64,83,85,.18) !important;
  border-right-color:#010303 !important;
  border-bottom-color:#000 !important;
  border-radius:8px !important;

  background:
    linear-gradient(180deg,
      #0b1517 0%,
      #050a0b 12%,
      #020405 46%,
      #010203 100%) !important;

  box-shadow:
    /* the screen sits physically behind the outer housing */
    inset 0 8px 12px rgba(0,0,0,.88),
    inset 0 -5px 9px rgba(0,0,0,.96),
    inset 6px 0 9px rgba(0,0,0,.66),
    inset -6px 0 10px rgba(0,0,0,.82),

    /* narrow upper metal catchlight at the mouth of the recess */
    inset 0 1px 0 rgba(191,220,220,.08),

    /* physical separation from outer shell */
    0 0 0 1px rgba(0,0,0,.96),
    0 1px 2px rgba(143,173,174,.035),
    0 3px 6px rgba(0,0,0,.66) !important;
}

/* Stage 4: inner monitor bezel, satin rather than luminous. */
#cockpitRoot .airradar-main-cell .main-display__inner-bevel{
  /* Existing padding remains unchanged. */
  border:1px solid #26393c !important;
  border-top-color:rgba(129,161,163,.34) !important;
  border-left-color:rgba(77,101,103,.24) !important;
  border-right-color:rgba(0,0,0,.94) !important;
  border-bottom-color:#010303 !important;
  border-radius:5px !important;

  background:
    linear-gradient(180deg,
      #1c2b2e 0%,
      #101b1e 11%,
      #071012 52%,
      #030708 100%) !important;

  box-shadow:
    inset 0 1px 0 rgba(222,244,244,.13),
    inset 0 -1px 0 rgba(0,0,0,.94),
    inset 0 -4px 7px rgba(0,0,0,.48),
    0 0 0 1px rgba(0,0,0,.96),
    0 2px 3px rgba(0,0,0,.72) !important;
}

/* Screen edge itself is neutral hardware: green light belongs to screen content only. */
#cockpitRoot .airradar-main-cell .main-display__screen{
  border:1px solid rgba(6,12,13,.98) !important;
  border-radius:2px !important;
  box-shadow:
    0 0 0 1px rgba(101,130,132,.15),
    0 0 0 2px rgba(0,0,0,.90),
    inset 0 1px 0 rgba(225,242,242,.035),
    inset 0 0 0 1px rgba(0,0,0,.82),
    inset 0 0 20px rgba(0,0,0,.38) !important;
}

/* Explicitly preserve the screw-free MainDisplay specification. */
#cockpitRoot .airradar-main-cell .main-display__outer-shell > .ar-screw,
#cockpitRoot .airradar-main-cell .main-display__outer-shell .ar-screw{
  display:none !important;
}

/* assets/css/lower-panels-r3.css */
/*
 * J.W. AIRRADAR v2.1.1 – Lower Panels R3
 * ------------------------------------------------------------
 * DESIGN-ONLY override for the three lower hardware modules:
 *   - Input Keypad
 *   - Flight Level / Function panel
 *   - Range panel
 *
 * Functional markup, element IDs, dimensions and JavaScript logic are
 * intentionally untouched. All selectors are scoped to .airradar-bottom-row.
 */

.airradar-bottom-row{
  --r3-metal-hi:#53656a;
  --r3-metal-mid:#17262a;
  --r3-metal-low:#050a0c;
  --r3-edge:#30464b;
  --r3-green:#20ff8d;
  --r3-green-hi:#78ffb6;
  --r3-text:#eef7f4;
}

/* ============================================================
   SHARED MODULE HOUSING
   Same material and light direction for all three bottom modules.
   ============================================================ */
.airradar-bottom-row .input-keypad-panel,
.airradar-bottom-row .flight-level-filter,
.airradar-bottom-row .range-panel{
  isolation:isolate;
  overflow:hidden;
  border:1px solid #26383c !important;
  border-radius:10px !important;
  background:
    linear-gradient(180deg,
      #263a3f 0%,
      #17292d 3%,
      #0e1c20 9%,
      #0a1518 52%,
      #071013 77%,
      #030708 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(229,248,247,.30),
    inset 0 2px 0 rgba(126,156,160,.11),
    inset 0 -1px 0 rgba(0,0,0,.96),
    inset 0 -9px 16px rgba(0,0,0,.40),
    0 0 0 1px rgba(0,0,0,.92),
    0 1px 0 rgba(120,148,151,.12),
    0 7px 12px rgba(0,0,0,.54) !important;
}

/* Inner machined line: bright at the top, deep at the bottom. */
.airradar-bottom-row .input-keypad-panel::before,
.airradar-bottom-row .flight-level-filter::before,
.airradar-bottom-row .range-panel::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:1;
  border-radius:7px;
  border:1px solid rgba(117,149,153,.23) !important;
  background:transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(221,244,242,.14),
    inset 0 -1px 0 rgba(0,0,0,.90),
    inset 0 0 0 1px rgba(0,0,0,.40) !important;
  pointer-events:none;
}

/* Shared brushed metal grain. */
.airradar-bottom-row .panel-texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    url("../panel-metal.webp") repeat,
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.012) 0,
      rgba(255,255,255,.012) 1px,
      rgba(0,0,0,.010) 1px,
      rgba(0,0,0,.010) 2px) !important;
  background-size:900px 180px,auto !important;
  mix-blend-mode:soft-light;
  opacity:.39 !important;
  pointer-events:none;
}

/* One restrained reflection from slightly above/front. */
.airradar-bottom-row .panel-reflection{
  position:absolute;
  z-index:2;
  left:1.5%;
  right:12%;
  top:0;
  height:14%;
  transform:none;
  background:linear-gradient(180deg,
    rgba(225,244,244,.105) 0%,
    rgba(194,224,225,.030) 42%,
    rgba(194,224,225,0) 100%) !important;
  filter:none !important;
  opacity:.72;
  pointer-events:none;
}

/* Black recessed screw standard – only the three lower modules. */
.airradar-bottom-row .input-keypad-panel .ar-screw,
.airradar-bottom-row .flight-level-filter .ar-screw,
.airradar-bottom-row .range-panel .ar-screw{
  z-index:20;
  background:
    radial-gradient(circle at 34% 28%,
      rgba(228,238,240,.28) 0 3%,
      #4a5358 5% 9%,
      #2c3236 17%,
      #171b1e 34%,
      #0b0e10 55%,
      #040506 75%,
      #000 100%) !important;
  border:1px solid #000 !important;
  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,.10),
    inset -1px -2px 3px rgba(0,0,0,.90),
    0 0 0 1px rgba(0,0,0,.98),
    0 0 0 2px rgba(21,27,29,.58),
    1px 2px 2px rgba(0,0,0,.90) !important;
}
.airradar-bottom-row .input-keypad-panel .ar-screw::before,
.airradar-bottom-row .flight-level-filter .ar-screw::before,
.airradar-bottom-row .range-panel .ar-screw::before{
  background:linear-gradient(90deg,
    #010101 0%,#101315 22%,#687176 48%,#14181a 64%,#010101 100%) !important;
  box-shadow:1px 0 0 rgba(255,255,255,.035),-1px 0 0 rgba(0,0,0,.78) !important;
}
.airradar-bottom-row .input-keypad-panel .ar-screw::after,
.airradar-bottom-row .flight-level-filter .ar-screw::after,
.airradar-bottom-row .range-panel .ar-screw::after{
  background:radial-gradient(ellipse,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.035) 44%,
    rgba(255,255,255,0) 76%) !important;
}

/* ============================================================
   INPUT KEYPAD
   ============================================================ */
.airradar-bottom-row .input-keypad-panel__viewport{
  /* Preserve existing geometry; add a shallow recessed key bed. */
  border-radius:4px;
  background:linear-gradient(180deg,rgba(2,7,8,.54),rgba(1,4,5,.27));
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.78),
    inset 0 0 0 1px rgba(0,0,0,.72),
    0 1px 0 rgba(142,171,173,.045);
}

.airradar-bottom-row .input-key{
  border:1px solid #354a4f !important;
  border-radius:3px;
  color:#75ffae;
  background:
    linear-gradient(180deg,
      #1d2a2d 0%,
      #142023 13%,
      #0d1719 58%,
      #070d0f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(231,247,246,.12),
    inset 0 2px 0 rgba(93,120,124,.07),
    inset 0 -4px 5px rgba(0,0,0,.66),
    0 0 0 2px #020607,
    0 0 0 3px rgba(44,61,65,.54),
    0 5px 6px rgba(0,0,0,.60) !important;
  text-shadow:
    0 1px 0 #000,
    0 0 calc(7px * var(--input-key-glow)) rgba(0,245,121,calc(.62 * var(--input-key-glow))),
    0 0 calc(13px * var(--input-key-glow)) rgba(0,245,121,calc(.20 * var(--input-key-glow))) !important;
  transition:transform .055s ease,box-shadow .055s ease,border-color .08s ease,color .08s ease !important;
}

.airradar-bottom-row .input-key::before{
  inset:4px;
  border:1px solid rgba(224,242,239,.055) !important;
  border-top-color:rgba(224,242,239,.12) !important;
  border-bottom-color:rgba(0,0,0,.42) !important;
  border-radius:2px;
}

/* Fine top/front reflection on the key cap. */
.airradar-bottom-row .input-key::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:5px;
  height:20%;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(230,246,244,.07),rgba(230,246,244,0));
  pointer-events:none;
}

.airradar-bottom-row .input-key:hover{
  border-color:#456167 !important;
  color:#8dffbd;
  box-shadow:
    inset 0 1px 0 rgba(231,247,246,.14),
    inset 0 -4px 5px rgba(0,0,0,.66),
    0 0 0 2px #020607,
    0 0 0 3px rgba(50,74,75,.62),
    0 5px 6px rgba(0,0,0,.60) !important;
}

.airradar-bottom-row .input-key:active,
.airradar-bottom-row .input-key.is-pressed{
  transform:translateY(3px) !important;
  color:#c8ffe0;
  border-color:#3e5e59 !important;
  background:linear-gradient(180deg,#0b1416 0%,#091214 46%,#050a0c 100%) !important;
  box-shadow:
    inset 0 4px 7px rgba(0,0,0,.86),
    inset 0 0 7px rgba(0,245,121,.045),
    0 0 0 2px #020607,
    0 1px 1px rgba(0,0,0,.78) !important;
}

.airradar-bottom-row .input-numeric-key{
  background:
    radial-gradient(circle at 39% 25%,
      #263438 0%,
      #182326 22%,
      #0d1618 54%,
      #060b0d 78%,
      #020405 100%) !important;
  border-color:#40575c !important;
  box-shadow:
    inset 0 2px 1px rgba(236,249,248,.11),
    inset 0 -5px 7px rgba(0,0,0,.68),
    0 0 0 2px #020607,
    0 0 0 3px rgba(46,65,68,.55),
    0 5px 6px rgba(0,0,0,.62) !important;
}

.airradar-bottom-row .input-numeric-key:active,
.airradar-bottom-row .input-numeric-key.is-pressed{
  background:radial-gradient(circle at 50% 42%,#101b1d 0%,#081012 66%,#030607 100%) !important;
  box-shadow:
    inset 0 4px 7px rgba(0,0,0,.86),
    0 0 0 2px #020607,
    0 1px 1px rgba(0,0,0,.78) !important;
}

/* ============================================================
   FLIGHT LEVEL / FUNCTION PANEL
   ============================================================ */
.airradar-bottom-row .flight-level-filter__inner{
  z-index:3;
}

/* Physical dark switch shell for both rows. */
.airradar-bottom-row .flight-level-filter .preset{
  border:1px solid #2d4449 !important;
  border-radius:4px !important;
  color:#f0f4f3 !important;
  background:linear-gradient(180deg,#172326 0%,#0c1517 48%,#050a0c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(235,248,247,.095),
    inset 0 -3px 4px rgba(0,0,0,.75),
    0 0 0 1px rgba(0,0,0,.96),
    0 0 0 2px rgba(35,53,57,.40),
    0 4px 5px rgba(0,0,0,.53) !important;
  text-shadow:0 1px 0 #000 !important;
}

.airradar-bottom-row .flight-level-filter .preset:hover{
  color:#fff !important;
  border-color:#405b60 !important;
  background:linear-gradient(180deg,#1a282b 0%,#0e181a 49%,#060c0e 100%) !important;
}

.airradar-bottom-row .flight-level-filter .preset:active{
  transform:translateY(2px) !important;
  background:linear-gradient(180deg,#0b1315 0%,#071012 100%) !important;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.80),
    0 0 0 1px rgba(0,0,0,.96),
    0 0 0 2px rgba(35,53,57,.36),
    0 1px 2px rgba(0,0,0,.58) !important;
}

/* LED state: body remains dark; text and very restrained perimeter light up. */
.airradar-bottom-row .flight-level-filter .preset.preset--active,
.airradar-bottom-row .flight-level-filter #uiFlCtrBtn.preset--active,
.airradar-bottom-row .flight-level-filter #uiFlCsBtn.preset--active,
.airradar-bottom-row .flight-level-filter #uiFlSatBtn.preset--active,
.airradar-bottom-row .flight-level-filter #uiFlVorBtn.preset--active,
.airradar-bottom-row .flight-level-filter #uiFlLabelBtn.preset--active,
.airradar-bottom-row .flight-level-filter #uiFlGroundBtn.preset--active{
  color:var(--r3-green-hi) !important;
  border-color:#386253 !important;
  background:linear-gradient(180deg,#162226 0%,#0b1517 49%,#050a0c 100%) !important;
  text-shadow:
    0 0 2px rgba(124,255,184,.90),
    0 0 6px rgba(0,245,121,.62),
    0 0 10px rgba(0,245,121,.30),
    0 1px 0 #000 !important;
  box-shadow:
    inset 0 1px 0 rgba(235,248,247,.085),
    inset 0 -3px 4px rgba(0,0,0,.75),
    inset 0 0 9px rgba(0,245,121,.055),
    0 0 0 1px rgba(0,0,0,.96),
    0 0 0 2px rgba(24,70,49,.55),
    0 0 8px rgba(0,245,121,.14),
    0 4px 5px rgba(0,0,0,.53) !important;
}

/* MIN/MAX LCDs: 63px stays exactly equal to +/− stack height. */
.airradar-bottom-row .flight-level-filter .fl-readout{
  height:63px !important;
  min-height:63px !important;
  max-height:63px !important;
  border:1px solid #27433f !important;
  border-radius:5px !important;
  color:#68ffad !important;
  background:
    linear-gradient(180deg,rgba(191,255,225,.055) 0%,rgba(191,255,225,0) 25%),
    radial-gradient(ellipse at 50% 42%,rgba(0,245,121,.075),rgba(0,245,121,0) 67%),
    linear-gradient(180deg,#061413 0%,#03100f 54%,#010706 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,245,121,.20),
    inset 0 1px 0 rgba(188,255,221,.10),
    inset 0 0 11px rgba(0,245,121,.065),
    inset 0 -8px 13px rgba(0,0,0,.58),
    0 0 0 1px #020504,
    0 0 0 3px #10201f,
    0 0 0 4px rgba(0,0,0,.78),
    0 3px 4px rgba(0,0,0,.54) !important;
  text-shadow:
    0 0 2px rgba(121,255,181,.92),
    0 0 6px rgba(0,245,121,.34) !important;
}

.airradar-bottom-row .flight-level-filter .fl-readout::before{
  left:5px;
  right:5px;
  top:4px;
  height:31%;
  border-radius:3px;
  background:linear-gradient(180deg,rgba(229,255,246,.115),rgba(229,255,246,.018) 70%,rgba(229,255,246,0)) !important;
}

.airradar-bottom-row .flight-level-filter .fl-caption{
  color:#eef5f3;
  text-shadow:0 1px 0 #000 !important;
}

/* + / -: machined push buttons with a physical travel state. */
.airradar-bottom-row .flight-level-filter .step{
  border:1px solid #354e53 !important;
  border-radius:4px;
  color:#f1f6f4;
  background:linear-gradient(180deg,#1c2a2d 0%,#10191b 51%,#070d0f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(236,248,247,.11),
    inset 0 -3px 4px rgba(0,0,0,.68),
    0 0 0 1px rgba(0,0,0,.92),
    0 3px 4px rgba(0,0,0,.53) !important;
  text-shadow:0 1px 0 #000;
}
.airradar-bottom-row .flight-level-filter .step:hover{
  color:#bdffda;
  border-color:#46645f !important;
}
.airradar-bottom-row .flight-level-filter .step:active{
  transform:translateY(2px) !important;
  background:linear-gradient(180deg,#0b1416,#070d0f) !important;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.82),
    0 0 0 1px rgba(0,0,0,.92),
    0 1px 1px rgba(0,0,0,.62) !important;
}

/* Recessed slider assembly; no geometry or range behavior changes. */
.airradar-bottom-row .flight-level-filter .slider-module{
  background:linear-gradient(180deg,#050d0e 0%,#020708 100%) !important;
  border:1px solid #17282b !important;
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.82),
    inset 0 0 0 1px rgba(86,111,114,.035),
    0 1px 0 rgba(120,148,150,.06),
    0 0 0 1px rgba(0,0,0,.46) !important;
}
.airradar-bottom-row .flight-level-filter .slider-track{
  background:linear-gradient(180deg,#031b13,#063923 52%,#02150e) !important;
  border:1px solid rgba(0,0,0,.72);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.88),
    0 1px 0 rgba(90,255,165,.055) !important;
}
.airradar-bottom-row .flight-level-filter .slider-fill{
  background:linear-gradient(180deg,#35ff9a 0%,#08d970 43%,#059250 100%) !important;
  box-shadow:0 0 5px rgba(0,245,121,.20) !important;
}
.airradar-bottom-row .flight-level-filter .tick{
  background:#25ee84 !important;
  box-shadow:0 0 3px rgba(0,245,121,.10);
}
.airradar-bottom-row .flight-level-filter .scale-label{
  color:#e8f1ee;
  text-shadow:0 1px 0 #000;
}

.airradar-bottom-row .flight-level-filter .slider-track-wrap input[type="range"]::-webkit-slider-thumb{
  background:radial-gradient(circle at 35% 28%,
    #dffff0 0 7%,#68ffb0 10%,#13db75 30%,#087348 56%,#052d20 73%,#020908 100%) !important;
  border:1px solid #6efdb0 !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.42),
    inset 0 -3px 5px rgba(0,0,0,.62),
    0 0 0 2px rgba(0,33,22,.92),
    0 0 7px rgba(0,245,121,.25) !important;
}
.airradar-bottom-row .flight-level-filter .slider-track-wrap input[type="range"]::-moz-range-thumb{
  background:radial-gradient(circle at 35% 28%,
    #dffff0 0 7%,#68ffb0 10%,#13db75 30%,#087348 56%,#052d20 73%,#020908 100%) !important;
  border:1px solid #6efdb0 !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.42),
    inset 0 -3px 5px rgba(0,0,0,.62),
    0 0 0 2px rgba(0,33,22,.92),
    0 0 7px rgba(0,245,121,.25) !important;
}

/* ============================================================
   RANGE PANEL
   ============================================================ */
.airradar-bottom-row .range-panel__title{
  color:#eff5f3 !important;
  text-shadow:0 1px 0 #000 !important;
}

/* A machined recessed pocket behind the existing knob. */
.airradar-bottom-row .range-panel .dial::before{
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  top:24px;
  width:156px;
  height:156px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      #081113 0 48%,
      #050b0d 49% 55%,
      #18272a 56% 58%,
      #070d0f 59% 65%,
      #26383c 66% 67%,
      #070c0e 68% 74%,
      #030607 75% 100%);
  border:1px solid #020405;
  box-shadow:
    inset 0 7px 12px rgba(0,0,0,.76),
    inset 0 -1px 0 rgba(185,214,215,.07),
    0 1px 0 rgba(123,151,153,.07),
    0 0 0 1px rgba(0,0,0,.72);
  pointer-events:none;
}

/* Upper metal glint on the circular recess, not a green glow. */
.airradar-bottom-row .range-panel .dial::after{
  content:"";
  position:absolute;
  z-index:3;
  left:50%;
  top:29px;
  width:146px;
  height:146px;
  transform:translateX(-50%);
  border-radius:50%;
  border-top:1px solid rgba(190,218,219,.11);
  border-bottom:1px solid rgba(0,0,0,.60);
  pointer-events:none;
}

.airradar-bottom-row .range-panel .range-mark{
  z-index:12;
}
.airradar-bottom-row .range-panel .range-mark__label{
  color:#eef4f2;
  text-shadow:0 1px 0 #000 !important;
}
.airradar-bottom-row .range-panel .range-mark__tick{
  width:6px;
  height:6px;
  border-radius:1px;
  background:#667d78 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 1px rgba(0,0,0,.60) !important;
}
.airradar-bottom-row .range-panel .range-mark--active .range-mark__label{
  color:var(--r3-green-hi) !important;
  text-shadow:0 0 3px rgba(113,255,177,.76),0 0 8px rgba(0,245,121,.32),0 1px 0 #000 !important;
}
.airradar-bottom-row .range-panel .range-mark--active .range-mark__tick{
  background:#58ffaa !important;
  box-shadow:0 0 4px rgba(0,245,121,.42),inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* Massive rotary control, using the existing span stack and dimensions. */
.airradar-bottom-row .range-panel .dial__knob{
  z-index:8;
  filter:drop-shadow(0 7px 6px rgba(0,0,0,.64)) !important;
}
.airradar-bottom-row .range-panel .dial__knob-outer{
  background:radial-gradient(circle,
    #101b1e 0 48%,
    #071012 49% 57%,
    #1c2d30 58% 59%,
    #071012 60% 66%,
    #1c3230 67% 68%,
    #071012 69% 78%,
    #101b1e 79% 100%) !important;
  border:1px solid #020506 !important;
  box-shadow:
    inset 0 2px 2px rgba(214,236,236,.08),
    inset 0 -8px 12px rgba(0,0,0,.78),
    0 0 0 2px rgba(0,0,0,.72),
    0 0 0 3px rgba(49,69,72,.52) !important;
}
.airradar-bottom-row .range-panel .dial__knob-ring{
  inset:8px;
  border:1px solid rgba(72,255,161,.70) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.80),
    0 0 4px rgba(0,245,121,.26),
    0 0 0 1px rgba(16,80,51,.30) !important;
}
.airradar-bottom-row .range-panel .dial__knob-inner{
  background:radial-gradient(circle at 37% 29%,
    rgba(120,151,155,.20) 0%,
    rgba(58,77,81,.10) 17%,
    #172326 32%,
    #10191b 56%,
    #090f11 79%,
    #030607 100%) !important;
  box-shadow:
    inset 0 7px 11px rgba(226,242,241,.018),
    inset 0 -12px 16px rgba(0,0,0,.76),
    inset 0 0 0 1px rgba(203,229,228,.025) !important;
}
.airradar-bottom-row .range-panel .dial__knob-gloss{
  background:linear-gradient(145deg,
    rgba(255,255,255,.065) 0%,
    rgba(255,255,255,.022) 18%,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,0) 100%) !important;
}
.airradar-bottom-row .range-panel .dial__knob--new::after{
  border:1px solid rgba(174,205,205,.06) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.34) !important;
}

/* Shorter, denser LED pointer: a luminous physical insert, not a wash. */
.airradar-bottom-row .range-panel .dial__led-core{
  left:2px;
  top:-3px;
  width:40px;
  height:6px;
  border-radius:4px;
  background:linear-gradient(90deg,
    rgba(0,245,121,0) 0%,
    rgba(126,255,188,.65) 13%,
    #d7ffe9 20%,
    #39ff9a 42%,
    #04c86a 76%,
    rgba(0,150,78,0) 100%) !important;
  box-shadow:
    0 0 2px rgba(217,255,235,.66),
    0 0 6px rgba(0,245,121,.46),
    0 0 10px rgba(0,245,121,.20) !important;
}
.airradar-bottom-row .range-panel .dial__led-glow{
  left:13px;
  top:-10px;
  width:30px;
  height:20px;
  background:radial-gradient(circle,rgba(0,245,121,.18),rgba(0,245,121,.055) 43%,rgba(0,245,121,0) 73%) !important;
  filter:blur(2px) !important;
}

/* Press/grab feedback stays purely visual. */
.airradar-bottom-row .range-panel .dial__knob:active{
  transform:translateX(-50%) translateY(1px) !important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.65)) !important;
}

/* assets/css/final-device-r4.css */
/* ============================================================================
   AIRRADAR FINAL DEVICE DESIGN PASS
   J.W. AIRRADAR v2.1.1 – Final Device R4
   ----------------------------------------------------------------------------
   DESIGN-ONLY calibration pass over the already approved Header R1,
   MainDisplay R2 and Lower Panels R3.

   Scope:
   - shared light direction, alloy colour, satin grain, bevel logic and depth
   - restrained LED/LCD glow calibration
   - common button / screw material language
   - no layout geometry, map geometry, IDs, events or functional state logic

   The functional basis remains J.W. AIRRADAR v2.1.1 unchanged.
   ============================================================================ */

/* --------------------------------------------------------------------------
   0. Shared device material / lighting model
   Light source: slightly above and in front. Green is reserved for emitters.
   -------------------------------------------------------------------------- */
#cockpitRoot{
  --device-metal-top:#31464a;
  --device-metal-upper:#223438;
  --device-metal-mid:#111f22;
  --device-metal-deep:#071013;
  --device-metal-bottom:#020506;
  --device-edge-hi:rgba(218,239,240,.36);
  --device-edge-soft:rgba(126,158,161,.21);
  --device-edge-dark:rgba(0,0,0,.94);
  --device-cavity:#020607;
  --device-green:#20f98a;
  --device-green-hi:#7cffb8;
  --device-lcd-bg1:#063324;
  --device-lcd-bg2:#031b14;
  --device-lcd-bg3:#010b08;
}

/* Same alloy family on every physical outer housing. No geometry changes. */
#cockpitRoot .airradar-header,
#cockpitRoot .airradar-main-cell .main-display__outer-shell,
#cockpitRoot .airradar-bottom-row .input-keypad-panel,
#cockpitRoot .airradar-bottom-row .flight-level-filter,
#cockpitRoot .airradar-bottom-row .range-panel{
  background:
    radial-gradient(ellipse at 22% -18%,rgba(205,231,231,.080),transparent 35%),
    linear-gradient(180deg,
      var(--device-metal-top) 0%,
      var(--device-metal-upper) 5%,
      var(--device-metal-mid) 22%,
      #0b171a 58%,
      var(--device-metal-deep) 80%,
      var(--device-metal-bottom) 100%) !important;
  border-top-color:rgba(166,196,198,.52) !important;
  border-left-color:rgba(86,112,115,.38) !important;
  border-right-color:rgba(5,10,12,.98) !important;
  border-bottom-color:rgba(0,0,0,.99) !important;
  box-shadow:
    inset 0 1px 0 rgba(240,253,253,.36),
    inset 0 2px 0 rgba(135,168,170,.12),
    inset 1px 0 0 rgba(115,144,147,.045),
    inset -1px 0 0 rgba(0,0,0,.68),
    inset 0 -1px 0 rgba(0,0,0,.98),
    inset 0 -8px 14px rgba(0,0,0,.40),
    0 0 0 1px rgba(0,0,0,.90),
    0 1px 0 rgba(125,155,157,.075),
    0 5px 10px rgba(0,0,0,.53) !important;
}

/* Satin grain: same scale, blend and subtle intensity across the complete unit. */
#cockpitRoot .airradar-header > .header-texture,
#cockpitRoot .airradar-main-cell .main-display__metal-grain,
#cockpitRoot .airradar-bottom-row .panel-texture{
  background-image:url("../brushed-metal.webp") !important;
  background-repeat:repeat !important;
  background-size:1200px 180px !important;
  mix-blend-mode:soft-light !important;
  opacity:.145 !important;
  filter:contrast(.90) brightness(.72) !important;
}

/* The same restrained upper-front reflection on header, monitor and controls. */
#cockpitRoot .airradar-header > .header-reflection,
#cockpitRoot .airradar-main-cell .main-display__outer-gloss,
#cockpitRoot .airradar-bottom-row .panel-reflection{
  top:1px !important;
  left:2.2% !important;
  right:auto !important;
  width:70% !important;
  height:8px !important;
  border-radius:50% !important;
  background:linear-gradient(180deg,
    rgba(237,252,252,.18) 0%,
    rgba(211,235,236,.045) 54%,
    rgba(211,235,236,0) 100%) !important;
  opacity:.72 !important;
  filter:blur(2px) !important;
  transform:none !important;
  mix-blend-mode:screen !important;
}

/* --------------------------------------------------------------------------
   1. Header calibration – preserve R1 construction, align alloy and bevel depth
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-header::before{
  border-color:rgba(128,158,161,.17) !important;
  border-top-color:rgba(207,229,230,.20) !important;
  border-bottom-color:rgba(0,0,0,.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(231,247,247,.075),
    inset 0 -2px 3px rgba(0,0,0,.54) !important;
}

#cockpitRoot .airradar-header .side-plate,
#cockpitRoot .airradar-header .status-module,
#cockpitRoot .airradar-header .brand-core{
  background:
    radial-gradient(ellipse at 48% -12%,rgba(181,210,211,.050),transparent 44%),
    linear-gradient(180deg,#26393d 0%,#17272a 13%,#0b1719 55%,#04090b 100%) !important;
  border-top-color:rgba(158,188,190,.35) !important;
  border-left-color:rgba(80,105,108,.31) !important;
  border-right-color:rgba(4,9,11,.97) !important;
  border-bottom-color:rgba(0,0,0,.99) !important;
  box-shadow:
    inset 0 1px 0 rgba(234,248,248,.16),
    inset 0 -2px 0 rgba(0,0,0,.91),
    inset 0 -7px 12px rgba(0,0,0,.25),
    0 0 0 1px rgba(0,0,0,.75),
    0 2px 4px rgba(0,0,0,.46) !important;
}

#cockpitRoot .airradar-header .side-plate::after,
#cockpitRoot .airradar-header .brand-core::after{
  border-color:rgba(123,151,154,.14) !important;
  border-top-color:rgba(206,228,229,.17) !important;
  border-bottom-color:rgba(0,0,0,.80) !important;
  box-shadow:
    inset 0 1px 0 rgba(228,245,245,.035),
    inset 0 0 10px rgba(0,0,0,.45) !important;
}

/* Status bays read as machined cavities rather than attached ornaments. */
#cockpitRoot .airradar-header .module-bezel{
  border-color:#2d4145 !important;
  border-top-color:rgba(147,177,179,.31) !important;
  border-bottom-color:rgba(0,0,0,.99) !important;
  background:linear-gradient(180deg,#132225 0%,#081214 48%,#020607 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.94),
    0 0 0 2px rgba(91,117,120,.085),
    inset 0 1px 0 rgba(226,242,242,.085),
    inset 0 -4px 7px rgba(0,0,0,.84),
    0 2px 3px rgba(0,0,0,.58) !important;
}
#cockpitRoot .airradar-header .module-bezel::after{
  background:linear-gradient(180deg,rgba(229,250,244,.075),rgba(229,250,244,0)) !important;
}

/* LED emitters: crisp core, short falloff. State colours remain class-driven. */
#cockpitRoot .airradar-header .module-led{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.58),
    inset 0 -2px 3px rgba(0,55,28,.44),
    0 0 3px rgba(0,245,121,.50),
    0 0 7px rgba(0,245,121,.18) !important;
}
#cockpitRoot .airradar-header .module-led--location.is-location-missing{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.62),
    inset 0 -2px 3px rgba(110,45,0,.50),
    0 0 3px rgba(255,149,0,.70),
    0 0 7px rgba(255,149,0,.22) !important;
}
#cockpitRoot .airradar-header .module-led--location.is-location-set{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.64),
    inset 0 -2px 3px rgba(0,75,33,.42),
    0 0 3px rgba(0,245,121,.62),
    0 0 7px rgba(0,245,121,.21) !important;
}

/* --------------------------------------------------------------------------
   2. One LCD family – header displays + MIN/MAX miniature displays
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-header .header-location-lcd,
#cockpitRoot .airradar-header .header-lcd,
#cockpitRoot .airradar-bottom-row .flight-level-filter .fl-readout{
  color:var(--device-green-hi) !important;
  border-color:rgba(54,246,142,.55) !important;
  background:
    linear-gradient(180deg,rgba(214,255,231,.045) 0%,rgba(214,255,231,0) 25%),
    linear-gradient(180deg,var(--device-lcd-bg1) 0%,var(--device-lcd-bg2) 42%,var(--device-lcd-bg3) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.98),
    0 0 0 3px rgba(32,49,51,.96),
    0 0 0 4px rgba(145,173,175,.12),
    inset 0 1px 0 rgba(197,255,218,.11),
    inset 0 -5px 10px rgba(0,0,0,.55),
    inset 0 0 12px rgba(0,245,121,.050),
    0 2px 3px rgba(0,0,0,.56) !important;
  text-shadow:
    0 0 2px rgba(116,255,177,.78),
    0 0 6px rgba(0,245,121,.19) !important;
}

#cockpitRoot .airradar-header .header-location-lcd::before,
#cockpitRoot .airradar-header .header-lcd::before,
#cockpitRoot .airradar-bottom-row .flight-level-filter .fl-readout::before{
  background:linear-gradient(180deg,
    rgba(224,255,236,.085),
    rgba(224,255,236,.012) 68%,
    rgba(224,255,236,0)) !important;
}

#cockpitRoot .airradar-header .header-location-lcd__text,
#cockpitRoot .airradar-header .header-lcd__live,
#cockpitRoot .airradar-header .header-lcd__utc,
#cockpitRoot .airradar-bottom-row .flight-level-filter .fl-readout{
  text-shadow:
    0 0 2px rgba(113,255,176,.82),
    0 0 6px rgba(0,245,121,.20) !important;
}

/* Logo stays the supplied bitmap. Only seat it optically in the existing bay. */
#cockpitRoot .airradar-header .brand-core--new-logo .brand-logo-new{
  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,.035))
    drop-shadow(0 2px 3px rgba(0,0,0,.70))
    drop-shadow(0 0 3px rgba(0,245,121,.075)) !important;
}

/* --------------------------------------------------------------------------
   3. MainDisplay – preserve R2 mass, tune it to the same alloy / light source
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-main-cell .main-display{
  filter:
    drop-shadow(0 8px 11px rgba(0,0,0,.68))
    drop-shadow(0 2px 3px rgba(0,0,0,.80)) !important;
}
#cockpitRoot .airradar-main-cell .main-display__outer-shell::before{
  border-color:rgba(116,145,148,.22) !important;
  border-top-color:rgba(211,233,234,.27) !important;
  border-left-color:rgba(132,160,162,.15) !important;
  border-right-color:rgba(0,0,0,.78) !important;
  border-bottom-color:rgba(0,0,0,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(240,253,253,.055),
    inset 0 -2px 3px rgba(0,0,0,.52) !important;
}
#cockpitRoot .airradar-main-cell .main-display__outer-shell::after{
  background:
    linear-gradient(180deg,rgba(232,248,249,.070) 0%,rgba(203,226,227,.018) 9%,transparent 20%),
    linear-gradient(108deg,rgba(255,255,255,.025) 0%,transparent 26%,transparent 76%,rgba(0,0,0,.10) 100%),
    radial-gradient(ellipse at 88% 108%,rgba(0,0,0,.26),transparent 38%) !important;
}
#cockpitRoot .airradar-main-cell .main-display__recess{
  border-top-color:rgba(102,126,129,.17) !important;
  background:linear-gradient(180deg,#091315 0%,#04090a 13%,#020405 47%,#010203 100%) !important;
  box-shadow:
    inset 0 8px 12px rgba(0,0,0,.88),
    inset 0 -5px 9px rgba(0,0,0,.96),
    inset 6px 0 9px rgba(0,0,0,.67),
    inset -6px 0 10px rgba(0,0,0,.82),
    inset 0 1px 0 rgba(188,214,215,.055),
    0 0 0 1px rgba(0,0,0,.96),
    0 3px 6px rgba(0,0,0,.64) !important;
}
#cockpitRoot .airradar-main-cell .main-display__inner-bevel{
  border-top-color:rgba(126,154,156,.26) !important;
  background:linear-gradient(180deg,#19292c 0%,#0e191b 12%,#061012 54%,#020607 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(218,238,239,.090),
    inset 0 -1px 0 rgba(0,0,0,.95),
    inset 0 -4px 7px rgba(0,0,0,.50),
    0 0 0 1px rgba(0,0,0,.96),
    0 2px 3px rgba(0,0,0,.70) !important;
}

/* Keep the monitor edge neutral: no green belongs on the hardware bezel. */
#cockpitRoot .airradar-main-cell .main-display__screen{
  box-shadow:
    0 0 0 1px rgba(94,119,121,.12),
    0 0 0 2px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(225,242,242,.025),
    inset 0 0 0 1px rgba(0,0,0,.84),
    inset 0 0 18px rgba(0,0,0,.36) !important;
}

/* --------------------------------------------------------------------------
   4. Lower panel housings – same chassis logic as header, lighter than monitor
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-bottom-row .input-keypad-panel::before,
#cockpitRoot .airradar-bottom-row .flight-level-filter::before,
#cockpitRoot .airradar-bottom-row .range-panel::before{
  border-color:rgba(120,150,153,.19) !important;
  border-top-color:rgba(207,229,230,.20) !important;
  border-bottom-color:rgba(0,0,0,.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(228,245,245,.070),
    inset 0 -1px 0 rgba(0,0,0,.91),
    inset 0 0 0 1px rgba(0,0,0,.38) !important;
}

/* Keypad keybed is a physical recess. */
#cockpitRoot .airradar-bottom-row .input-keypad-panel__viewport{
  background:linear-gradient(180deg,rgba(2,7,8,.66),rgba(1,4,5,.35)) !important;
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,.82),
    inset 0 0 0 1px rgba(0,0,0,.76),
    inset 0 1px 0 rgba(128,155,157,.035) !important;
}

/* --------------------------------------------------------------------------
   5. One push-button family – keypad + FL/function + step buttons
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-bottom-row .input-key,
#cockpitRoot .airradar-bottom-row .flight-level-filter .preset,
#cockpitRoot .airradar-bottom-row .flight-level-filter .step{
  background:linear-gradient(180deg,#182529 0%,#101a1d 19%,#091315 59%,#04090b 100%) !important;
  border-color:#30474c !important;
  box-shadow:
    inset 0 1px 0 rgba(232,247,247,.095),
    inset 0 -3px 5px rgba(0,0,0,.69),
    0 0 0 1px rgba(0,0,0,.95),
    0 0 0 2px rgba(35,51,55,.34),
    0 4px 5px rgba(0,0,0,.52) !important;
}

#cockpitRoot .airradar-bottom-row .input-key::before{
  border-top-color:rgba(224,241,240,.095) !important;
  border-bottom-color:rgba(0,0,0,.46) !important;
}
#cockpitRoot .airradar-bottom-row .input-key::after{
  background:linear-gradient(180deg,rgba(232,247,246,.050),rgba(232,247,246,0)) !important;
}

/* Physical travel stays visible; no new behavior. */
#cockpitRoot .airradar-bottom-row .input-key:active,
#cockpitRoot .airradar-bottom-row .input-key.is-pressed,
#cockpitRoot .airradar-bottom-row .flight-level-filter .preset:active,
#cockpitRoot .airradar-bottom-row .flight-level-filter .step:active{
  box-shadow:
    inset 0 4px 7px rgba(0,0,0,.84),
    inset 0 0 5px rgba(0,245,121,.028),
    0 0 0 1px rgba(0,0,0,.96),
    0 1px 1px rgba(0,0,0,.72) !important;
}

/* Inactive FL/function controls remain hardware-dark with white legends. */
#cockpitRoot .airradar-bottom-row .flight-level-filter .preset{
  color:#eef4f2 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.96) !important;
}

/* Active FL/function controls: dark body, luminous legend, thin perimeter spill. */
#cockpitRoot .airradar-bottom-row .flight-level-filter .preset.preset--active,
#cockpitRoot .airradar-bottom-row .flight-level-filter #uiFlCtrBtn.preset--active,
#cockpitRoot .airradar-bottom-row .flight-level-filter #uiFlCsBtn.preset--active,
#cockpitRoot .airradar-bottom-row .flight-level-filter #uiFlSatBtn.preset--active,
#cockpitRoot .airradar-bottom-row .flight-level-filter #uiFlVorBtn.preset--active,
#cockpitRoot .airradar-bottom-row .flight-level-filter #uiFlLabelBtn.preset--active,
#cockpitRoot .airradar-bottom-row .flight-level-filter #uiFlGroundBtn.preset--active{
  color:var(--device-green-hi) !important;
  background:linear-gradient(180deg,#172428 0%,#0e181a 20%,#081214 60%,#04090b 100%) !important;
  border-color:#35584e !important;
  text-shadow:
    0 0 2px rgba(124,255,184,.88),
    0 0 5px rgba(0,245,121,.51),
    0 0 9px rgba(0,245,121,.20),
    0 1px 0 #000 !important;
  box-shadow:
    inset 0 1px 0 rgba(232,247,247,.085),
    inset 0 -3px 5px rgba(0,0,0,.69),
    inset 0 0 8px rgba(0,245,121,.038),
    0 0 0 1px rgba(0,0,0,.95),
    0 0 0 2px rgba(26,66,50,.43),
    0 0 6px rgba(0,245,121,.095),
    0 4px 5px rgba(0,0,0,.52) !important;
}

/* Key legends keep their established green behaviour but with less halo. */
#cockpitRoot .airradar-bottom-row .input-key{
  color:#72fca9 !important;
  text-shadow:
    0 1px 0 #000,
    0 0 calc(5px * var(--input-key-glow)) rgba(0,245,121,calc(.45 * var(--input-key-glow))),
    0 0 calc(9px * var(--input-key-glow)) rgba(0,245,121,calc(.12 * var(--input-key-glow))) !important;
}

/* --------------------------------------------------------------------------
   6. Flight-level slider – recessed mechanism, emitter glow only on active parts
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-bottom-row .flight-level-filter .slider-module{
  background:linear-gradient(180deg,#050c0e 0%,#020607 100%) !important;
  border-color:#152326 !important;
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.84),
    inset 0 1px 0 rgba(130,159,161,.025),
    0 0 0 1px rgba(0,0,0,.52) !important;
}
#cockpitRoot .airradar-bottom-row .flight-level-filter .slider-track{
  background:linear-gradient(180deg,#031610,#052e1e 52%,#02110c) !important;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.90),0 1px 0 rgba(95,255,166,.035) !important;
}
#cockpitRoot .airradar-bottom-row .flight-level-filter .slider-fill{
  background:linear-gradient(180deg,#45ff9f 0%,#0de078 43%,#068e4f 100%) !important;
  box-shadow:0 0 4px rgba(0,245,121,.14) !important;
}
#cockpitRoot .airradar-bottom-row .flight-level-filter .tick{
  background:#1cce72 !important;
  box-shadow:0 0 2px rgba(0,245,121,.07) !important;
}
#cockpitRoot .airradar-bottom-row .flight-level-filter .slider-track-wrap input[type="range"]::-webkit-slider-thumb{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -3px 5px rgba(0,0,0,.65),
    0 0 0 2px rgba(0,29,20,.94),
    0 0 6px rgba(0,245,121,.18) !important;
}
#cockpitRoot .airradar-bottom-row .flight-level-filter .slider-track-wrap input[type="range"]::-moz-range-thumb{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -3px 5px rgba(0,0,0,.65),
    0 0 0 2px rgba(0,29,20,.94),
    0 0 6px rgba(0,245,121,.18) !important;
}

/* --------------------------------------------------------------------------
   7. Range module – same metal, restrained rings, clear active emitter
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-bottom-row .range-panel .dial::before{
  background:radial-gradient(circle,
    #071012 0 48%,
    #040a0c 49% 55%,
    #152326 56% 58%,
    #060c0e 59% 65%,
    #223337 66% 67%,
    #060b0d 68% 74%,
    #020506 75% 100%) !important;
  box-shadow:
    inset 0 7px 12px rgba(0,0,0,.78),
    inset 0 -1px 0 rgba(180,205,207,.045),
    0 1px 0 rgba(122,149,151,.045),
    0 0 0 1px rgba(0,0,0,.76) !important;
}
#cockpitRoot .airradar-bottom-row .range-panel .dial::after{
  border-top-color:rgba(190,216,217,.075) !important;
  border-bottom-color:rgba(0,0,0,.64) !important;
}
#cockpitRoot .airradar-bottom-row .range-panel .dial__knob-outer{
  background:radial-gradient(circle,
    #0f191c 0 48%,
    #060e10 49% 57%,
    #19292c 58% 59%,
    #060e10 60% 66%,
    #18302b 67% 68%,
    #060e10 69% 78%,
    #0e181b 79% 100%) !important;
  box-shadow:
    inset 0 2px 2px rgba(214,234,235,.055),
    inset 0 -8px 12px rgba(0,0,0,.80),
    0 0 0 2px rgba(0,0,0,.74),
    0 0 0 3px rgba(45,62,65,.42) !important;
}
#cockpitRoot .airradar-bottom-row .range-panel .dial__knob-ring{
  border-color:rgba(74,255,163,.62) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.82),
    0 0 3px rgba(0,245,121,.18),
    0 0 0 1px rgba(16,73,49,.25) !important;
}
#cockpitRoot .airradar-bottom-row .range-panel .dial__knob-inner{
  background:radial-gradient(circle at 37% 29%,
    rgba(120,150,153,.15) 0%,
    rgba(57,75,79,.07) 17%,
    #152124 33%,#0e1719 57%,#080e10 80%,#020506 100%) !important;
}
#cockpitRoot .airradar-bottom-row .range-panel .range-mark__tick{
  background:#5b6f6b !important;
}
#cockpitRoot .airradar-bottom-row .range-panel .range-mark--active .range-mark__label{
  color:var(--device-green-hi) !important;
  text-shadow:0 0 2px rgba(113,255,177,.72),0 0 6px rgba(0,245,121,.20),0 1px 0 #000 !important;
}
#cockpitRoot .airradar-bottom-row .range-panel .range-mark--active .range-mark__tick{
  background:#58ffaa !important;
  box-shadow:0 0 3px rgba(0,245,121,.30),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
#cockpitRoot .airradar-bottom-row .range-panel .dial__led-core{
  box-shadow:0 0 2px rgba(217,255,235,.58),0 0 5px rgba(0,245,121,.35),0 0 8px rgba(0,245,121,.13) !important;
}
#cockpitRoot .airradar-bottom-row .range-panel .dial__led-glow{
  background:radial-gradient(circle,rgba(0,245,121,.13),rgba(0,245,121,.035) 43%,rgba(0,245,121,0) 73%) !important;
}

/* --------------------------------------------------------------------------
   8. Black recessed screw standard for the three lower modules only
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-bottom-row .input-keypad-panel .ar-screw,
#cockpitRoot .airradar-bottom-row .flight-level-filter .ar-screw,
#cockpitRoot .airradar-bottom-row .range-panel .ar-screw{
  background:radial-gradient(circle at 34% 28%,
    rgba(221,232,234,.18) 0 3%,
    #3b4448 5% 9%,
    #252b2f 18%,
    #14181b 35%,
    #090c0e 56%,
    #030405 76%,
    #000 100%) !important;
  border-color:#000 !important;
  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,.065),
    inset -1px -2px 3px rgba(0,0,0,.92),
    0 0 0 1px rgba(0,0,0,.98),
    0 0 0 2px rgba(18,23,25,.45),
    1px 2px 2px rgba(0,0,0,.88) !important;
}
#cockpitRoot .airradar-bottom-row .input-keypad-panel .ar-screw::before,
#cockpitRoot .airradar-bottom-row .flight-level-filter .ar-screw::before,
#cockpitRoot .airradar-bottom-row .range-panel .ar-screw::before{
  background:linear-gradient(90deg,#010101 0%,#0d1012 22%,#51595e 48%,#101416 64%,#010101 100%) !important;
  box-shadow:1px 0 0 rgba(255,255,255,.024),-1px 0 0 rgba(0,0,0,.82) !important;
}

/* Explicit construction rules preserved: no screws in Header/MainDisplay. */
#cockpitRoot .airradar-header .ar-screw,
#cockpitRoot .airradar-header .screw,
#cockpitRoot .airradar-header .module-screw,
#cockpitRoot .airradar-header .core-screw,
#cockpitRoot .main-display__outer-shell > .ar-screw,
#cockpitRoot .main-display__outer-shell .ar-screw{
  display:none !important;
}

/* Connection LED animation keeps its original cadence; only optical bloom is calibrated. */
@keyframes airradar-connection-green{
  0%,44%{
    opacity:1;
    filter:saturate(1.04) brightness(1.02);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.60),
      inset 0 -2px 3px rgba(0,72,32,.42),
      0 0 3px rgba(0,245,121,.60),
      0 0 7px rgba(0,245,121,.20);
  }
  45%,100%{
    opacity:.31;
    filter:saturate(.72) brightness(.72);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.18),
      inset 0 -2px 3px rgba(0,55,26,.38),
      0 0 2px rgba(0,245,121,.11);
  }
}
@keyframes airradar-connection-red{
  0%,44%{
    opacity:1;
    filter:saturate(1.05) brightness(1.02);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.58),
      inset 0 -2px 3px rgba(86,0,8,.46),
      0 0 3px rgba(255,30,48,.62),
      0 0 7px rgba(255,30,48,.20);
  }
  45%,100%{
    opacity:.31;
    filter:saturate(.73) brightness(.70);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.15),
      inset 0 -2px 3px rgba(86,0,8,.38),
      0 0 2px rgba(255,30,48,.12);
  }
}

#cockpitRoot .airradar-header .header-location-lcd:hover,
#cockpitRoot .airradar-header .header-location-lcd:focus-visible{
  border-color:rgba(93,255,163,.66) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.98),
    0 0 0 3px rgba(35,54,56,.98),
    0 0 0 4px rgba(147,175,177,.13),
    inset 0 1px 0 rgba(205,255,225,.13),
    inset 0 -5px 10px rgba(0,0,0,.55),
    inset 0 0 13px rgba(0,245,121,.065),
    0 2px 3px rgba(0,0,0,.56) !important;
}

/* Round numeric keypad caps keep their dedicated machined shape while using the same alloy. */
#cockpitRoot .airradar-bottom-row .input-numeric-key{
  background:radial-gradient(circle at 38% 27%,
    #243236 0%,
    #182326 23%,
    #0d1719 54%,
    #060b0d 78%,
    #020405 100%) !important;
  border-color:#374e53 !important;
  box-shadow:
    inset 0 2px 1px rgba(232,247,247,.085),
    inset 0 -5px 7px rgba(0,0,0,.70),
    0 0 0 1px rgba(0,0,0,.96),
    0 0 0 2px rgba(35,51,55,.35),
    0 4px 5px rgba(0,0,0,.54) !important;
}
#cockpitRoot .airradar-bottom-row .input-numeric-key:active,
#cockpitRoot .airradar-bottom-row .input-numeric-key.is-pressed{
  background:radial-gradient(circle at 50% 43%,#0e181a 0%,#071012 66%,#020506 100%) !important;
  box-shadow:
    inset 0 4px 7px rgba(0,0,0,.86),
    0 0 0 1px rgba(0,0,0,.96),
    0 1px 1px rgba(0,0,0,.74) !important;
}

/* assets/css/outer-chassis-r5.css */
/* ============================================================================
   AIRRADAR OUTER CHASSIS / ENCLOSURE PASS
   J.W. AIRRADAR v2.1.1 – Outer Chassis R5
   ----------------------------------------------------------------------------
   DESIGN-ONLY enclosure pass applied on top of the approved optical stack:
   Header R1 + MainDisplay R2 + Lower Panels R3 + Final Device R4.

   Scope:
   - one continuous outer equipment chassis around the complete cockpit surface
   - visible front-plate thickness, perimeter bevel and recessed module bed
   - shared dark satin/brushed alloy and top/front light direction
   - no component redesign, no geometry changes inside modules, no JS/logic

   The functional basis remains J.W. AIRRADAR v2.1.1 unchanged.
   ============================================================================ */

/* --------------------------------------------------------------------------
   0. Outer equipment body
   The existing 1500px module geometry stays untouched. The enclosure is drawn
   around it with pseudo-elements so map size, panel widths and event geometry
   are not altered.
   -------------------------------------------------------------------------- */
#cockpitRoot{
  --chassis-metal-top:#3a4d50;
  --chassis-metal-upper:#27383b;
  --chassis-metal-mid:#142326;
  --chassis-metal-low:#081113;
  --chassis-metal-bottom:#020506;
  --chassis-edge-hi:rgba(225,242,243,.50);
  --chassis-edge-soft:rgba(132,161,164,.24);
  --chassis-edge-deep:rgba(0,0,0,.96);

  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;

  /* Uses the already existing top/bottom breathing room as visible metal. */
  background:
    radial-gradient(ellipse at 43% -16%,rgba(223,241,241,.075),transparent 38%),
    linear-gradient(180deg,
      var(--chassis-metal-top) 0%,
      var(--chassis-metal-upper) 4%,
      var(--chassis-metal-mid) 19%,
      #0d191c 58%,
      var(--chassis-metal-low) 83%,
      var(--chassis-metal-bottom) 100%) !important;
  border-radius:22px !important;
  box-shadow:
    inset 0 1px 0 rgba(245,255,255,.30),
    inset 0 2px 0 rgba(159,185,187,.10),
    inset 0 -2px 0 rgba(0,0,0,.92),
    inset 0 -8px 14px rgba(0,0,0,.28) !important;
}

/* Main structural shell: slightly wider than the module stack, without
   participating in layout or changing the scaling dimensions. */
#cockpitRoot::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  top:0;
  bottom:0;
  left:-11px;
  right:-11px;
  border-radius:25px;
  border:1px solid rgba(92,119,122,.74);
  background:
    radial-gradient(ellipse at 28% -10%,rgba(235,248,248,.11),transparent 31%),
    radial-gradient(ellipse at 82% 106%,rgba(255,255,255,.018),transparent 28%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.009) 0,
      rgba(255,255,255,.009) 1px,
      rgba(0,0,0,.009) 1px,
      rgba(0,0,0,.009) 3px),
    linear-gradient(180deg,
      #405457 0%,
      #2c3e41 3%,
      #1b2b2e 11%,
      #101d20 42%,
      #091315 76%,
      #04090b 92%,
      #010304 100%);
  background-blend-mode:screen,normal,soft-light,normal;
  box-shadow:
    inset 0 1px 0 rgba(246,255,255,.52),
    inset 0 2px 0 rgba(143,176,178,.20),
    inset 2px 0 0 rgba(116,145,148,.11),
    inset -2px 0 0 rgba(0,0,0,.70),
    inset 0 -1px 0 rgba(0,0,0,.98),
    inset 0 -5px 9px rgba(0,0,0,.52),
    0 0 0 1px rgba(0,0,0,.96),
    0 2px 0 rgba(82,105,108,.20),
    0 7px 10px rgba(0,0,0,.64),
    0 22px 42px rgba(0,0,0,.48);
}

/* --------------------------------------------------------------------------
   1. Continuous front-plate lip / inner recess
   Four perimeter strips create a common manufacturing logic around all
   modules: light upper ridge, darker sidewalls and a deep lower edge.
   -------------------------------------------------------------------------- */
#cockpitRoot::after{
  content:"";
  position:absolute;
  z-index:90;
  pointer-events:none;
  top:4px;
  bottom:5px;
  left:-6px;
  right:-6px;
  border-radius:20px;
  border:1px solid rgba(15,25,27,.92);
  background:
    linear-gradient(180deg,
      rgba(224,241,242,.27) 0%,
      rgba(146,174,176,.08) 35%,
      rgba(0,0,0,0) 100%) top / 100% 7px no-repeat,
    linear-gradient(90deg,
      rgba(182,207,208,.13) 0%,
      rgba(64,88,91,.06) 42%,
      rgba(0,0,0,0) 100%) left / 7px 100% no-repeat,
    linear-gradient(270deg,
      rgba(0,0,0,.48) 0%,
      rgba(0,0,0,.16) 52%,
      rgba(0,0,0,0) 100%) right / 8px 100% no-repeat,
    linear-gradient(0deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.20) 55%,
      rgba(0,0,0,0) 100%) bottom / 100% 9px no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(229,245,246,.10),
    inset 0 -1px 0 rgba(0,0,0,.90),
    0 0 0 1px rgba(99,126,129,.11),
    0 0 0 2px rgba(0,0,0,.42);
}

/* --------------------------------------------------------------------------
   2. Safety / scope
   No module selector is overridden in this pass. The chassis is entirely
   external to the established Header/MainDisplay/lower-panel design stack.
   -------------------------------------------------------------------------- */
#cockpitRoot::before,
#cockpitRoot::after{
  user-select:none;
  -webkit-user-select:none;
}

/* assets/css/outer-chassis-depth-r6.css */
/* ============================================================================
   AIRRADAR OUTER CHASSIS DEPTH REFINEMENT
   J.W. AIRRADAR v2.1.1 – Outer Chassis Depth R6
   ----------------------------------------------------------------------------
   DESIGN-ONLY refinement layered over the approved R5 chassis.

   Scope:
   - outer equipment body / front-plate edge only
   - stronger material thickness and corner mass
   - one coherent top/front light source
   - subtler satin/brushed alloy response
   - deeper lower/right mass and recessed front-plate contact shadow
   - no component redesign, no geometry change, no JS/logic change

   The functional basis remains J.W. AIRRADAR v2.1.1 unchanged.
   ============================================================================ */

/* --------------------------------------------------------------------------
   0. Chassis material model
   Keep the exact R5 layout footprint. Only the painted metal and depth cues
   are refined here. Green is intentionally absent from all chassis layers.
   -------------------------------------------------------------------------- */
#cockpitRoot{
  --chassis-r6-top:#45585b;
  --chassis-r6-upper:#2d3f42;
  --chassis-r6-mid:#17272a;
  --chassis-r6-deep:#0a1416;
  --chassis-r6-low:#04090a;
  --chassis-r6-black:#010304;
  --chassis-r6-highlight:rgba(232,246,247,.46);
  --chassis-r6-highlight-soft:rgba(155,183,185,.18);
  --chassis-r6-side:rgba(63,84,87,.30);
  --chassis-r6-shadow:rgba(0,0,0,.96);

  /* The 10px / 14px R5 breathing room is retained exactly. */
  background:
    linear-gradient(180deg,
      rgba(240,251,251,.17) 0,
      rgba(204,226,227,.045) 38%,
      rgba(0,0,0,0) 100%) top / 100% 8px no-repeat,
    linear-gradient(0deg,
      rgba(0,0,0,.76) 0,
      rgba(0,0,0,.30) 48%,
      rgba(0,0,0,0) 100%) bottom / 100% 13px no-repeat,
    radial-gradient(ellipse at 34% -22%,rgba(229,244,244,.065),transparent 37%),
    linear-gradient(180deg,
      var(--chassis-r6-top) 0%,
      var(--chassis-r6-upper) 5%,
      var(--chassis-r6-mid) 21%,
      #101d20 54%,
      var(--chassis-r6-deep) 78%,
      var(--chassis-r6-low) 91%,
      var(--chassis-r6-black) 100%) !important;
  border-radius:22px !important;
  box-shadow:
    inset 0 1px 0 rgba(246,255,255,.34),
    inset 0 2px 0 rgba(162,190,192,.10),
    inset 1px 0 0 rgba(124,151,153,.055),
    inset -1px 0 0 rgba(0,0,0,.72),
    inset 0 -2px 0 rgba(0,0,0,.96),
    inset 0 -10px 16px rgba(0,0,0,.34) !important;
}

/* --------------------------------------------------------------------------
   1. Outer equipment body
   R5 already provides the non-layout shell via ::before. R6 keeps its exact
   extents and makes the metal read as one thick machined body rather than a
   single CSS border.
   -------------------------------------------------------------------------- */
#cockpitRoot::before{
  top:0 !important;
  bottom:0 !important;
  left:-11px !important;
  right:-11px !important;
  border-radius:25px !important;
  border:1px solid rgba(82,106,109,.78) !important;

  background:
    /* narrow top/front highlight */
    linear-gradient(180deg,
      rgba(239,251,251,.31) 0%,
      rgba(179,207,208,.075) 47%,
      rgba(179,207,208,0) 100%) top / 100% 9px no-repeat,
    /* illuminated left bevel */
    linear-gradient(90deg,
      rgba(194,216,217,.12) 0%,
      rgba(108,136,139,.045) 45%,
      rgba(108,136,139,0) 100%) left / 10px 100% no-repeat,
    /* darker right sidewall */
    linear-gradient(270deg,
      rgba(0,0,0,.64) 0%,
      rgba(0,0,0,.28) 49%,
      rgba(0,0,0,0) 100%) right / 11px 100% no-repeat,
    /* heavier lower material face */
    linear-gradient(0deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.52) 42%,
      rgba(0,0,0,0) 100%) bottom / 100% 17px no-repeat,
    /* soft top-left specular response */
    radial-gradient(ellipse at 23% -11%,rgba(239,250,250,.10),transparent 30%),
    /* extremely fine satin grain */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.006) 0,
      rgba(255,255,255,.006) 1px,
      rgba(0,0,0,.007) 1px,
      rgba(0,0,0,.007) 3px),
    /* body metal */
    linear-gradient(180deg,
      #4a5d60 0%,
      #34474a 3.2%,
      #25373a 9%,
      #17272a 27%,
      #101d20 54%,
      #0a1416 76%,
      #050b0d 90%,
      #020506 97%,
      #010203 100%) !important;
  background-blend-mode:screen,screen,multiply,multiply,screen,soft-light,normal !important;

  box-shadow:
    /* top/left metal lip */
    inset 0 1px 0 rgba(249,255,255,.58),
    inset 0 2px 0 rgba(171,198,200,.16),
    inset 2px 0 0 rgba(130,157,160,.085),
    /* right/lower material thickness */
    inset -2px 0 0 rgba(0,0,0,.78),
    inset -5px 0 8px rgba(0,0,0,.16),
    inset 0 -1px 0 rgba(0,0,0,1),
    inset 0 -5px 8px rgba(0,0,0,.57),
    inset 0 -13px 18px rgba(0,0,0,.21),
    /* machined perimeter separation */
    0 0 0 1px rgba(0,0,0,.98),
    0 1px 0 rgba(138,166,168,.20),
    /* physical weight beneath the instrument */
    0 6px 9px rgba(0,0,0,.67),
    0 18px 28px rgba(0,0,0,.53),
    0 34px 58px rgba(0,0,0,.34) !important;
}

/* --------------------------------------------------------------------------
   2. Front-plate lip and recessed module bed
   The existing ::after overlay remains non-interactive and does not move any
   component. It now reads as a narrow machined ridge followed by a dark seat.
   -------------------------------------------------------------------------- */
#cockpitRoot::after{
  top:4px !important;
  bottom:5px !important;
  left:-6px !important;
  right:-6px !important;
  border-radius:20px !important;
  border:1px solid rgba(9,16,18,.96) !important;

  background:
    /* polished upper ridge */
    linear-gradient(180deg,
      rgba(235,248,248,.24) 0%,
      rgba(167,193,195,.075) 45%,
      rgba(0,0,0,0) 100%) top / 100% 6px no-repeat,
    /* left ridge catches the same light */
    linear-gradient(90deg,
      rgba(185,208,209,.10) 0%,
      rgba(101,129,132,.035) 48%,
      rgba(0,0,0,0) 100%) left / 6px 100% no-repeat,
    /* right and lower recess */
    linear-gradient(270deg,
      rgba(0,0,0,.53) 0%,
      rgba(0,0,0,.17) 52%,
      rgba(0,0,0,0) 100%) right / 7px 100% no-repeat,
    linear-gradient(0deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.25) 55%,
      rgba(0,0,0,0) 100%) bottom / 100% 9px no-repeat !important;

  box-shadow:
    /* narrow bright manufacturing ridge */
    inset 0 1px 0 rgba(235,249,249,.13),
    inset 1px 0 0 rgba(150,177,179,.045),
    /* deep contact seat, strongest below/right */
    inset -1px 0 0 rgba(0,0,0,.58),
    inset 0 -1px 0 rgba(0,0,0,.96),
    inset 0 -4px 7px rgba(0,0,0,.24),
    /* separation between body and front plate */
    0 0 0 1px rgba(110,137,140,.095),
    0 0 0 2px rgba(0,0,0,.48) !important;
}

/* --------------------------------------------------------------------------
   3. Module-to-chassis transitions
   No component geometry is changed. These rules only reduce the impression
   that the first/last module rows are floating independently over the body.
   -------------------------------------------------------------------------- */
#cockpitRoot > .airradar-header{
  /* Keep R4/R5 header construction; only tame the independent outer drop. */
  box-shadow:
    inset 0 1px 0 rgba(240,253,253,.36),
    inset 0 2px 0 rgba(135,168,170,.12),
    inset 1px 0 0 rgba(115,144,147,.045),
    inset -1px 0 0 rgba(0,0,0,.68),
    inset 0 -1px 0 rgba(0,0,0,.98),
    inset 0 -8px 14px rgba(0,0,0,.40),
    0 0 0 1px rgba(0,0,0,.90),
    0 1px 0 rgba(125,155,157,.070),
    0 3px 6px rgba(0,0,0,.45) !important;
}

/* A common contact shadow at the front-plate transitions. It is deliberately
   outside the screen/control content and does not affect hit areas. */
#cockpitRoot > .airradar-workspace{
  box-shadow:0 2px 2px rgba(0,0,0,.34) !important;
}

#cockpitRoot > .airradar-bottom-row{
  box-shadow:0 3px 3px rgba(0,0,0,.40) !important;
}

/* Keep the decorative enclosure layers completely inert. */
#cockpitRoot::before,
#cockpitRoot::after{
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

/* assets/css/frame-refinement-r7.css */
/* ============================================================================
   AIRRADAR RIGHT / BOTTOM FRAME REFINEMENT
   J.W. AIRRADAR v2.1.1 – Frame Refinement R7
   ----------------------------------------------------------------------------
   DESIGN-ONLY pass layered over the approved R6 optical state.

   Scope is intentionally narrow:
   - right-hand MainDisplay enclosure depth
   - lower MainDisplay enclosure depth / physical weight
   - common lower edge of Keypad / Flightlevel / Range panels

   No dimensions, positions, controls, IDs, event bindings or JS are changed.
   Green is deliberately absent from all hardware/frame rules in this file.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. MainDisplay – right side and lower edge only
   Keep the established R2/R4 geometry and top/left treatment. Reinforce the
   sidewall and lower material mass under the same top/front light direction.
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-main-cell .main-display__outer-shell{
  border-right-color:rgba(2,6,7,.99) !important;
  border-bottom-color:#000102 !important;
  box-shadow:
    /* exact approved R4/R6 top/front light logic retained */
    inset 0 1px 0 rgba(240,253,253,.36),
    inset 0 2px 0 rgba(135,168,170,.12),
    inset 1px 0 0 rgba(115,144,147,.045),
    /* R7: physically deeper right wall */
    inset -1px 0 0 rgba(0,0,0,.96),
    inset -4px 0 6px rgba(0,0,0,.44),
    inset -9px 0 14px rgba(0,0,0,.17),
    /* R7: heavier lower monitor body */
    inset 0 -1px 0 rgba(0,0,0,1),
    inset 0 -5px 7px rgba(0,0,0,.66),
    inset 0 -12px 18px rgba(0,0,0,.36),
    /* retain machined separation without changing footprint */
    0 0 0 1px rgba(0,0,0,.94),
    0 2px 0 rgba(95,123,124,.10),
    0 6px 10px rgba(0,0,0,.68) !important;
}

/* The inner machined ridge now closes with equal physical conviction on the
   right and bottom, while top/left highlights stay at their approved level. */
#cockpitRoot .airradar-main-cell .main-display__outer-shell::before{
  border-right-color:rgba(0,0,0,.90) !important;
  border-bottom-color:rgba(0,0,0,.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(240,253,253,.055),
    inset -1px 0 0 rgba(5,10,11,.96),
    inset -3px 0 4px rgba(0,0,0,.34),
    inset 0 -1px 0 rgba(0,0,0,.98),
    inset 0 -4px 6px rgba(0,0,0,.45) !important;
}

/* Preserve the restrained upper reflection and add only directional material
   shading on the right and bottom faces. No glow is introduced. */
#cockpitRoot .airradar-main-cell .main-display__outer-shell::after{
  background:
    linear-gradient(180deg,
      rgba(232,248,249,.070) 0%,
      rgba(203,226,227,.018) 9%,
      transparent 20%),
    linear-gradient(270deg,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.22) 38%,
      rgba(0,0,0,0) 100%) right / 14px 100% no-repeat,
    linear-gradient(0deg,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.31) 43%,
      rgba(0,0,0,0) 100%) bottom / 100% 18px no-repeat,
    linear-gradient(108deg,
      rgba(255,255,255,.025) 0%,
      transparent 26%,
      transparent 76%,
      rgba(0,0,0,.10) 100%),
    radial-gradient(ellipse at 88% 108%,rgba(0,0,0,.30),transparent 38%) !important;
}

/* Deep cavity: stronger contact shadow on right/bottom only. This makes the
   display read as physically seated behind the front metal without changing
   its visible area or #map geometry. */
#cockpitRoot .airradar-main-cell .main-display__recess{
  border-right-color:#000102 !important;
  border-bottom-color:#000 !important;
  box-shadow:
    inset 0 8px 12px rgba(0,0,0,.88),
    inset 0 -7px 11px rgba(0,0,0,.985),
    inset 0 -13px 18px rgba(0,0,0,.23),
    inset 6px 0 9px rgba(0,0,0,.67),
    inset -8px 0 12px rgba(0,0,0,.90),
    inset -14px 0 20px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(188,214,215,.055),
    0 0 0 1px rgba(0,0,0,.97),
    0 3px 7px rgba(0,0,0,.69) !important;
}

/* Inner bezel carries the same construction logic down to the screen mouth:
   subtle upper catchlight, dark right sidewall, heavier lower closure. */
#cockpitRoot .airradar-main-cell .main-display__inner-bevel{
  border-right-color:rgba(0,0,0,.98) !important;
  border-bottom-color:#000102 !important;
  background:
    linear-gradient(270deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.10) 34%,
      rgba(0,0,0,0) 100%) right / 11px 100% no-repeat,
    linear-gradient(0deg,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.12) 45%,
      rgba(0,0,0,0) 100%) bottom / 100% 12px no-repeat,
    linear-gradient(180deg,#19292c 0%,#0e191b 12%,#061012 54%,#020607 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(218,238,239,.090),
    inset -1px 0 0 rgba(0,0,0,.86),
    inset -4px 0 6px rgba(0,0,0,.24),
    inset 0 -1px 0 rgba(0,0,0,.98),
    inset 0 -5px 8px rgba(0,0,0,.57),
    0 0 0 1px rgba(0,0,0,.97),
    0 2px 4px rgba(0,0,0,.75) !important;
}

/* Additional physical weight beneath the installed monitor only. No offset,
   width or height is changed. */
#cockpitRoot .airradar-main-cell .main-display{
  filter:
    drop-shadow(0 9px 12px rgba(0,0,0,.70))
    drop-shadow(0 3px 4px rgba(0,0,0,.86)) !important;
}

/* --------------------------------------------------------------------------
   2. Lower modules – common lower manufactured edge
   Keypad, Flightlevel and Range keep their exact dimensions and controls.
   Only the bottom material closure is normalised across all three housings.
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-bottom-row .input-keypad-panel,
#cockpitRoot .airradar-bottom-row .flight-level-filter,
#cockpitRoot .airradar-bottom-row .range-panel{
  border-bottom-color:#000102 !important;
  box-shadow:
    /* exact approved top/front/side illumination retained */
    inset 0 1px 0 rgba(240,253,253,.36),
    inset 0 2px 0 rgba(135,168,170,.12),
    inset 1px 0 0 rgba(115,144,147,.045),
    inset -1px 0 0 rgba(0,0,0,.68),
    /* R7: one shared lower metal thickness */
    inset 0 -1px 0 rgba(0,0,0,1),
    inset 0 -4px 5px rgba(0,0,0,.67),
    inset 0 -10px 14px rgba(0,0,0,.39),
    /* existing physical separation / weight */
    0 0 0 1px rgba(0,0,0,.90),
    0 1px 0 rgba(125,155,157,.075),
    0 6px 10px rgba(0,0,0,.59) !important;
}

/* The inner machined line terminates identically at the bottom of each module.
   This is a shadow/bevel refinement only and does not occupy layout space. */
#cockpitRoot .airradar-bottom-row .input-keypad-panel::before,
#cockpitRoot .airradar-bottom-row .flight-level-filter::before,
#cockpitRoot .airradar-bottom-row .range-panel::before{
  border-bottom-color:rgba(0,0,0,.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(211,233,234,.10),
    inset 0 -1px 0 rgba(0,0,0,.98),
    inset 0 -4px 6px rgba(0,0,0,.33),
    inset 0 0 0 1px rgba(0,0,0,.43) !important;
}

/* MainDisplay remains explicitly screw-free. */
#cockpitRoot .airradar-main-cell .main-display__outer-shell > .ar-screw,
#cockpitRoot .airradar-main-cell .main-display__outer-shell .ar-screw{
  display:none !important;
}

/* assets/css/chassis-material-bevel-r8.css */
/* ============================================================================
   AIRRADAR CHASSIS MATERIAL / BEVEL FINAL PASS
   J.W. AIRRADAR v2.1.1 – Chassis Material & Bevel R8
   ----------------------------------------------------------------------------
   DESIGN-ONLY refinement layered over the approved R7 optical state.

   Scope:
   - stronger visible outer-chassis material thickness without layout changes
   - more controlled machined light/dark modelling on the perimeter
   - heavier lower device body and sidewalls
   - cleaner physical seam between MainDisplay and lower control section
   - no component redesign, no geometry changes, no JS/logic changes

   Light source remains slightly above/front. Green is intentionally absent
   from every chassis rule in this file.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Outer body – same footprint, stronger physical material read
   -------------------------------------------------------------------------- */
#cockpitRoot{
  /* Keep the established R5–R7 layout and radius. Refine only the surface. */
  background:
    linear-gradient(180deg,
      rgba(244,252,252,.17) 0,
      rgba(191,214,216,.045) 42%,
      rgba(0,0,0,0) 100%) top / 100% 6px no-repeat,
    linear-gradient(90deg,
      rgba(174,199,201,.050) 0,
      rgba(88,113,116,.018) 42%,
      rgba(0,0,0,0) 100%) left / 7px 100% no-repeat,
    linear-gradient(270deg,
      rgba(0,0,0,.29) 0,
      rgba(0,0,0,.10) 48%,
      rgba(0,0,0,0) 100%) right / 9px 100% no-repeat,
    linear-gradient(0deg,
      rgba(0,0,0,.86) 0,
      rgba(0,0,0,.42) 48%,
      rgba(0,0,0,0) 100%) bottom / 100% 16px no-repeat,
    radial-gradient(ellipse at 30% -20%,rgba(225,241,242,.048),transparent 34%),
    linear-gradient(180deg,
      #46595c 0%,
      #304245 4%,
      #1d2e31 17%,
      #101d20 52%,
      #091315 78%,
      #030708 93%,
      #010203 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(248,255,255,.38),
    inset 0 2px 0 rgba(159,187,189,.085),
    inset 1px 0 0 rgba(133,159,161,.050),
    inset -1px 0 0 rgba(0,0,0,.80),
    inset -5px 0 9px rgba(0,0,0,.095),
    inset 0 -1px 0 rgba(0,0,0,.99),
    inset 0 -6px 10px rgba(0,0,0,.36),
    inset 0 -14px 21px rgba(0,0,0,.25) !important;
}

/* The R5 pseudo-shell keeps its exact extents. The new modelling makes the
   front edge read as machined metal instead of a dark decorative outline. */
#cockpitRoot::before{
  background:
    /* narrow top ridge – crisp but not glossy */
    linear-gradient(180deg,
      rgba(244,253,253,.38) 0%,
      rgba(182,207,209,.10) 38%,
      rgba(182,207,209,0) 100%) top / 100% 7px no-repeat,
    /* left face catches a small amount of the same overhead light */
    linear-gradient(90deg,
      rgba(208,227,228,.14) 0%,
      rgba(118,145,148,.050) 43%,
      rgba(118,145,148,0) 100%) left / 9px 100% no-repeat,
    /* right wall is visibly thicker and darker */
    linear-gradient(270deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.43) 38%,
      rgba(0,0,0,.12) 70%,
      rgba(0,0,0,0) 100%) right / 13px 100% no-repeat,
    /* heavy lower face gives the unit physical weight */
    linear-gradient(0deg,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.70) 33%,
      rgba(0,0,0,.31) 67%,
      rgba(0,0,0,0) 100%) bottom / 100% 20px no-repeat,
    radial-gradient(ellipse at 21% -10%,rgba(236,249,249,.080),transparent 28%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.0045) 0,
      rgba(255,255,255,.0045) 1px,
      rgba(0,0,0,.0055) 1px,
      rgba(0,0,0,.0055) 3px),
    linear-gradient(180deg,
      #4b5e61 0%,
      #35484b 3.4%,
      #25373a 9.5%,
      #162629 27%,
      #0f1c1f 55%,
      #091315 76%,
      #04090a 89%,
      #010304 100%) !important;
  background-blend-mode:screen,screen,multiply,multiply,screen,soft-light,normal !important;
  box-shadow:
    inset 0 1px 0 rgba(250,255,255,.64),
    inset 0 2px 0 rgba(173,199,201,.14),
    inset 2px 0 0 rgba(137,164,166,.075),
    inset -1px 0 0 rgba(0,0,0,.98),
    inset -4px 0 7px rgba(0,0,0,.30),
    inset -9px 0 15px rgba(0,0,0,.13),
    inset 0 -1px 0 rgba(0,0,0,1),
    inset 0 -5px 7px rgba(0,0,0,.73),
    inset 0 -13px 18px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.99),
    0 1px 0 rgba(146,174,176,.17),
    0 7px 10px rgba(0,0,0,.72),
    0 20px 30px rgba(0,0,0,.55),
    0 38px 62px rgba(0,0,0,.32) !important;
}

/* Front-plate seat: a narrow metallic ridge followed by a dark contact zone.
   No extents or radii are changed from R6/R7. */
#cockpitRoot::after{
  background:
    linear-gradient(180deg,
      rgba(239,250,250,.20) 0%,
      rgba(164,191,193,.055) 42%,
      rgba(0,0,0,0) 100%) top / 100% 5px no-repeat,
    linear-gradient(90deg,
      rgba(191,212,213,.085) 0%,
      rgba(102,129,132,.025) 48%,
      rgba(0,0,0,0) 100%) left / 5px 100% no-repeat,
    linear-gradient(270deg,
      rgba(0,0,0,.61) 0%,
      rgba(0,0,0,.24) 52%,
      rgba(0,0,0,0) 100%) right / 8px 100% no-repeat,
    linear-gradient(0deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.37) 52%,
      rgba(0,0,0,0) 100%) bottom / 100% 11px no-repeat !important;
  box-shadow:
    inset 0 1px 0 rgba(239,251,251,.12),
    inset 1px 0 0 rgba(158,184,186,.035),
    inset -1px 0 0 rgba(0,0,0,.69),
    inset 0 -1px 0 rgba(0,0,0,.99),
    inset 0 -5px 8px rgba(0,0,0,.29),
    0 0 0 1px rgba(103,130,133,.075),
    0 0 0 2px rgba(0,0,0,.54) !important;
}

/* --------------------------------------------------------------------------
   2. MainDisplay -> lower controls – manufactured chassis seam
   The geometry remains 620px + 241px exactly. Only contact lighting changes.
   -------------------------------------------------------------------------- */
#cockpitRoot > .airradar-workspace{
  /* Slightly more contact depth under the monitor, not a new panel style. */
  box-shadow:
    0 1px 0 rgba(120,148,151,.050),
    0 4px 6px rgba(0,0,0,.58),
    0 8px 13px rgba(0,0,0,.22) !important;
}

/* A common top seat for all three lower modules breaks the flat web-like
   junction and makes them look inserted beneath the monitor in one chassis. */
#cockpitRoot .airradar-bottom-row .input-keypad-panel,
#cockpitRoot .airradar-bottom-row .flight-level-filter,
#cockpitRoot .airradar-bottom-row .range-panel{
  border-top-color:rgba(151,181,183,.47) !important;
  box-shadow:
    inset 0 1px 0 rgba(239,252,252,.31),
    inset 0 2px 0 rgba(127,158,160,.095),
    inset 1px 0 0 rgba(108,136,139,.040),
    inset -1px 0 0 rgba(0,0,0,.71),
    inset 0 -1px 0 rgba(0,0,0,1),
    inset 0 -4px 5px rgba(0,0,0,.69),
    inset 0 -10px 14px rgba(0,0,0,.41),
    0 0 0 1px rgba(0,0,0,.93),
    0 -2px 4px rgba(0,0,0,.48),
    0 1px 0 rgba(126,156,158,.060),
    0 6px 10px rgba(0,0,0,.60) !important;
}

/* Keep the three-panel lower line visually continuous. The lower mass is
   stronger, but dimensions and screw positions are untouched. */
#cockpitRoot > .airradar-bottom-row{
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 3px 3px rgba(0,0,0,.44),
    0 8px 11px rgba(0,0,0,.22) !important;
}

/* --------------------------------------------------------------------------
   3. Header/chassis union – only the external seating shadow is calibrated
   -------------------------------------------------------------------------- */
#cockpitRoot > .airradar-header{
  /* Header internals/logo/LCDs remain exactly as before. */
  box-shadow:
    inset 0 1px 0 rgba(241,253,253,.35),
    inset 0 2px 0 rgba(134,166,168,.11),
    inset 1px 0 0 rgba(113,142,145,.040),
    inset -1px 0 0 rgba(0,0,0,.70),
    inset 0 -1px 0 rgba(0,0,0,.99),
    inset 0 -8px 14px rgba(0,0,0,.40),
    0 0 0 1px rgba(0,0,0,.92),
    0 1px 0 rgba(129,158,160,.060),
    0 3px 5px rgba(0,0,0,.43) !important;
}

/* --------------------------------------------------------------------------
   4. Safety / scope guard
   -------------------------------------------------------------------------- */
#cockpitRoot::before,
#cockpitRoot::after{
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

/* MainDisplay stays screw-free; no new screw styling is introduced. */
#cockpitRoot .main-display__outer-shell > .ar-screw,
#cockpitRoot .main-display__outer-shell .ar-screw{
  display:none !important;
}

/* assets/css/reference-design-r9.css */
/* ============================================================================
   AIRRADAR REFERENCE IMAGE DESIGN TRANSFER
   J.W. AIRRADAR v2.1.1 – Reference Design R9
   ----------------------------------------------------------------------------
   Visual-only pass based on the approved rendered reference image.

   Goal:
   - transfer the reference image's machined avionics enclosure treatment into
     the existing HTML/CSS without changing any functional geometry or logic
   - make Header, MainDisplay and lower modules read as one manufactured device
   - specifically give the MainDisplay right/bottom/left frame the same visible
     material intensity and construction language as its approved top frame
   - give the Header the same machined metal effect as the MainDisplay frame

   This file intentionally contains NO green chassis lighting and NO layout,
   width, height, position, padding, margin or transform changes.
   ============================================================================ */

/* --------------------------------------------------------------------------
   0. Shared reference-image material model
   -------------------------------------------------------------------------- */
#cockpitRoot{
  --r9-metal-ridge-hi: rgba(225,242,242,.70);
  --r9-metal-ridge: rgba(139,169,171,.54);
  --r9-metal-side: rgba(91,121,124,.46);
  --r9-metal-deep: rgba(18,31,34,.98);
  --r9-cavity: rgba(0,3,4,.98);

  /* Preserve the existing chassis geometry; only rebalance the visible alloy. */
  background:
    linear-gradient(180deg,
      rgba(242,252,252,.17) 0,
      rgba(242,252,252,0) 7px) top / 100% 7px no-repeat,
    linear-gradient(90deg,
      rgba(175,202,204,.065) 0,
      rgba(175,202,204,0) 9px) left / 9px 100% no-repeat,
    linear-gradient(270deg,
      rgba(75,101,104,.075) 0,
      rgba(75,101,104,0) 9px) right / 9px 100% no-repeat,
    linear-gradient(0deg,
      rgba(0,0,0,.68) 0,
      rgba(0,0,0,0) 17px) bottom / 100% 17px no-repeat,
    linear-gradient(180deg,
      #43575a 0%,
      #2d4144 3.5%,
      #1a2b2e 11%,
      #101d20 43%,
      #091316 76%,
      #04090b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(249,255,255,.46),
    inset 0 2px 0 rgba(158,188,190,.13),
    inset 1px 0 0 rgba(126,154,156,.065),
    inset -1px 0 0 rgba(59,80,83,.16),
    inset 0 -1px 0 rgba(0,0,0,.98),
    inset 0 -8px 13px rgba(0,0,0,.31) !important;
}

/* Outer device lip: thin machined highlight, not a glossy web-card outline. */
#cockpitRoot::before{
  background:
    linear-gradient(180deg,
      rgba(247,254,254,.52) 0%,
      rgba(181,207,208,.15) 42%,
      rgba(181,207,208,0) 100%) top / 100% 7px no-repeat,
    linear-gradient(90deg,
      rgba(214,231,232,.18) 0%,
      rgba(132,158,160,.055) 55%,
      rgba(132,158,160,0) 100%) left / 9px 100% no-repeat,
    linear-gradient(270deg,
      rgba(118,144,146,.11) 0%,
      rgba(51,70,73,.06) 55%,
      rgba(51,70,73,0) 100%) right / 9px 100% no-repeat,
    linear-gradient(0deg,
      rgba(0,0,0,.90) 0%,
      rgba(0,0,0,.48) 44%,
      rgba(0,0,0,0) 100%) bottom / 100% 17px no-repeat,
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.004) 0,
      rgba(255,255,255,.004) 1px,
      rgba(0,0,0,.004) 1px,
      rgba(0,0,0,.004) 3px),
    linear-gradient(180deg,
      #4d6265 0%,
      #34494c 4%,
      #213437 12%,
      #122225 44%,
      #0a1518 76%,
      #04090b 100%) !important;
  background-blend-mode:screen,screen,normal,multiply,soft-light,normal !important;
  box-shadow:
    inset 0 1px 0 rgba(251,255,255,.68),
    inset 0 2px 0 rgba(172,201,203,.15),
    inset 1px 0 0 rgba(146,173,175,.09),
    inset -1px 0 0 rgba(33,47,50,.48),
    inset 0 -1px 0 rgba(0,0,0,1),
    inset 0 -5px 8px rgba(0,0,0,.58),
    0 0 0 1px rgba(0,0,0,.98),
    0 1px 0 rgba(161,189,191,.16),
    0 10px 17px rgba(0,0,0,.55),
    0 26px 42px rgba(0,0,0,.36) !important;
}

/* --------------------------------------------------------------------------
   1. Header – same physical metal effect as the reference-image MainDisplay
   -------------------------------------------------------------------------- */
#cockpitRoot > .airradar-header{
  border-color:rgba(112,145,148,.72) !important;
  border-top-color:rgba(205,227,228,.78) !important;
  border-left-color:rgba(147,177,179,.62) !important;
  border-right-color:rgba(108,138,141,.52) !important;
  border-bottom-color:rgba(74,101,104,.48) !important;
  background:
    radial-gradient(ellipse at 24% -18%,rgba(225,243,243,.11),transparent 34%),
    linear-gradient(180deg,
      #455a5d 0%,
      #304447 5%,
      #1d3033 15%,
      #102024 53%,
      #091518 80%,
      #050b0d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(250,255,255,.62),
    inset 0 2px 0 rgba(169,197,199,.17),
    inset 1px 0 0 rgba(147,175,177,.10),
    inset -1px 0 0 rgba(80,105,108,.10),
    inset 0 -1px 0 rgba(0,0,0,.80),
    inset 0 -5px 9px rgba(0,0,0,.31),
    0 0 0 1px rgba(0,0,0,.92),
    0 2px 4px rgba(0,0,0,.48) !important;
}

#cockpitRoot > .airradar-header::before{
  border-color:rgba(127,158,160,.34) !important;
  border-top-color:rgba(222,239,239,.47) !important;
  border-left-color:rgba(159,187,188,.31) !important;
  border-right-color:rgba(91,118,121,.28) !important;
  border-bottom-color:rgba(52,72,75,.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(248,255,255,.15),
    inset 1px 0 0 rgba(196,217,218,.055),
    inset -1px 0 0 rgba(0,0,0,.31),
    inset 0 -2px 4px rgba(0,0,0,.35) !important;
}

#cockpitRoot > .airradar-header > .header-reflection{
  background:linear-gradient(180deg,
    rgba(244,255,255,.25),
    rgba(206,234,235,.065) 54%,
    transparent 100%) !important;
  opacity:.72 !important;
}

/* Individual header bays stay dark and recessed, as in the reference image. */
#cockpitRoot .airradar-header .side-plate,
#cockpitRoot .airradar-header .status-module,
#cockpitRoot .airradar-header .brand-core{
  border-top-color:rgba(143,174,176,.43) !important;
  border-left-color:rgba(96,125,128,.34) !important;
  border-right-color:rgba(7,13,15,.94) !important;
  border-bottom-color:rgba(0,0,0,.97) !important;
  background:
    linear-gradient(180deg,
      #25383b 0%,
      #17282b 11%,
      #0a1719 52%,
      #040a0c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(230,248,249,.17),
    inset 0 -2px 4px rgba(0,0,0,.65),
    0 0 0 1px rgba(0,0,0,.74),
    0 2px 3px rgba(0,0,0,.44) !important;
}

/* --------------------------------------------------------------------------
   2. MainDisplay – reference frame transferred uniformly to all four sides
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-main-cell .main-display__outer-shell{
  border-color:rgba(118,151,154,.72) !important;
  border-top-color:rgba(208,229,230,.80) !important;
  border-left-color:rgba(163,190,192,.68) !important;
  border-right-color:rgba(137,166,168,.61) !important;
  border-bottom-color:rgba(111,142,145,.56) !important;
  background:
    radial-gradient(ellipse at 24% -14%,rgba(229,245,245,.12),transparent 34%),
    linear-gradient(180deg,
      #4a5f62 0%,
      #364b4e 4%,
      #273b3e 10%,
      #17282b 30%,
      #102024 60%,
      #0a171a 82%,
      #061013 100%) !important;
  box-shadow:
    /* Same visible machined frame intensity on top, left, right and bottom. */
    inset 0 1px 0 rgba(250,255,255,.68),
    inset 0 2px 0 rgba(174,201,203,.18),
    inset 1px 0 0 rgba(184,208,209,.17),
    inset -1px 0 0 rgba(153,180,182,.13),
    inset 0 -1px 0 rgba(126,155,158,.12),
    /* Physical depth remains darker inside, not on the visible outer lip. */
    inset 0 -7px 12px rgba(0,0,0,.30),
    0 0 0 1px rgba(0,0,0,.94),
    0 2px 0 rgba(133,161,163,.10),
    0 5px 9px rgba(0,0,0,.55) !important;
}

/* The machined highlight ridge is deliberately continuous around all sides. */
#cockpitRoot .airradar-main-cell .main-display__outer-shell::before{
  border-color:rgba(150,181,183,.43) !important;
  border-top-color:rgba(231,245,245,.53) !important;
  border-left-color:rgba(193,215,216,.44) !important;
  border-right-color:rgba(166,192,194,.39) !important;
  border-bottom-color:rgba(145,174,177,.35) !important;
  background:transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(252,255,255,.11),
    inset 1px 0 0 rgba(232,244,244,.055),
    inset -1px 0 0 rgba(91,117,120,.08),
    inset 0 -1px 0 rgba(74,99,102,.09),
    0 0 0 1px rgba(0,0,0,.22) !important;
}

/* Reflection only models the global top/front light; it does not darken sides. */
#cockpitRoot .airradar-main-cell .main-display__outer-shell::after{
  background:
    linear-gradient(180deg,
      rgba(242,254,254,.13) 0,
      rgba(207,233,234,.035) 9%,
      transparent 21%),
    linear-gradient(90deg,
      rgba(229,245,246,.035) 0,
      transparent 15%,
      transparent 85%,
      rgba(229,245,246,.018) 100%) !important;
}

#cockpitRoot .airradar-main-cell .main-display__outer-gloss{
  background:linear-gradient(180deg,
    rgba(245,255,255,.25),
    rgba(210,237,238,.065) 54%,
    transparent 100%) !important;
  opacity:.70 !important;
}

/* Dark cavity remains clearly separated from the brighter machined outer rim. */
#cockpitRoot .airradar-main-cell .main-display__recess{
  border-color:rgba(53,75,78,.74) !important;
  border-top-color:rgba(92,121,124,.55) !important;
  border-left-color:rgba(72,98,101,.48) !important;
  border-right-color:rgba(43,62,65,.58) !important;
  border-bottom-color:rgba(32,49,52,.60) !important;
  background:linear-gradient(180deg,#0b1618 0%,#050b0d 18%,#020506 58%,#010304 100%) !important;
  box-shadow:
    inset 0 8px 12px rgba(0,0,0,.84),
    inset 0 -7px 11px rgba(0,0,0,.89),
    inset 7px 0 10px rgba(0,0,0,.74),
    inset -7px 0 10px rgba(0,0,0,.76),
    inset 0 1px 0 rgba(179,207,208,.055),
    0 0 0 1px rgba(0,0,0,.95),
    0 3px 6px rgba(0,0,0,.62) !important;
}

#cockpitRoot .airradar-main-cell .main-display__inner-bevel{
  border-color:rgba(71,98,101,.75) !important;
  border-top-color:rgba(132,162,165,.56) !important;
  border-left-color:rgba(101,132,135,.49) !important;
  border-right-color:rgba(67,93,96,.45) !important;
  border-bottom-color:rgba(53,77,80,.43) !important;
  background:linear-gradient(180deg,#1c2e31 0%,#112124 12%,#081316 55%,#040a0c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(226,244,244,.15),
    inset 1px 0 0 rgba(174,200,201,.055),
    inset -1px 0 0 rgba(0,0,0,.38),
    inset 0 -1px 0 rgba(0,0,0,.54),
    inset 0 -4px 7px rgba(0,0,0,.38),
    0 0 0 1px rgba(0,0,0,.93),
    0 2px 3px rgba(0,0,0,.63) !important;
}

/* MainDisplay remains explicitly screw-free. */
#cockpitRoot .airradar-main-cell .main-display__outer-shell > .ar-screw,
#cockpitRoot .airradar-main-cell .main-display__outer-shell .ar-screw{
  display:none !important;
}

/* --------------------------------------------------------------------------
   3. Lower modules – preserve controls, only harmonise their installed frame
   -------------------------------------------------------------------------- */
#cockpitRoot .airradar-bottom-row .input-keypad-panel,
#cockpitRoot .airradar-bottom-row .flight-level-filter,
#cockpitRoot .airradar-bottom-row .range-panel{
  border-top-color:rgba(177,202,204,.50) !important;
  border-left-color:rgba(98,127,130,.39) !important;
  border-right-color:rgba(51,70,73,.56) !important;
  border-bottom-color:rgba(21,32,35,.88) !important;
  background:
    radial-gradient(ellipse at 24% -18%,rgba(212,235,236,.065),transparent 35%),
    linear-gradient(180deg,#31464a 0%,#213438 6%,#111f22 30%,#091417 72%,#040a0c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(239,252,252,.33),
    inset 0 2px 0 rgba(135,166,168,.105),
    inset 1px 0 0 rgba(114,143,146,.045),
    inset -1px 0 0 rgba(42,59,62,.19),
    inset 0 -1px 0 rgba(0,0,0,.93),
    inset 0 -7px 11px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.91),
    0 4px 8px rgba(0,0,0,.50) !important;
}

/* --------------------------------------------------------------------------
   4. Scope guards – visual pass only
   -------------------------------------------------------------------------- */
#cockpitRoot::before,
#cockpitRoot::after,
#cockpitRoot .airradar-main-cell .main-display__outer-shell::before,
#cockpitRoot .airradar-main-cell .main-display__outer-shell::after{
  pointer-events:none !important;
}

/* assets/css/front-plane-r10.css */
/* ============================================================================
   AIRRADAR UNIFIED FRONT PLANE PASS
   J.W. AIRRADAR v2.1.1 – Front Plane R10
   ----------------------------------------------------------------------------
   Goal:
   - make the whole device read as one common front plate from header through
     MainDisplay to the lower control modules
   - remove the impression that header, display frame and lower modules are
     installed at different depths inside a deeper cavity
   - preserve all existing geometry, logic, IDs and module positions

   Scope:
   - outer chassis material, light logic and transition refinement only
   - shallow, flush-mounted frame language instead of deeper recessed module beds
   ============================================================================ */

/* AIRRADAR UNIFIED FRONT PLANE PASS ---------------------------------------- */
#cockpitRoot{
  --r10-front-hi: rgba(234,247,247,.68);
  --r10-front-soft: rgba(157,186,188,.20);
  --r10-front-side: rgba(96,124,128,.30);
  --r10-front-deep: rgba(11,20,24,.98);
  --r10-front-metal-top: #4a6063;
  --r10-front-metal-up: #31464a;
  --r10-front-metal-mid: #1b2d31;
  --r10-front-metal-low: #0e1a1d;
  --r10-front-metal-bottom: #050b0d;

  background:
    radial-gradient(ellipse at 50% -18%, rgba(239,251,251,.07), transparent 40%),
    linear-gradient(180deg,
      var(--r10-front-metal-top) 0%,
      var(--r10-front-metal-up) 4%,
      var(--r10-front-metal-mid) 16%,
      var(--r10-front-metal-low) 58%,
      var(--r10-front-metal-bottom) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(248,255,255,.30),
    inset 0 2px 0 rgba(171,197,199,.09),
    inset 0 -1px 0 rgba(0,0,0,.96),
    inset 0 -12px 18px rgba(0,0,0,.30) !important;
}

#cockpitRoot::before{
  background:
    radial-gradient(ellipse at 28% -9%, rgba(241,251,252,.10), transparent 32%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.008) 0,
      rgba(255,255,255,.008) 1px,
      rgba(0,0,0,.008) 1px,
      rgba(0,0,0,.008) 3px),
    linear-gradient(180deg,
      #52686b 0%,
      #394f53 4%,
      #26393d 13%,
      #16272b 45%,
      #0c171a 80%,
      #050b0d 100%) !important;
  border-color: rgba(95,123,127,.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(249,255,255,.58),
    inset 0 2px 0 rgba(154,184,186,.18),
    inset 1px 0 0 rgba(149,177,179,.09),
    inset -1px 0 0 rgba(31,45,49,.56),
    inset 0 -1px 0 rgba(0,0,0,.99),
    inset 0 -6px 10px rgba(0,0,0,.54),
    0 0 0 1px rgba(0,0,0,.96),
    0 2px 0 rgba(109,136,139,.16),
    0 10px 16px rgba(0,0,0,.64),
    0 24px 44px rgba(0,0,0,.50) !important;
}

/* Front plate seam only; no deep inner bed around all modules. */
#cockpitRoot::after{
  top: 4px !important;
  bottom: 5px !important;
  left: -6px !important;
  right: -6px !important;
  border-radius: 20px !important;
  border-color: rgba(18,29,32,.92) !important;
  background:
    linear-gradient(180deg,
      rgba(233,246,246,.18) 0%,
      rgba(154,184,186,.05) 38%,
      rgba(0,0,0,0) 100%) top / 100% 6px no-repeat,
    linear-gradient(90deg,
      rgba(212,232,233,.06) 0%,
      rgba(0,0,0,0) 100%) left / 5px 100% no-repeat,
    linear-gradient(270deg,
      rgba(0,0,0,.26) 0%,
      rgba(0,0,0,0) 100%) right / 6px 100% no-repeat,
    linear-gradient(0deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,0) 100%) bottom / 100% 8px no-repeat !important;
  box-shadow:
    inset 0 1px 0 rgba(230,245,246,.06),
    inset 0 -1px 0 rgba(0,0,0,.88),
    0 0 0 1px rgba(107,135,138,.10),
    0 0 0 2px rgba(0,0,0,.34) !important;
}

/* Shared flush-mounted module face: header, display frame, lower panels. */
#cockpitRoot > .airradar-header,
#cockpitRoot .airradar-main-cell .main-display__outer-shell,
#cockpitRoot .airradar-bottom-row .input-keypad-panel,
#cockpitRoot .airradar-bottom-row .flight-level-filter,
#cockpitRoot .airradar-bottom-row .range-panel{
  border-top-color: rgba(208,229,231,.78) !important;
  border-left-color: rgba(159,188,191,.54) !important;
  border-right-color: rgba(108,136,140,.44) !important;
  border-bottom-color: rgba(58,79,83,.72) !important;
  background:
    radial-gradient(ellipse at 42% -22%, rgba(233,246,247,.08), transparent 34%),
    linear-gradient(180deg,
      #495f62 0%,
      #33484b 5%,
      #23363a 14%,
      #15262a 52%,
      #0c171a 82%,
      #060d0f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(250,255,255,.56),
    inset 0 2px 0 rgba(171,197,199,.14),
    inset 1px 0 0 rgba(160,188,190,.08),
    inset -1px 0 0 rgba(53,74,78,.16),
    inset 0 -1px 0 rgba(0,0,0,.90),
    inset 0 -6px 9px rgba(0,0,0,.26),
    0 0 0 1px rgba(0,0,0,.92),
    0 2px 3px rgba(0,0,0,.46) !important;
}

/* Header now reads as the same front plate, not a separately sunken top deck. */
#cockpitRoot > .airradar-header > .header-reflection,
#cockpitRoot .airradar-main-cell .main-display__outer-gloss{
  opacity: .56 !important;
  background: linear-gradient(180deg,
    rgba(244,255,255,.18),
    rgba(213,236,237,.05) 48%,
    transparent 100%) !important;
}

#cockpitRoot > .airradar-header::before,
#cockpitRoot .airradar-main-cell .main-display__outer-shell::before,
#cockpitRoot .airradar-bottom-row .input-keypad-panel::before,
#cockpitRoot .airradar-bottom-row .flight-level-filter::before,
#cockpitRoot .airradar-bottom-row .range-panel::before{
  border-top-color: rgba(226,241,242,.42) !important;
  border-left-color: rgba(179,205,207,.30) !important;
  border-right-color: rgba(86,113,117,.28) !important;
  border-bottom-color: rgba(40,58,62,.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(251,255,255,.13),
    inset 1px 0 0 rgba(202,223,224,.05),
    inset -1px 0 0 rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(0,0,0,.40),
    0 0 0 1px rgba(0,0,0,.20) !important;
}

/* Shallow connection between frame and screen: still technical, no deep trough. */
#cockpitRoot .airradar-main-cell .main-display__recess{
  border-top-color: rgba(122,152,156,.44) !important;
  border-left-color: rgba(93,121,124,.34) !important;
  border-right-color: rgba(62,84,88,.42) !important;
  border-bottom-color: rgba(41,60,64,.54) !important;
  background: linear-gradient(180deg, #15262a 0%, #0d181b 18%, #081114 66%, #04090b 100%) !important;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.56),
    inset 0 -3px 5px rgba(0,0,0,.68),
    inset 3px 0 4px rgba(0,0,0,.42),
    inset -3px 0 4px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(184,210,212,.05),
    0 0 0 1px rgba(0,0,0,.94),
    0 2px 4px rgba(0,0,0,.48) !important;
}

#cockpitRoot .airradar-main-cell .main-display__inner-bevel{
  border-top-color: rgba(145,174,177,.50) !important;
  border-left-color: rgba(108,138,142,.37) !important;
  border-right-color: rgba(77,102,106,.33) !important;
  border-bottom-color: rgba(55,76,80,.40) !important;
  background: linear-gradient(180deg, #203337 0%, #142428 12%, #0b1518 62%, #050b0d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(229,245,246,.12),
    inset 1px 0 0 rgba(176,202,204,.04),
    inset -1px 0 0 rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(0,0,0,.42),
    inset 0 -3px 5px rgba(0,0,0,.24),
    0 0 0 1px rgba(0,0,0,.93),
    0 2px 3px rgba(0,0,0,.50) !important;
}

/* Header interior fields remain distinct but only slightly stepped, not sunken. */
#cockpitRoot .airradar-header .side-plate,
#cockpitRoot .airradar-header .status-module,
#cockpitRoot .airradar-header .brand-core{
  background: linear-gradient(180deg, #2a3d40 0%, #1b2d31 10%, #0f1d20 52%, #081012 100%) !important;
  border-top-color: rgba(154,183,185,.36) !important;
  border-left-color: rgba(112,140,143,.26) !important;
  border-right-color: rgba(20,31,34,.74) !important;
  border-bottom-color: rgba(0,0,0,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,248,249,.11),
    inset 0 -1px 0 rgba(0,0,0,.48),
    inset 0 -2px 4px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.70),
    0 1px 2px rgba(0,0,0,.34) !important;
}

/* Lower module outer shells should sit on the same plane as the display frame. */
#cockpitRoot .airradar-bottom-row .input-keypad-panel,
#cockpitRoot .airradar-bottom-row .flight-level-filter,
#cockpitRoot .airradar-bottom-row .range-panel{
  box-shadow:
    inset 0 1px 0 rgba(250,255,255,.50),
    inset 0 2px 0 rgba(171,197,199,.11),
    inset 1px 0 0 rgba(157,185,188,.06),
    inset -1px 0 0 rgba(54,74,78,.16),
    inset 0 -1px 0 rgba(0,0,0,.92),
    inset 0 -7px 10px rgba(0,0,0,.30),
    0 0 0 1px rgba(0,0,0,.90),
    0 2px 4px rgba(0,0,0,.48) !important;
}

/* Safety guards: visual pass only. */
#cockpitRoot::before,
#cockpitRoot::after,
#cockpitRoot > .airradar-header::before,
#cockpitRoot .airradar-main-cell .main-display__outer-shell::before,
#cockpitRoot .airradar-bottom-row .input-keypad-panel::before,
#cockpitRoot .airradar-bottom-row .flight-level-filter::before,
#cockpitRoot .airradar-bottom-row .range-panel::before{
  pointer-events: none !important;
}

/* assets/css/v2.2-responsive.css */
/* ============================================================================
   J.W. AIRRADAR v2.2.0 – VIEWPORT FIT + HANDSET EXPERIENCE
   ----------------------------------------------------------------------------
   Presentation-only responsive layer.
   - keeps the complete physical device inside the available viewport
   - respects browser safe-area insets
   - shows a dedicated AIRRADAR handset notice instead of a cropped cockpit
   ============================================================================ */

html,
body,
body.cockpit-integrated{
  width:100% !important;
  height:100% !important;
  min-height:100dvh !important;
  overflow:hidden !important;
}

#cockpitViewport{
  box-sizing:border-box !important;
  padding-top:max(6px, env(safe-area-inset-top)) !important;
  padding-right:max(8px, env(safe-area-inset-right)) !important;
  padding-bottom:max(8px, env(safe-area-inset-bottom)) !important;
  padding-left:max(8px, env(safe-area-inset-left)) !important;
}

#cockpitScaleWrap{
  flex:none !important;
  transform-origin:top center !important;
}

/* --------------------------------------------------------------------------
   Handset notice
   The full cockpit intentionally does not get squeezed into a phone display.
   -------------------------------------------------------------------------- */
.mobile-screen-notice{
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483000;
  box-sizing:border-box;
  overflow:auto;
  padding:
    max(22px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 4%,rgba(20,102,88,.15),transparent 36%),
    linear-gradient(180deg,#071012 0%,#020607 55%,#010304 100%);
  color:#eef8f8;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  text-align:center;
}

.mobile-screen-notice__card{
  width:min(100%,500px);
  margin:auto;
  padding:28px 24px 26px;
  box-sizing:border-box;
  border:1px solid rgba(255,66,66,.58);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(28,43,46,.94),rgba(7,15,17,.97));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(0,0,0,.85),
    0 18px 50px rgba(0,0,0,.52);
}

.mobile-screen-notice__logo{
  display:block;
  width:min(100%,390px);
  height:auto;
  margin:0 auto 28px;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.48));
}

.mobile-screen-notice__warning{
  margin:0 auto 14px;
  color:#ff5252;
  font-size:clamp(18px,5.2vw,25px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:.035em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(255,42,42,.13);
}

.mobile-screen-notice__text{
  margin:0 auto;
  max-width:410px;
  color:#dceaea;
  font-size:clamp(14px,4vw,17px);
  line-height:1.55;
}

.mobile-screen-notice__text strong{
  color:#ffffff;
  font-weight:700;
}


/* Portrait phones and narrow handset-class touch screens. */
@media (hover:none) and (pointer:coarse) and (max-width:680px){
  body:not(.intro-page) .mobile-screen-notice{display:flex !important;}
  body:not(.intro-page) > .intro,
  body:not(.intro-page) > #cockpitViewport,
  body:not(.intro-page) > #legacyCompat{
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* Landscape phones: width can be large, but the short touch viewport still
   cannot present the complete cockpit at a useful scale. */
@media (hover:none) and (pointer:coarse) and (max-height:540px) and (max-width:980px){
  body:not(.intro-page) .mobile-screen-notice{display:flex !important;}
  body:not(.intro-page) > .intro,
  body:not(.intro-page) > #cockpitViewport,
  body:not(.intro-page) > #legacyCompat{
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* assets/css/v2.2.1-compact-range-fix.css */
/* ============================================================================
   J.W. AIRRADAR v2.2.1 – COMPACT VIEW / RANGE LABEL BUGFIX
   ----------------------------------------------------------------------------
   Visual/responsive bugfix only.
   1) The complete 1500px cockpit geometry is retained at narrow desktop widths
      and scaled as one unit. Legacy media queries must not hide Header LCDs.
   2) Range-value text is placed OUTSIDE its marker point on the metal surface,
      not in the empty annulus between the rotary knob and the panel face.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. HEADER GEOMETRY LOCK FOR SCALED DESKTOP / TABLET VIEWS
   The viewport-fit system scales the complete physical device. Therefore old
   component-level media queries must never collapse the five-part Header.
   -------------------------------------------------------------------------- */
#cockpitRoot > .airradar-header{
  width:1500px !important;
  min-width:1500px !important;
  max-width:1500px !important;
  height:88px !important;
  min-height:88px !important;
  max-height:88px !important;
  grid-template-columns:minmax(220px,1fr) 82px minmax(430px,520px) 82px minmax(220px,1fr) !important;
  gap:7px !important;
  padding:4px !important;
}

#cockpitRoot > .airradar-header .side-plate{
  display:block !important;
  min-width:0 !important;
}

#cockpitRoot > .airradar-header .status-module{
  min-width:0 !important;
}

#cockpitRoot > .airradar-header .module-bezel{
  width:46px !important;
  height:50px !important;
}

#cockpitRoot > .airradar-header .brand-core{
  grid-column:auto !important;
  gap:15px !important;
}

/* Explicit visibility guard for both LCD host bays. */
#cockpitRoot > .airradar-header .header-location-host,
#cockpitRoot > .airradar-header .side-plate--right.header-lcd-host{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* --------------------------------------------------------------------------
   2. RANGE LABELS: TEXT SITS ON THE PANEL METAL, OUTSIDE EACH MARKER POINT

   Marker points keep their established radial geometry and all click/drag
   logic stays untouched. Only the text inside each existing marker button is
   moved outward from its point according to its location around the knob.
   -------------------------------------------------------------------------- */
#cockpitRoot .range-panel #uiRangeDial .range-mark__label{
  top:24px !important;
  left:31px !important;
  transform:none !important;
  line-height:1 !important;
  pointer-events:none !important;
}

/* 25: left of its lower-left marker point. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="25"] .range-mark__label{
  left:12px !important;
  top:24px !important;
  transform:translate(-100%,-50%) !important;
  text-align:right !important;
}

/* 50: diagonally upper-left of its marker point. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="50"] .range-mark__label{
  left:17px !important;
  top:16px !important;
  transform:translate(-100%,-50%) !important;
  text-align:right !important;
}

/* 80: diagonally upper-right of its marker point. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="80"] .range-mark__label{
  left:43px !important;
  top:16px !important;
  transform:translate(0,-50%) !important;
  text-align:left !important;
}

/* 120: right of its upper-right marker point. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="120"] .range-mark__label{
  left:50px !important;
  top:24px !important;
  transform:translate(0,-50%) !important;
  text-align:left !important;
}

/* 200: outward on the lower-right metal face as well. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="200"] .range-mark__label{
  left:47px !important;
  top:34px !important;
  transform:translate(0,0) !important;
  text-align:left !important;
}

/* Keep marker points themselves untouched and above the knob cavity. */
#cockpitRoot .range-panel #uiRangeDial .range-mark__tick{
  left:50% !important;
  top:24px !important;
  transform:translateX(-50%) !important;
}

/* assets/css/v2.2.2-range-symmetry-fix.css */
/* ============================================================================
   J.W. AIRRADAR v2.2.2 – RANGE PANEL SYMMETRY FIX
   ----------------------------------------------------------------------------
   Scope:
   - visual-only correction of the Range panel label symmetry
   - no changes to the dial points, click targets, JS logic or sounds
   - keep all labels on the panel metal, not in the empty knob cavity
   ============================================================================ */

/* Reference point inside each .range-mark remains the existing marker point:
   tick center = 31px / 24px. We only reposition the text symmetrically around
   that point while keeping every marker button and tick unchanged. */
#cockpitRoot .range-panel #uiRangeDial .range-mark__label{
  line-height:1 !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}

/* 25: directly left of the lower-left marker point. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="25"] .range-mark__label{
  left:10px !important;
  top:24px !important;
  transform:translate(-100%,-50%) !important;
  text-align:right !important;
}

/* 50: diagonally upper-left of its point, mirrored against 120. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="50"] .range-mark__label{
  left:16px !important;
  top:12px !important;
  transform:translate(-100%,-50%) !important;
  text-align:right !important;
}

/* 80: slightly upper-right of the top marker point, as requested. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="80"] .range-mark__label{
  left:41px !important;
  top:12px !important;
  transform:translate(0,-50%) !important;
  text-align:left !important;
}

/* 120: directly right of the upper-right marker point, mirrored against 50. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="120"] .range-mark__label{
  left:52px !important;
  top:24px !important;
  transform:translate(0,-50%) !important;
  text-align:left !important;
}

/* 200: mirrored to 25 on the lower-right, kept on the metal surface. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="200"] .range-mark__label{
  left:52px !important;
  top:24px !important;
  transform:translate(0,-50%) !important;
  text-align:left !important;
}

/* Tick points remain untouched and continue to define the active geometry. */
#cockpitRoot .range-panel #uiRangeDial .range-mark__tick{
  left:50% !important;
  top:24px !important;
  transform:translateX(-50%) !important;
}

/* assets/css/v2.2.4-range-radial-symmetry-fix.css */
/* ============================================================================
   J.W. AIRRADAR v2.2.4 – RANGE LABEL RADIAL SYMMETRY FIX
   ----------------------------------------------------------------------------
   Scope:
   - visual-only correction of the remaining Range label asymmetry
   - specifically fixes the 80 placement and makes 120 radially symmetrical
     to the 50 position
   - marker points, click targets, knob geometry, JS logic and sounds stay
     unchanged
   ============================================================================ */

/* CSS syntax checked manually and loaded after the previous range fixes so the
   following declarations override the earlier label positions deterministically. */
#cockpitRoot .range-panel #uiRangeDial .range-mark__label{
  line-height:1 !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}

/* Keep the already-correct lower-left position. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="25"] .range-mark__label{
  left:10px !important;
  top:24px !important;
  transform:translate(-100%,-50%) !important;
  text-align:right !important;
}

/* Upper-left reference position. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="50"] .range-mark__label{
  left:16px !important;
  top:12px !important;
  transform:translate(-100%,-50%) !important;
  text-align:right !important;
}

/* Top point: text diagonally upper-right of the marker, not centered above it. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="80"] .range-mark__label{
  left:45px !important;
  top:11px !important;
  transform:translate(0,-50%) !important;
  text-align:left !important;
}

/* Exact radial mirror of 50 on the upper-right side. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="120"] .range-mark__label{
  left:46px !important;
  top:12px !important;
  transform:translate(0,-50%) !important;
  text-align:left !important;
}

/* Keep the lower-right value on the metal surface and balance it to 25. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="200"] .range-mark__label{
  left:52px !important;
  top:24px !important;
  transform:translate(0,-50%) !important;
  text-align:left !important;
}

/* Tick points remain the functional anchor geometry. */
#cockpitRoot .range-panel #uiRangeDial .range-mark__tick{
  left:50% !important;
  top:24px !important;
  transform:translateX(-50%) !important;
}

/* assets/css/v2.2.5-range-80-center-fix.css */
/* ============================================================================
   J.W. AIRRADAR v2.2.5 – RANGE 80 CENTER FIX
   ----------------------------------------------------------------------------
   Scope:
   - visual-only fine correction for the Range panel
   - set the "80" label exactly centered above its top marker point
   - keep all click targets, JS logic, sounds and the other label placements
     unchanged
   ============================================================================ */

/* 80 sits exactly centered relative to its marker point.
   Marker point center remains at x=31px / y=24px inside the 62x44 range-mark. */
#cockpitRoot .range-panel #uiRangeDial .range-mark[data-ui-range="80"] .range-mark__label{
  left:31px !important;
  top:11px !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
}

/* assets/css/v2.2.22-nearby-display.css */
/* ============================================================================
   J.W. AIRRADAR v2.3.0 – Nearby fullscreen layer
   Internal design viewport remains exactly 1920 x 1080.
   ============================================================================ */

#uiMainScreen > .nearby-display-layer{
  position:absolute;
  inset:0;
  z-index:6000;
  overflow:hidden;
  background:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

#uiMainScreen > .nearby-display-layer.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Only this element enters browser fullscreen. The AIRRADAR chassis therefore
   disappears completely while Nearby is open. */
#uiNearbyDisplayLayer:fullscreen{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  margin:0;
  padding:0;
  background:#000;
  overflow:hidden;
}

#uiNearbyDisplayStage{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:1920px;
  height:1080px;
  transform:translate(-50%,-50%) scale(.5);
  transform-origin:center center;
  background:#000;
  will-change:transform;
}

#uiNearbyDisplayFrame{
  display:block;
  width:1920px;
  height:1080px;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  overflow:hidden;
  background:#000;
}

/* Invisible click/tap surface above the iframe. Any pointer interaction closes
   Nearby and returns to the AIRRADAR device exactly as requested. */
#uiNearbyExitSurface{
  position:absolute;
  z-index:20;
  inset:0;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
}

#uiNearbyExitSurface:focus-visible{
  outline:1px solid rgba(42,255,167,.32);
  outline-offset:-3px;
}

/* assets/css/reference-skin-v32.css */
/* Reference skin: original 1672 x 941 artwork; live controls retain their IDs. */
#cockpitRoot#cockpitRoot#cockpitRoot{position:relative !important;display:block !important;width:1672px !important;height:941px !important;min-width:1672px !important;max-width:none !important;min-height:941px !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;background:url("../reference-device.webp") 0 0 / 1672px 941px no-repeat !important;overflow:visible !important;}
#cockpitViewport{padding:0!important;background:#030b0d!important;}
#cockpitRoot#cockpitRoot::before,#cockpitRoot#cockpitRoot::after{display:none!important;content:none!important;}
#cockpitRoot#cockpitRoot#cockpitRoot .airradar-header,#cockpitRoot#cockpitRoot#cockpitRoot .side-plate,#cockpitRoot#cockpitRoot#cockpitRoot .status-module,#cockpitRoot#cockpitRoot#cockpitRoot .module-bezel,#cockpitRoot#cockpitRoot#cockpitRoot .airradar-workspace,#cockpitRoot#cockpitRoot#cockpitRoot .airradar-main-cell,#cockpitRoot#cockpitRoot#cockpitRoot .main-display,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__outer-shell,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__recess,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__inner-bevel,#cockpitRoot#cockpitRoot#cockpitRoot .airradar-bottom-row,#cockpitRoot#cockpitRoot#cockpitRoot .range-panel,#cockpitRoot#cockpitRoot#cockpitRoot .range-panel__inner,#cockpitRoot#cockpitRoot#cockpitRoot .dial,#cockpitRoot#cockpitRoot#cockpitRoot .flight-level-filter,#cockpitRoot#cockpitRoot#cockpitRoot .flight-level-filter__inner,#cockpitRoot#cockpitRoot#cockpitRoot .preset-row,#cockpitRoot#cockpitRoot#cockpitRoot .filter-body,#cockpitRoot#cockpitRoot#cockpitRoot .min-control,#cockpitRoot#cockpitRoot#cockpitRoot .max-control,#cockpitRoot#cockpitRoot#cockpitRoot .readout-line,#cockpitRoot#cockpitRoot#cockpitRoot .step-stack,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-panel,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-panel__viewport,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-panel__canvas,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-block,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-left,#cockpitRoot#cockpitRoot#cockpitRoot .input-arrow-pad,#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad,#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad{display:contents !important;position:static !important;transform:none !important;filter:none !important;background:none !important;border:0 !important;box-shadow:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .airradar-header::before,#cockpitRoot#cockpitRoot#cockpitRoot .airradar-header::after,#cockpitRoot#cockpitRoot#cockpitRoot .side-plate::before,#cockpitRoot#cockpitRoot#cockpitRoot .side-plate::after,#cockpitRoot#cockpitRoot#cockpitRoot .status-module::before,#cockpitRoot#cockpitRoot#cockpitRoot .status-module::after,#cockpitRoot#cockpitRoot#cockpitRoot .module-bezel::before,#cockpitRoot#cockpitRoot#cockpitRoot .module-bezel::after,#cockpitRoot#cockpitRoot#cockpitRoot .airradar-workspace::before,#cockpitRoot#cockpitRoot#cockpitRoot .airradar-workspace::after,#cockpitRoot#cockpitRoot#cockpitRoot .airradar-main-cell::before,#cockpitRoot#cockpitRoot#cockpitRoot .airradar-main-cell::after,#cockpitRoot#cockpitRoot#cockpitRoot .main-display::before,#cockpitRoot#cockpitRoot#cockpitRoot .main-display::after,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__outer-shell::before,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__outer-shell::after,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__recess::before,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__recess::after,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__inner-bevel::before,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__inner-bevel::after,#cockpitRoot#cockpitRoot#cockpitRoot .airradar-bottom-row::before,#cockpitRoot#cockpitRoot#cockpitRoot .airradar-bottom-row::after,#cockpitRoot#cockpitRoot#cockpitRoot .range-panel::before,#cockpitRoot#cockpitRoot#cockpitRoot .range-panel::after,#cockpitRoot#cockpitRoot#cockpitRoot .range-panel__inner::before,#cockpitRoot#cockpitRoot#cockpitRoot .range-panel__inner::after,#cockpitRoot#cockpitRoot#cockpitRoot .dial::before,#cockpitRoot#cockpitRoot#cockpitRoot .dial::after,#cockpitRoot#cockpitRoot#cockpitRoot .flight-level-filter::before,#cockpitRoot#cockpitRoot#cockpitRoot .flight-level-filter::after,#cockpitRoot#cockpitRoot#cockpitRoot .flight-level-filter__inner::before,#cockpitRoot#cockpitRoot#cockpitRoot .flight-level-filter__inner::after,#cockpitRoot#cockpitRoot#cockpitRoot .preset-row::before,#cockpitRoot#cockpitRoot#cockpitRoot .preset-row::after,#cockpitRoot#cockpitRoot#cockpitRoot .filter-body::before,#cockpitRoot#cockpitRoot#cockpitRoot .filter-body::after,#cockpitRoot#cockpitRoot#cockpitRoot .min-control::before,#cockpitRoot#cockpitRoot#cockpitRoot .min-control::after,#cockpitRoot#cockpitRoot#cockpitRoot .max-control::before,#cockpitRoot#cockpitRoot#cockpitRoot .max-control::after,#cockpitRoot#cockpitRoot#cockpitRoot .readout-line::before,#cockpitRoot#cockpitRoot#cockpitRoot .readout-line::after,#cockpitRoot#cockpitRoot#cockpitRoot .step-stack::before,#cockpitRoot#cockpitRoot#cockpitRoot .step-stack::after,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-panel::before,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-panel::after,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-panel__viewport::before,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-panel__viewport::after,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-panel__canvas::before,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-panel__canvas::after,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-block::before,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-block::after,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-left::before,#cockpitRoot#cockpitRoot#cockpitRoot .input-keypad-left::after,#cockpitRoot#cockpitRoot#cockpitRoot .input-arrow-pad::before,#cockpitRoot#cockpitRoot#cockpitRoot .input-arrow-pad::after,#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad::before,#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad::after,#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad::before,#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad::after,#cockpitRoot#cockpitRoot#cockpitRoot ::before,#cockpitRoot#cockpitRoot#cockpitRoot ::after{display:none !important;content:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .ar-screw,#cockpitRoot#cockpitRoot#cockpitRoot .header-texture,#cockpitRoot#cockpitRoot#cockpitRoot .header-reflection,#cockpitRoot#cockpitRoot#cockpitRoot .brand-core,#cockpitRoot#cockpitRoot#cockpitRoot .panel-texture,#cockpitRoot#cockpitRoot#cockpitRoot .panel-reflection,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__outer-gloss,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__metal-grain,#cockpitRoot#cockpitRoot#cockpitRoot .range-panel__title,#cockpitRoot#cockpitRoot#cockpitRoot .fl-caption,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__overlay-layer,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__screen-glass,#cockpitRoot#cockpitRoot#cockpitRoot .main-display__screen-vignette{display:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiMainScreen{position:absolute !important;left:162px !important;top:132px !important;right:auto !important;bottom:auto !important;width:1351px !important;height:516px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border:0 !important;border-radius:1px !important;background:#030b0d !important;box-shadow:inset 0 0 10px #000 !important;overflow:hidden !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #map{inset:0 !important;width:100% !important;height:100% !important;border:0 !important;border-radius:0 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiHeaderLocationLcd{position:absolute !important;left:155px !important;top:37px !important;right:auto !important;bottom:auto !important;width:342px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;background:linear-gradient(#013323,#002219 55%,#001d15) !important;display:flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiHeaderLocationLcd::before,#cockpitRoot#cockpitRoot#cockpitRoot #uiHeaderLocationLcd::after,#cockpitRoot#cockpitRoot#cockpitRoot .header-lcd::before,#cockpitRoot#cockpitRoot#cockpitRoot .header-lcd::after{display:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiHeaderLocation{color:#79ffc2 !important;font:bold 17px/1 Consolas,monospace !important;letter-spacing:1px !important;text-shadow:0 0 4px #28ff97 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .header-lcd{position:absolute !important;left:1177px !important;top:37px !important;right:auto !important;bottom:auto !important;width:339px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;background:linear-gradient(#013323,#002219 55%,#001d15) !important;display:flex !important;align-items:center !important;justify-content:space-between !important;padding:0 12px !important;gap:0 !important;color:#79ffc2 !important;font:bold 17px/1 Consolas,monospace !important;letter-spacing:1px !important;text-shadow:0 0 4px #28ff97 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .header-lcd__live,#cockpitRoot#cockpitRoot#cockpitRoot .header-lcd__utc{font:inherit !important;letter-spacing:inherit !important;color:inherit !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiLocationLed{position:absolute !important;left:542px !important;top:45px !important;right:auto !important;bottom:auto !important;width:22px !important;height:24px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:2px !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiConnectionLed{position:absolute !important;left:1109px !important;top:45px !important;right:auto !important;bottom:auto !important;width:21px !important;height:24px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:2px !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-key,#cockpitRoot#cockpitRoot#cockpitRoot .step{border:0 !important;box-shadow:none !important;background:transparent !important;color:transparent !important;text-shadow:none !important;cursor:pointer !important;border-radius:3px !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-key::before,#cockpitRoot#cockpitRoot#cockpitRoot .input-key::after,#cockpitRoot#cockpitRoot#cockpitRoot .step::before,#cockpitRoot#cockpitRoot#cockpitRoot .step::after{display:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-key:hover,#cockpitRoot#cockpitRoot#cockpitRoot .step:hover{background:#aaffdd12 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-key:active,#cockpitRoot#cockpitRoot#cockpitRoot .input-key.is-pressed,#cockpitRoot#cockpitRoot#cockpitRoot .step:active{background:#0006 !important;box-shadow:inset 0 2px 3px #0008 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-arrow-pad .input-key:nth-child(1){position:absolute !important;left:141px !important;top:706px !important;right:auto !important;bottom:auto !important;width:47px !important;height:28px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-arrow-pad .input-key:nth-child(2){position:absolute !important;left:195px !important;top:706px !important;right:auto !important;bottom:auto !important;width:45px !important;height:28px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-arrow-pad .input-key:nth-child(3){position:absolute !important;left:141px !important;top:739px !important;right:auto !important;bottom:auto !important;width:47px !important;height:28px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-arrow-pad .input-key:nth-child(4){position:absolute !important;left:195px !important;top:739px !important;right:auto !important;bottom:auto !important;width:45px !important;height:28px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(1){position:absolute !important;left:141px !important;top:771px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(2){position:absolute !important;left:175px !important;top:771px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(3){position:absolute !important;left:210px !important;top:771px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(4){position:absolute !important;left:141px !important;top:804px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(5){position:absolute !important;left:175px !important;top:804px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(6){position:absolute !important;left:210px !important;top:804px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(7){position:absolute !important;left:141px !important;top:838px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(8){position:absolute !important;left:175px !important;top:838px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(9){position:absolute !important;left:210px !important;top:838px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(10){position:absolute !important;left:141px !important;top:872px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(11){position:absolute !important;left:175px !important;top:872px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-numeric-pad .input-key:nth-child(12){position:absolute !important;left:210px !important;top:872px !important;right:auto !important;bottom:auto !important;width:30px !important;height:30px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border-radius:50% !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(1){position:absolute !important;left:250px !important;top:706px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(2){position:absolute !important;left:294px !important;top:706px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(3){position:absolute !important;left:337px !important;top:706px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(4){position:absolute !important;left:380px !important;top:706px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(5){position:absolute !important;left:422px !important;top:706px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(6){position:absolute !important;left:250px !important;top:740px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(7){position:absolute !important;left:294px !important;top:740px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(8){position:absolute !important;left:337px !important;top:740px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(9){position:absolute !important;left:380px !important;top:740px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(10){position:absolute !important;left:422px !important;top:740px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(11){position:absolute !important;left:250px !important;top:772px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(12){position:absolute !important;left:294px !important;top:772px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(13){position:absolute !important;left:337px !important;top:772px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(14){position:absolute !important;left:380px !important;top:772px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(15){position:absolute !important;left:422px !important;top:772px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(16){position:absolute !important;left:250px !important;top:805px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(17){position:absolute !important;left:294px !important;top:805px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(18){position:absolute !important;left:337px !important;top:805px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(19){position:absolute !important;left:380px !important;top:805px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(20){position:absolute !important;left:422px !important;top:805px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(21){position:absolute !important;left:250px !important;top:838px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(22){position:absolute !important;left:294px !important;top:838px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(23){position:absolute !important;left:337px !important;top:838px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(24){position:absolute !important;left:380px !important;top:838px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(25){position:absolute !important;left:422px !important;top:838px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(26){position:absolute !important;left:250px !important;top:870px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(27){position:absolute !important;left:294px !important;top:870px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(28){position:absolute !important;left:337px !important;top:870px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(29){position:absolute !important;left:380px !important;top:870px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .input-alpha-pad .input-key:nth-child(30){position:absolute !important;left:422px !important;top:870px !important;right:auto !important;bottom:auto !important;width:38px !important;height:29px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiFlMinPlus{position:absolute !important;left:502px !important;top:838px !important;right:auto !important;bottom:auto !important;width:34px !important;height:28px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiFlMinMinus{position:absolute !important;left:502px !important;top:871px !important;right:auto !important;bottom:auto !important;width:34px !important;height:28px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiFlMaxPlus{position:absolute !important;left:1141px !important;top:838px !important;right:auto !important;bottom:auto !important;width:34px !important;height:28px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiFlMaxMinus{position:absolute !important;left:1141px !important;top:871px !important;right:auto !important;bottom:auto !important;width:34px !important;height:28px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset{border:0 !important;border-radius:2px !important;box-shadow:none !important;background:url("../reference-device.webp") -509px -708px / 1672px 941px no-repeat !important;color:#e1e9e8 !important;font:600 14px/1 "Arial Narrow",Arial,sans-serif !important;cursor:pointer !important;text-shadow:0 1px #000 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset::before,#cockpitRoot#cockpitRoot#cockpitRoot .preset::after{display:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .skin-key-label{position:absolute !important;inset:5px 5px 6px !important;display:flex !important;align-items:center !important;justify-content:center !important;background:linear-gradient(#142125,#091215 50%,#050b0d) !important;border-radius:1px !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset.preset--active{color:#8bffcf !important;box-shadow:inset 0 0 0 1px #13a96e,0 0 5px #00cf7444 !important;text-shadow:0 0 4px #46ffa8,0 0 10px #00f593 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset.preset--active .skin-key-label{background:radial-gradient(ellipse,#06352b,#061214 75%) !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset:active{filter:brightness(.75) !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .fl-mode-row .preset:nth-child(1){position:absolute !important;left:509px !important;top:708px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset-row--fl-standard .preset:nth-child(1){position:absolute !important;left:509px !important;top:761px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .fl-mode-row .preset:nth-child(2){position:absolute !important;left:621px !important;top:708px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset-row--fl-standard .preset:nth-child(2){position:absolute !important;left:621px !important;top:761px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .fl-mode-row .preset:nth-child(3){position:absolute !important;left:733px !important;top:708px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset-row--fl-standard .preset:nth-child(3){position:absolute !important;left:733px !important;top:761px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .fl-mode-row .preset:nth-child(4){position:absolute !important;left:844px !important;top:708px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset-row--fl-standard .preset:nth-child(4){position:absolute !important;left:844px !important;top:761px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .fl-mode-row .preset:nth-child(5){position:absolute !important;left:956px !important;top:708px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset-row--fl-standard .preset:nth-child(5){position:absolute !important;left:956px !important;top:761px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .fl-mode-row .preset:nth-child(6){position:absolute !important;left:1067px !important;top:708px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .preset-row--fl-standard .preset:nth-child(6){position:absolute !important;left:1067px !important;top:761px !important;right:auto !important;bottom:auto !important;width:102px !important;height:42px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiFlMinReadout{position:absolute !important;left:552px !important;top:844px !important;right:auto !important;bottom:auto !important;width:54px !important;height:48px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;display:flex !important;align-items:center !important;justify-content:center !important;background:linear-gradient(#032a20,#001710) !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;color:#63ffc0 !important;font:400 30px/1 "Arial Narrow",Arial,sans-serif !important;letter-spacing:-2px !important;text-shadow:0 0 5px #00e698 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiFlMaxReadout{position:absolute !important;left:1069px !important;top:844px !important;right:auto !important;bottom:auto !important;width:54px !important;height:48px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;display:flex !important;align-items:center !important;justify-content:center !important;background:linear-gradient(#032a20,#001710) !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;color:#63ffc0 !important;font:400 30px/1 "Arial Narrow",Arial,sans-serif !important;letter-spacing:-2px !important;text-shadow:0 0 5px #00e698 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .fl-readout::before,#cockpitRoot#cockpitRoot#cockpitRoot .fl-readout::after{display:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .slider-module{position:absolute !important;left:620px !important;top:814px !important;right:auto !important;bottom:auto !important;width:435px !important;height:86px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;background:#020b0c !important;border:1px solid #183c37 !important;border-radius:4px !important;box-shadow:inset 0 2px 5px #000 !important;--thumb-size:26px !important;--thumb-radius:13px !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .slider-track-wrap{position:absolute !important;left:4px !important;top:5px !important;right:auto !important;bottom:auto !important;width:425px !important;height:76px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;--thumb-size:26px !important;--thumb-radius:13px !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .slider-track,#cockpitRoot#cockpitRoot#cockpitRoot .slider-fill{top:19px !important;height:7px !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .slider-track-wrap input[type="range"]{left:0 !important;top:0 !important;width:100% !important;height:42px !important;background:transparent !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .slider-track-wrap input[type="range"]::-webkit-slider-thumb{margin-top:-9px !important;width:26px !important;height:26px !important;border:2px solid #8bffbe !important;box-shadow:0 0 7px #00ef8999 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .ticks{top:32px !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .scale-labels{top:50px !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiRangeKnob{position:absolute !important;left:1321px !important;top:775px !important;right:auto !important;bottom:auto !important;width:112px !important;height:112px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;border:0 !important;border-radius:50% !important;background:none !important;box-shadow:none !important;overflow:hidden !important;cursor:grab !important;z-index:2 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiRangeKnob > span:not(#uiRangeIndicator){display:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiRangeIndicator{position:absolute !important;left:0px !important;top:0px !important;right:auto !important;bottom:auto !important;width:112px !important;height:112px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;display:block !important;transform-origin:56px 56px !important;pointer-events:none !important;transition:transform .12s ease !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiRangeIndicator > span{display:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot #uiRangeIndicator::after{content:"" !important;position:absolute !important;inset:0 !important;display:block !important;border-radius:50% !important;background:url("../reference-device.webp") -1321px -775px / 1672px 941px no-repeat !important;transform:rotate(90deg) !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .range-mark[data-ui-range="25"]{position:absolute !important;left:1295px !important;top:869px !important;right:auto !important;bottom:auto !important;width:48px !important;height:34px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:5px !important;background:url("../reference-device.webp") -1230px -869px / 1672px 941px no-repeat !important;border:0 !important;border-radius:2px !important;box-shadow:none !important;cursor:pointer !important;z-index:1 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .range-mark[data-ui-range="50"]{position:absolute !important;left:1276px !important;top:772px !important;right:auto !important;bottom:auto !important;width:48px !important;height:34px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:5px !important;background:url("../reference-device.webp") -1230px -772px / 1672px 941px no-repeat !important;border:0 !important;border-radius:2px !important;box-shadow:none !important;cursor:pointer !important;z-index:1 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .range-mark[data-ui-range="80"]{position:absolute !important;left:1353px !important;top:732px !important;right:auto !important;bottom:auto !important;width:48px !important;height:34px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:5px !important;background:url("../reference-device.webp") -1230px -732px / 1672px 941px no-repeat !important;border:0 !important;border-radius:2px !important;box-shadow:none !important;cursor:pointer !important;z-index:1 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .range-mark[data-ui-range="120"]{position:absolute !important;left:1420px !important;top:772px !important;right:auto !important;bottom:auto !important;width:48px !important;height:34px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:5px !important;background:url("../reference-device.webp") -1230px -772px / 1672px 941px no-repeat !important;border:0 !important;border-radius:2px !important;box-shadow:none !important;cursor:pointer !important;z-index:1 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .range-mark[data-ui-range="200"]{position:absolute !important;left:1419px !important;top:869px !important;right:auto !important;bottom:auto !important;width:48px !important;height:34px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:5px !important;background:url("../reference-device.webp") -1230px -869px / 1672px 941px no-repeat !important;border:0 !important;border-radius:2px !important;box-shadow:none !important;cursor:pointer !important;z-index:1 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .range-mark__label{position:static !important;transform:none !important;color:#e4ebea !important;font:400 16px/1 "Arial Narrow",Arial,sans-serif !important;text-shadow:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .range-mark__tick{position:static !important;transform:none !important;width:5px !important;height:6px !important;background:#52665e !important;box-shadow:none !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .range-mark--active .range-mark__label{color:#7dffc2 !important;text-shadow:0 0 6px #00e780 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .range-mark--active .range-mark__tick{background:#62ffb5 !important;box-shadow:0 0 6px #00e780 !important;}
#cockpitRoot#cockpitRoot#cockpitRoot .integration-tag{position:absolute !important;left:1430px !important;top:921px !important;right:auto !important;bottom:auto !important;width:135px !important;height:14px !important;min-width:0 !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;transform:none !important;background:#071012 !important;color:#a0bdb8 !important;font:600 11px/14px Consolas,monospace !important;text-align:center !important;letter-spacing:1px !important;}
#cockpitRoot#cockpitRoot#cockpitRoot button:focus-visible{outline:2px solid #9bffd5 !important;outline-offset:2px !important;}