:root{
  --vfr:#28a745;
  --mvfr:#0080f0;
  --ifr:#dc3545;
  --lifr:#9722ce;
  --bg:#0b1220; --panel:#0f172a; --panel-b:#1f2937; --text:#e2e8f0; --muted:#94a3b8;
}
html,body{height:100%}
body{background:var(--bg); color:var(--text)}
#map{position:absolute; inset:0}

/* Debug badge */
.debug-badge{position:absolute; top:12px; left:12px; z-index:410; background:var(--panel); color:#cbd5e1; border:1px solid var(--panel-b); border-radius:.5rem; padding:.25rem .5rem; font-size:.8rem; min-width:300px}

/* Legend */
.legend{position:absolute; left:12px; bottom:12px; z-index:400; background:var(--panel); color:#cbd5e1; border:1px solid var(--panel-b); border-radius:.75rem; padding:.5rem .75rem}
.legend .dot{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:.35rem; transform:rotate(45deg); background:#999}
.legend .dot.vfr{background:var(--vfr)}
.legend .dot.mvfr{background:var(--mvfr)}
.legend .dot.ifr{background:var(--ifr)}
.legend .dot.lifr{background:var(--lifr)}

/* Loading overlay */
#loadingOverlay{position:fixed; inset:0; background:rgba(2,6,23,.35); z-index:1000; display:none; align-items:center; justify-content:center}

/* Modal */
.modal-content{background:var(--bg); color:var(--text); border:1px solid var(--panel-b)}
.raw-chip{display:inline-flex; align-items:center; gap:.5rem; background:var(--panel); border:1px solid var(--panel-b); padding:.35rem .6rem; border-radius:.6rem; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace}

/* Status blades */
.blade{border-radius:.9rem; padding:.7rem 1rem; color:#fff; background:linear-gradient(135deg,#111827, #1f2937); box-shadow:0 6px 18px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:.2rem; min-height:74px}
.blade .k{font-size:.95rem; opacity:.95}
.blade .v{font-size:1.25rem; font-weight:800; letter-spacing:.2px}
.blade small{opacity:.8}
.blade.vfr{background:linear-gradient(135deg, color-mix(in srgb, var(--vfr) 55%, #111), color-mix(in srgb, var(--vfr) 75%, #000))}
.blade.mvfr{background:linear-gradient(135deg, color-mix(in srgb, var(--mvfr) 55%, #111), color-mix(in srgb, var(--mvfr) 75%, #000))}
.blade.ifr{background:linear-gradient(135deg, color-mix(in srgb, var(--ifr) 55%, #111), color-mix(in srgb, var(--ifr) 75%, #000))}
.blade.lifr{background:linear-gradient(135deg, color-mix(in srgb, var(--lifr) 55%, #111), color-mix(in srgb, var(--lifr) 75%, #000))}

/* Panels */
.panel{background:var(--panel); border:1px solid var(--panel-b); border-radius:.9rem; padding:.6rem}
.panel h6{font-weight:700; font-size:.9rem; color:#cbd5e1; margin:0 0 .35rem 0}

/* Runway widget */
#rwySvg{width:100%; height:290px; display:block}
.rwy-chip{background:var(--panel); border:1px solid var(--panel-b); color:#e5e7eb; padding:.2rem .5rem; border-radius:999px; font-size:.8rem; cursor:pointer}
.rwy-chip.active{background:#1e293b; border-color:#334155; font-weight:700}
.wind-legend{font-size:.8rem; color:var(--muted)}

/* Cloud graph */
#cloudSvg{width:100%; height:290px; display:block}
.ygrid text{font-size:.8rem; fill:#93a2b1}
.cloud-label{font-size:.8rem; fill:#dbeafe; font-weight:700}
.puff{filter:url(#dropShadow)}

/* Leaflet control styling */
.leaflet-control.metarmap-controls{ background:#0f172a; color:#cbd5e1; border:1px solid #1f2937; border-radius:.75rem; box-shadow:0 8px 24px rgba(0,0,0,.3)}
.leaflet-control.metarmap-controls .btn{ --bs-btn-color:#e5e7eb; --bs-btn-bg:#111827; --bs-btn-border-color:#374151; --bs-btn-hover-bg:#1f2937; --bs-btn-active-bg:#111827}

/* Markers */
.apt-marker{ --c:#e5e7eb; width:14px; height:14px; border-radius:4px; transform:rotate(45deg); background:var(--c); border:2px solid var(--bg); box-shadow:0 0 0 1px rgba(0,0,0,.25)}

/* Geolocate pulse */
.pulse-marker{position:relative; width:14px; height:14px; border-radius:50%; background:#22d3ee; border:2px solid #fff; box-shadow:0 0 0 rgba(34,211,238,0.7); animation:pulse 2s infinite}
.pulse-marker:after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(34,211,238,0.45); animation:ring 2s infinite}
@keyframes pulse{0%{transform:scale(1)} 50%{transform:scale(1.1)} 100%{transform:scale(1)}}
@keyframes ring{0%{transform:scale(1); box-shadow:0 0 0 0 rgba(34,211,238,.45)} 80%{transform:scale(2.6); box-shadow:0 0 0 18px rgba(34,211,238,0)} 100%{transform:scale(2.6); box-shadow:0 0 0 0 rgba(34,211,238,0)}}