/* ── 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;
  --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;
  --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;
}
#topbar {
  display:flex; align-items:center;
  background:var(--top-bg);
  border-bottom:3px solid var(--hdr-bg);
  padding:0 clamp(6px,1.5vw,20px);
  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); }
#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:last-child { border-right:none; }
.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;
}
.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-shrink:0; border-bottom:2px solid var(--border);
  min-height:70px;
}
.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:30px;
  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; }
.compass-cell {
  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:70px;
}
.compass-cell canvas { display:block; width:100%; height:100%; }
.range-row {
  display:grid; grid-template-columns:42% 58%;
  border-bottom:2px solid var(--border);
  min-height:clamp(22px,2.8vh,34px); flex-shrink:0;
  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(8px,1.1vw,14px);
  color:var(--val-white); white-space:nowrap; font-weight:600;
  flex-shrink:0;
}
.rv {
  font-size:clamp(10px,1.5vw,22px);
  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-shrink:0;
  border-bottom:1px solid var(--border);
  min-height:55px;
}
.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);
  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);
}
#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); }
}

/* ── 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:820px; 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; }
.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-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-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) { 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: 10mm 12mm;
  }

  /* हेडर और बेसिक कलर */
  #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; }
}

/* ── 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-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;
}

/* 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) {
  #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; }
  .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); min-height:60px; }
  .compass-cell { min-height:60px; }
  .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); min-height:50px; }
  .compass-cell { min-height:50px; }
  .dch { font-size:clamp(8px,2.2vw,12px); padding:2px; }
  .dcv { font-size:clamp(18px,5vw,30px); }
  .wval { font-size:clamp(16px,5vw,30px); }
  .range-row { min-height:18px; }
  .rl { font-size:clamp(7px,1.5vw,10px); }
  .rv { font-size:clamp(8px,1.8vw,14px); }
  .data-row { min-height:45px; }
  .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); min-height:45px; }
  .compass-cell { min-height:45px; }
  .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) {
  .wind-row { min-height:50px; }
  .compass-cell { min-height:50px; }
  .wval { font-size:clamp(16px,3vw,30px); }
  .dch { font-size:clamp(8px,1.2vw,14px); }
  .dcv { font-size:clamp(18px,3vw,32px); }
  .data-row { min-height:40px; }
  .range-row { min-height:16px; }
  #metar-display { font-size:clamp(10px,1.5vw,16px); }
  .modal-chart-wrap { min-height:120px; }
}