:root {
  color-scheme: dark;
  --bg: #071019;
  --panel: rgba(13, 25, 37, .92);
  --panel-2: #101d2a;
  --line: rgba(158, 181, 202, .18);
  --text: #e9f0f6;
  --muted: #91a5b8;
  --cyan: #64d7f4;
  --red: #ff4d58;
  --orange: #ffad4d;
  --header-card-height: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0, rgba(41, 113, 149, .24), transparent 32rem),
    linear-gradient(145deg, #091521, var(--bg) 58%);
}
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; padding: 18px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 76px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 20px;
  background: rgba(8, 17, 27, .78); box-shadow: 0 22px 70px rgba(0,0,0,.32); backdrop-filter: blur(18px);
}
.brand { min-width: 0; }
h1, h2, p { margin: 0; }
h1 { font-size: 1.23rem; letter-spacing: -.025em; }
.brand p { margin-top: 3px; color: var(--muted); font-size: .8rem; }
.header-meta { display: flex; align-items: center; gap: 8px; }
.airport-picker, .time-verifier, .clock, .refresh-card {
  height: var(--header-card-height); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); background: rgba(12,24,36,.74);
}
.airport-picker { min-width: 142px; padding: 8px 10px; }
.airport-picker > span, .time-verifier > span, .clock > span {
  display: block; color: var(--muted); font-size: .58rem; font-weight: 600; letter-spacing: .12em; line-height: 1;
}
.airport-picker select { width: 100%; margin-top: 8px; border: 0; outline: 0; color: var(--text); background: transparent; font: 700 .82rem ui-monospace, monospace; cursor: pointer; }
.airport-picker option { color: var(--text); background: #0c1824; }
.time-verifier {
  min-width: 328px; padding: 6px 9px; transition: border-color .16s, background .16s;
}
.time-verifier.active { border-color: rgba(100,215,244,.48); background: rgba(25,70,88,.35); }
.time-verifier-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.time-verifier-row label { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: .56rem; }
.time-verifier input, .time-verifier select {
  min-width: 0; height: 23px; padding: 2px 4px; border: 1px solid rgba(158,181,202,.16); border-radius: 6px;
  outline: 0; color: var(--text); color-scheme: dark; background: rgba(4,12,20,.64); font: 650 .66rem ui-monospace, monospace;
}
.time-verifier input:focus, .time-verifier select:focus { border-color: rgba(100,215,244,.62); }
#verify-date { width: 102px; }
#verify-from, #verify-to { width: 49px; cursor: pointer; }
.time-verifier button {
  height: 23px; padding: 0 7px; border: 1px solid rgba(100,215,244,.25); border-radius: 6px;
  color: var(--text); background: rgba(35,113,143,.2); cursor: pointer; font-size: .64rem; font-weight: 700;
}
.time-verifier small { display: block; height: .58rem; margin-top: 2px; color: var(--muted); font-size: .52rem; line-height: .58rem; }
.time-verifier.active small { color: #a9eafb; }
.time-verifier.invalid { border-color: rgba(255,173,77,.48); }
.time-verifier.invalid small { color: #ffd19b; }
.clock { min-width: 92px; padding: 8px 11px; }
.clock strong { display: block; margin-top: 10px; color: var(--text); font: 700 .9rem ui-monospace, monospace; }
.refresh-card { min-width: 138px; padding: 6px 8px; }
.refresh-card .primary-button { width: 100%; height: 30px; padding: 0 10px; }
.refresh-card small { display: block; margin-top: 4px; color: var(--muted); font: .52rem/1 ui-monospace, monospace; text-align: center; white-space: nowrap; }
.refresh-card small span { color: #b7cad8; }
.primary-button, .map-actions button {
  border: 1px solid rgba(100,215,244,.28); border-radius: 11px; background: rgba(35,113,143,.23);
  cursor: pointer; transition: background .16s, transform .16s;
}
.primary-button { padding: 0 14px; font-size: .74rem; font-weight: 700; }
button:hover { background-color: rgba(74,154,183,.3); }
button:active { transform: translateY(1px); }
.status-banner { margin: 12px 0 0; padding: 11px 14px; border: 1px solid rgba(255,173,77,.38); border-radius: 12px; color: #ffd9aa; background: rgba(108,60,13,.25); font-size: .82rem; }
.status-banner.error { border-color: rgba(255,77,88,.4); color: #ffc5c9; background: rgba(102,21,28,.28); }
.hidden { display: none !important; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 14px; height: calc(100vh - 112px); margin-top: 14px; }
.map-card, .notam-panel { min-height: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: 0 28px 70px rgba(0,0,0,.3); overflow: hidden; }
.map-card { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--cyan); font-size: .61rem; font-weight: 800; letter-spacing: .15em; }
.map-toolbar h2 { margin-top: 3px; font-size: 1.04rem; }
.map-actions { display: flex; align-items: center; gap: 7px; }
.map-actions button { height: 34px; min-width: 36px; padding: 0 10px; }
.scheduled-toggle { margin-right: 7px; color: var(--muted); font-size: .74rem; white-space: nowrap; }
.scheduled-toggle input { accent-color: var(--orange); }
.map-stage { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(circle at center, rgba(30,55,72,.38), rgba(3,9,15,.72)); }
#airport-map { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#airport-map.dragging { cursor: grabbing; }
.taxiway-label { pointer-events: none; }
.closure-hit {
  cursor: pointer; pointer-events: stroke; vector-effect: non-scaling-stroke;
  stroke: rgba(0, 0, 0, .001); stroke-width: 30px;
}
.closure-hit.polygon-hit, .closure-hit.intersection-hit { pointer-events: all; }
.closure-emphasis { animation: closure-pulse 1.25s ease-in-out infinite; pointer-events: none; }
@keyframes closure-pulse { 0%, 100% { opacity: .22; } 50% { opacity: .52; } }
.map-selection-note {
  position: absolute; z-index: 7; top: 14px; left: 14px; max-width: min(520px, calc(100% - 28px));
  padding: 9px 12px; border: 1px solid rgba(100,215,244,.4); border-radius: 10px;
  color: #cceffa; background: rgba(5,17,27,.94); box-shadow: 0 12px 30px rgba(0,0,0,.32);
  font-size: .68rem; line-height: 1.4; pointer-events: none;
}
.map-selection-note.warning { border-color: rgba(255,189,89,.45); color: #ffe0a6; }
.map-tooltip {
  position: absolute; z-index: 8; width: min(430px, calc(100% - 24px)); max-height: min(390px, calc(100% - 24px));
  overflow: auto; padding: 12px 13px; border: 1px solid rgba(100,215,244,.34); border-radius: 12px;
  color: #dce8f1; background: rgba(4,12,20,.96); box-shadow: 0 18px 48px rgba(0,0,0,.5);
  backdrop-filter: blur(14px); pointer-events: none;
}
.map-tooltip strong { color: #fff; font-size: .8rem; }
.map-tooltip .tooltip-state { float: right; color: #ff9ca3; font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.tooltip-summary { margin-top: 10px; color: #edf6fc; font-size: .82rem; font-weight: 680; line-height: 1.45; }
.tooltip-affected-time { margin-top: 11px; padding: 9px 10px; border: 1px solid rgba(100,215,244,.18); border-radius: 9px; background: rgba(17,35,49,.72); }
.tooltip-affected-time > span { display: block; margin-bottom: 6px; color: var(--cyan); font-size: .56rem; font-weight: 800; letter-spacing: .1em; }
.tooltip-affected-time > div { display: grid; grid-template-columns: 72px 1fr; gap: 9px; margin-top: 3px; align-items: baseline; }
.tooltip-affected-time b { color: var(--muted); font-size: .6rem; font-weight: 650; }
.tooltip-affected-time strong { color: #e5eff6; font: 650 .62rem/1.4 ui-monospace, monospace; text-align: right; }
.message-format { margin-top: 8px; color: var(--cyan); font-size: .61rem; font-weight: 750; letter-spacing: .04em; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); background: rgba(5,12,19,.72); }
.map-legend { position: absolute; border: 1px solid var(--line); background: rgba(5,13,21,.84); backdrop-filter: blur(12px); }
.map-legend { left: 14px; bottom: 14px; display: flex; gap: 14px; padding: 9px 11px; border-radius: 11px; font-size: .68rem; color: var(--muted); }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.legend-line { width: 22px; border-top: 3px solid var(--red); }
.legend-line.scheduled { border-color: var(--orange); }
.safety-note { padding: 9px 14px; border-top: 1px solid var(--line); color: #b9a888; background: rgba(60,47,25,.2); font-size: .67rem; }
.notam-panel { display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto; }
.panel-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.panel-summary div { padding: 14px 11px; background: #0c1824; }
.panel-summary span { display: block; color: var(--muted); font-size: .63rem; }
.panel-summary strong { display: block; margin-top: 4px; font-size: 1.25rem; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 9px 10px 0; }
.tab { padding: 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: .75rem; font-weight: 750; }
.tab.active { color: var(--text); border-color: var(--cyan); }
.filter-row { padding: 9px 10px; }
.filter-row input { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--text); background: #091522; font-size: .76rem; }
.filter-row input:focus { border-color: rgba(100,215,244,.55); }
.notam-list { overflow-y: auto; padding: 0 9px 10px; }
.notam-card { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 13px; background: rgba(16,29,42,.9); overflow: hidden; }
.notam-card:hover { border-color: rgba(100,215,244,.5); box-shadow: inset 3px 0 rgba(100,215,244,.72); }
.notam-card.selected { border-color: rgba(100,215,244,.5); box-shadow: inset 3px 0 var(--cyan); }
.notam-card-button { width: 100%; padding: 11px; border: 0; text-align: left; cursor: pointer; background: transparent; }
.notam-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notam-title strong { font-size: .82rem; }
.state-pill { padding: 4px 7px; border-radius: 999px; font-size: .58rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.state-pill.active { color: #ffd3d6; background: rgba(255,77,88,.2); }
.state-pill.inactive, .state-pill.upcoming { color: #ffddb4; background: rgba(255,173,77,.18); }
.state-pill.unknown { color: #d7dde3; background: rgba(145,165,184,.18); }
.notam-summary { margin-top: 7px; color: #c4d0db; font-size: .72rem; line-height: 1.42; }
.aircraft-applicability { display: grid; gap: 2px; margin-top: 8px; padding: 7px 8px; border: 1px solid; border-radius: 8px; }
.aircraft-applicability strong { font-size: .63rem; letter-spacing: .04em; }
.aircraft-applicability span { font-size: .61rem; line-height: 1.35; }
.aircraft-applicability.applies { border-color: rgba(255,77,88,.4); color: #ffd0d3; background: rgba(255,77,88,.12); }
.aircraft-applicability.does-not-apply { border-color: rgba(85,221,160,.35); color: #b9f4d9; background: rgba(85,221,160,.1); }
.surface-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.surface-chip { padding: 4px 7px; border: 1px solid rgba(255,77,88,.26); border-radius: 7px; color: #ffc5c9; background: rgba(255,77,88,.09); font-size: .62rem; }
.notam-time { margin-top: 8px; color: var(--muted); font: .62rem/1.45 ui-monospace, monospace; }
.mapping-warning { margin-top: 7px; color: #ffc982; font-size: .63rem; }
.notam-details { padding: 0 11px 9px; }
.notam-details pre { margin: 0; padding: 9px; overflow: auto; white-space: pre-wrap; border-radius: 8px; color: #aebdca; background: #07111a; font: .62rem/1.45 ui-monospace, monospace; }
.notam-details .message-format { margin: 0 0 6px; }
.notam-details details { color: var(--muted); font-size: .65rem; }
.notam-details summary { list-style: none; color: var(--cyan); cursor: pointer; font-size: .6rem; text-align: right; }
.notam-details summary::-webkit-details-marker { display: none; }
.notam-details summary::after { content: "  ▾"; }
.notam-details details[open] summary::after { content: "  ▴"; }
.notam-details details[open] summary { margin-bottom: 8px; }
.notam-details details pre { margin-top: 6px; color: #8799a8; }
.empty-state { padding: 30px 18px; color: var(--muted); text-align: center; font-size: .78rem; }
.source-info { padding: 10px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .63rem; line-height: 1.45; }
.source-info a { color: var(--cyan); }
@media (max-width: 960px) {
  .topbar { align-items: flex-start; }
  .header-meta { flex-wrap: wrap; justify-content: flex-end; }
  .workspace { grid-template-columns: 1fr; height: auto; }
  .map-card { height: 68vh; min-height: 520px; }
  .notam-panel { height: 70vh; }
}
@media (max-width: 660px) {
  .app-shell { padding: 8px; }
  .topbar { align-items: flex-start; }
  .header-meta { flex-wrap: wrap; justify-content: flex-end; }
  .clock { min-width: 66px; }
  .time-verifier { order: 5; min-width: 100%; }
  .primary-button { width: 100%; }
  .brand p { display: none; }
  .map-toolbar { align-items: flex-start; }
  .map-actions { flex-wrap: wrap; justify-content: flex-end; }
  .scheduled-toggle { width: 100%; text-align: right; }
}