:root {
  --bg: #05070a; --panel: #0b0f14; --line: #1c2530; --dim: #5d6b7a; --txt: #e8eef4;
  --green: #3ddc84; --cyan: #3cc8f0; --magenta: #e86ad8; --amber: #ffb02e; --red: #ff4d4d;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--txt); font-family: -apple-system, system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { min-height: 100dvh; padding: 0 0 calc(64px + env(safe-area-inset-bottom)); }

.status { position: sticky; top: 0; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));
  background: var(--bg); border-bottom: 1px solid var(--line); font: 600 12px/1.2 var(--mono); color: var(--dim); }
.status .ok { color: var(--green); } .status .warn { color: var(--amber); } .status .bad { color: var(--red); }
.rec { color: var(--dim); } .rec.on { color: var(--red); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .35; } }

.panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.cell { background: var(--panel); padding: 10px 12px 12px; min-width: 0; }
.cell h2 { margin: 0 0 4px; font: 700 12px/1 var(--mono); letter-spacing: .08em; color: var(--cyan); }
.cell h2 small { font-weight: 400; color: var(--dim); letter-spacing: 0; }
.val { display: flex; align-items: baseline; gap: 6px; }
.val b { font: 700 clamp(40px, 13vw, 72px)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.val i, .grid i { font: 400 13px var(--mono); color: var(--dim); font-style: normal; }
.sub { font: 13px/1.5 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.sub span { color: var(--txt); }

.vsrow { display: flex; gap: 10px; align-items: center; }
.vs .val b { font-size: clamp(30px, 9vw, 52px); }
#vsi { width: 30px; height: 90px; flex: none; }

.hsi { position: relative; }
#rose { width: 100%; max-width: 180px; aspect-ratio: 1; display: block; margin: 0 auto; }
.trk { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font: 700 22px var(--mono); pointer-events: none; transform: translateY(-2px); }

.grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.grid h3 { margin: 0 0 2px; font: 700 11px var(--mono); letter-spacing: .08em; color: var(--dim); }
.grid b { font: 700 24px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.phase { color: var(--green); font-size: 18px !important; }

.map { grid-column: 1 / -1; }
#track { width: 100%; aspect-ratio: 720 / 420; display: block; background: #070a0e; border: 1px solid var(--line); border-radius: 3px; }
.pos { margin-top: 6px; font: 12px var(--mono); color: var(--dim); }

.controls { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-template-columns: 2fr; grid-auto-columns: 1fr; gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.controls button { appearance: none; border: 0; background: var(--panel); color: var(--txt); height: 56px;
  font: 700 15px var(--mono); letter-spacing: .08em; }
.controls button:active { background: #16202a; }
.controls .primary { color: var(--green); }
.controls #infoBtn { width: 48px; }
.controls #installBtn { color: var(--cyan); }
.controls button[hidden] { display: none; }
.controls .primary.stop { color: var(--red); }

.banner { position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 3;
  padding: 10px 12px; background: #2a1d05; border: 1px solid var(--amber); border-radius: 3px; color: var(--amber); font: 13px/1.4 var(--mono); }

dialog { background: var(--panel); color: var(--txt); border: 1px solid var(--line); border-radius: 4px; max-width: 520px; font-size: 14px; line-height: 1.45; }
dialog::backdrop { background: rgba(0,0,0,.7); }
dialog h2 { margin-top: 0; font-family: var(--mono); color: var(--cyan); }
dialog li { margin-bottom: 6px; }
dialog .meta { font: 12px/1.6 var(--mono); color: var(--dim); word-break: break-all; }
dialog button { background: var(--bg); color: var(--txt); border: 1px solid var(--line); border-radius: 3px; padding: 8px 20px; font: 700 14px var(--mono); }

@media (min-width: 900px) {
  .panel { grid-template-columns: repeat(4, 1fr); }
  .grid { grid-column: span 2; }
  .map { grid-column: span 2; }
}
dialog ol { padding-left: 20px; } dialog ol li { margin-bottom: 8px; }
dialog .ico { display: inline-block; padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; font-size: 12px; }
.keyrow { display: flex; gap: 6px; align-items: center; margin: 0 0 12px; font: 12px var(--mono); color: var(--dim); }
.keyrow input { flex: 1; min-width: 0; background: var(--bg); color: var(--txt); border: 1px solid var(--line); border-radius: 3px; padding: 7px; font: 13px var(--mono); -webkit-user-select: text; user-select: text; }
.navc, .land { grid-column: 1 / -1; }
.leg { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 4px; }
.leg b { font: 700 28px/1.1 var(--mono); }
.leg .to { color: var(--magenta); }
.leg .arrow { color: var(--dim); font: 18px var(--mono); }
.sub.small { font-size: 12px; line-height: 1.45; }
.dest { color: var(--amber); text-decoration: underline dotted var(--dim); text-underline-offset: 5px; cursor: pointer; }
.rwy { color: var(--green); }
.how { font: 700 12px var(--mono); letter-spacing: .06em; padding: 2px 6px; border: 1px solid var(--line); border-radius: 2px; color: var(--dim); }
.how.final { color: var(--bg); background: var(--green); border-color: var(--green); }
.how.downwind { color: var(--green); border-color: var(--green); }
.how.wind { color: var(--cyan); border-color: var(--cyan); }
.metar { white-space: pre-line; margin-top: 6px; font: 11px/1.4 var(--mono); color: var(--dim); word-break: break-word; }
#track { cursor: pointer; }
@media (min-width: 900px) { .navc, .land { grid-column: span 2; } }
.gndrwy { margin: 4px 0 8px; padding: 6px 8px; border: 1px solid var(--green); border-radius: 2px; color: var(--green); font: 700 13px/1.35 var(--mono); }