/* ── CSS Variables & Reset ── */
:root {
  --bg: #ffffff;
  --bg2: #f0f4f8;
  --bg3: #e2eaf2;
  --border: #b8cfe0;
  --hdr-bg: #1565c0;
  --hdr2-bg: #0d47a1;
  --hdr-txt: #ffffff;
  --val-cyan: #0077cc;
  --val-red: #d32f2f;
  --val-white: #1a2a3a;
  --lbl: #4a6a88;
  --sub: #7a9ab8;
  --rwy-bg: #1565c0;
  --rwy-txt: #ffffff;
  --range-bg: #dce8f4;
  --range-val: #0d47a1;
  --top-bg: #0d47a1;
  --top-txt: #ffffff;
  --cfg-bg: #1565c0;
  --cfg-txt: #ffffff;
  --brand: #ffffff;
  --brand-acc: #00e5ff;
  --compass-bg: #e8f0f8;
  --compass-ring: #1565c0;
  --compass-tick: #4a8ac0;
  --compass-n: #d32f2f;
  --compass-arr: #ff6600;
  --shadow: 0 2px 8px rgba(0,0,0,0.15);
  --panel-border: #90b8d8;
  --sev-orange: #e65100;
  --sev-red: #c62828;
  --sev-green: #00c853;
  --metar-bg: #e8f0f8;
  --modal-overlay: rgba(0,0,0,0.65);
  --modal-bg: #f0f4f8;
  --modal-border: #90b8d8;
}
body.dark {
  --bg: #07111c;
  --bg2: #0b1825;
  --bg3: #0f2030;
  --border: #1a3050;
  --hdr-bg: #1565c0;
  --hdr2-bg: #0d47a1;
  --hdr-txt: #ffffff;
  --val-cyan: #00e5ff;
  --val-red: #ef5350;
  --val-white: #ffffff;
  --lbl: #4a8aaa;
  --sub: #2a6888;
  --rwy-bg: #1565c0;
  --rwy-txt: #ffffff;
  --range-bg: #071015;
  --range-val: #b0d0f0;
  --top-bg: #030c14;
  --top-txt: #ffffff;
  --cfg-bg: #04090f;
  --cfg-txt: #7ab0d8;
  --brand: #ffffff;
  --brand-acc: #00e5ff;
  --compass-bg: #04090f;
  --compass-ring: #1a4a7a;
  --compass-tick: #4a8ac0;
  --compass-n: #ff4444;
  --compass-arr: #ff7700;
  --shadow: 0 2px 12px rgba(0,0,0,0.5);
  --panel-border: #1a3a5a;
  --sev-orange: #ff9800;
  --sev-red: #ff1744;
  --sev-green: #00e676;
  --metar-bg: #0a1628;
  --modal-overlay: rgba(0,0,0,0.82);
  --modal-bg: #0b1825;
  --modal-border: #1a4a7a;
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body {
  height:100%; width:100%;
  background:var(--bg);
  color:var(--val-white);
  font-family:'Inter',Arial,sans-serif;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: background 0.3s, color 0.3s;
}
/* Use the dynamic viewport height where supported so mobile browser
   URL/toolbars showing or hiding never leave a sliver clipped or an
   empty gap at the bottom — the layout always matches what's actually
   visible right now on the phone. */
@supports (height: 100dvh) {
  html,body { height:100dvh; }
}
#topbar {
  display:flex; align-items:center;
  background:var(--top-bg);
  border-bottom:3px solid var(--hdr-bg);
  padding:0 clamp(6px,1.5vw,20px);
  padding-left:max(clamp(6px,1.5vw,20px), env(safe-area-inset-left));
  padding-right:max(clamp(6px,1.5vw,20px), env(safe-area-inset-right));
  height:clamp(36px,5vh,48px); flex-shrink:0;
  gap:clamp(6px,1vw,14px);
  box-shadow: var(--shadow);
}
.brand {
  font-family:'Orbitron',sans-serif;
  font-weight:900; font-size:clamp(11px,2vw,22px);
  letter-spacing:2px; color:var(--brand);
  white-space:nowrap;
}
.brand span { color:var(--brand-acc); }
#clock {
  flex:1; text-align:center;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:clamp(11px,1.7vw,22px); color:var(--brand); letter-spacing:1px;
}
.top-btns { display:flex; align-items:center; gap:6px; }
#status {
  font-size:clamp(8px,0.9vw,12px); font-weight:700;
  padding:2px clamp(5px,1vw,14px);
  border-radius:12px; border:1px solid #555;
  background:#003a10; color:#00ff88; white-space:nowrap;
  font-family:'Inter',sans-serif; border-color:#00cc66;
}
.icon-btn {
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff; font-size:clamp(12px,1.4vw,17px); cursor:pointer;
  border-radius:6px; padding:2px 7px;
  transition:all 0.2s; line-height:1;
}
.icon-btn:hover { background:rgba(255,255,255,0.25); }
.icon-btn.notif-active {
  background:rgba(0,229,255,0.18); border-color:rgba(0,229,255,0.55);
  color:#00e5ff; box-shadow:0 0 8px rgba(0,229,255,0.35);
}
#rwybar {
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--bg2);
  border-bottom:2px solid var(--border);
  height:clamp(32px,4.5vh,44px); flex-shrink:0;
}
.rwybar-half {
  display:flex; align-items:center;
  padding:0 clamp(4px,1.2vw,14px); gap:clamp(3px,0.8vw,10px);
  border-right:1px solid var(--border);
}
.rwybar-half:first-child { padding-left:max(clamp(4px,1.2vw,14px), env(safe-area-inset-left)); }
.rwybar-half:last-child { border-right:none; padding-right:max(clamp(4px,1.2vw,14px), env(safe-area-inset-right)); }
.stn-lbl {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(8px,1vw,12px); color:var(--val-white); font-weight:700; letter-spacing:1px;
}
.rwy-sel {
  background:var(--bg); border:1px solid var(--border);
  color:var(--val-white);
  font-size:clamp(9px,1.15vw,14px); padding:1px 4px; border-radius:4px;
  font-family:'Inter',sans-serif; font-weight:400; cursor:pointer;
  max-width:80px;
  margin-left:auto;
}
.rwy-wrap { display:flex; align-items:center; gap:5px; }
.rwy-txt { font-size:clamp(14px,1vw,28px); color:var(--val-white); font-weight:600; }
.rwy-num {
  background:var(--rwy-bg); color:var(--rwy-txt);
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:clamp(14px,2.3vw,25px); padding:1px clamp(6px,1.5vw,18px); border-radius:4px;
  min-width:36px; text-align:center; letter-spacing:0;
  box-shadow: 0 2px 6px rgba(21,101,192,0.4);
}
#main {
  flex:1; display:grid; grid-template-columns:1fr 1fr;
  min-height:0; gap:0;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.panel {
  display:flex; flex-direction:column;
  border-right:2px solid var(--panel-border);
  min-height:0; overflow:hidden;
  background:var(--bg);
}
.panel:last-child { border-right:none; }
.pb { flex:1; display:flex; flex-direction:column; min-height:0; }

/* ═══ TREND DASHBOARD VIEW ═══ */
#trendView {
  display:none;
  flex:1; min-height:0;
  grid-template-columns:1fr 1fr;
  gap:0;
}
body.trend-mode #main { display:none; }
body.trend-mode #trendView { display:grid; }
.trend-col {
  display:flex; flex-direction:column; min-height:0;
  border-right:2px solid var(--panel-border);
  background:var(--bg);
}
.trend-col:last-child { border-right:none; }
.trend-col-hdr {
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font:800 clamp(11px,1.3vw,15px) 'Inter',sans-serif;
  letter-spacing:0.04em;
  padding:clamp(3px,0.6vh,7px) 0;
  background:var(--hdr2-bg); color:#fff;
  border-bottom:1px solid var(--border);
}
.trend-live-pill {
  font:700 clamp(8px,0.9vw,11px) 'Inter',sans-serif;
  color:#69f0ae; opacity:0.9;
}
.trend-chart-box {
  flex:1; min-height:0; position:relative;
  padding:2px 6px;
  border-bottom:1px solid var(--border);
}
.trend-chart-box:last-child { border-bottom:none; }
.trend-chart-box canvas { width:100% !important; height:100% !important; }
#trend-toggle-btn.active {
  background:rgba(0,230,118,0.20);
  border-color:#00e676;
  color:#00e676;
  box-shadow:0 0 8px rgba(0,230,118,0.5);
}

