:root{
  --bg:#020805;
  --panel:#03140c;
  --panel2:#052013;
  --green:#38ff74;
  --green2:#00d95a;
  --muted:#7ce99d;
  --text:#d9ffe5;
  --line:rgba(76,255,128,.28);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#010302;color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid rgba(56,255,116,.25);background:linear-gradient(180deg,#062013,#020805)}
.app-header h1{margin:0;font-size:24px;color:var(--green);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 10px rgba(56,255,116,.55)}
.app-header p{margin:4px 0 0;color:var(--muted);font-size:13px}
.version{border:1px solid rgba(56,255,116,.4);padding:6px 10px;border-radius:8px;color:var(--green);background:rgba(56,255,116,.08)}
.dual-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;min-height:calc(100vh - 96px)}
.radar-panel{background:linear-gradient(180deg,var(--panel),#010402);border:1px solid rgba(56,255,116,.25);border-radius:14px;box-shadow:0 0 22px rgba(0,255,80,.08);padding:10px;display:grid;grid-template-rows:auto minmax(420px,1fr) auto auto minmax(150px,220px);min-width:0}
.panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.panel-top h2{margin:4px 0 0;color:var(--green);font-size:18px;text-transform:uppercase;letter-spacing:.08em}
.controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.controls label{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
select,button{background:#021109;color:var(--text);border:1px solid rgba(56,255,116,.45);border-radius:8px;padding:7px 9px;font-size:13px;outline:none}
button{cursor:pointer;color:var(--green)}
button:hover,select:hover{box-shadow:0 0 10px rgba(56,255,116,.2)}
.scope-wrap{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center, rgba(20,90,35,.22), rgba(0,0,0,.95) 68%);border-radius:50%;aspect-ratio:1/1;margin:0 auto;width:min(100%,calc(100vh - 250px));max-width:780px;box-shadow:inset 0 0 50px rgba(0,255,90,.12), 0 0 18px rgba(0,255,90,.08);overflow:hidden}
.scope-wrap:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(56,255,116,.38);box-shadow:inset 0 0 24px rgba(56,255,116,.12),0 0 18px rgba(56,255,116,.1);pointer-events:none}
.radar-canvas{width:100%;height:100%;display:block;border-radius:50%}
.status{font-size:12px;color:var(--muted);padding:8px 4px;min-height:28px}
.list-title{font-size:12px;color:var(--green);letter-spacing:.08em;text-transform:uppercase;border-top:1px solid rgba(56,255,116,.18);padding:8px 4px 5px}
.aircraft-list{overflow:auto;border:1px solid rgba(56,255,116,.16);border-radius:10px;background:rgba(0,0,0,.22)}
.aircraft-row{padding:7px 9px;border-bottom:1px solid rgba(56,255,116,.1);display:grid;grid-template-columns:1fr auto;gap:4px;font-size:12px;cursor:pointer}
.aircraft-row:hover{background:rgba(56,255,116,.08)}
.aircraft-row .title{color:#fff;font-weight:bold;font-size:14px}.aircraft-row .dist{color:var(--green)}.aircraft-row .sub{grid-column:1/3;color:var(--muted)}.aircraft-row .meta{grid-column:1/3;color:#9ccfac;font-size:11px}
.cat-military{border-left:4px solid #ff4d4d}.cat-training{border-left:4px solid #ffad33}.cat-services{border-left:4px solid #35ff78}.cat-government{border-left:4px solid #55b7ff}.cat-civil{border-left:4px solid #60756b}
.app-footer{display:flex;gap:15px;align-items:center;justify-content:center;padding:10px 15px;border-top:1px solid rgba(56,255,116,.18);background:#020805;color:var(--muted);font-size:13px}
@media (max-width:1100px){.dual-layout{grid-template-columns:1fr}.radar-panel{grid-template-rows:auto minmax(360px,1fr) auto auto minmax(130px,190px)}.scope-wrap{min-height:360px;width:min(100%,80vh)}}
@media (max-width:700px){.app-header{padding:10px 12px}.app-header h1{font-size:19px}.app-header p{display:none}.dual-layout{padding:8px}.panel-top{display:block}.controls{justify-content:flex-start;margin-top:8px}.scope-wrap{min-height:310px;width:100%}.radar-panel{padding:8px;grid-template-rows:auto 310px auto auto 180px}.app-footer{flex-direction:column;gap:6px}}

.controls input[type=checkbox]{width:18px;height:18px;accent-color:var(--green);}

.header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-link{display:inline-block;border:1px solid rgba(56,255,116,.4);padding:6px 10px;border-radius:8px;color:var(--green);background:rgba(56,255,116,.08);text-decoration:none;font-size:13px}
.nav-link:hover{box-shadow:0 0 10px rgba(56,255,116,.2)}
.help-page{max-width:980px;margin:0 auto;padding:18px}
.help-panel{background:linear-gradient(180deg,var(--panel),#010402);border:1px solid rgba(56,255,116,.25);border-radius:14px;padding:18px;box-shadow:0 0 22px rgba(0,255,80,.08)}
.help-panel h2,.help-panel h3{color:var(--green)}
.help-panel code{color:#b6ffd0;background:rgba(56,255,116,.08);padding:2px 5px;border-radius:5px}
.help-panel li{margin:7px 0}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.help-card{border:1px solid rgba(56,255,116,.18);border-radius:12px;padding:12px;background:rgba(0,0,0,.18)}
@media (max-width:700px){.header-actions{justify-content:flex-start;margin-top:8px}.app-header{display:block}.help-grid{grid-template-columns:1fr}}


/* v1.12: overlay selector buttons - fixed per panel */
.radar-panel{
  position:relative;
}

.special-overlay{
  position:absolute;
  top:100px;
  z-index:5;
  width:132px;
  pointer-events:auto;
  text-align:center;
  background:rgba(1,12,6,.44);
  border:1px solid rgba(56,255,116,.20);
  border-radius:12px;
  padding:7px 7px 8px;
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.70),
    0 0 10px rgba(56,255,116,.08);
}

/* Radar 1 selector - towards centre */
#specialA{
  right:12px;
}

/* Radar 2 selector - towards centre */
#specialB{
  left:12px;
  right:auto;
}
.special-title{
  color:var(--muted);
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin-bottom:6px;
  text-shadow:0 0 5px rgba(56,255,116,.25);
}
.special-buttons{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
}
.special-btn{
  width:100%;
  min-height:24px;
  padding:4px 6px;
  border-radius:999px;
  border:1px solid rgba(56,255,116,.28);
  background:linear-gradient(180deg, rgba(8,28,16,.92), rgba(1,9,5,.92));
  color:rgba(124,233,157,.82);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:inset 0 0 7px rgba(0,0,0,.72);
}
.special-btn:hover{
  border-color:rgba(124,255,160,.65);
  color:#d9ffe5;
}
.special-btn.active{
  color:#03140c;
  background:linear-gradient(180deg, #6dff91, #22c55e);
  border-color:#b6ffd0;
  text-shadow:none;
  box-shadow:0 0 10px rgba(57,255,106,.45), inset 0 1px 1px rgba(255,255,255,.35);
}
@media (max-width:1100px){
  .special-overlay{
    top:112px;
    right:16px;
  }
}
@media (max-width:700px){
  .special-overlay{
    position:static;
    width:auto;
    margin:8px 0 0;
    text-align:left;
  }
  .special-buttons{
    grid-template-columns:repeat(3,1fr);
  }
}


/* v1.14: mobile selector fix
   Mobile only. Moves ALL / BBMF / REDS out of the radar face and into a compact row.
   This prevents the selector covering aircraft labels on iPhone screens.
*/
@media (max-width:700px){
  .dual-layout{
    display:block!important;
    padding:6px!important;
  }

  .radar-panel{
    display:grid!important;
    grid-template-rows:auto auto minmax(300px,auto) auto auto minmax(120px,170px)!important;
    padding:7px!important;
    margin-bottom:8px!important;
  }

  .panel-top{
    display:block!important;
    margin-bottom:3px!important;
  }

  .panel-top h2{
    font-size:15px!important;
    margin:0 0 5px!important;
  }

  .controls{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:5px!important;
    justify-content:stretch!important;
    margin-top:4px!important;
  }

  .controls label{
    font-size:9px!important;
    line-height:1.05!important;
    min-width:0!important;
  }

  .controls select{
    width:100%!important;
    min-width:0!important;
    padding:5px 5px!important;
    font-size:10.5px!important;
  }

  .controls input[type=checkbox]{
    width:15px!important;
    height:15px!important;
  }

  .special-overlay{
    position:static!important;
    width:100%!important;
    margin:2px 0 4px!important;
    padding:3px!important;
    border-radius:8px!important;
    background:rgba(1,12,6,.42)!important;
    box-shadow:none!important;
    text-align:center!important;
  }

  #specialA,
  #specialB{
    left:auto!important;
    right:auto!important;
  }

  .special-title{
    display:none!important;
  }

  .special-buttons{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:4px!important;
  }

  .special-btn{
    min-height:20px!important;
    padding:2px 4px!important;
    font-size:9px!important;
    letter-spacing:.04em!important;
    border-radius:999px!important;
  }

  .scope-wrap{
    width:min(100%, calc(100vw - 28px))!important;
    min-height:0!important;
    aspect-ratio:1 / 1!important;
    margin:2px auto 0!important;
  }

  .status{
    padding:5px 2px!important;
    min-height:21px!important;
    font-size:10.5px!important;
  }

  .aircraft-list{
    max-height:165px!important;
  }

  .aircraft-row{
    padding:6px 7px!important;
  }
}

@media (max-width:390px){
  .controls{
    grid-template-columns:1fr 1fr!important;
  }

  .special-btn{
    min-height:19px!important;
    font-size:8.5px!important;
  }

  .scope-wrap{
    width:min(100%, calc(100vw - 24px))!important;
  }
}


/* v1.17: mobile radar-only mode, round landscape radar, constant-speed sweep support */
.mobile-radar-toggle{
  display:none;
}

.scope-wrap{
  height:auto;
  flex:0 0 auto;
}

@media (max-width:700px), (max-height:500px) and (orientation:landscape){
  .mobile-radar-toggle{
    display:inline-block;
  }

  .scope-wrap{
    width:min(100%, calc(100svw - 28px))!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    min-height:0!important;
    max-height:none!important;
  }

  .radar-canvas{
    aspect-ratio:1 / 1!important;
  }

  body.mobile-radar-only .panel-top,
  body.mobile-radar-only .special-overlay,
  body.mobile-radar-only .status,
  body.mobile-radar-only .list-title,
  body.mobile-radar-only .aircraft-list,
  body.mobile-radar-only .app-footer{
    display:none!important;
  }

  body.mobile-radar-only .app-header{
    padding:7px 9px!important;
  }

  body.mobile-radar-only .app-header h1{
    font-size:15px!important;
  }

  body.mobile-radar-only .dual-layout{
    min-height:calc(100svh - 44px)!important;
    padding:5px!important;
    gap:6px!important;
  }

  body.mobile-radar-only .radar-panel{
    grid-template-rows:1fr!important;
    padding:4px!important;
    margin-bottom:6px!important;
    align-content:center!important;
  }

  body.mobile-radar-only .scope-wrap{
    width:min(calc(100svw - 22px), calc(100svh - 64px))!important;
    margin:0 auto!important;
  }
}

@media (max-height:500px) and (orientation:landscape){
  .dual-layout{
    grid-template-columns:1fr 1fr!important;
    display:grid!important;
    min-height:calc(100svh - 76px)!important;
  }

  .radar-panel{
    grid-template-rows:auto auto minmax(0,1fr) auto auto minmax(75px,110px)!important;
    min-height:0!important;
  }

  .scope-wrap{
    width:min(45svw, calc(100svh - 170px))!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
  }

  body.mobile-radar-only .dual-layout{
    grid-template-columns:1fr 1fr!important;
    min-height:calc(100svh - 44px)!important;
  }

  body.mobile-radar-only .scope-wrap{
    width:min(47svw, calc(100svh - 58px))!important;
  }
}


/* v1.17: desktop formatting repair after v1.15 */
.controls{
  align-items:flex-start;
}
.controls label:has(input[type=checkbox]){
  align-items:center;
  min-width:38px;
  text-align:center;
}
.controls label:has(input[type=checkbox]) input{
  margin-top:4px;
}
@media (min-width:701px){
  .panel-top h2{
    min-width:120px;
  }
  .controls{
    gap:8px 10px;
  }
  .special-overlay{
    top:110px;
  }
}

/* Landscape phone/tablet: keep both radar faces genuinely round and within the screen */
@media (max-height:500px) and (orientation:landscape){
  .app-header{
    padding:7px 10px!important;
  }
  .app-header h1{
    font-size:17px!important;
  }
  .app-header p{
    display:none!important;
  }
  .dual-layout{
    grid-template-columns:1fr 1fr!important;
    display:grid!important;
    min-height:calc(100svh - 58px)!important;
    padding:5px!important;
    gap:6px!important;
  }
  .radar-panel{
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    padding:5px!important;
  }
  .scope-wrap{
    width:min(calc(50svw - 24px), calc(100svh - 145px))!important;
    height:min(calc(50svw - 24px), calc(100svh - 145px))!important;
    min-height:0!important;
    aspect-ratio:1 / 1!important;
  }
  .radar-canvas{
    width:100%!important;
    height:100%!important;
  }
  .status,.list-title,.aircraft-list{
    font-size:10px!important;
  }
}


/* v1.17: dynamic viewport resizing support */
.scope-wrap{
  transition:width .12s ease, height .12s ease;
}
@media (max-width:700px), (max-height:500px) and (orientation:landscape){
  .scope-wrap{
    max-width:100%!important;
  }
}

/* v1.18: full radar mode with two floating icons */
.radar-float-actions{
  display:none;
  position:fixed;
  top:8px;
  right:8px;
  z-index:80;
  gap:7px;
}
.radar-float-btn{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(56,255,116,.55);
  background:rgba(1,12,6,.68);
  color:var(--green);
  font-size:20px;
  line-height:1;
  box-shadow:0 0 12px rgba(56,255,116,.18), inset 0 0 10px rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
}
.radar-float-btn.small{
  width:32px;
  height:32px;
  font-size:17px;
}
.radar-float-btn:hover,
.radar-float-btn[aria-pressed="true"]{
  color:#03140c;
  background:linear-gradient(180deg, #6dff91, #22c55e);
  border-color:#b6ffd0;
}
.floating-controls-panel{
  display:none;
  position:fixed;
  top:54px;
  right:8px;
  z-index:79;
  width:min(320px, calc(100svw - 16px));
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(56,255,116,.38);
  background:rgba(1,12,6,.82);
  color:var(--text);
  box-shadow:0 0 18px rgba(0,255,80,.16), inset 0 0 18px rgba(0,0,0,.65);
  backdrop-filter:blur(5px);
}
.floating-controls-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--green);
}
.floating-controls-icons{
  display:flex;
  gap:6px;
}
.floating-controls-panel p{
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
}
body.radar-mode .radar-float-actions{
  display:flex;
}
body.radar-mode.radar-controls-open .floating-controls-panel{
  display:block;
}
body.radar-mode .app-header,
body.radar-mode .app-footer,
body.radar-mode .panel-top,
body.radar-mode .special-overlay,
body.radar-mode .status,
body.radar-mode .list-title,
body.radar-mode .aircraft-list{
  display:none!important;
}
body.radar-mode.radar-controls-open .app-header,
body.radar-mode.radar-controls-open .panel-top,
body.radar-mode.radar-controls-open .special-overlay,
body.radar-mode.radar-controls-open .status,
body.radar-mode.radar-controls-open .list-title,
body.radar-mode.radar-controls-open .aircraft-list,
body.radar-mode.radar-controls-open .app-footer{
  display:flex!important;
}
body.radar-mode.radar-controls-open .app-header{
  position:fixed!important;
  top:0;
  left:0;
  right:0;
  z-index:70;
  background:rgba(2,8,5,.88)!important;
  backdrop-filter:blur(5px);
}
body.radar-mode.radar-controls-open .app-footer{
  position:fixed!important;
  left:0;
  right:0;
  bottom:0;
  z-index:70;
  background:rgba(2,8,5,.88)!important;
  backdrop-filter:blur(5px);
}
body.radar-mode.radar-controls-open .panel-top,
body.radar-mode.radar-controls-open .status,
body.radar-mode.radar-controls-open .list-title,
body.radar-mode.radar-controls-open .aircraft-list{
  display:block!important;
}
body.radar-mode.radar-controls-open .special-overlay{
  display:block!important;
}
body.radar-mode .dual-layout{
  min-height:100svh!important;
  padding:6px!important;
  gap:6px!important;
}
body.radar-mode .radar-panel{
  grid-template-rows:minmax(0,1fr)!important;
  padding:4px!important;
  min-height:0!important;
  align-content:center!important;
}
body.radar-mode .scope-wrap{
  width:min(calc(50svw - 16px), calc(100svh - 20px))!important;
  height:min(calc(50svw - 16px), calc(100svh - 20px))!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  margin:auto!important;
}
body.radar-mode.radar-controls-open .dual-layout{
  padding-top:62px!important;
  padding-bottom:58px!important;
}
body.radar-mode.radar-controls-open .radar-panel{
  grid-template-rows:auto auto minmax(0,1fr) auto auto minmax(90px,140px)!important;
}
body.radar-mode.radar-controls-open .scope-wrap{
  width:min(calc(50svw - 22px), calc(100svh - 245px))!important;
  height:min(calc(50svw - 22px), calc(100svh - 245px))!important;
}
@media (max-width:700px){
  body.radar-mode .dual-layout{
    display:block!important;
  }
  body.radar-mode .radar-panel{
    margin-bottom:6px!important;
  }
  body.radar-mode .scope-wrap{
    width:min(calc(100svw - 20px), calc(50svh - 18px))!important;
    height:min(calc(100svw - 20px), calc(50svh - 18px))!important;
  }
  body.radar-mode.radar-controls-open .scope-wrap{
    width:min(calc(100svw - 20px), calc(50svh - 115px))!important;
    height:min(calc(100svw - 20px), calc(50svh - 115px))!important;
  }
}
@media (max-height:500px) and (orientation:landscape){
  body.radar-mode .dual-layout{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  body.radar-mode .scope-wrap{
    width:min(calc(50svw - 18px), calc(100svh - 18px))!important;
    height:min(calc(50svw - 18px), calc(100svh - 18px))!important;
  }
  body.radar-mode.radar-controls-open .scope-wrap{
    width:min(calc(50svw - 22px), calc(100svh - 168px))!important;
    height:min(calc(50svw - 22px), calc(100svh - 168px))!important;
  }
}

/* v1.18.1: floating control drawer, station labels, better round mobile landscape */
.floating-controls-panel{
  top:54px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%) scale(.96);
  transform-origin:top center;
  width:min(760px, calc(100svw - 16px))!important;
  max-height:calc(100svh - 72px);
  overflow:auto;
  opacity:0;
  transition:opacity .16s ease, transform .16s ease;
}
body.radar-mode.radar-controls-open .floating-controls-panel{
  display:block;
  opacity:1;
  transform:translateX(-50%) scale(1);
}
.floating-controls-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:9px;
}
.floating-radar-card{
  border:1px solid rgba(56,255,116,.24);
  border-radius:12px;
  background:rgba(0,0,0,.22);
  padding:9px;
}
.floating-radar-card h3{
  margin:0 0 7px;
  color:var(--green);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.floating-control-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
}
.floating-control-grid label{
  display:flex;
  flex-direction:column;
  gap:3px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.floating-control-grid label.check{
  align-items:center;
}
.floating-control-grid select{
  width:100%;
  min-width:0;
  padding:6px 6px;
  font-size:11px;
}
.floating-control-grid input[type=checkbox]{
  width:17px;
  height:17px;
  accent-color:var(--green);
}
.floating-special-buttons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-top:8px;
}
.floating-special-buttons button{
  min-height:24px;
  padding:4px 6px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
}
.floating-special-buttons button.active{
  color:#03140c;
  background:linear-gradient(180deg, #6dff91, #22c55e);
  border-color:#b6ffd0;
}
.floating-controls-note{
  margin-top:9px!important;
}

body.radar-mode.radar-controls-open .app-header,
body.radar-mode.radar-controls-open .panel-top,
body.radar-mode.radar-controls-open .special-overlay,
body.radar-mode.radar-controls-open .status,
body.radar-mode.radar-controls-open .list-title,
body.radar-mode.radar-controls-open .aircraft-list,
body.radar-mode.radar-controls-open .app-footer{
  display:none!important;
}
body.radar-mode.radar-controls-open .dual-layout{
  padding-top:6px!important;
  padding-bottom:6px!important;
}
body.radar-mode.radar-controls-open .radar-panel{
  grid-template-rows:minmax(0,1fr)!important;
}
body.radar-mode.radar-controls-open .scope-wrap{
  width:min(calc(50svw - 16px), calc(100svh - 20px))!important;
  height:min(calc(50svw - 16px), calc(100svh - 20px))!important;
}

@media (max-width:700px){
  .floating-controls-panel{
    top:50px!important;
    width:calc(100svw - 12px)!important;
  }
  .floating-controls-content{
    grid-template-columns:1fr;
  }
  .floating-control-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-height:500px) and (orientation:landscape){
  body.radar-mode .dual-layout,
  body.radar-mode.radar-controls-open .dual-layout{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    min-height:100svh!important;
    height:100svh!important;
    padding:5px!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  body.radar-mode .radar-panel,
  body.radar-mode.radar-controls-open .radar-panel{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:0!important;
    height:calc(100svh - 10px)!important;
    padding:4px!important;
    margin:0!important;
  }
  body.radar-mode .scope-wrap,
  body.radar-mode.radar-controls-open .scope-wrap{
    width:min(calc((100svw - 24px) / 2), calc(100svh - 18px))!important;
    height:min(calc((100svw - 24px) / 2), calc(100svh - 18px))!important;
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    margin:auto!important;
  }
  .floating-controls-panel{
    width:min(760px, calc(100svw - 74px))!important;
    max-height:calc(100svh - 18px)!important;
    top:8px!important;
  }
}


/* v1.18.3: mobile header icon tweaks and radar-only station label refinement */
.icon-link{
  width:42px;
  min-width:42px;
  height:34px;
  padding:0!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  border-radius:999px!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:800;
}
@media (max-width:700px){
  .app-header{
    padding:9px 10px!important;
  }
  .app-header h1{
    font-size:19px!important;
    line-height:.95!important;
    max-width:76px;
  }
  .header-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    margin-top:8px!important;
  }
  .header-actions .nav-link,
  .header-actions .mobile-radar-toggle{
    min-height:34px!important;
    padding:6px 9px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  .header-actions .icon-link{
    width:42px!important;
    min-width:42px!important;
    padding:0!important;
    font-size:22px!important;
  }
  .header-actions .version{
    display:none!important;
  }
  .mobile-radar-toggle{
    min-width:auto!important;
  }
  body.radar-mode .app-footer span{
    font-size:11px!important;
  }
}


/* v1.18.4: slower animated floating controls drawer */
body.radar-mode .floating-controls-panel{
  display:block!important;
  visibility:hidden;
  pointer-events:none;
  opacity:0!important;
  transform:translateX(-50%) translateY(-10px) scale(.72)!important;
  transform-origin:top right!important;
  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.16,.84,.22,1),
    visibility 0s linear .75s!important;
  will-change:opacity,transform;
}
body.radar-mode.radar-controls-open .floating-controls-panel{
  visibility:visible;
  pointer-events:auto;
  opacity:1!important;
  transform:translateX(-50%) translateY(0) scale(1)!important;
  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.16,.84,.22,1),
    visibility 0s linear 0s!important;
  box-shadow:
    0 0 22px rgba(57,255,106,.24),
    inset 0 0 18px rgba(0,0,0,.65);
}
body.radar-mode.radar-controls-open .floating-controls-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 26px rgba(57,255,106,.18);
  animation:drawerGlow .95s ease-out 1;
}
@keyframes drawerGlow{
  0%{opacity:0; transform:scale(.96)}
  45%{opacity:1; transform:scale(1.01)}
  100%{opacity:.25; transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  body.radar-mode .floating-controls-panel,
  body.radar-mode.radar-controls-open .floating-controls-panel{
    transition:none!important;
  }
  body.radar-mode.radar-controls-open .floating-controls-panel::before{
    animation:none!important;
  }
}


/* v1.18.4: single close icon on floating control panel */
.floating-controls-icons{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.floating-controls-icons .radar-float-btn.small{
  width:36px;
  height:36px;
  min-width:36px;
}

/* v1.18.5: mobile footer buttons in one row */
@media (max-width:700px){

  .app-footer{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    gap:8px !important;
    padding:10px 8px !important;
    align-items:center !important;
    justify-items:stretch !important;
  }

  .app-footer button,
  .app-footer .nav-link{
    width:100% !important;
    margin:0 !important;
    text-align:center !important;
    min-height:36px !important;
    padding:6px 4px !important;
    font-size:12px !important;
    line-height:1.1 !important;
  }

  .app-footer span{
    grid-column:1 / -1 !important;
    text-align:center !important;
    margin-top:4px !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }
}



/* v1.19.1: station names moved out of radar face into panel corner */
.radar-station-label{
  display:none;
}

body.radar-mode .radar-station-label{
  display:block;
  position:absolute;
  top:10px;
  left:12px;
  z-index:65;
  padding:4px 8px;
  color:rgba(130,255,170,.78);
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 0 5px rgba(57,255,106,.55);
  background:rgba(1,12,6,.34);
  border:1px solid rgba(56,255,116,.16);
  border-radius:999px;
  pointer-events:none;
}

@media (max-width:700px){
  body.radar-mode .radar-station-label{
    top:8px;
    left:10px;
    font-size:10.5px;
    padding:3px 7px;
  }
}


/* v1.19.4: force mobile header text buttons to true centred pill buttons */
@media (max-width:700px){
  .header-actions .nav-link:not(.icon-link),
  .header-actions .mobile-radar-toggle{
    height:34px!important;
    min-height:34px!important;
    line-height:34px!important;
    padding:0 10px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    vertical-align:middle!important;
  }

  .header-actions .nav-link:not(.icon-link){
    min-width:48px!important;
  }

  .header-actions .mobile-radar-toggle{
    min-width:72px!important;
  }
}

/* v1.20/v1.21: squawk alerts for Dual Radar */
.squawk-row{
  background:rgba(20,8,8,.55)!important;
  box-shadow:inset 0 0 14px rgba(255,255,255,.04),0 0 10px rgba(255,255,255,.04);
}
.squawk-row .title{
  color:#fff!important;
}
.squawk-row.squawk-emergency,
.squawk-row.squawk-hijack{
  border-left-color:#ff3b3b!important;
  border-color:rgba(255,59,59,.7)!important;
  box-shadow:0 0 12px rgba(255,59,59,.18), inset 0 0 14px rgba(255,59,59,.08)!important;
}
.squawk-row.squawk-radio{
  border-left-color:#ffbf2f!important;
  border-color:rgba(255,191,47,.7)!important;
  box-shadow:0 0 12px rgba(255,191,47,.18), inset 0 0 14px rgba(255,191,47,.08)!important;
}
.squawk-row.squawk-lowflying{
  border-left-color:#d946ef!important;
  border-color:rgba(217,70,239,.72)!important;
  box-shadow:0 0 12px rgba(217,70,239,.20), inset 0 0 14px rgba(217,70,239,.08)!important;
}
.squawk-badge{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  font-size:10px;
  line-height:1.25;
  font-weight:900;
  vertical-align:middle;
  color:#fff;
  background:#ff3b3b;
  text-shadow:none;
}
.squawk-badge.squawk-radio{background:#ffbf2f;color:#06140b;}
.squawk-badge.squawk-lowflying{background:#d946ef;color:#fff;}
.squawk-badge.squawk-emergency,
.squawk-badge.squawk-hijack{background:#ff3b3b;color:#fff;}

/* v1.21: squawk labels are priority labels; normal radar labels remain active. */


/* v1.27: Dual Radar responsive repair
   - Hide CTRL button visible on desktop/laptop as well as mobile.
   - Mobile landscape keeps selector row visible in normal mode.
   - Radar faces are forced to a true square in CSS; JS also enforces same width/height.
*/
.mobile-radar-toggle{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
}

@media (min-width:701px){
  .header-actions .mobile-radar-toggle{
    display:inline-flex!important;
  }
}

/* Phone/tablet landscape normal mode */
@media (max-height:540px) and (orientation:landscape){
  html,
  body{
    height:100svh!important;
    min-height:100svh!important;
    overflow:hidden!important;
  }

  .app-header{
    height:42px!important;
    min-height:42px!important;
    padding:5px 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }

  .app-header h1{
    font-size:16px!important;
    line-height:1!important;
    margin:0!important;
    max-width:none!important;
  }

  .app-header p{
    display:none!important;
  }

  .header-actions{
    margin-top:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    align-items:center!important;
  }

  .header-actions .nav-link,
  .header-actions .mobile-radar-toggle{
    height:30px!important;
    min-height:30px!important;
    line-height:30px!important;
    padding:0 9px!important;
    font-size:11px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .header-actions .icon-link{
    width:34px!important;
    min-width:34px!important;
    height:30px!important;
    padding:0!important;
    font-size:18px!important;
  }

  .dual-layout{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
    padding:5px!important;
    height:calc(100svh - 42px)!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .radar-panel{
    display:grid!important;
    grid-template-rows:54px 25px minmax(0,1fr) 16px!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:4px!important;
    overflow:hidden!important;
    align-content:stretch!important;
  }

  .panel-top{
    display:grid!important;
    grid-template-columns:74px minmax(0,1fr)!important;
    gap:5px!important;
    height:54px!important;
    min-height:54px!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .panel-top h2{
    font-size:13px!important;
    line-height:1!important;
    margin:5px 0 0!important;
    min-width:0!important;
    white-space:nowrap!important;
  }

  .controls{
    display:grid!important;
    grid-template-columns:1.25fr .55fr 1.45fr 31px 31px 31px!important;
    gap:4px!important;
    height:54px!important;
    align-items:start!important;
    overflow:visible!important;
    justify-content:stretch!important;
  }

  .controls label{
    min-width:0!important;
    overflow:visible!important;
    font-size:8.5px!important;
    line-height:1!important;
    letter-spacing:.02em!important;
    gap:2px!important;
    color:var(--green)!important;
  }

  .controls select{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:28px!important;
    min-height:28px!important;
    padding:2px 4px!important;
    font-size:9px!important;
    border-radius:7px!important;
  }

  .controls label:has(input[type=checkbox]){
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
  }

  .controls input[type=checkbox]{
    width:16px!important;
    height:16px!important;
    min-width:16px!important;
    min-height:16px!important;
    margin:3px 0 0!important;
  }

  .special-overlay{
    position:static!important;
    display:block!important;
    width:100%!important;
    height:25px!important;
    min-height:25px!important;
    margin:0!important;
    padding:2px 5px!important;
    background:rgba(1,12,6,.34)!important;
    border-radius:9px!important;
    box-shadow:none!important;
  }

  #specialA,
  #specialB{
    left:auto!important;
    right:auto!important;
  }

  .special-title{
    display:none!important;
  }

  .special-buttons{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:4px!important;
  }

  .special-btn{
    min-height:20px!important;
    height:20px!important;
    padding:0 4px!important;
    font-size:8.5px!important;
    line-height:20px!important;
    border-radius:999px!important;
  }

  .scope-wrap{
    --radar-landscape-size: min(calc((100svw - 24px) / 2), calc(100svh - 142px));
    width:var(--radar-landscape-size)!important;
    height:var(--radar-landscape-size)!important;
    min-width:var(--radar-landscape-size)!important;
    min-height:var(--radar-landscape-size)!important;
    max-width:var(--radar-landscape-size)!important;
    max-height:var(--radar-landscape-size)!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    margin:auto!important;
    align-self:center!important;
    justify-self:center!important;
    flex:none!important;
  }

  .radar-canvas{
    width:var(--radar-landscape-size)!important;
    height:var(--radar-landscape-size)!important;
    min-width:var(--radar-landscape-size)!important;
    min-height:var(--radar-landscape-size)!important;
    max-width:var(--radar-landscape-size)!important;
    max-height:var(--radar-landscape-size)!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    display:block!important;
  }

  .status{
    height:16px!important;
    min-height:16px!important;
    max-height:16px!important;
    padding:2px!important;
    font-size:9px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .list-title,
  .aircraft-list{
    display:none!important;
  }

  .app-footer{
    display:none!important;
  }
}

/* Radar-only / Hide CTRL mode in landscape */
@media (max-height:540px) and (orientation:landscape){
  body.radar-mode .app-header{
    display:none!important;
  }

  body.radar-mode .dual-layout,
  body.radar-mode.radar-controls-open .dual-layout{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    height:100svh!important;
    min-height:100svh!important;
    padding:5px!important;
    gap:5px!important;
    overflow:hidden!important;
  }

  body.radar-mode .radar-panel,
  body.radar-mode.radar-controls-open .radar-panel{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:calc(100svh - 10px)!important;
    min-height:0!important;
    margin:0!important;
    padding:4px!important;
    overflow:hidden!important;
  }

  body.radar-mode .scope-wrap,
  body.radar-mode.radar-controls-open .scope-wrap{
    --radar-landscape-full-size: min(calc((100svw - 24px) / 2), calc(100svh - 18px));
    width:var(--radar-landscape-full-size)!important;
    height:var(--radar-landscape-full-size)!important;
    min-width:var(--radar-landscape-full-size)!important;
    min-height:var(--radar-landscape-full-size)!important;
    max-width:var(--radar-landscape-full-size)!important;
    max-height:var(--radar-landscape-full-size)!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    margin:auto!important;
    flex:none!important;
  }

  body.radar-mode .radar-canvas,
  body.radar-mode.radar-controls-open .radar-canvas{
    width:var(--radar-landscape-full-size)!important;
    height:var(--radar-landscape-full-size)!important;
    min-width:var(--radar-landscape-full-size)!important;
    min-height:var(--radar-landscape-full-size)!important;
    max-width:var(--radar-landscape-full-size)!important;
    max-height:var(--radar-landscape-full-size)!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    display:block!important;
  }
}


/* v1.29: startup acknowledgement notice and compact mobile controls */
.startup-notice{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.82);backdrop-filter:blur(3px)}
.startup-notice-hidden{display:none!important}
.startup-notice-card{max-width:560px;width:min(560px,100%);background:linear-gradient(180deg,var(--panel),#010402);color:#dfffe9;border:1px solid rgba(56,255,116,.32);border-radius:18px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.startup-notice-card h2{margin:0 0 10px;color:var(--green);font-size:22px}
.startup-notice-card p{margin:9px 0;line-height:1.38;color:#c9f8d6}
.startup-notice-card code{color:#b6ffd0;background:rgba(56,255,116,.08);padding:2px 5px;border-radius:5px}
.startup-notice-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:15px}
.startup-notice-actions a,.startup-notice-actions button{border:1px solid rgba(56,255,116,.32);border-radius:999px;padding:9px 14px;background:#07190d;color:#dfffe9;text-decoration:none;font-weight:700}
.startup-notice-actions button{cursor:pointer;background:var(--green);color:#001506;border-color:var(--green)}
@media (max-width:700px){#useGpsBtn{display:none!important}.startup-notice{align-items:flex-start;padding-top:22px}.startup-notice-card{padding:15px;border-radius:15px}.startup-notice-card h2{font-size:19px}.startup-notice-card p{font-size:13px}.startup-notice-actions{justify-content:stretch}.startup-notice-actions a,.startup-notice-actions button{flex:1;text-align:center}}


/* v30.20.4: public site status popup */
.nav-button{font:inherit;cursor:pointer}
.site-status-modal{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.82);backdrop-filter:blur(3px)}
.site-status-hidden{display:none!important}
.site-status-card{max-width:620px;width:min(620px,100%);background:linear-gradient(180deg,var(--panel),#010402);color:#dfffe9;border:1px solid rgba(56,255,116,.32);border-radius:18px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.site-status-card h2{margin:0 0 12px;color:var(--green);font-size:22px}
.site-status-card p{margin:9px 0;line-height:1.38;color:#c9f8d6}
.site-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.site-status-grid div{background:rgba(56,255,116,.08);border:1px solid rgba(56,255,116,.22);border-radius:14px;padding:11px;text-align:center}
.site-status-grid strong{display:block;font-size:24px;color:var(--green);margin-bottom:4px}
.site-status-grid span{font-size:12px;color:#bdf8ca}
.site-status-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:15px}
.site-status-actions a,.site-status-actions button{border:1px solid rgba(56,255,116,.32);border-radius:999px;padding:9px 14px;background:#07190d;color:#dfffe9;text-decoration:none;font-weight:700}
.site-status-actions button{cursor:pointer;background:var(--green);color:#001506;border-color:var(--green)}
@media(max-width:700px){.site-status-modal{align-items:flex-start;padding-top:18px}.site-status-card{padding:15px;border-radius:15px}.site-status-card h2{font-size:19px}.site-status-card p{font-size:13px}.site-status-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.site-status-grid strong{font-size:21px}.site-status-actions{justify-content:stretch}.site-status-actions a,.site-status-actions button{flex:1;text-align:center}}