:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #14213d;
  background: #eef2f6;
  --navy: #13294b;
  --orange: #ed7d17;
  --line: #d9e0e8;
  --muted: #64748b;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #eef2f6; }
button, a { font: inherit; }
button, .map-actions a {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 0 13px;
  color: var(--navy);
  background: #fff;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
button:hover, .map-actions a:hover { border-color: var(--navy); }
.map-header {
  min-height: 66px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.map-header > div, .map-actions { display: flex; align-items: center; gap: 12px; }
.brand { color: var(--navy); font-weight: 850; text-decoration: none; }
.page-title { color: var(--muted); font-size: .94rem; }
.map-actions { flex-wrap: wrap; justify-content: flex-end; }
.map-layout {
  width: min(1600px, 100%);
  height: calc(100vh - 66px);
  min-height: 500px;
  margin: 0 auto;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(340px, .9fr);
  gap: 14px;
}
.map-card, .aircraft-panel {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(19, 41, 75, .07);
}
.map-card { min-height: 0; }
#map { height: 100%; min-height: 440px; background: #e4ebf2; }
.aircraft-panel { display: flex; flex-direction: column; }
.panel-heading { padding: 17px 18px 11px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
h1 { margin: 0 0 5px; font-size: 1.08rem; color: var(--navy); }
.panel-heading p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.4; }
.live-count {
  flex: 0 0 auto;
  min-width: 35px;
  min-height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  font-weight: 800;
}
.map-message { min-height: 24px; padding: 0 18px 9px; color: var(--muted); font-size: .83rem; }
.map-message.error { color: #a12626; font-weight: 700; }
.aircraft-list { flex: 1; overflow: auto; padding: 0 12px 14px; }
.list-state { padding: 16px 7px; color: var(--muted); font-size: .9rem; }
.airport-group { border-top: 1px solid var(--line); padding: 10px 0 8px; }
.airport-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 7px 6px; }
.airport-heading strong { color: var(--navy); font-size: .93rem; }
.airport-heading small { display: block; padding-top: 2px; color: var(--muted); font-size: .75rem; }
.airport-count { min-width: 26px; padding: 3px 7px; border-radius: 999px; color: var(--navy); background: #edf2f7; text-align: center; font-size: .75rem; font-weight: 800; }
.airport-empty { padding: 8px 7px; color: var(--muted); font-size: .82rem; }
.aircraft-entry { border-top: 1px solid #edf1f5; }
.aircraft-row {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 72px minmax(92px, 1fr) minmax(58px, .7fr) 22px;
  gap: 7px;
  padding: 4px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.aircraft-row:hover, .aircraft-row.is-live { background: #fff5e9; }
.aircraft-time, .aircraft-details { overflow: hidden; color: #65748a; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
.aircraft-registration { align-self: center; color: var(--navy); font-size: .86rem; font-weight: 850; letter-spacing: .02em; }
.aircraft-chevron { align-self: center; color: #718096; text-align: center; }
.aircraft-extra { padding: 0 8px 9px 86px; color: #526176; font-size: .77rem; line-height: 1.65; }
.aircraft-extra[hidden] { display: none; }
.locate-aircraft { min-height: 30px; margin-top: 5px; padding: 0 9px; font-size: .75rem; }
.map-footnote { margin: 0; padding: 10px 18px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; line-height: 1.4; }
.aircraft-div-icon { background: transparent; border: 0; }
.aircraft-marker { display: flex; align-items: center; width: max-content; height: 34px; gap: 4px; }
.aircraft-symbol { width: 28px; flex: 0 0 28px; color: var(--navy); font-size: 25px; line-height: 1; text-align: center; transform-origin: center; text-shadow: 0 1px 2px #fff; }
.aircraft-marker.inbound .aircraft-symbol { color: var(--orange); }
.aircraft-label {
  padding: 3px 6px;
  border: 1px solid #9aa8b8;
  border-radius: 5px;
  background: rgba(255, 255, 255, .96);
  color: #14213d;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
}
.aircraft-popup { min-width: 150px; color: #27364b; line-height: 1.5; }
.aircraft-popup strong { color: var(--navy); font-size: 1rem; }
.popup-meta { color: var(--muted); font-size: .8rem; }
.location-marker { stroke: #fff; stroke-width: 3px; }
.dark-screen { color: #edf2f7; background: #101820; --line: #34404b; --muted: #a7b2be; }
.dark-screen .map-header, .dark-screen .map-card, .dark-screen .aircraft-panel { background: #17212b; border-color: #34404b; }
.dark-screen .brand, .dark-screen h1, .dark-screen .airport-heading strong, .dark-screen .aircraft-registration { color: #eaf1f7; }
.dark-screen .map-actions button, .dark-screen .map-actions a { color: #edf2f7; background: #263442; border-color: #506070; }
.dark-screen .airport-count { color: #eaf1f7; background: #263442; }
.dark-screen .aircraft-row:hover, .dark-screen .aircraft-row.is-live { background: #362e24; }
.dark-screen .aircraft-label { color: #eaf1f7; background: rgba(30, 39, 48, .96); border-color: #657382; }
.dark-screen .leaflet-tile { filter: brightness(.52) saturate(.75); }
.dark-screen .leaflet-control, .dark-screen .leaflet-popup-content-wrapper, .dark-screen .leaflet-popup-tip { filter: invert(.86) hue-rotate(180deg); }
@media (max-width: 920px) {
  .map-layout { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .map-card { height: 58vh; min-height: 350px; }
  .aircraft-panel { max-height: 72vh; min-height: 390px; }
}
@media (max-width: 560px) {
  .map-header { align-items: flex-start; flex-direction: column; }
  .map-header > div { width: 100%; justify-content: space-between; }
  .map-actions { width: 100%; justify-content: stretch; gap: 6px; }
  .map-actions button, .map-actions a { flex: 1 1 auto; padding: 0 8px; font-size: .78rem; }
  .map-layout { padding: 8px; gap: 8px; }
  .map-card { height: 52vh; min-height: 300px; }
  .aircraft-panel { max-height: 72vh; }
  .aircraft-row { grid-template-columns: 58px minmax(80px, 1fr) minmax(46px, .55fr) 18px; gap: 4px; }
  .aircraft-extra { padding-left: 68px; }
}