.wind-row {
  display:grid; grid-template-columns:0.82fr 0.82fr minmax(80px,17vw);
  flex:32 1 0; min-height:0; overflow:hidden;
  border-bottom:2px solid var(--border);
}
.wind-col { display:flex; flex-direction:column; }
.wbox {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:clamp(2px,0.6vh,8px) clamp(2px,0.6vw,8px);
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  background:var(--bg);
  transition:background 0.3s;
  min-height:0;
  overflow:hidden;
  position:relative;
  cursor:pointer;
}
.wbox:last-child { border-bottom:none; }
.wbox:hover { background:var(--bg2); }
.wbox .click-hint {
  position:absolute; bottom:2px; right:6px;
  font-size:10px;
  color:var(--sub);
  opacity:0;
  transition:opacity 0.3s, transform 0.2s;
  pointer-events:none;
  letter-spacing:0.5px;
  font-weight:600;
  text-transform:uppercase;
  font-family:'Inter',sans-serif;
  background:rgba(0,0,0,0.6);
  padding:3px 10px;
  border-radius:12px;
  transform:scale(0.9);
  white-space:nowrap;
  border:1px solid var(--border);
}
.wbox:hover .click-hint {
  opacity:0.9;
  transform:scale(1);
}
body.dark .wbox .click-hint {
  background:rgba(255,255,255,0.1);
}
.wbox.no-history {
  cursor:default;
}
.wbox.no-history .click-hint {
  display:none !important;
}
.wlbl {
  font-size:clamp(10px,1.35vw,18px); color:var(--val-white); text-transform:uppercase;
  letter-spacing:0.3px; line-height:1.2; text-align:center;
  font-weight:700;
}
.wsub { font-size:clamp(7px,0.8vw,11px); color:var(--val-white); }
.wval {
  font-size:clamp(22px,4.5vw,56px); font-weight:900; line-height:1;
  letter-spacing:-0.5px; font-family:'Inter',sans-serif;
  transition: color 0.3s;
}
.hw-green { color:#00e676 !important; }
.hw-red   { color:#ff1744 !important; }
.cyan { color:var(--val-cyan); }
.red  { color:var(--val-red); }
.sev-orange { color:var(--sev-orange) !important; }
.sev-red { color:var(--sev-red) !important; }
.sev-green { color:var(--sev-green) !important; }
.boundary-ge {
  cursor: help;
}
.boundary-le {
  cursor: help;
}
.compass-cell {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--compass-bg); overflow:hidden;
  border-left:1px solid var(--border);
  transition:background 0.3s;
  min-height:0;
}
.compass-cell canvas { display:block; width:100%; height:100%; }
.wind-particles-canvas {
  position:absolute; top:0; left:0;
  pointer-events:none;
}
.range-row {
  display:grid; grid-template-columns:42% 58%;
  border-bottom:2px solid var(--border);
  flex:8 1 0; min-height:0; overflow:hidden;
  background:var(--range-bg); transition:background 0.3s;
}
.rr {
  display:flex; align-items:center; flex-wrap:wrap;
  padding:2px clamp(4px,0.8vw,10px); gap:2px 6px;
  min-width:0; overflow:hidden;
}
.rr:first-child { border-right:1px solid var(--border); }
.rl {
  font-size:clamp(10px,1.3vw,16px);
  color:var(--val-white); white-space:nowrap; font-weight:600;
  flex-shrink:0;
}
.rv {
  font-size:clamp(16px,2.6vw,34px);
  font-weight:700;
  color:var(--range-val);
  font-family:'Inter',sans-serif;
  letter-spacing:0.5px; white-space:nowrap;
  min-width:0; overflow:hidden; text-overflow:ellipsis; flex-shrink:1;
}
.data-row {
  display:grid; flex:15 1 0; min-height:0;
  border-bottom:1px solid var(--border);
}
.data-row.c2 { grid-template-columns:42% 58%; }
.data-row.c3 { grid-template-columns:42% 29% 29%; }
.dc {
  display:flex; flex-direction:column;
  border-right:1px solid var(--border); overflow:hidden;
  transition:background 0.3s;
  min-height:0;
  cursor:pointer;
  position:relative;
}
.dc:last-child { border-right:none; }
.dc:hover { background:var(--bg2); }
.dc .click-hint {
  position:absolute; bottom:2px; right:6px;
  font-size:10px;
  color:var(--sub);
  opacity:0;
  transition:opacity 0.3s, transform 0.2s;
  pointer-events:none;
  letter-spacing:0.5px;
  font-weight:600;
  text-transform:uppercase;
  font-family:'Inter',sans-serif;
  background:rgba(0,0,0,0.6);
  padding:3px 10px;
  border-radius:12px;
  transform:scale(0.9);
  white-space:nowrap;
  border:1px solid var(--border);
}
.dc:hover .click-hint {
  opacity:0.9;
  transform:scale(1);
}
body.dark .dc .click-hint {
  background:rgba(255,255,255,0.1);
}
.dc.no-history {
  cursor:default;
}
.dc.no-history .click-hint {
  display:none !important;
}
.dch {
  background:var(--hdr-bg); color:var(--hdr-txt);
  font-size:clamp(12px,1.8vw,22px); font-weight:700;
  text-align:center; padding:clamp(3px,0.5vh,7px) 3px;
  letter-spacing:0.5px; line-height:1.2; flex-shrink:0;
  text-transform:uppercase;
  font-family:'Inter',sans-serif;
}
.dcv {
  flex:1; display:flex; align-items:center; justify-content:center;
  font-size:clamp(24px,4.5vw,52px);
  font-weight:900;
  color:var(--val-white);
  font-family:'Inter',sans-serif;
  letter-spacing:-0.5px; min-height:0;
  transition: color 0.3s;
  gap:4px;
}
#footer {
  background:var(--top-bg); border-top:2px solid var(--hdr-bg);
  padding:2px clamp(6px,1.5vw,18px);
  padding-left:max(clamp(6px,1.5vw,18px), env(safe-area-inset-left));
  padding-right:max(clamp(6px,1.5vw,18px), env(safe-area-inset-right));
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; min-height:clamp(28px,4vh,40px);
  gap:10px;
}
#footer .dev {
  font-size:clamp(7px,0.7vw,10px);
  color:rgba(255,255,255,0.35);
  letter-spacing:0.3px;
  white-space:nowrap;
  font-family:'Inter',sans-serif;
  font-weight:500;
}
.dev-row {
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}
#Archive-btn {
  background:rgba(0,200,83,0.14);
  border:1px solid #00c853;
  color:#00e676;
  font-size:clamp(7px,0.8vw,10px);
  padding:2px 8px;
  border-radius:12px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-weight:700;
  transition: all 0.2s;
  white-space:nowrap;
  letter-spacing:0.3px;
}
#Archive-btn:hover {
  background:rgba(0,200,83,0.28);
}
#AW-btn {
  background:rgba(239,83,80,0.14);
  border:1px solid #ef5350;
  color:#ff8a80;
  font-size:clamp(7px,0.8vw,10px);
  padding:2px 8px;
  border-radius:12px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-weight:700;
  transition: all 0.2s;
  white-space:nowrap;
  letter-spacing:0.3px;
}
#AW-btn:hover {
  background:rgba(239,83,80,0.28);
}
#metar-container {
  flex:1;
  display:flex; align-items:center;
  justify-content:flex-end;
  min-width:0;
  padding:0 5px;
  gap:8px;
}
#metar-display {
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:clamp(12px,1.8vw,22px);
  color:#00e676;
  background:#0a1628;
  padding:2px 12px;
  border-radius:4px;
  border:1px solid rgba(0,230,118,0.35);
  letter-spacing:0.5px;
  white-space:nowrap;
  overflow-x:auto;
  max-width:100%;
  text-shadow: 0 0 10px rgba(0,230,118,0.5);
  box-shadow: 0 1px 6px rgba(0,0,0,0.35);
  transition: opacity 0.4s ease;
  opacity: 1;
}
#metar-display.fade { opacity:0.4; }
body.dark #metar-display {
  text-shadow: 0 0 10px rgba(0,200,118,0.5);
}
#metar-history-btn {
  background:rgba(0,200,83,0.14);
  border:1px solid #00c853;
  color:#00e676;
  font-size:clamp(7px,0.8vw,10px);
  padding:2px 8px;
  border-radius:12px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-weight:700;
  transition: all 0.2s;
  white-space:nowrap;
  letter-spacing:0.3px;
}
#metar-history-btn:hover {
  background:rgba(0,200,83,0.28);
}

.mode-pill {
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:8px; font-weight:700;
  padding:1px 5px; border-radius:8px;
  letter-spacing:0.3px; text-transform:uppercase;
  border:1px solid;
  transition: background 0.2s, color 0.2s;
}
.mode-pill.pill-inst  { background:rgba(0,229,255,0.12); color:#00e5ff; border-color:#00e5ff; }
.mode-pill.pill-1min  { background:rgba(100,181,246,0.12); color:#64b5f6; border-color:#64b5f6; }
.mode-pill.pill-2min  { background:rgba(129,212,250,0.12); color:#81d4fa; border-color:#81d4fa; }
.mode-pill.pill-10min { background:rgba(174,213,129,0.12); color:#aed581; border-color:#aed581; }
body.dark .mode-pill.pill-inst  { background:rgba(0,119,204,0.10); color:#0077cc; border-color:#0077cc; }
body.dark .mode-pill.pill-1min  { background:rgba(21,101,192,0.10); color:#1565c0; border-color:#1565c0; }
body.dark .mode-pill.pill-2min  { background:rgba(2,119,189,0.10); color:#0277bd; border-color:#0277bd; }
body.dark .mode-pill.pill-10min { background:rgba(85,139,47,0.10); color:#558b2f; border-color:#558b2f; }

.wcomp-badge {
  display:inline-flex; align-items:center;
  font-family:'Inter',sans-serif; font-weight:800;
  font-size:clamp(8px,1vw,13px);
  padding:1px 5px; border-radius:3px;
  margin-top:1px; letter-spacing:0.3px;
  border:1px solid transparent;
  transition: all 0.25s; white-space:nowrap;
}
.badge-headwind { background:rgba(0,230,118,0.15); color:#00e676; border-color:#00c853; }
.badge-tailwind { background:rgba(255,23,68,0.20); color:#ff1744; border-color:#b71c1c;
                  animation: tailwind-pulse 1.4s ease-in-out infinite; }
.badge-crossR   { background:rgba(255,152,0,0.15); color:#ffb74d; border-color:#e65100; }
.badge-crossL   { background:rgba(255,152,0,0.15); color:#ffb74d; border-color:#e65100; }
.badge-zero     { background:rgba(255,255,255,0.07); color:#78909c; border-color:#37474f; }
body.dark .badge-headwind { background:rgba(0,150,76,0.12); color:#00695c; border-color:#00695c; }
body.dark .badge-tailwind { background:rgba(183,28,28,0.12); color:#b71c1c; border-color:#b71c1c; }
body.dark .badge-crossR   { background:rgba(230,81,0,0.10);  color:#e65100; border-color:#e65100; }
body.dark .badge-crossL   { background:rgba(230,81,0,0.10);  color:#e65100; border-color:#e65100; }
body.dark .badge-zero     { background:rgba(0,0,0,0.05);     color:#546e7a; border-color:#90a4ae; }
@keyframes tailwind-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(255,23,68,0.5); }
  50%      { box-shadow:0 0 0 4px rgba(255,23,68,0); }
}

.dew-spread {
  font-size:clamp(9px,1vw,13px); font-family:'Inter',sans-serif;
  padding:2px 7px; border-radius:8px;
  letter-spacing:0.2px; font-weight:700;
  white-space:nowrap;
}
.vis-flag, .fog-flag {
  position:absolute; top:4px; right:6px;
  max-width:calc(100% - 14px);
  overflow:hidden; text-overflow:ellipsis;
  text-align:right;
  pointer-events:none;
  z-index:2;
  line-height:1.3;
}
.spread-fog    { color:#c62828; background:rgba(239,83,80,0.18); }
body.dark .spread-fog     { color:#ff5252; background:rgba(198,40,40,0.14); }
.spread-mist   { color:#e65100; background:rgba(255,152,0,0.16); }
body.dark .spread-mist   { color:#ffb74d; background:rgba(230,81,0,0.12); }
.spread-risk   { color:#a17900; background:rgba(255,179,0,0.16); }
body.dark .spread-risk   { color:#ffd54f; background:rgba(255,179,0,0.10); }

.qnh-trend {
  font-size:clamp(14px,1.8vw,22px); font-weight:900;
  transition: color 0.3s;
}
.trend-rise { color:#2e7d32; }
.trend-fall { color:#c62828; }
.trend-flat { color:#546e7a; opacity:0.6; }
.trend-pending { color:#90a4ae; opacity:0.5; }
body.dark .trend-rise { color:#69f0ae; }
body.dark .trend-fall { color:#ff5252; }
body.dark .trend-flat { color:#90caf9; opacity:0.6; }
body.dark .trend-pending { color:#546e7a; opacity:0.6; }

/* ── QNH SPARKLINE ── */
.qnh-spark-wrap {
  display:flex; align-items:center; gap:6px; justify-content:center;
  position:absolute;
  bottom:4px; left:50%;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:1;
}
.qnh-spark-canvas {
  display:block;
  border-radius:3px;
  opacity:0.85;
}

/* ── RVR TREND BADGE ── */
.rvr-trend-badge {
  font-size:clamp(8px,0.85vw,11px);
  font-family:'Inter',sans-serif;
  font-weight:700;
  padding:1px 6px;
  border-radius:8px;
  letter-spacing:0.3px;
  white-space:nowrap;
  border:1px solid;
  position:absolute;
  top:4px;
  left:6px;
  pointer-events:none;
}
.rvr-trend-impr { color:#00c853; border-color:#00c853; background:rgba(0,200,83,0.12); }
.rvr-trend-deter { color:#ff5252; border-color:#ff5252; background:rgba(255,82,82,0.14);
                   animation:rvr-pulse 1.6s ease-in-out infinite; }
.rvr-trend-stable { color:#78909c; border-color:#546e7a; background:rgba(84,110,122,0.10); }
body.dark .rvr-trend-impr { color:#00e676; border-color:#00e676; background:rgba(0,230,118,0.10); }
body.dark .rvr-trend-deter { color:#ff1744; border-color:#ff1744; background:rgba(255,23,68,0.12); }
@keyframes rvr-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(255,82,82,0.5); }
  50%      { box-shadow:0 0 0 3px rgba(255,82,82,0); }
}

/* ── AMBIENT WEATHER EFFECT (derived from current METAR/SPECI weather code) ──
   Sits above the dashboard content but stays fully non-interactive and low-
   opacity by design — it's atmospheric flavour only, never a substitute for
   the actual RVR/MOR/cloud-base numeric readouts, which are unaffected. */
#weatherFxCanvas {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  pointer-events:none; z-index:3;
  opacity:0; transition:opacity 1.6s ease;
}
#weatherFxCanvas.wfx-active { opacity:1; }

/* ── ALERT OVERLAY ── */
#alertOverlay {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  pointer-events:none; z-index:99998;
  display:none;
}
#alertOverlay.alert-active {
  display:block;
  animation:alertFlash 0.8s ease-in-out infinite alternate;
}
@keyframes alertFlash {
  from { border:0px solid transparent; }
  to   { border:6px solid rgba(255,23,68,0.75); box-shadow:inset 0 0 40px rgba(255,23,68,0.18); }
}
#alertBanner {
  position:fixed; top:50px; left:50%; transform:translateX(-50%);
  background:rgba(183,0,0,0.97);
  color:#fff; font-family:'Inter',sans-serif; font-weight:800;
  font-size:clamp(12px,1.4vw,17px);
  padding:8px 22px; border-radius:10px;
  box-shadow:0 4px 24px rgba(0,0,0,0.6);
  border:2px solid #ff5252;
  display:none; z-index:99999;
  pointer-events:none;
  white-space:nowrap;
  letter-spacing:0.4px;
  text-align:center;
  max-width:90vw;
}
#alertBanner.banner-active { display:block; }

/* ── PRINT SNAPSHOT MODAL ── */
#snapshotModal {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(5px);
  display:none; justify-content:center; align-items:center;
  z-index:9999; padding:16px;
}
#snapshotModal.active { display:flex; }
#snapshotBox {
  background:#0d1f35;
  border:2px solid #1e4a7a;
  border-radius:16px; padding:0; max-width:940px; width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,0.9); position:relative;
  max-height:94vh; overflow:hidden;
  display:flex; flex-direction:column;
}
#snap-header {
  background:linear-gradient(135deg,#0d47a1 0%,#1565c0 40%,#0277bd 100%);
  padding:14px 22px 12px;
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-shrink:0;
  border-bottom:2px solid rgba(0,229,255,0.3);
}
#snap-header-left { display:flex; flex-direction:column; gap:2px; }
#snap-header-left .snap-title {
  font-family:'Orbitron',sans-serif; color:#ffffff;
  font-size:clamp(13px,1.8vw,20px); font-weight:900; letter-spacing:1px;
}
#snap-header-left .snap-title span { color:#00e5ff; }
#snap-header-left .snap-subtitle {
  font-family:'Inter',sans-serif; color:rgba(255,255,255,0.65);
  font-size:clamp(9px,0.85vw,11px); letter-spacing:0.3px;
}
.snap-close {
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);
  color:#fff; font-size:18px; cursor:pointer; border-radius:6px;
  padding:2px 8px; line-height:1; transition:all 0.2s;
}
.snap-close:hover { background:rgba(255,255,255,0.25); }
#snapshotContent {
  overflow-y:auto; padding:16px 20px;
  font-family:'Inter',sans-serif;
  font-size:clamp(10px,1vw,13px);
  color:#e0e8f4;
  flex:1; min-height:0;
}
.snap-rwy-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:12px;
}
@media (max-width:580px) { .snap-rwy-grid { grid-template-columns:1fr; } }
.snap-panel {
  border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
}
.snap-panel-header {
  padding:6px 12px;
  font-family:'Orbitron',sans-serif;
  font-size:clamp(10px,1.1vw,13px); font-weight:700;
  letter-spacing:1px; color:#fff;
}
.snap-panel-header.rwy28 { background:linear-gradient(90deg,#1565c0,#0288d1); }
.snap-panel-header.rwy10 { background:linear-gradient(90deg,#00695c,#00897b); }
.snap-panel-body { background:rgba(255,255,255,0.04); padding:8px 10px; }
.snap-drow {
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.06);
}
.snap-drow:last-child { border-bottom:none; }
.snap-dlbl { color:#7aaccf; font-size:clamp(9px,0.85vw,11px); font-weight:500; }
.snap-dval { font-weight:800; font-size:clamp(10px,1vw,13px); color:#fff; }
.snap-dval.cyan  { color:#00e5ff; }
.snap-dval.green { color:#00e676; }
.snap-dval.red   { color:#ff5252; }
.snap-dval.amber { color:#ffb74d; }
.snap-dval.teal  { color:#80cbc4; }

/* ═══ CLOUD INFO MODAL — bigger fonts, glance-readable ═══ */
#cloudModal {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(5px);
  display:none; justify-content:center; align-items:center;
  z-index:9999; padding:16px;
}
#cloudModal.active { display:flex; }
#cloudBox {
  background:#0d1f35;
  border:2px solid #1e4a7a;
  border-radius:16px; padding:0; width:80vw; height:80vh; max-width:1200px;
  box-shadow:0 24px 80px rgba(0,0,0,0.9); position:relative;
  overflow:hidden;
  display:flex; flex-direction:column;
}
body:not(.dark) #cloudBox { background:#ffffff; border-color:#b0c4de; }
#cloud-header {
  background:linear-gradient(135deg,#37474f 0%,#546e7a 50%,#78909c 100%);
  padding:16px 22px 14px;
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-shrink:0;
  border-bottom:2px solid rgba(255,255,255,0.25);
}
#cloud-header-left { display:flex; flex-direction:column; gap:3px; }
.cloud-title {
  font-family:'Orbitron',sans-serif; color:#ffffff;
  font-size:clamp(16px,2.4vw,22px); font-weight:900; letter-spacing:0.5px;
}
.cloud-subtitle {
  font-family:'Inter',sans-serif; color:rgba(255,255,255,0.85);
  font-size:clamp(11px,1.1vw,14px); letter-spacing:0.3px;
}
.cloud-close {
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
  color:#fff; font-size:22px; cursor:pointer; border-radius:8px;
  padding:2px 10px; line-height:1; transition:all 0.2s;
}
.cloud-close:hover { background:rgba(255,255,255,0.3); }
#cloudContent {
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  font-family:'Inter',sans-serif;
  color:#e8eef4;
  overflow:hidden;
}
body:not(.dark) #cloudContent { color:#1a2a3a; }

/* ── Radar Outlook layout: 30% headline strip, 70% unified cell grid ── */
.ro-headline {
  flex: 0 0 30%;
  display:flex; align-items:center; gap:14px;
  padding:18px 24px;
  background:rgba(79,195,247,0.08);
  border-bottom:1px solid rgba(255,255,255,0.1);
  overflow-y:auto;
}
body:not(.dark) .ro-headline { background:rgba(79,195,247,0.06); border-bottom-color:rgba(0,0,0,0.08); }
.ro-headline-icon { font-size:clamp(28px,3.4vw,40px); flex-shrink:0; line-height:1.2; }
.ro-headline-text {
  font:600 clamp(14px,1.8vw,19px) 'Inter',sans-serif;
  color:#e8eef4; line-height:1.55;
}
body:not(.dark) .ro-headline-text { color:#1a2a3a; }

.ro-grid-wrap {
  flex:1; min-height:0;
  padding:16px 22px; overflow-y:auto;
}

.ro-section-hdr {
  font:800 clamp(11px,1.2vw,14px) 'Inter',sans-serif;
  color:#4fc3f7; letter-spacing:0.6px; text-transform:uppercase;
  margin-bottom:12px;
}

.ro-cell-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (max-width:700px) {
  .ro-cell-grid { grid-template-columns:1fr; }
}

.ro-cell-card {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:12px 15px;
}
body:not(.dark) .ro-cell-card { background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.1); }

.ro-cell-top {
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; margin-bottom:8px; flex-wrap:wrap;
}
.ro-cell-loc {
  font:700 clamp(12px,1.3vw,15px) 'Inter',sans-serif;
  color:#e8eef4;
}
body:not(.dark) .ro-cell-loc { color:#1a2a3a; }

.ro-cell-detail-row {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  font:600 clamp(11px,1.1vw,13px) 'Inter',sans-serif;
  color:#9fb8cc; padding:2px 0;
}
body:not(.dark) .ro-cell-detail-row { color:#5a7589; }
.ro-cell-detail-row b { color:#e8eef4; font-weight:800; }
body:not(.dark) .ro-cell-detail-row b { color:#1a2a3a; }

.ro-badge {
  display:inline-block; padding:2px 9px; border-radius:20px;
  font:800 clamp(10px,1vw,12px) 'Inter',sans-serif;
  letter-spacing:0.3px; white-space:nowrap;
}
.ro-badge.light { background:rgba(105,240,174,0.18); color:#69f0ae; }
.ro-badge.moderate { background:rgba(255,183,77,0.18); color:#ffb74d; }
.ro-badge.heavy { background:rgba(255,82,82,0.18); color:#ff5252; }
.ro-badge.none { background:rgba(255,255,255,0.1); color:#8fa8bd; }

.ro-empty {
  color:#8fa8bd; font:600 clamp(12px,1.3vw,14px) 'Inter',sans-serif;
  text-align:center; padding:24px 10px;
}

.ro-footer {
  flex-shrink:0; padding:8px 22px;
  border-top:1px solid rgba(255,255,255,0.08);
  font:600 10px 'Inter',sans-serif; color:#6d8aa3;
  text-align:center;
}
body:not(.dark) .ro-footer { border-top-color:rgba(0,0,0,0.08); }

/* ═══ LIVE RAIN RADAR MODAL — covers 80% of viewport, image cache-busted on every open ═══ */
#radarModal {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.8); backdrop-filter:blur(5px);
  display:none; justify-content:center; align-items:center;
  z-index:9999; padding:16px;
}
#radarModal.active { display:flex; }
#radarBox {
  background:#0d1f35; border:2px solid #1e4a7a; border-radius:16px;
  padding:0; width:80vw; height:80vh; max-width:1200px;
  box-shadow:0 24px 80px rgba(0,0,0,0.9); position:relative;
  display:flex; flex-direction:column; overflow:hidden;
}
body:not(.dark) #radarBox { background:#ffffff; border-color:#b0c4de; }
#radar-header {
  background:linear-gradient(135deg,#37474f 0%,#546e7a 50%,#78909c 100%);
  padding:14px 20px 12px;
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-shrink:0; border-bottom:2px solid rgba(255,255,255,0.25);
}
#radar-header-left { display:flex; flex-direction:column; gap:3px; }
.radar-title {
  font-family:'Orbitron',sans-serif; color:#ffffff;
  font-size:clamp(15px,2.2vw,20px); font-weight:900; letter-spacing:0.5px;
}
.radar-subtitle {
  font-family:'Inter',sans-serif; color:rgba(255,255,255,0.85);
  font-size:clamp(10px,1vw,13px); letter-spacing:0.3px;
}
.radar-close {
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
  color:#fff; font-size:22px; cursor:pointer; border-radius:8px;
  padding:2px 10px; line-height:1; transition:all 0.2s;
}
.radar-close:hover { background:rgba(255,255,255,0.3); }
#radarContent {
  flex:1; min-height:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:auto; background:#04090f;
}
body:not(.dark) #radarContent { background:#e8f0f8; }
#radarImg { max-width:100%; max-height:100%; object-fit:contain; display:none; }
.radar-status-msg {
  color:#8fa8bd; font-family:'Inter',sans-serif; font-size:14px;
  text-align:center; padding:30px;
}
.radar-error { color:#ff6b6b; }

.snap-station-bar {
  display:flex; gap:16px; flex-wrap:wrap;
  background:rgba(21,101,192,0.18); border:1px solid rgba(21,101,192,0.4);
  border-radius:8px; padding:8px 14px; margin-bottom:12px;
  align-items:center;
}
.snap-station-item { display:flex; flex-direction:column; gap:1px; }
.snap-station-lbl { color:#7aaccf; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.snap-station-val { color:#fff; font-weight:800; font-size:clamp(10px,1vw,13px); }
.snap-metar-box { border-radius:8px; overflow:hidden; margin-top:10px; }
.snap-metar-hdr {
  background:linear-gradient(90deg,#1b5e20,#2e7d32);
  padding:5px 12px;
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700;
  color:#fff; letter-spacing:0.5px;
}
.snap-metar-body {
  background:rgba(0,100,50,0.15); border:1px solid rgba(0,200,83,0.25);
  border-top:none; padding:10px 12px;
  font-family:'JetBrains Mono','Courier New',monospace;
  color:#00e676; font-size:clamp(11px,1.1vw,15px);
  word-break:break-all; letter-spacing:0.3px;
  border-radius:0 0 8px 8px;
}
.snap-divider { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:10px 0; }
#snap-actions {
  display:flex; gap:8px; padding:12px 20px;
  border-top:1px solid rgba(255,255,255,0.1);
  flex-shrink:0; flex-wrap:wrap;
  background:rgba(0,0,0,0.25);
}
.snap-btn {
  font-family:'Inter',sans-serif; font-size:clamp(9px,0.9vw,12px);
  font-weight:700; padding:6px 16px; border-radius:8px;
  cursor:pointer; transition:all 0.2s; border:1px solid;
  display:flex; align-items:center; gap:5px;
}
.snap-btn.btn-pdf {
  background:linear-gradient(135deg,#b71c1c,#c62828);
  color:#fff; border-color:#e53935;
}
.snap-btn.btn-pdf:hover { filter:brightness(1.15); }
.snap-btn.btn-pdf:disabled { opacity:0.6; cursor:wait; filter:none; }
.snap-btn.btn-print {
  background:linear-gradient(135deg,#0d47a1,#1565c0);
  color:#fff; border-color:#1976d2;
}
.snap-btn.btn-print:hover { filter:brightness(1.15); }
.snap-btn.btn-copy {
  background:rgba(255,255,255,0.07); color:#e0e8f4;
  border-color:rgba(255,255,255,0.2);
}
.snap-btn.btn-copy:hover { background:rgba(255,255,255,0.14); }
.snap-btn.btn-close {
  background:rgba(255,255,255,0.05); color:#7aaccf;
  border-color:rgba(255,255,255,0.12); margin-left:auto;
}
.snap-btn.btn-close:hover { background:rgba(255,255,255,0.10); color:#fff; }
/* ── 24H SUMMARY TABLES (print/PDF page) ── */
.snap-24h-section { margin-top:14px; }
.snap-24h-section:has(.wr-paper) { margin-top:0; }
.snap-24h-heading {
  font-family:'Orbitron',sans-serif; font-size:clamp(10px,1vw,12px); font-weight:700;
  color:#7aaccf; letter-spacing:0.6px; text-transform:uppercase;
  margin:10px 0 5px; padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,0.12);
}
.snap-24h-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:580px) { .snap-24h-grid { grid-template-columns:1fr; } }
.snap-24h-table {
  width:100%; border-collapse:collapse; font-size:clamp(8.5px,0.82vw,10.5px);
  border:1px solid rgba(255,255,255,0.12); border-radius:6px; overflow:hidden;
}
.snap-24h-table caption {
  font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:0.5px;
  font-size:clamp(9px,0.9vw,11px); color:#fff; text-align:left;
  padding:5px 8px; caption-side:top;
}
.snap-24h-table.rwy28 caption { background:linear-gradient(90deg,#1565c0,#0288d1); }
.snap-24h-table.rwy10 caption { background:linear-gradient(90deg,#00695c,#00897b); }
.snap-24h-table.common caption { background:linear-gradient(90deg,#4527a0,#5e35b1); }
.snap-24h-table td, .snap-24h-table th {
  padding:3px 7px; border-bottom:1px solid rgba(255,255,255,0.07); text-align:left;
}
.snap-24h-table tr:last-child td { border-bottom:none; }
.snap-24h-table td.s24-lbl { color:#7aaccf; font-weight:500; width:46%; }
.snap-24h-table td.s24-val { color:#fff; font-weight:800; }
.snap-24h-table td.s24-time { color:#80cbc4; font-weight:500; font-size:0.92em; white-space:nowrap; }
.snap-24h-table td.s24-val.red   { color:#ff5252; }
.snap-24h-table td.s24-val.amber { color:#ffb74d; }
.snap-24h-table td.s24-val.green { color:#00e676; }
.snap-24h-table td.s24-val.cyan  { color:#00e5ff; }
.s24-approx { font-size:0.85em; color:#ffb74d; font-weight:500; }
.snap-24h-note {
  font-size:clamp(8px,0.78vw,9.5px); color:#7aaccf; opacity:0.8;
  margin-top:4px; font-style:italic;
}
.snap-24h-loading {
  text-align:center; padding:14px; color:#7aaccf; font-size:11px;
  grid-column:1/-1;
}

/* ══════════════════════════════════════════
   PRINT - A4 PERFECT FIT (टॉप-टू-बॉटम)
   ══════════════════════════════════════════ */
@media print {
  /* पूरी स्क्रीन के बजाय केवल मॉडल दिखाएँ */
  body > *:not(#snapshotModal):not(#AWModal) { display:none !important; }
  #snapshotModal:not(.active) { display:none !important; }
  #AWModal:not(.active) { display:none !important; }
  #snapshotModal {
    position:static !important;
    display:block !important;
    padding:0 !important;
    background:none !important;
  }
  #snapshotBox {
    max-height:none !important;
    overflow:visible !important;
    background:#fff !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    display:block !important;
    width:100% !important;
  }
  /* पेज सेटअप (A4, मार्जिन 10mm) */
  @page {
    size: A4;
    margin: 5mm;
  }

  /* हेडर और बेसिक कलर */
  #snap-header {
    background:#1565c0 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    padding:6px 14px !important;
  }
  .snap-panel-header.rwy28 { background:#1565c0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .snap-panel-header.rwy10 { background:#00695c !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .snap-metar-hdr { background:#2e7d32 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #snapshotContent {
    color:#000 !important;
    overflow:visible !important;
    padding:6px 12px !important;
  }

  /* ── FONT SIZES टॉप-टू-बॉटम फिट के लिए ── */
  .snap-dlbl {
    font-size:12px !important;
    color:#444 !important;
  }
  .snap-dval,
  .snap-dval.cyan,
  .snap-dval.green,
  .snap-dval.amber,
  .snap-dval.teal {
    font-size:13px !important;
    color:#000 !important;
  }
  .snap-dval.red { color:#c62828 !important; font-size:13px !important; }

  .snap-panel-body {
    background:#f0f4f8 !important;
    padding:4px 8px !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .snap-station-bar {
    background:#e3f2fd !important;
    padding:6px 10px !important;
    margin-bottom:8px !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .snap-station-lbl {
    color:#555 !important;
    font-size:11px !important;
  }
  .snap-station-val {
    color:#000 !important;
    font-size:12px !important;
  }
  .snap-metar-body {
    color:#1b5e20 !important;
    background:#f1f8e9 !important;
    font-size:12px !important;
    padding:6px 10px !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* buttons hide */
  #snap-actions, .snap-close { display:none !important; }

  /* ── 24H SUMMARY TABLES - एकदम फिट ── */
  .snap-24h-section {
    margin-top:6px !important;
    page-break-inside:avoid;
  }
  .snap-24h-heading {
    font-size:11px !important;
    color:#333 !important;
    border-bottom:1px solid #ccc !important;
    margin:8px 0 4px !important;
  }
  .snap-24h-grid { gap:6px !important; }
  .snap-24h-table {
    font-size:9px !important;
    border:1px solid #bbb !important;
  }
  .snap-24h-table caption {
    font-size:10px !important;
    padding:3px 6px !important;
    color:#fff !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .snap-24h-table.rwy28 caption { background:#1565c0 !important; }
  .snap-24h-table.rwy10 caption { background:#00695c !important; }
  .snap-24h-table.common caption { background:#5e35b1 !important; }
  .snap-24h-table td, .snap-24h-table th {
    padding:2px 5px !important;
    border-bottom:1px solid #e0e0e0 !important;
  }
  .snap-24h-table td.s24-lbl { color:#444 !important; }
  .snap-24h-table td.s24-val { color:#000 !important; }
  .snap-24h-table td.s24-val.red   { color:#c62828 !important; }
  .snap-24h-table td.s24-val.amber { color:#a05a00 !important; }
  .snap-24h-table td.s24-val.green { color:#1b5e20 !important; }
  .snap-24h-table td.s24-val.cyan  { color:#01579b !important; }
  .snap-24h-table td.s24-time { color:#00695c !important; }
  .s24-approx { color:#a05a00 !important; }
  .snap-24h-note {
    font-size:9px !important;
    color:#666 !important;
  }
  .snap-24h-loading { display:none !important; }

  /* spacers and dividers ko compact karo */
  .snap-divider { margin:6px 0 !important; }
  .snap-rwy-grid { margin-bottom:6px !important; }
  .snap-metar-box { margin-top:6px !important; }
}

/* Note: the AW report is no longer printed from inside this modal.
   printAWReport() in app.js opens a completely standalone HTML document
   (matching aerodrome_warning_monitor.py's own generate_html_report
   output) in a new tab and prints that instead — it avoids fighting
   with this dashboard's flexbox/dark-theme CSS entirely. */

/* ── HISTORY MODAL (बाकी स्क्रीन स्टाइल) ── */
.modal-overlay {
  position:fixed; top:0; left:0;
  width:100vw; height:100vh;
  background:var(--modal-overlay);
  backdrop-filter:blur(4px);
  display:none;
  justify-content:center; align-items:center;
  z-index:9999;
  padding:20px;
  animation:modalFadeIn 0.25s ease-out;
}
.modal-overlay.active { display:flex; }
@keyframes modalFadeIn {
  0% { opacity:0; transform:scale(0.96); }
  100% { opacity:1; transform:scale(1); }
}
.modal-box {
  background:var(--modal-bg);
  border:2px solid var(--modal-border);
  border-radius:16px;
  width:100%; max-width:960px; max-height:92vh;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
  padding:20px 24px 24px;
  position:relative;
}
.modal-header {
  display:flex; justify-content:space-between; align-items:center;
  flex-shrink:0; padding-bottom:12px;
  border-bottom:2px solid var(--border);
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:8px;
}
.modal-header h2 {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(16px,2.2vw,28px);
  font-weight:700;
  color:var(--val-cyan);
  letter-spacing:0.5px;
}
.modal-header h2 small {
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:0.6em;
  color:var(--sub);
  margin-left:10px;
}
.modal-close {
  background:none; border:none;
  color:var(--val-white);
  font-size:28px; cursor:pointer;
  padding:0 8px;
  opacity:0.5; transition:opacity 0.2s;
  line-height:1;
}
.modal-close:hover { opacity:1; }
.modal-header-actions {
  display:flex; align-items:center; gap:6px;
  flex-shrink:0;
}
.modal-print {
  background:rgba(0,200,83,0.14);
  border:1px solid #00c853;
  color:#00e676;
  font-size:15px;
  cursor:pointer;
  padding:4px 9px;
  border-radius:8px;
  line-height:1;
  transition:all 0.2s;
}
.modal-print:hover { background:rgba(0,200,83,0.28); }
.modal-chart-wrap {
  flex:1; min-height:240px;
  position:relative;
}
.modal-chart-wrap canvas {
  width:100% !important;
  height:100% !important;
}
.modal-meta {
  display:flex; justify-content:space-between;
  flex-shrink:0; padding-top:12px;
  border-top:1px solid var(--border);
  margin-top:14px;
  font-size:clamp(10px,1vw,14px);
  color:var(--sub);
  font-family:'Inter',sans-serif;
  gap:12px; flex-wrap:wrap;
}
.modal-meta .stat {
  display:flex; gap:6px; align-items:center;
}
.modal-meta .stat span {
  font-weight:700;
  color:var(--val-white);
}
.modal-meta .stat .label {
  font-weight:400;
  color:var(--sub);
}
.meta-time {
  font-weight:500; font-size:0.82em;
  color:var(--sub); opacity:0.8;
  margin-left:2px;
}
.no-data-msg {
  display:flex; align-items:center; justify-content:center;
  height:100%;
  width:100%;
  font-size:clamp(20px,2.5vw,32px);
  color:var(--sub);
  font-family:'Inter',sans-serif;
  font-weight:600;
  letter-spacing:0.5px;
  text-align:center;
  padding:20px;
  position:absolute;
  top:0;
  left:0;
}
.loading-msg {
  display:flex; align-items:center; justify-content:center;
  height:100%;
  font-size:clamp(14px,1.8vw,20px);
  color:var(--sub);
  font-family:'Inter',sans-serif;
}
.spinner {
  display:inline-block;
  width:30px; height:30px;
  border:3px solid rgba(255,255,255,0.1);
  border-radius:50%;
  border-top-color:var(--val-cyan);
  animation:spin 0.8s ease-in-out infinite;
  margin-right:12px;
}
@keyframes spin { to { transform:rotate(360deg); } }

.range-buttons {
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}
.range-btn {
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  color:var(--sub);
  font-size:clamp(7px,0.8vw,11px);
  padding:2px 8px;
  border-radius:10px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-weight:600;
  transition: all 0.2s;
  white-space:nowrap;
}
.range-btn:hover {
  background:rgba(255,255,255,0.12);
  color:var(--val-cyan);
}
.range-btn.active {
  background:var(--hdr-bg);
  color:#fff;
  border-color:var(--hdr-bg);
}
body.dark .range-btn.active {
  background:var(--hdr-bg);
  color:#fff;
}

.modal-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap;
  margin-bottom:10px;
}
.tb-btn {
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  color:var(--sub);
  font-size:clamp(7px,0.8vw,11px);
  padding:3px 9px;
  border-radius:10px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-weight:600;
  transition: all 0.2s;
  white-space:nowrap;
}
.tb-btn:hover { background:rgba(255,255,255,0.12); color:var(--val-cyan); }
.tb-btn.live-on {
  background:rgba(0,200,120,0.18);
  border-color:#00cc66;
  color:#00e08a;
}
.tb-btn.live-off {
  background:rgba(255,255,255,0.05);
  color:var(--sub);
}
.tb-group { display:flex; gap:4px; flex-wrap:wrap; }
.data-gap-note {
  font-size:clamp(8px,0.85vw,11px);
  color:var(--sev-orange);
  margin-top:6px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  display:none;
}
.data-gap-note.show { display:block; }

/* METAR Popup */
.metar-popup-overlay {
  position:fixed; top:0; left:0;
  width:100vw; height:100vh;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(3px);
  display:none;
  justify-content:center; align-items:center;
  z-index:10000;
  padding:20px;
}
.metar-popup-overlay.active { display:flex; }
.metar-popup-box {
  background:var(--modal-bg);
  border:2px solid var(--modal-border);
  border-radius:16px;
  width:100%; max-width:800px; max-height:80vh;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
  padding:20px 24px;
}
.metar-popup-header {
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:12px;
  border-bottom:2px solid var(--border);
  margin-bottom:16px;
  flex-shrink:0;
  flex-wrap:wrap;
  gap:8px;
}
.metar-popup-header h3 {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(14px,1.8vw,22px);
  color:var(--val-cyan);
}
.metar-popup-close {
  background:none; border:none;
  color:var(--val-white);
  font-size:28px; cursor:pointer;
  opacity:0.5; transition:opacity 0.2s;
  line-height:1;
}
.metar-popup-close:hover { opacity:1; }
.metar-popup-body {
  flex:1; overflow-y:auto;
  padding:4px 0;
}
.metar-popup-body .metar-line {
  font-family:'Inter',sans-serif;
  font-size:clamp(12px,1.2vw,16px);
  padding:6px 10px;
  border-bottom:1px solid var(--border);
  color:var(--val-white);
  letter-spacing:0.3px;
  white-space:pre-wrap;
  word-break:break-all;
}
.metar-popup-body .metar-line:nth-child(odd) {
  background:rgba(255,255,255,0.03);
}
.metar-popup-body .no-data {
  padding:20px;
  text-align:center;
  color:var(--sub);
  font-size:clamp(14px,1.2vw,18px);
}
.metar-popup-body .loading-msg {
  height:auto; padding:20px;
}

/* AW (Aerodrome Warning) popup */
#AWModalBox {
  max-width: 640px;
  overflow: hidden;
}
#AWContent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.aw-report {
  border:1px solid var(--modal-border);
  border-radius:10px;
  overflow:hidden;
  background:var(--bg2);
}
.aw-header {
  background:var(--hdr2-bg); color:#ffffff;
  font-size:clamp(13px,1.7vw,19px); font-weight:800;
  text-transform:uppercase; letter-spacing:0.4px;
  text-align:center; padding:14px 16px;
  font-family:'Orbitron',sans-serif;
}
.aw-meta {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 16px; background:var(--bg3);
  border-bottom:1px solid var(--modal-border);
  font-size:clamp(11px,1.1vw,13px); font-weight:700; color:var(--val-cyan);
  font-family:'Inter',sans-serif;
}
.aw-table { width:100%; border-collapse:collapse; font-size:clamp(11px,1.1vw,13px); font-family:'Inter',sans-serif; }
.aw-table td { border:1px solid var(--modal-border); padding:9px 12px; vertical-align:middle; }
.aw-table .aw-label { font-weight:700; width:44%; background:var(--bg3); color:var(--val-cyan); }
.aw-table .aw-value { width:56%; background:var(--bg2); font-weight:700; color:var(--val-white); }
.aw-phenomenon .aw-value { color:var(--val-red); }
.aw-urgent .aw-label { background:var(--hdr2-bg); color:#ffffff; }
.aw-urgent .aw-value { color:var(--val-cyan); }
.aw-sign {
  text-align:right; font-size:clamp(10px,1vw,12px); font-weight:700; color:var(--sub);
  padding:10px 16px; border-top:1px solid var(--modal-border); font-family:'Inter',sans-serif;
}
.aw-footer {
  text-align:center; font-size:clamp(9px,0.9vw,11px); font-weight:700; color:var(--sub);
  padding:8px; letter-spacing:0.3px; font-family:'Inter',sans-serif;
}
.aw-empty, .aw-error {
  padding:26px; text-align:center; color:var(--sub);
  font-size:clamp(13px,1.2vw,16px); font-family:'Inter',sans-serif;
}
.aw-error { color:var(--val-red); }
.aw-freshness {
  text-align:center; font-size:clamp(9px,0.85vw,11px); font-weight:600;
  color:var(--sub); padding:8px 0 2px; font-family:'Inter',sans-serif;
}

/* Archive popup */
#ArchiveModalBox {
  overflow: hidden;
}
#ArchiveContent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.Archive-year-group { margin-bottom:16px; }
.Archive-year-label {
  font-size:clamp(12px,1.3vw,16px); font-weight:800;
  color:var(--val-cyan); margin-bottom:6px;
  border-bottom:1px solid var(--border); padding-bottom:4px;
  font-family:'Inter',sans-serif;
}
.Archive-row {
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
  padding:6px 9px; border-radius:6px;
  font-family:'Inter',sans-serif;
  font-size:clamp(14px,1vw,12px);
  margin-bottom:4px;
  background:rgba(255,255,255,0.03);
}
.Archive-row.highlight {
  background:rgba(0,230,118,0.16);
  border:1px solid rgba(0,230,118,0.55);
}
.Archive-time {
  flex-shrink:0; min-width:118px;
  color:var(--sub); font-weight:700;
}
.Archive-row.highlight .Archive-time { color:#00e676; }
.Archive-metar {
  flex:1; min-width:0;
  word-break:break-word;
  color:var(--val-white);
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:0.95em;
}
.Archive-empty {
  color:var(--sub); font-size:13px; padding:14px; text-align:center;
}

@media (max-width: 768px) and (orientation: portrait) {
  #main { grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
  .panel { border-right:none; border-bottom:2px solid var(--panel-border); }
  .panel:last-child { border-bottom:none; }
}
@media (max-width: 768px) {
  .brand { font-size:clamp(10px,3vw,16px); }
  #clock { font-size:clamp(10px,2.6vw,17px); }
  .wind-row { grid-template-columns:0.82fr 0.82fr minmax(70px,24vw); }
  .dch { font-size:clamp(10px,2.5vw,16px); }
  .dcv { font-size:clamp(20px,5vw,36px); }
  .wval { font-size:clamp(18px,5.5vw,36px); }
  #metar-display { font-size:clamp(10px,1.8vw,16px); }
  #footer { flex-wrap:wrap; justify-content:center; gap:4px; }
  .modal-box { padding:14px 16px 18px; max-height:96vh; }
  .modal-chart-wrap { min-height:180px; }
  .dc .click-hint, .wbox .click-hint {
    font-size:8px;
    padding:2px 8px;
  }
  .no-data-msg { font-size:clamp(18px,3vw,24px); }
  .range-buttons { gap:3px; }
  .range-btn { font-size:6px; padding:1px 6px; }
  .metar-popup-box { padding:14px 16px; }
}
@media (max-width: 480px) {
  .wind-row { grid-template-columns:0.82fr 0.82fr minmax(55px,26vw); }
  .dch { font-size:clamp(8px,2.2vw,12px); padding:2px; }
  .dcv { font-size:clamp(18px,5vw,30px); }
  .wval { font-size:clamp(16px,5vw,30px); }
  .rl { font-size:clamp(8px,1.6vw,12px); }
  .rv { font-size:clamp(12px,3vw,20px); }
  .rwy-sel { font-size:8px; max-width:60px; padding:1px 3px; }
  .rwy-num { font-size:11px; min-width:28px; padding:1px 4px; }
  .stn-lbl { font-size:7px; }
  #status { font-size:7px; padding:1px 4px; }
  .icon-btn { font-size:10px; padding:1px 5px; }
  .top-btns { gap:4px; }
  .wcomp-badge { font-size:7px; padding:0 3px; }
  .mode-pill { font-size:7px; padding:1px 4px; }
  .wlbl { font-size:9px; }
  #metar-display { font-size:clamp(8px,1.5vw,12px); padding:1px 8px; }
  #metar-history-btn { font-size:6px; padding:1px 5px; }
  #footer .dev { font-size:6px; }
  .modal-box { padding:10px 12px 14px; }
  .modal-chart-wrap { min-height:140px; }
  .modal-header h2 { font-size:14px; }
  .dc .click-hint, .wbox .click-hint {
    font-size:7px;
    padding:2px 6px;
    bottom:1px;
    right:4px;
  }
  .no-data-msg { font-size:clamp(16px,2.5vw,20px); }
  .range-buttons { gap:2px; }
  .range-btn { font-size:5px; padding:1px 4px; }
  .modal-header { flex-direction:column; align-items:stretch; }
  .modal-header h2 small { display:block; margin-left:0; }
  .metar-popup-box { padding:10px 12px; }
  .metar-popup-body .metar-line { font-size:10px; padding:4px 6px; }
}
@media (max-width: 360px) {
  .wind-row { grid-template-columns:0.82fr 0.82fr minmax(48px,28vw); }
  .wval { font-size:14px; }
  .dcv { font-size:14px; }
  .dch { font-size:7px; }
  .rwy-sel { max-width:50px; font-size:6px; }
  #metar-display { font-size:7px; padding:1px 4px; }
}
@media (orientation: landscape) and (max-height:500px) {
  .wlbl { font-size:clamp(8px,2.6vh,13px); line-height:1.15; }
  .wsub { font-size:clamp(6px,1.5vh,10px); }
  .wval { font-size:clamp(14px,6.5vh,28px); }
  .wbox { padding:1px 4px; }
  .rl { font-size:clamp(7px,1.8vh,11px); }
  .rv { font-size:clamp(11px,3.2vh,20px); }
  .dch { font-size:clamp(7px,2vh,13px); padding:2px 3px; }
  .dcv { font-size:clamp(14px,5.5vh,26px); }
  #metar-display { font-size:clamp(10px,1.5vw,16px); }
  .modal-chart-wrap { min-height:120px; }
}


/* ═══ FLIGHT INFO MODAL ═══ */
#flightModal {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(5px);
  display:none; justify-content:center; align-items:center;
  z-index:9999; padding:16px;
}
#flightModal.active { display:flex; }
#flightBox {
  background:#0d1f35; border:2px solid #1e4a7a; border-radius:16px;
  padding:0; width:88vw; height:84vh; max-width:1100px;
  box-shadow:0 24px 80px rgba(0,0,0,0.9); position:relative;
  overflow:hidden; display:flex; flex-direction:column;
}
body:not(.dark) #flightBox { background:#ffffff; border-color:#b0c4de; }
#flight-header {
  background:linear-gradient(135deg,#0d47a1 0%,#1565c0 50%,#0288d1 100%);
  padding:14px 20px 12px;
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-shrink:0; border-bottom:2px solid rgba(0,229,255,0.3);
}
#flight-header-left { display:flex; flex-direction:column; gap:3px; min-width:0; }
.flight-title {
  font-family:'Orbitron',sans-serif; color:#ffffff;
  font-size:clamp(15px,2vw,20px); font-weight:900; letter-spacing:0.5px;
}
.flight-subtitle {
  font-family:'Inter',sans-serif; color:rgba(255,255,255,0.9);
  font-size:clamp(11px,1.15vw,15px); font-weight:700; letter-spacing:0.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.flight-close {
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
  color:#fff; font-size:22px; cursor:pointer; border-radius:8px;
  padding:2px 10px; line-height:1; transition:all 0.2s; flex-shrink:0;
}
.flight-close:hover { background:rgba(255,255,255,0.3); }
#flightContent {
  flex:1; min-height:0; overflow-y:auto;
  padding:16px 20px;
  font-family:'Inter',sans-serif; color:#e8eef4;
}
body:not(.dark) #flightContent { color:#1a2a3a; }
.fl-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.fl-hero-card {
  border-radius:12px; padding:14px 16px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);
}
body:not(.dark) .fl-hero-card { background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.1); }
.fl-hero-card.arr { border-left:4px solid #00e676; }
.fl-hero-card.dep { border-left:4px solid #ffb74d; }
.fl-hero-lbl {
  font:800 clamp(10px,1.1vw,13px) 'Inter',sans-serif;
  letter-spacing:0.6px; color:#7aaccf; text-transform:uppercase; margin-bottom:6px;
}
.fl-hero-flight { font:900 clamp(18px,2.4vw,28px) 'Orbitron',sans-serif; color:#00e5ff; }
.fl-hero-loc { font:600 clamp(11px,1.2vw,14px) 'Inter',sans-serif; color:#9fb8cc; margin-top:2px; }
body:not(.dark) .fl-hero-loc { color:#5a7589; }
.fl-hero-time { display:flex; align-items:baseline; gap:10px; margin-top:8px; flex-wrap:wrap; }
.fl-time-primary { font:800 clamp(16px,2vw,22px) 'Inter',sans-serif; color:#fff; }
body:not(.dark) .fl-time-primary { color:#1a2a3a; }
.fl-time-sched { font:600 11px 'Inter',sans-serif; color:#7aaccf; margin-left:6px; }
.fl-hero-countdown { font:700 clamp(11px,1.1vw,13px) 'Inter',sans-serif; color:#69f0ae; }
.fl-hero-meta { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.fl-hero-gate { font:600 clamp(10px,1vw,12px) 'Inter',sans-serif; color:#7aaccf; }
.fl-hero-empty { color:#7aaccf; font-size:13px; padding:10px 0; }
.fl-stale-note {
  font:700 clamp(9px,0.9vw,11px) 'Inter',sans-serif;
  color:#ffb74d; background:rgba(255,183,77,0.12);
  border:1px solid rgba(255,183,77,0.3); border-radius:8px;
  padding:5px 10px; margin-bottom:12px;
}
.fl-lists-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fl-list-col { min-width:0; }
.fl-list-hdr {
  font:800 clamp(11px,1.15vw,13px) 'Inter',sans-serif;
  letter-spacing:0.4px; text-transform:uppercase;
  padding:6px 10px; border-radius:8px 8px 0 0; color:#fff;
}
.fl-list-hdr.arr { background:linear-gradient(90deg,#00695c,#00897b); }
.fl-list-hdr.dep { background:linear-gradient(90deg,#e65100,#ef6c00); }
.fl-row {
  display:grid; grid-template-columns:auto 1fr auto auto auto;
  align-items:center; gap:8px;
  padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.08);
}
body:not(.dark) .fl-row { border-bottom-color:rgba(0,0,0,0.08); }
.fl-row:nth-child(even) { background:rgba(255,255,255,0.03); }
.fl-row-time { display:flex; flex-direction:column; align-items:flex-start; min-width:52px; }
.fl-row-flight { font:800 clamp(11px,1.1vw,13px) 'Inter',sans-serif; color:#00e5ff; }
.fl-row-loc { font:600 clamp(10px,1vw,12px) 'Inter',sans-serif; color:#9fb8cc; }
body:not(.dark) .fl-row-loc { color:#5a7589; }
.fl-row-gate { font:600 clamp(9px,0.9vw,11px) 'Inter',sans-serif; color:#7aaccf; white-space:nowrap; }
.fl-row-countdown { font:700 clamp(9px,0.9vw,11px) 'Inter',sans-serif; color:#69f0ae; white-space:nowrap; }
.fl-badge {
  display:inline-block; padding:2px 8px; border-radius:20px;
  font:800 clamp(9px,0.85vw,10.5px) 'Inter',sans-serif;
  letter-spacing:0.3px; white-space:nowrap;
}
.fl-badge-board  { background:rgba(0,230,118,0.18); color:#00e676; }
.fl-badge-fcl    { background:rgba(255,82,82,0.18); color:#ff5252; }
.fl-badge-delay  { background:rgba(255,183,77,0.18); color:#ffb74d; }
.fl-badge-cancel { background:rgba(255,23,68,0.22); color:#ff1744; }
.fl-badge-done   { background:rgba(100,181,246,0.18); color:#64b5f6; }
.fl-badge-none   { background:rgba(255,255,255,0.1); color:#8fa8bd; }
.fl-empty {
  color:#8fa8bd; font:600 clamp(12px,1.2vw,14px) 'Inter',sans-serif;
  text-align:center; padding:20px 10px;
}
.fl-footer {
  margin-top:14px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.08);
  font:600 10px 'Inter',sans-serif; color:#6d8aa3; text-align:center;
}
body:not(.dark) .fl-footer { border-top-color:rgba(0,0,0,0.08); }
@media (max-width:640px) {
  #flightModal { padding:8px; align-items:stretch; }
  #flightBox { width:100%; height:100%; max-width:none; border-radius:12px; }
  #flightContent { padding:10px 12px; }
  .fl-hero-grid, .fl-lists-grid { grid-template-columns:1fr; gap:10px; }
  .fl-row { grid-template-columns:auto 1fr; gap:4px 8px; }
  .fl-row-gate, .fl-row-badge, .fl-row-countdown { grid-column:auto; }
  .fl-row-badge { justify-self:start; }
  .fl-row-countdown { justify-self:end; }
}

/* UTC companion values for flight timings */
.fl-utc-time {
  font-size: 0.72em;
  font-weight: 700;
  color: #7fb8d8;
  white-space: nowrap;
  margin-left: 3px;
}
.fl-footer-utc { color: #7fb8d8; font-weight: 700; }
body:not(.dark) .fl-utc-time,
body:not(.dark) .fl-footer-utc { color: #4b718a; }


/* ══════════════ SETTINGS POPUP ══════════════ */
#settings-btn.custom { position:relative; }
#settings-btn.custom::after {
  content:''; position:absolute; top:-3px; right:-3px; width:8px; height:8px;
  border-radius:50%; background:#ffb300; box-shadow:0 0 6px #ffb300;
}
.set-box { max-width:520px; padding:16px 18px 18px; }
.set-body { overflow-y:auto; padding-right:2px; }
.set-sec {
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:11px; letter-spacing:1.5px;
  padding:6px 10px; margin:14px 0 6px; border-left:4px solid; border-radius:4px;
}
.set-sec:first-child { margin-top:0; }
.sec-disp  { color:#00b0ff; border-color:#00b0ff; background:rgba(0,176,255,0.10); }
.sec-alert { color:#ffb300; border-color:#ffb300; background:rgba(255,179,0,0.10); }
.sec-lim   { color:#ff5252; border-color:#ff5252; background:rgba(255,82,82,0.10); }
.sec-about { color:#00e676; border-color:#00e676; background:rgba(0,230,118,0.10); }
.set-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px; border-bottom:1px solid var(--border);
}
.set-txt b { display:block; font-family:'Inter',sans-serif; font-weight:700; font-size:14px; color:var(--val-white); }
.set-txt small { display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:11px; color:var(--sub); margin-top:1px; }
.sw { position:relative; width:44px; height:24px; flex-shrink:0; }
.sw input { opacity:0; width:0; height:0; }
.sw span { position:absolute; inset:0; background:#546e7a; border-radius:24px; cursor:pointer; transition:background 0.2s; }
.sw span::before {
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform 0.2s;
}
.sw input:checked + span { background:#00c853; }
.sw input:checked + span::before { transform:translateX(20px); }
.num-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.num-wrap em { font-style:normal; font-family:'Inter',sans-serif; font-weight:600; font-size:12px; color:var(--sub); width:18px; }
.set-num {
  width:78px; padding:5px 8px; text-align:right;
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  background:rgba(127,127,127,0.12); color:var(--val-white);
  border:1.5px solid var(--modal-border); border-radius:6px;
}
.set-num:focus { outline:none; border-color:#00b0ff; }
.set-num.modified { border-color:#ffb300; color:#ffb300; }
.set-status { font-family:'Inter',sans-serif; font-weight:600; font-size:11px; padding:4px 10px; }
.st-ok { color:#00e676; } .st-warn { color:#ffb300; } .st-bad { color:#ff5252; } .st-off { color:var(--sub); }
.set-custom {
  display:none; margin:8px 10px 0; padding:6px 10px; border-radius:6px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:11px;
  color:#ffb300; background:rgba(255,179,0,0.12); border:1px solid #ffb300;
}
.set-actions { display:flex; flex-wrap:wrap; gap:8px; padding:10px 10px 0; }
.set-btn {
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; cursor:pointer;
  padding:7px 12px; border-radius:8px; border:1px solid; background:transparent;
}
.b-test     { color:#00b0ff; border-color:#00b0ff; background:rgba(0,176,255,0.10); }
.b-reset    { color:#ffb300; border-color:#ffb300; background:rgba(255,179,0,0.10); }
.b-resetall { color:#ff5252; border-color:#ff5252; background:rgba(255,82,82,0.10); }
.set-btn:hover { filter:brightness(1.25); }
.set-about {
  font-family:'Inter',sans-serif; font-weight:500; font-size:12px; line-height:1.5;
  color:var(--val-white); padding:8px 10px;
}
.ab-warn { font-family:'Orbitron',sans-serif; font-weight:700; font-size:12px; color:#ffb300; margin-bottom:4px; letter-spacing:1px; }
.ab-meta { margin-top:8px; font-size:10px; color:var(--sub); }

/* Fonts: fixed-width digits so live values don't jitter on update */
.wval, .dcv, .rv, #clock, .stat span, .set-num { font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

@media print { #settingsModal { display:none !important; } }


/* ══════════════ SETTINGS POPUP: horizontal layout (matches Flight popup) ══════════════ */
#settingsModal {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(5px);
  display:none; justify-content:center; align-items:center;
  z-index:9999; padding:16px;
}
#settingsModal.active { display:flex; }
#settingsBox {
  background:#0d1f35; border:2px solid #1e4a7a; border-radius:16px;
  width:88vw; max-width:1100px; max-height:84vh;
  box-shadow:0 24px 80px rgba(0,0,0,0.9); position:relative;
  overflow:hidden; display:flex; flex-direction:column;
}
body:not(.dark) #settingsBox { background:#ffffff; border-color:#b0c4de; }
#settings-header {
  background:linear-gradient(135deg,#0d47a1 0%,#1565c0 50%,#0288d1 100%);
  padding:14px 20px 12px; display:flex; justify-content:space-between; align-items:flex-start;
  flex-shrink:0; border-bottom:2px solid rgba(0,229,255,0.3);
}
.set-hdr-left { display:flex; flex-direction:column; gap:3px; min-width:0; }
.set-title { font-family:'Orbitron',sans-serif; color:#fff; font-size:clamp(15px,2vw,20px); font-weight:900; letter-spacing:0.5px; }
.set-subtitle { font-family:'Inter',sans-serif; color:rgba(255,255,255,0.9); font-size:clamp(11px,1.15vw,15px); font-weight:700; }
.set-close {
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
  color:#fff; font-size:22px; cursor:pointer; border-radius:8px;
  padding:2px 10px; line-height:1; transition:all 0.2s; flex-shrink:0;
}
.set-close:hover { background:rgba(255,255,255,0.3); }
#settingsContent { flex:1; min-height:0; overflow-y:auto; padding:16px 20px; font-family:'Inter',sans-serif; }
.set-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.set-card {
  border:1px solid var(--modal-border); border-radius:12px; padding:10px;
  background:rgba(127,127,127,0.06); display:flex; flex-direction:column; min-width:0;
}
.set-card-wide { grid-column:1 / -1; }
.set-card .set-sec { margin:0 0 6px; }
.set-card .set-row:last-of-type { border-bottom:none; }
.set-footer { display:flex; justify-content:flex-end; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
@media (max-width:900px) { .set-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) {
  #settingsModal { padding:8px; align-items:stretch; }
  #settingsBox { width:100%; max-height:none; height:100%; max-width:none; border-radius:12px; }
  #settingsContent { padding:10px 12px; }
  .set-grid { grid-template-columns:1fr; gap:10px; }
}

#snapshotContent:has(.wr-paper) { padding:8px 8px; }

/* ══════════════════════════════════════════
   VOGA WEATHER REPORT (24h · 4 × 6-hour blocks)
   ══════════════════════════════════════════ */
.wr-paper {
  background:#fff; color:#1d2433; border-radius:8px; overflow:hidden;
  font-family:'Inter',Arial,sans-serif; font-size:11px; line-height:1.25;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.wr-paper * { box-sizing:border-box; }
.wr-head {
  background:#0b2545; color:#fff; padding:10px 12px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.wr-title { font-family:'Orbitron',sans-serif; font-size:19px; font-weight:900; letter-spacing:1px; }
.wr-sub   { color:#c9d6ea; font-size:11px; margin-top:3px; }
.wr-headr { text-align:right; }
.wr-gen   { font-weight:800; font-size:12.5px; }
.wr-gen span { font-weight:500; color:#c9d6ea; }
.wr-per   { color:#c9d6ea; font-size:11px; margin-top:3px; }
.wr-overview { padding:8px 8px 2px; }
.wr-legend { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:4px; color:#7c869a; font-size:9.5px; }
.wr-legend i, .wr-lgd i { display:inline-block; width:9px; height:9px; margin-right:5px; vertical-align:-1px; border-radius:1px; }
.wr-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px 8px 8px; }
@media (max-width:640px) { .wr-grid { grid-template-columns:1fr; } }

.wr-block { border:1.6px solid #2e9e5b; border-radius:8px; overflow:hidden; background:#fff; }
.wr-block.wr-sev1 { border-color:#e59a00; }
.wr-block.wr-sev2 { border-color:#d64045; }
.wr-bhead { background:#2e9e5b; color:#fff; padding:7px 12px; display:flex; justify-content:space-between; align-items:center; }
.wr-sev1 .wr-bhead { background:#e59a00; }
.wr-sev2 .wr-bhead { background:#d64045; }
.wr-btime b { display:block; font-size:16px; font-weight:800; letter-spacing:.3px; }
.wr-btime small { display:block; font-size:9px; opacity:.92; margin-top:1px; }
.wr-sevchip { background:#fff; color:#2e9e5b; font-weight:800; font-size:11px; padding:4px 14px; border-radius:6px; }
.wr-sev1 .wr-sevchip { color:#c27d00; }
.wr-sev2 .wr-sevchip { color:#d64045; }

.wr-wxline { display:flex; align-items:center; gap:8px; background:#f4f6fa; margin:6px 6px 0; padding:4px 8px; border-radius:3px; min-height:24px; }
.wr-wxlbl { font-weight:800; color:#7c869a; font-size:9.5px; }
.wr-chips { display:flex; flex-wrap:wrap; gap:4px; flex:1; }
.wr-chip-wx { color:#fff; font-weight:800; font-size:9px; padding:2px 8px; border-radius:8px; white-space:nowrap; }
.wr-nil { font-size:10px; color:#1d2433; }
.wr-cnt { color:#7c869a; font-size:9px; white-space:nowrap; }

.wr-lgd { display:flex; justify-content:flex-end; gap:6px; padding:5px 12px 0; font-size:9.5px; color:#1d2433; }
.wr-lgd i { width:14px; height:3px; margin:0 4px 0 6px; vertical-align:middle; }
.wr-graphs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 6px; }
.wr-gt { font-weight:800; font-size:9.5px; color:#0b2545; padding:2px 2px 0 4px; }

.wr-t { width:calc(100% - 12px); margin:6px 6px 0; border-collapse:collapse; table-layout:fixed; border:1px solid #cfd6e2; }
.wr-t2 { margin-bottom:8px; }
.wr-t th, .wr-t td { border:1px solid #e1e6ef; }               /* light grid lines */
.wr-t th { font-size:9px; font-weight:800; text-align:center; padding:4px 2px; color:#fff; background:#0b2545; border-color:rgba(255,255,255,.28); }
.wr-t th.wr-th0, .wr-t th.wr-thA { text-align:left; padding-left:6px; width:31%; }
.wr-t th.wr-th28 { background:#1f6fb2; }
.wr-t th.wr-th10 { background:#7b4fb0; }
.wr-t th.wr-thA  { background:#00796b; }
.wr-t2 th { background:#00796b; }
.wr-t tr.wr-sh th { background:#e6ebf3; color:#7c869a; font-size:8.5px; padding:2px; border-color:#d3dae6; }
.wr-t td { padding:4px 2px; text-align:center; }
.wr-t tbody tr:nth-child(odd) td { background:#f6f8fb; }
.wr-t td.wr-l { text-align:left; padding-left:6px; font-size:9.5px; color:#1d2433; }
.wr-t td.wr-v { font-weight:800; font-size:11.5px; color:#1d2433; }
.wr-t td.wr-v.wr-subtxt { font-weight:600; font-size:9.5px; color:#7c869a; }
.wr-t td.wr-red { color:#d64045; }
.wr-t td.wr-amb { color:#d98a00; }
/* strong divider between RWY 28 and RWY 10 columns (runway table only) */
.wr-t:not(.wr-t2) tbody td:nth-child(5),
.wr-t:not(.wr-t2) tr.wr-sh th:nth-child(5) { border-left:2.5px solid #4a5568; }
.wr-t:not(.wr-t2) thead tr:first-child th:nth-child(3) { border-left:2.5px solid #4a5568; }

.wr-foot { border-top:1px solid #e6eaf1; padding:6px 10px 8px; color:#5b6579; font-size:9px; }
.wr-foot-h { font-weight:800; color:#0b2545; font-size:9.5px; letter-spacing:.4px; margin-bottom:3px; }
.wr-foot ul { margin:0; padding-left:14px; }
.wr-foot li { margin:2px 0; }
.wr-foot-warn { color:#d64045; font-weight:700; margin-bottom:3px; }

@media print {
  html, body { background:#fff !important; }
  #snap-header { display:none !important; }
  .wr-paper { width:1000px; zoom:.755; border-radius:0; }
  .wr-block { break-inside:avoid; page-break-inside:avoid; }
  .wr-paper, .wr-paper * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #snapshotContent { padding:0 !important; }
  .snap-24h-section { margin-top:0 !important; }
}

/* report period picker (screen only) */
#snap-period-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 20px; flex-shrink:0;
  background:rgba(0,0,0,0.18); border-bottom:1px solid rgba(255,255,255,0.08);
  font-family:'Inter',sans-serif; font-size:11px; color:#a9bdd6;
}
.wr-pb-lbl { font-weight:700; letter-spacing:.4px; text-transform:uppercase; font-size:10px; color:#7aaccf; }
.wr-pb-btn {
  font-family:inherit; font-size:11px; font-weight:700; padding:5px 12px; border-radius:7px; cursor:pointer;
  background:transparent; color:#cfe0f5; border:1px solid rgba(255,255,255,0.22);
}
.wr-pb-btn.active { background:#1f6fb2; border-color:#1f6fb2; color:#fff; }
.wr-pb-date { display:flex; align-items:center; gap:6px; }
.wr-pb-date input {
  font-family:inherit; font-size:11px; padding:4px 6px; border-radius:6px;
  background:#0d1f35; color:#e8f1fc; border:1px solid rgba(255,255,255,0.25); color-scheme:dark;
}
.wr-pb-hint { font-size:10px; color:#7f93ad; }
.wr-pb-hint.wr-hint-warn { color:#ffb454; }
.wr-future { border-color:#c8cfdb; }
.wr-future .wr-bhead { background:#9aa5b8; }
.wr-future .wr-sevchip { color:#7c869a; }
.wr-futurebody { padding:40px 12px; text-align:center; color:#7c869a; font-size:11px; }
@media print { #snap-period-bar { display:none !important; } }

/* ═══════════ AWOS MULTI-STATION (station-manager.js) ═══════════ */
/* admin theme tokens (follow body.dark, same switch as the full dashboard) */
:root{--sm-bg:#eef3f9;--sm-fg:#10243a;--sm-card:#ffffff;--sm-line:#b8cfe0;--sm-line2:#d3e1ee;--sm-input:#f4f8fc;--sm-muted:#5b7690;--sm-accent:#0077cc;--sm-pri:#1565c0;--sm-pri-fg:#ffffff;
  --g-bg:#ffffff;--g-cell:#ffffff;--g-val:#0f1f33;--g-sel:#f4f8fc}
body.dark{--sm-bg:#04090f;--sm-fg:#e6f1ff;--sm-card:#0b1a2b;--sm-line:#1d4f7a;--sm-line2:#12304a;--sm-input:#04090f;--sm-muted:#8aa4c0;--sm-accent:#00e5ff;--sm-pri:#0a5c8a;--sm-pri-fg:#e6f1ff;
  --g-bg:#07111c;--g-cell:#04090f;--g-val:#ffffff;--g-sel:#0b1a2b}
.sm-view{flex:1 1 auto;min-height:0;width:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;padding:2vh 2vw;background:var(--sm-bg);color:var(--sm-fg);font-family:Inter,system-ui,sans-serif}
.sm-view[hidden],#dashRoot[hidden]{display:none!important}
.sm-view.sm-top{justify-content:flex-start;align-items:stretch}
.sm-view h1{font-family:Orbitron,Inter,sans-serif;font-size:clamp(28px,4vw,72px);margin:0}.sm-view h1 span{color:var(--sm-accent)}
.sm-sub,.muted{color:var(--sm-muted)}.muted{font-size:clamp(11px,.9vw,18px)}
.sm-choices{display:flex;gap:2vw;flex-wrap:wrap;justify-content:center}
.sm-big{font-size:clamp(16px,1.8vw,36px);padding:2.2vh 3vw;border-radius:14px;border:1px solid var(--sm-line);background:var(--sm-card);color:var(--sm-fg);cursor:pointer}
.sm-big:hover{border-color:var(--sm-accent)}
.sm-card{width:min(92vw,520px);background:var(--sm-card);border:1px solid var(--sm-line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px}
.sm-card input,.sm-card select,.sm-pw input{padding:10px;border-radius:8px;border:1px solid var(--sm-line);background:var(--sm-input);color:var(--sm-fg);font-size:16px}
.sm-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.sm-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--sm-line);background:var(--sm-card);color:var(--sm-fg);cursor:pointer;font-size:clamp(12px,1vw,18px)}
.sm-btn.pri{background:var(--sm-pri);border-color:var(--sm-accent);color:var(--sm-pri-fg)}.sm-btn:disabled{opacity:.4;cursor:not-allowed}
.sm-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.sm-bar>div{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.sm-bar button[hidden]{display:none}.sm-bar h2{margin:0}
.bad{color:#e53935}.ok{color:#00a152}body.dark .bad{color:#ff5a5a}body.dark .ok{color:#00e676}#admin-msg{min-height:1.4em}
.sm-scroll{overflow:auto;max-height:70vh}
.sm-table{width:100%;border-collapse:collapse;font-size:clamp(12px,1vw,18px)}
.sm-table th,.sm-table td{padding:6px 10px;border-bottom:1px solid var(--sm-line2);text-align:left}
.sm-table input[type=checkbox]{width:18px;height:18px}
.sm-pw{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.st-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.8em;font-weight:700;border:1px solid}
.st-LIVE{color:#00a152;border-color:#00a152}body.dark .st-LIVE{color:#00e676;border-color:#00e676}.st-STALE{color:#ffb300;border-color:#ffb300}
.st-OFFLINE{color:#ff5a5a;border-color:#ff5a5a}.st-ERROR{color:#ff8a65;border-color:#ff8a65}
.st-LOADING,.st-CHECKING{color:#8aa4c0;border-color:#8aa4c0}
/* balanced grid: each row is its own flex line, centered; widths set per row column count */
#grid-host{--gap:1vw;display:flex;flex-direction:column;gap:var(--gap);flex:1}
.grid-row{display:flex;justify-content:center;gap:var(--gap);flex:1;min-height:0}
.tile{background:#0b1a2b;border:2px solid #1d4f7a;border-radius:12px;padding:.8vw;display:flex;flex-direction:column;gap:.4vw;min-width:0;overflow:hidden;cursor:pointer;font-size:clamp(10px,.85vw,20px)}
.tile.st-LIVE{border-color:#00a152}.tile.st-STALE{border-color:#ffb300}.tile.st-OFFLINE{border-color:#c62828}.tile.st-ERROR{border-color:#d84315}
.tile-h{display:flex;justify-content:space-between;align-items:center;font-size:1.3em}.tile-h span:first-child{color:#8aa4c0}
.tile-t,.tile-f{color:#8aa4c0;font-size:.85em}.tile-msg{padding:1em 0;color:#ff8a8a;font-size:1.1em}
.rwy{border-top:1px solid #12304a;padding-top:.3em}.rwy-h{font-weight:700;color:#00e5ff;font-size:1.1em}.rwy-h em{color:#ffb300;font-style:normal;font-size:.8em}
.rwy-stale{opacity:.7}.cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.5em,1fr));gap:.3em}
.c{display:flex;flex-direction:column;background:#04090f;border-radius:6px;padding:.25em .4em}.c i{font-style:normal;color:#8aa4c0;font-size:.75em}.c b{font-size:1.35em;font-family:'JetBrains Mono',monospace}
#station-tile .tile{font-size:clamp(14px,1.6vw,34px);cursor:default;max-width:1200px;margin:0 auto;width:100%}
#dash-back{margin-right:6px}

/* dashRoot must keep the original body flex-column chain (#topbar/#main/#footer) intact */
#dashRoot{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%;height:100%;overflow:hidden}

/* admin grid: native compact cards. .gcell is the size container; all text scales from it (cqw/cqh) so nothing is cut */
#view-grid{padding:1vh 1vw;gap:1vh;overflow:hidden}
#view-grid .sm-bar h2{font-size:clamp(14px,1.4vw,28px)}
#view-grid #grid-host{min-height:0}
.gcell{position:relative;min-width:0;min-height:0;container-type:size;overflow:hidden;border-radius:10px}
.gcard{--c:#38bdf8;--rn:1;width:100%;height:100%;display:flex;flex-direction:column;background:var(--g-bg);border:3px solid var(--c);border-radius:10px;overflow:hidden;
  --vf:min(7cqw, calc(86cqh / (var(--rn) * 5.4)));font-family:Inter,system-ui,sans-serif}
@container (min-aspect-ratio: 3/2){ .gcard{--vf:min(calc(7cqw / var(--rn)), calc(86cqh / 5.4))} .gc-b{flex-direction:row!important} }
.gc-h{flex:0 0 12cqh;display:flex;align-items:center;gap:1.2cqw;padding:0 1.5cqw;background:var(--c);color:#04090f;font-size:min(4.6cqw,7cqh);white-space:nowrap;overflow:hidden}
.gc-h b{font-family:Orbitron,Inter,sans-serif;font-weight:900}.gc-n{opacity:.8;font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.gc-t{font-family:'JetBrains Mono',monospace;font-size:.7em;opacity:.8}
/* status pill: dark chip on the coloured header so LIVE is always GREEN (STALE amber, OFFLINE red) */
.gc-s{font-size:.6em;background:#04090f}
.gcard .gc-s.st-LIVE{color:#00e676;border-color:#00e676}.gcard .gc-s.st-STALE{color:#ffb300;border-color:#ffb300}.gcard .gc-s.st-OFFLINE{color:#ff5a5a;border-color:#ff5a5a}.gcard .gc-s.st-ERROR{color:#ff8a65;border-color:#ff8a65}.gcard .gc-s.st-LOADING{color:#b8c7d9;border-color:#b8c7d9}
.gc-full{background:rgba(4,9,15,.25);border:1px solid #04090f;color:#04090f;border-radius:6px;cursor:pointer;font-size:.9em;line-height:1;padding:.1em .4em}
.gc-b{flex:1;min-height:0;display:flex;flex-direction:column}
.gc-r{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;border-top:3px solid var(--c)}
.gc-r:first-child{border-top:0}
@container (min-aspect-ratio: 3/2){ .gc-r{border-top:0;border-left:3px solid var(--c)} .gc-r:first-child{border-left:0} }
.gc-rh{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1cqw;padding:.1em 1.5cqw;font-size:calc(var(--vf)*.55);line-height:1.2}
.gc-rn{font-weight:800;color:var(--c);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-rn em{font-style:normal;font-size:.85em;color:var(--sm-muted)}
.rl-watch .gc-rn em{color:#ff9800}.rl-crit .gc-rn em{color:#ff1744}
.gc-mode{font-size:.95em;font-family:inherit;color:var(--sm-fg);background:var(--g-sel);border:1px solid var(--c);border-radius:5px;padding:0 .3em;max-width:48%;cursor:pointer}
.gc-stale{opacity:.6}
.gc-cells{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;padding:3px}
.gc-c{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 10%,var(--g-cell));border:1.5px solid color-mix(in srgb,var(--c) 75%,transparent);border-radius:5px;line-height:1.05}
.gc-c i{font-style:normal;font-size:calc(var(--vf)*.42);color:var(--c);font-weight:700;white-space:nowrap}
.gc-c b{font-size:var(--vf);font-weight:900;letter-spacing:-0.5px;color:var(--g-val);font-family:'Inter',sans-serif;white-space:nowrap}
.gc-c.v-orange b{color:var(--sev-orange)}.gc-c.v-red b{color:var(--sev-red)}.gc-c.v-green b{color:var(--sev-green)}
.gc-msg{margin:auto;padding:2cqw;text-align:center;color:#ff8a8a;font-size:min(4cqw,6cqh)}
.gcard:not(.gc-down) .gc-msg{color:var(--sm-muted)}
/* WS watch / critical: card border blinks orange / red (blink = border colour alternates with the card's own colour) */
.gcard.gc-watch{animation:gcWatch 1.6s steps(1,end) infinite}
.gcard.gc-crit{animation:gcCrit .8s steps(1,end) infinite}
@keyframes gcWatch{0%{border-color:#ff9800;box-shadow:inset 0 0 2cqw rgba(255,152,0,.45)}50%{border-color:var(--c);box-shadow:none}}
@keyframes gcCrit{0%{border-color:#ff1744;box-shadow:inset 0 0 2.4cqw rgba(255,23,68,.55)}50%{border-color:var(--c);box-shadow:none}}
/* embed (tile) mode: hide controls that don't fit a tile */
body.embed .top-btns > :not(#status){display:none!important}
body.embed #footer .dev-row,body.embed #metar-history-btn,body.embed #metar-copy-btn{display:none!important}
body.embed #station-tile .tile{font-size:clamp(11px,2.4vw,40px);max-width:none;height:100%}
body.embed #view-station .sm-bar{display:none}
body.embed #view-station{padding:6px;justify-content:center}
body.embed #dash-back{display:none!important}

/* ═══ WS watch / critical: blinking panel border (normal-user dashboard) ═══ */
.panel.ws-watch{animation:wsWatchBlink 1.6s ease-in-out infinite}
.panel.ws-crit{animation:wsCritBlink .8s ease-in-out infinite}
@keyframes wsWatchBlink{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 0 5px #ff9800,inset 0 0 28px rgba(255,152,0,.35)}}
@keyframes wsCritBlink{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 0 5px #ff1744,inset 0 0 32px rgba(255,23,68,.4)}}
.set-msg{min-height:1.3em;padding:6px 10px 0;font-size:.85em}.set-msg.ok{color:#00e676}.set-msg.bad{color:#ff5252}.set-msg.warn{color:#ffb300}
.b-save{color:#00e676;border-color:#00e676;background:rgba(0,230,118,.10)}

/* ═══ History switched off (stations.js adds html.no-history when no station has a history backend) ═══ */
html.no-history .click-hint,html.no-history #trend-toggle-btn,html.no-history #snap-period-bar{display:none!important}
html.no-history .wbox,html.no-history .dc{cursor:default}


/* ── Runway half with no data: same layout, dimmed + inert ── */
#main > .panel.rwy-empty { position: relative; opacity: .45; filter: grayscale(.7); }
#main > .panel.rwy-empty * { pointer-events: none !important; }
#main > .panel.rwy-empty::after {
  content: attr(data-empty-text); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 4px 12px; border-radius: 6px; font-weight: 700; letter-spacing: .08em; font-size: clamp(10px, 1.1vw, 14px);
  background: rgba(0,0,0,.55); color: #cfd8dc; pointer-events: none; white-space: nowrap;
}
.rwybar-half.rwy-empty { opacity: .55; }
.rwybar-half.rwy-empty select { pointer-events: none; }
.trend-col.rwy-empty { opacity: .45; }

/* 4-runway layout */
#dashRoot.slots-4 #rwybar .rwybar-half{padding:0 clamp(3px,2.4cqw,10px);gap:clamp(3px,1.6cqw,7px)}
#dashRoot.slots-4 #rwybar .rwybar-half:first-child{padding-left:max(clamp(3px,2.4cqw,10px), env(safe-area-inset-left))}
#dashRoot.slots-4 #rwybar .rwybar-half:last-child{padding-right:max(clamp(3px,2.4cqw,10px), env(safe-area-inset-right))}
#dashRoot.slots-4 #rwybar .rwy-sel{font-size:clamp(6.5px,2.3cqw,10px)}
#dashRoot.slots-4 #rwybar .rwy-txt{font-size:clamp(10px,2cqw,19.5px)}
#dashRoot.slots-4 #rwybar .rwy-num{font-size:clamp(10px,4.6cqw,17.5px);padding:1px clamp(4px,3cqw,12.5px)}
#dashRoot.slots-4 #trendView .trend-col-hdr{font:800 clamp(7.5px,2.6cqw,10.5px) 'Inter',sans-serif}
#dashRoot.slots-4 #trendView .trend-live-pill{font:700 clamp(5.5px,1.8cqw,7.5px) 'Inter',sans-serif}
#dashRoot.slots-4 #main .wind-row{grid-template-columns:0.82fr 0.82fr minmax(56px,34cqw)}
#dashRoot.slots-4 #main .wbox{padding:clamp(2px,0.6vh,5.5px) clamp(2px,1.2cqw,5.5px)}
#dashRoot.slots-4 #main .wlbl{font-size:clamp(7px,2.7cqw,12.5px)}
#dashRoot.slots-4 #main .wsub{font-size:clamp(5px,1.6cqw,7.5px)}
#dashRoot.slots-4 #main .wval{font-size:clamp(15.5px,9cqw,39px)}
#dashRoot.slots-4 #main .rr{padding:2px clamp(3px,1.6cqw,7px)}
#dashRoot.slots-4 #main .rl{font-size:clamp(7px,2.6cqw,11px)}
#dashRoot.slots-4 #main .rv{font-size:clamp(11px,5.2cqw,24px)}
#dashRoot.slots-4 #main .dch{font-size:clamp(8.5px,3.6cqw,15.5px)}
#dashRoot.slots-4 #main .dcv{font-size:clamp(17px,9cqw,36.5px)}
#dashRoot.slots-4 #main .wcomp-badge{font-size:clamp(5.5px,2cqw,9px)}
#dashRoot.slots-4 #main .dew-spread{font-size:clamp(6.5px,2cqw,9px)}
#dashRoot.slots-4 #main .qnh-trend{font-size:clamp(10px,3.6cqw,15.5px)}
#dashRoot.slots-4 #main .rvr-trend-badge{font-size:clamp(5.5px,1.7cqw,7.5px)}
#dashRoot.slots-4 #main .no-data-msg{font-size:clamp(14px,5cqw,22.5px)}
#dashRoot.slots-4 #main, #dashRoot.slots-4 #rwybar, #dashRoot.slots-4 #trendView { grid-template-columns:repeat(4,minmax(0,1fr)); }
#dashRoot.slots-4 #main > .panel, #dashRoot.slots-4 #rwybar > .rwybar-half, #dashRoot.slots-4 #trendView > .trend-col { container-type:inline-size; min-width:0; }
#dashRoot:not(.slots-4) #main > .panel:nth-child(n+3), #dashRoot:not(.slots-4) #rwybar > .rwybar-half:nth-child(n+3), #dashRoot:not(.slots-4) #trendView > .trend-col:nth-child(n+3) { display:none; }
#dashRoot:not(.slots-4) #main > .panel:nth-child(2), #dashRoot:not(.slots-4) #trendView > .trend-col:nth-child(2) { border-right:none; }
#dashRoot:not(.slots-4) #rwybar > .rwybar-half:nth-child(2) { border-right:none; padding-right:max(clamp(4px,1.2vw,14px), env(safe-area-inset-right)); }
@media (max-width: 768px) and (orientation: portrait) {
  #dashRoot.slots-4 #main { grid-template-columns:1fr; grid-template-rows:repeat(4,1fr); }
  #dashRoot.slots-4 #main > .panel { container-type:normal; }
}
.wr-grid:has(.wr-t4) { grid-template-columns:1fr; }
.wr-t4 th.wr-th0 { width:15%; }
.wr-t4 th { font-size:8px; padding:3px 1px; }
.wr-t4 tr.wr-sh th { font-size:7px; }
.wr-t4 td { font-size:9px; padding:3px 1px; }

/* ms15: stale runway panel (frozen data) */
#main > .panel.rwy-stale{opacity:.55;filter:saturate(.5)}
#main > .panel.rwy-stale::before{content:'STALE DATA';position:absolute;top:4px;right:8px;z-index:5;font:700 11px Inter,sans-serif;color:#ffaa00;letter-spacing:.08em}
#main > .panel.rwy-stale{position:relative}

/* threshold modal (admin) */
.sm-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.sm-modal[hidden]{display:none}
.thr-row{display:flex;align-items:center;gap:10px}.thr-row span{flex:1}.thr-row input{width:90px;text-align:right}.thr-row em{font-style:normal;width:2em;color:var(--sm-muted)}
/* LIVE labels: always green */
.trend-live-pill{color:#00e676!important;opacity:1!important}
.tb-btn.live-on{color:#00e676!important}

/* ms15: inactive stations in the admin table, many-station scroll mode, new-card fade-in */
.sm-table tr.row-off td{opacity:.6}
#grid-host.many{flex:none;min-height:100%}
#view-grid:has(#grid-host.many){overflow:auto}
#grid-host.many .grid-row{flex:none;height:42vh}
.gcard.gc-new{animation:gcIn .35s ease-out}
@keyframes gcIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.thr-row{flex-wrap:nowrap}.thr-row span{min-width:0}