:root {
  --bg: #071018;
  --bg-soft: #0b1720;
  --panel: rgba(12, 26, 37, 0.96);
  --panel-2: rgba(16, 34, 47, 0.96);
  --line: rgba(125, 180, 207, 0.18);
  --line-strong: rgba(85, 207, 242, 0.42);
  --text: #edf7fb;
  --muted: #8ea7b4;
  --cyan: #55cff2;
  --green: #65d89b;
  --orange: #f6a83b;
  --red: #ff7280;
  --purple: #aa8aff;
  --gray: #80919b;
  --shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
  --radius: 15px;
  --font: Inter, "Segoe UI", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 14% -10%, rgba(37, 124, 164, .22), transparent 35%),
    radial-gradient(circle at 95% 10%, rgba(47, 107, 128, .12), transparent 30%),
    var(--bg);
  font-family: var(--font);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
code { color: #bdeeff; font-family: var(--mono); }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.engineering-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .34;
  background-image:
    linear-gradient(rgba(88, 166, 201, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 201, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000 15%, transparent 90%);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 74px;
  padding: 11px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 16, 24, .92);
  backdrop-filter: blur(16px);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand > span:last-child { display: grid; gap: 3px; }
.brand strong { font-size: 18px; letter-spacing: .22em; }
.brand small { color: var(--muted); font: 9px var(--mono); letter-spacing: .12em; }
.brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(85, 207, 242, .08);
}
.brand-mark i {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--cyan);
  transform: skewY(-20deg);
}
.brand-mark i:nth-child(1) { top: 12px; }
.brand-mark i:nth-child(2) { top: 20px; left: 13px; }
.brand-mark i:nth-child(3) { top: 28px; left: 18px; }

.main-nav { display: flex; align-items: center; gap: 5px; }
.main-nav a {
  padding: 10px 13px;
  color: var(--muted);
  border-radius: 9px;
  font-size: 13px;
}
.main-nav a:hover { color: var(--text); background: rgba(85, 207, 242, .08); }
.account-menu { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.account-name { color: var(--muted); font-size: 12px; }
.role-pill, .live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(85, 207, 242, .07);
  font: 10px var(--mono);
  letter-spacing: .08em;
}
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(101, 216, 155, .1); }
.link-button {
  border: 0;
  padding: 5px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.link-button:hover { color: var(--text); }

.page-shell { width: min(1720px, calc(100% - 28px)); margin: 18px auto; }
.footer {
  display: flex;
  justify-content: space-between;
  width: min(1720px, calc(100% - 28px));
  margin: 0 auto;
  padding: 0 4px 18px;
  color: #647986;
  font: 10px var(--mono);
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 8px 2px 16px;
}
.page-heading h1 { margin: 5px 0 5px; font-size: clamp(25px, 3vw, 38px); line-height: 1.08; }
.page-heading p { margin: 0; max-width: 760px; color: var(--muted); line-height: 1.55; }
.heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.section-label { color: var(--cyan); font: 700 10px var(--mono); letter-spacing: .14em; }
.back-link { display: inline-block; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.back-link:hover { color: var(--cyan); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.panel-heading h2, .create-panel h2, .zone-builder h2 { margin: 5px 0 0; font-size: 20px; }

.fleet-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(280px, 360px);
  gap: 14px;
  margin-bottom: 14px;
}
.map-card { position: relative; min-height: 570px; }
.map-large { width: 100%; min-height: 570px; background: #12232e; }
.map-flight { width: 100%; min-height: 640px; background: #12232e; }
.map-warning {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  text-align: center;
  color: var(--muted);
  background: #0c1922;
}
.device-list { min-height: 570px; max-height: 700px; overflow: auto; }
.device-card { display: block; padding: 16px 18px; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.device-card:hover, .device-card.active { background: rgba(85, 207, 242, .08); }
.device-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.device-card strong { font-size: 14px; }
.device-card small { display: block; margin-top: 6px; color: var(--muted); font: 10px var(--mono); }
.mini-metrics { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.mini-metrics span { padding: 5px 7px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; font: 10px var(--mono); }

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 9px var(--mono);
  white-space: nowrap;
}
.status-badge.online { color: var(--green); border-color: rgba(101,216,155,.35); background: rgba(101,216,155,.07); }
.status-badge.offline { color: var(--red); border-color: rgba(255,114,128,.35); background: rgba(255,114,128,.07); }
.status-badge.neutral { color: var(--muted); }
.status-badge.warning { color: var(--orange); }

.metric-strip { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.metric-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.metric-card span { display: block; color: var(--muted); font-size: 11px; }
.metric-card strong { display: block; margin-top: 7px; font: 650 19px var(--mono); }
.metric-card.warning strong { color: var(--purple); }

.table-panel { margin-top: 14px; }
.table-scroll { overflow: auto; max-height: 520px; }
.flight-table-scroll { max-height: 600px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 12px; }
thead { position: sticky; top: 0; z-index: 3; background: #0e1d27; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(125,180,207,.11); }
th { color: var(--muted); font-weight: 500; }
tbody tr { transition: background .12s ease; }
tbody tr:hover, tbody tr.active { background: rgba(85,207,242,.11); box-shadow: inset 3px 0 0 var(--cyan); }
.table-link { color: var(--cyan); font-size: 12px; }
.empty-cell, .empty-state { padding: 34px; color: var(--muted); text-align: center; }
.demo-label { display: inline-block; margin-left: 7px; color: var(--purple); font: 8px var(--mono); }
.row-actions { display: flex; gap: 6px; }

.device-detail-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) 350px;
  gap: 14px;
}
.detail-sidebar { padding: 20px; }
.detail-list { margin: 16px 0 20px; }
.detail-list div { padding: 11px 0; border-bottom: 1px solid var(--line); }
.detail-list dt { color: var(--muted); font-size: 10px; }
.detail-list dd { margin: 5px 0 0; overflow-wrap: anywhere; }
.map-tools, .layer-bar {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: rgba(7,16,24,.86);
  backdrop-filter: blur(8px);
}
.layer-bar label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }

.zone-builder, .create-panel { margin-top: 14px; padding: 20px; }
.zone-builder-list { display: grid; gap: 8px; margin-top: 16px; }
.zone-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(3,11,17,.3); }
.zone-ident { display: flex; align-items: center; gap: 9px; }
.zone-swatch { width: 12px; height: 12px; border-radius: 50%; }

.flight-layout { display: grid; grid-template-columns: minmax(540px, 1fr) 370px; gap: 14px; }
.flight-info { padding: 20px; max-height: 640px; overflow: auto; }

.form-grid { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.form-grid label, .stack-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }
.stack-form { display: grid; gap: 12px; }
.compact-form { margin-top: 16px; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: #0a1720;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(85,207,242,.07); }
.check-row { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; min-height: 42px; }
.check-row input { width: auto; min-height: auto; }

.primary-button, .secondary-button, .small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: transform .1s ease, background .12s ease;
}
.primary-button { color: #041018; border: 1px solid var(--cyan); background: var(--cyan); font-weight: 700; }
.secondary-button { color: var(--text); border: 1px solid var(--line); background: rgba(85,207,242,.07); }
.small-button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); background: rgba(8,22,31,.92); font-size: 11px; }
.primary-button:hover, .secondary-button:hover, .small-button:hover { transform: translateY(-1px); }
.primary-button.inline, .secondary-button.inline { min-width: 110px; }
.danger { color: var(--red) !important; border-color: rgba(255,114,128,.35) !important; }

.device-admin-list { display: grid; gap: 14px; }
.admin-device-card { padding: 20px; }
.admin-device-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.admin-device-title h2 { margin: 5px 0; }
.admin-device-title p { margin: 0; color: var(--muted); }
.settings-grid { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.assign-row { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; align-items: end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.assign-row label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }

.flash-stack { position: fixed; z-index: 100; right: 16px; top: 86px; display: grid; gap: 8px; width: min(410px, calc(100% - 32px)); }
.flash { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: #0d1c26; box-shadow: var(--shadow); font-size: 12px; }
.flash-success { border-color: rgba(101,216,155,.4); }
.flash-danger { border-color: rgba(255,114,128,.4); }
.flash-warning { border-color: rgba(246,168,59,.4); }
.flash button { border: 0; color: var(--muted); background: transparent; cursor: pointer; }

.auth-page .topbar { justify-content: center; }
.auth-page .main-nav, .auth-page .account-menu { display: none; }
.auth-shell { min-height: calc(100vh - 145px); display: grid; place-items: center; padding: 24px 0; }
.auth-card { width: min(510px, 100%); padding: 28px; }
.auth-card h1 { margin: 8px 0 7px; }
.auth-card > p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 15px; color: var(--muted); font-size: 12px; }
.demo-box { margin-top: 18px; padding: 14px; border: 1px solid rgba(170,138,255,.3); border-radius: 10px; background: rgba(170,138,255,.06); }
.demo-box strong { color: var(--purple); }
.demo-box code { display: block; margin-top: 5px; }

.source-gnss { color: var(--cyan); }
.source-lbs { color: var(--orange); }
.source-last_known { color: var(--gray); }
.validation-valid_gnss, .validation-trusted_lbs { color: var(--green); }
.validation-corrected_lbs,
.validation-corrected_wifi,
.validation-corrected_ref_consensus,
.validation-corrected_wifi_region,
.validation-corrected_lbs_region,
.validation-corrected_ref_recovery,
.validation-suspicious_hidden { color: var(--purple); }
.validation-valid_gnss_recovered { color: var(--green); }
.validation-unverified_gnss { color: var(--orange); }


.auth-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(360px, .85fr);
  gap: 16px;
  min-height: calc(100vh - 145px);
  align-items: center;
  padding: 28px 0;
}
.auth-layout.compact { grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr); }
.auth-visual { padding: clamp(26px, 6vw, 76px); }
.auth-visual .eyebrow { color: var(--cyan); font: 700 11px var(--mono); letter-spacing: .14em; }
.auth-visual h1 { max-width: 760px; margin: 12px 0; font-size: clamp(34px, 5vw, 66px); line-height: 1.02; }
.auth-visual p { max-width: 720px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.auth-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; max-width: 640px; margin-top: 26px; }
.auth-feature-grid div { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(10,24,33,.6); }
.auth-feature-grid strong { display: block; color: var(--cyan); font: 700 17px var(--mono); }
.auth-feature-grid span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.center-card { width: min(560px, 100%); margin: 8vh auto; padding: 28px; }
.center-card h1 { margin: 8px 0; }
.center-card p { color: var(--muted); line-height: 1.55; }
.center-card .text-link { display: inline-block; margin-top: 16px; color: var(--cyan); }
.big-icon { margin-bottom: 12px; font-size: 42px; }
.wide-form { width: min(640px, 100%); }

@media (max-width: 1180px) {
  .fleet-layout, .device-detail-grid, .flight-layout, .auth-layout, .auth-layout.compact { grid-template-columns: 1fr; }
  .device-list { min-height: auto; max-height: 440px; }
  .detail-sidebar, .flight-info { max-height: none; }
  .metric-strip { grid-template-columns: repeat(3, 1fr); }
  .form-grid, .settings-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .topbar { padding: 10px 13px; flex-wrap: wrap; gap: 9px; }
  .brand small, .account-name, .role-pill { display: none; }
  .main-nav { order: 3; width: 100%; overflow-x: auto; }
  .account-menu { margin-left: auto; }
  .page-shell { width: calc(100% - 18px); }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { justify-content: flex-start; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .form-grid.two, .settings-grid, .assign-row { grid-template-columns: 1fr; }
  .map-card, .map-large, .map-flight { min-height: 470px; }
  .footer { width: calc(100% - 18px); flex-direction: column; gap: 5px; }
  .auth-card { padding: 20px; }
}

.management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.subpanel, .admin-maintenance, .activation-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(5, 15, 22, .48);
}
.subpanel .assign-row { margin-top: 10px; padding-top: 10px; }
.access-list { display: grid; gap: 8px; margin-top: 12px; }
.activation-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, .9fr);
  gap: 18px;
  align-items: center;
  margin-top: 14px;
}
.activation-panel h2, .admin-maintenance h2 { margin: 5px 0; }
.activation-panel p, .admin-maintenance p { margin: 0; }
.activation-panel .assign-row { margin: 0; padding: 0; border-top: 0; grid-template-columns: 1fr auto; }
.admin-maintenance { margin-top: 14px; }
.danger-zone { border: 1px solid rgba(255,114,128,.25); border-radius: 10px; padding: 14px; background: rgba(255,114,128,.04); }
.panel-actions { display: flex; justify-content: flex-end; padding: 14px 16px; border-top: 1px solid var(--line); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

@media (max-width: 980px) {
  .management-grid, .activation-panel { grid-template-columns: 1fr; }
  .activation-panel .assign-row { grid-template-columns: 1fr; }
}
.demo-enter { margin-top: 12px; }

/* Fleet 5.2 device telemetry panel */
.telemetry-layout {
  grid-template-columns: 330px minmax(520px, 1fr) 320px;
  align-items: stretch;
}
.telemetry-sidebar {
  padding: 18px;
  max-height: 720px;
  overflow: auto;
}
.telemetry-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.telemetry-title h2 { margin: 5px 0 0; font-size: 18px; }
.telemetry-live-dot {
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--gray);
  box-shadow: 0 0 0 5px rgba(142,156,165,.09);
}
.telemetry-live-dot.online {
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(101,216,155,.10), 0 0 18px rgba(101,216,155,.36);
}
.telemetry-live-dot.offline { background: var(--red); }
.telemetry-group-label {
  margin: 17px 0 6px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--cyan);
  font: 700 9px var(--mono);
  letter-spacing: .13em;
}
.telemetry-row {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 0;
}
.telemetry-row.primary { padding-top: 4px; }
.telemetry-row.compact { padding-bottom: 1px; }
.telemetry-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: var(--cyan);
  border: 1px solid rgba(85,207,242,.24);
  border-radius: 8px;
  background: rgba(85,207,242,.06);
  font: 700 15px var(--mono);
}
.telemetry-row span, .telemetry-pair span, .telemetry-radio-grid span, .telemetry-footer span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}
.telemetry-row strong {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
  font: 650 13px var(--mono);
}
.telemetry-row small {
  display: block;
  margin-top: 3px;
  color: #6f8895;
  font-size: 9px;
  line-height: 1.35;
}
.telemetry-pair, .telemetry-radio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 7px 0;
}
.telemetry-pair > div, .telemetry-radio-grid > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(3,11,17,.26);
}
.telemetry-radio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.telemetry-pair strong, .telemetry-radio-grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font: 650 12px var(--mono);
}
.telemetry-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.telemetry-footer strong { font: 650 12px var(--mono); }

@media (max-width: 1500px) {
  .telemetry-layout { grid-template-columns: 320px minmax(500px, 1fr); }
  .telemetry-layout > .detail-sidebar { grid-column: 1 / -1; }
}

@media (max-width: 1180px) {
  .telemetry-layout { grid-template-columns: 1fr; }
  .telemetry-layout > .detail-sidebar { grid-column: auto; }
  .telemetry-sidebar { max-height: none; }
}


/* Fleet 5.2.1 admin live telemetry hotfix */
.admin-telemetry-layout {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(520px, 1fr) minmax(250px, 320px);
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}
.admin-live-telemetry { min-height: 570px; max-height: 700px; }
.admin-device-selector { display: block; margin: 4px 0 12px; color: var(--muted); font-size: 10px; }
.admin-device-selector select { width: 100%; margin-top: 6px; }
@media (max-width: 1500px) {
  .admin-telemetry-layout { grid-template-columns: 310px minmax(500px, 1fr); }
  .admin-telemetry-layout > .device-list { grid-column: 1 / -1; min-height: auto; }
}
@media (max-width: 1050px) {
  .admin-telemetry-layout { grid-template-columns: 1fr; }
  .admin-live-telemetry, .admin-telemetry-layout > .device-list { min-height: auto; max-height: none; }
}

/* Fleet 5.2.2 route readability and map/table synchronization */
.flight-table-scroll tbody tr.hover-active {
  background: rgba(85, 207, 242, .16);
  box-shadow: inset 4px 0 0 var(--cyan);
}
.flight-table-scroll tbody tr.selected {
  background: rgba(255, 214, 92, .20) !important;
  box-shadow: inset 5px 0 0 #ffd65c !important;
}
.flight-table-scroll tbody tr.selected td:first-child {
  color: #ffe98c;
  font-weight: 800;
}
.flight-table-scroll tbody tr.row-zone-forbidden:not(.selected) {
  background: rgba(255, 82, 99, .065);
}
.zone-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--zone-color, #7e929e) 55%, transparent);
  border-radius: 999px;
  color: var(--zone-color, #9fb2bc);
  background: color-mix(in srgb, var(--zone-color, #7e929e) 10%, transparent);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.zone-badge.zone-forbidden {
  --zone-color: #ff5263 !important;
  color: #ff8d99;
  background: rgba(255, 82, 99, .12);
  border-color: rgba(255, 82, 99, .5);
}
.zone-badge.zone-warning {
  --zone-color: #f6a83b !important;
}
.zone-badge.zone-none {
  --zone-color: #6f8895 !important;
  opacity: .75;
}
.validation-valid_gnss_reference_conflict { color: #e4ad4d; }

/* Fleet 5.2.2.1 map UX and mobile performance hotfix */
.map-mode-toolbar {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: 12px;
  display: grid;
  gap: 6px;
  max-width: min(520px, calc(100% - 24px));
  padding: 8px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 11px;
  background: rgba(7,16,24,.88);
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
  backdrop-filter: blur(9px);
}
.map-mode-buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.map-mode-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(7,18,26,.92);
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
.map-mode-button.active {
  color: #06141c;
  border-color: var(--cyan);
  background: var(--cyan);
  font-weight: 750;
}
.map-mode-toolbar small {
  display: block;
  max-width: 470px;
  overflow: hidden;
  color: #8fa8b5;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .dashboard-map-card {
    display: flex;
    flex-direction: column;
  }
  .map-mode-toolbar {
    position: static;
    order: -1;
    width: 100%;
    max-width: none;
    padding: 9px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: #0b1922;
    box-shadow: none;
    backdrop-filter: none;
  }
  .map-mode-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .map-mode-button {
    width: 100%;
    min-height: 40px;
    padding: 0 8px;
  }
  .map-mode-toolbar small {
    max-width: 100%;
    padding: 0 3px;
    white-space: normal;
  }
  .dashboard-map-card .map-large {
    min-height: 430px;
  }
}


/* Fleet 5.4.0 Sensor Dashboard */
.sensor-dashboard { display: grid; gap: 14px; margin-bottom: 14px; }
.sensor-command-panel { overflow: visible; }
.sensor-heading { align-items: center; }
.sensor-heading-status { display: grid; justify-items: end; gap: 5px; }
.sensor-status-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sensor-stream {
  display: inline-flex; align-items: center; min-height: 29px; padding: 0 10px;
  border: 1px solid rgba(126,174,194,.30); border-radius: 999px;
  color: var(--muted); background: rgba(126,174,194,.06); font: 700 10px var(--mono);
}
.sensor-stream.live { color: var(--green); border-color: rgba(101,216,155,.42); background: rgba(101,216,155,.08); }
.sensor-stream.waiting { color: var(--orange); border-color: rgba(246,168,59,.42); background: rgba(246,168,59,.08); }
.sensor-stream.stale { color: var(--red); border-color: rgba(255,114,128,.42); background: rgba(255,114,128,.08); }
.sensor-overall {
  display: inline-flex; align-items: center; min-height: 29px; padding: 0 10px;
  border: 1px solid rgba(101,216,155,.35); border-radius: 999px;
  color: var(--green); background: rgba(101,216,155,.07); font: 700 10px var(--mono);
}
.sensor-overall.warning { color: var(--orange); border-color: rgba(246,168,59,.45); background: rgba(246,168,59,.08); }
.sensor-overall.danger { color: var(--red); border-color: rgba(255,114,128,.45); background: rgba(255,114,128,.08); }
.sensor-gauge-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; padding: 15px 18px; }
.sensor-gauge-grid.compact { grid-template-columns: repeat(5, minmax(135px, 1fr)); }
.sensor-gauge {
  min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 13px;
  background: radial-gradient(circle at 50% 42%, rgba(52,115,143,.15), transparent 62%), rgba(3,11,17,.40);
  text-align: center;
}
.sensor-gauge > span { display: block; color: var(--muted); font: 700 9px var(--mono); letter-spacing: .10em; }
.sensor-gauge canvas { display: block; width: 100%; height: 190px; }
.sensor-gauge strong { display: block; min-height: 21px; color: var(--text); font: 700 13px var(--mono); }
.sensor-gauge strong i { font-style: normal; }
.sensor-health-strip {
  display: grid; grid-template-columns: repeat(3, auto) repeat(6, minmax(115px, 1fr));
  gap: 8px; padding: 0 18px 17px; align-items: stretch;
}
.sensor-health-strip > span {
  display: grid; place-items: center; min-width: 74px; padding: 8px;
  border: 1px solid var(--line); border-radius: 9px; color: var(--gray); font: 700 9px var(--mono);
}
.sensor-health-strip > span.ok { color: var(--green); border-color: rgba(101,216,155,.35); background: rgba(101,216,155,.06); }
.sensor-health-strip > span.bad { color: var(--red); border-color: rgba(255,114,128,.35); background: rgba(255,114,128,.06); }
.sensor-health-strip > div { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(3,11,17,.28); }
.sensor-health-strip small { display: block; color: var(--muted); font-size: 9px; }
.sensor-health-strip strong { display: block; margin-top: 4px; overflow-wrap: anywhere; font: 650 11px var(--mono); }
.sensor-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sensor-chart-card { min-height: 285px; padding: 13px 15px 10px; }
.sensor-chart-card > div { display: flex; justify-content: space-between; gap: 12px; color: var(--cyan); font: 700 9px var(--mono); letter-spacing: .1em; }
.sensor-chart-card > div small { color: var(--muted); letter-spacing: normal; }
.sensor-chart-card canvas { display: block; width: 100%; height: 235px; margin-top: 6px; }
.sensor-chart-wide { grid-column: 1 / -1; }
.sensor-settings-grid { display: grid; grid-template-columns: minmax(620px, 1.4fr) minmax(330px, .6fr); gap: 14px; }
.sensor-limits-list { display: grid; gap: 9px; padding: 14px; }
.sensor-limit-row { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(3,11,17,.3); }
.sensor-limit-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.sensor-limit-heading .check-row { padding: 0; border: 0; }
.sensor-limit-heading > span { color: var(--cyan); font: 700 10px var(--mono); }
.sensor-limit-row p { margin: 6px 0 10px; color: var(--muted); font-size: 10px; }
.sensor-limit-thresholds { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 8px; }
.sensor-limit-timing { display: grid; grid-template-columns: repeat(2, minmax(120px, 180px)); gap: 8px; margin-top: 8px; }
.sensor-limit-row label { color: var(--muted); font-size: 9px; }
.sensor-limit-row input[type="number"] { width: 100%; margin-top: 5px; }
.sensor-events-list { display: grid; gap: 8px; max-height: 690px; padding: 14px; overflow: auto; }
.sensor-event { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(3,11,17,.28); }
.sensor-event.warning { border-left: 4px solid #ffd65c; }
.sensor-event.prohibited { border-left: 4px solid var(--red); background: rgba(255,114,128,.05); }
.sensor-event > div { display: flex; justify-content: space-between; gap: 10px; }
.sensor-event > div strong { font-size: 12px; }
.sensor-event > div span { color: var(--muted); font: 700 8px var(--mono); }
.sensor-event.active > div span { color: var(--red); }
.sensor-event p { margin: 7px 0; color: #bdd0d9; font-size: 10px; line-height: 1.4; }
.sensor-event small { color: var(--muted); font: 9px var(--mono); }
.sensor-status-mini, .sensor-event-badge { display: inline-flex; min-height: 22px; align-items: center; padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; font: 700 9px var(--mono); }
.sensor-status-mini.ok { color: var(--green); }
.sensor-status-mini.bad { color: var(--orange); }
.sensor-event-badge.warning { color: #ffd65c; border-color: rgba(255,214,92,.42); }
.sensor-event-badge.prohibited { color: var(--red); border-color: rgba(255,114,128,.42); }
.flight-table-scroll tbody tr.row-sensor-warning:not(.selected) { background: rgba(255,214,92,.08); box-shadow: inset 4px 0 0 #ffd65c; }
.flight-table-scroll tbody tr.row-sensor-prohibited:not(.selected) { background: rgba(255,114,128,.10); box-shadow: inset 4px 0 0 var(--red); }
.flight-sensor-dashboard { margin-top: 14px; }

@media (max-width: 1450px) {
  .sensor-health-strip { grid-template-columns: repeat(3, auto) repeat(3, minmax(150px, 1fr)); }
  .sensor-settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .sensor-gauge-grid, .sensor-gauge-grid.compact { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .sensor-limit-thresholds { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .sensor-heading { align-items: flex-start; }
  .sensor-heading-status { justify-items: start; }
  .sensor-status-badges { justify-content: flex-start; }
  .sensor-gauge-grid, .sensor-gauge-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
  .sensor-gauge canvas { height: 155px; }
  .sensor-health-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 10px 12px; }
  .sensor-health-strip > span { min-width: 0; }
  .sensor-chart-grid { grid-template-columns: 1fr; }
  .sensor-chart-wide { grid-column: auto; }
  .sensor-chart-card canvas { height: 210px; }
  .sensor-limit-thresholds, .sensor-limit-timing { grid-template-columns: 1fr; }
}

.sensor-diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.sensor-diagnostics-grid > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(126, 174, 194, .16);
  border-radius: 10px;
  background: rgba(6, 21, 29, .48);
}
.sensor-diagnostics-grid small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sensor-diagnostics-grid strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .sensor-diagnostics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sensor-diagnostics-grid { grid-template-columns: 1fr; }
}


/* Fleet 5.4.1: cockpit display calibration */
.instrument-calibration-grid {
  display: grid;
  grid-template-columns: minmax(460px, 1.15fr) minmax(360px, .85fr);
  gap: 12px;
  padding: 0 18px 16px;
}
.instrument-calibration-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(8,27,38,.78), rgba(3,11,17,.52));
}
.instrument-calibration-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 13px;
}
.instrument-calibration-heading h3 { margin: 3px 0 0; font-size: 15px; }
.calibration-state {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: 700 9px var(--mono);
  white-space: nowrap;
}
.calibration-state.active { color: var(--green); border-color: rgba(101,216,155,.38); }
.altimeter-control-layout {
  display: grid;
  grid-template-columns: 190px minmax(190px, 1fr);
  gap: 17px;
  align-items: center;
}
.pressure-knob {
  --knob-angle: 41deg;
  position: relative;
  display: block;
  width: 176px;
  height: 176px;
  margin: auto;
  padding: 0;
  border: 1px solid rgba(128,190,215,.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #122b37 0 33%, transparent 34%),
    repeating-conic-gradient(from -135deg, rgba(232,248,255,.72) 0 1deg, transparent 1deg 13.5deg),
    radial-gradient(circle, #0c202a 0 61%, #07131a 62% 100%);
  box-shadow: inset 0 0 25px rgba(0,0,0,.65), 0 8px 24px rgba(0,0,0,.28);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.pressure-knob:active { cursor: grabbing; }
.pressure-knob:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.pressure-knob-pointer {
  position: absolute;
  z-index: 2;
  left: calc(50% - 2px);
  top: 13px;
  width: 4px;
  height: 75px;
  border-radius: 4px;
  background: linear-gradient(#ffdf7e, #f6a83b 70%, transparent 70%);
  transform-origin: 50% 75px;
  transform: rotate(var(--knob-angle));
  filter: drop-shadow(0 0 4px rgba(246,168,59,.55));
}
.pressure-knob-center {
  position: absolute;
  z-index: 3;
  inset: 47px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(85,207,242,.22);
  border-radius: 50%;
  background: #08171e;
  box-shadow: inset 0 0 15px rgba(0,0,0,.65);
  color: var(--text);
}
.pressure-knob-center small { color: var(--muted); font: 700 8px var(--mono); }
.pressure-knob-center strong { margin-top: 3px; font: 800 17px var(--mono); }
.pressure-knob-center em { color: var(--cyan); font: normal 8px var(--mono); }
.altimeter-values { display: grid; gap: 8px; }
.altimeter-values > div,
.attitude-calibration-values > div {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(3,11,17,.36);
}
.altimeter-values small,
.attitude-calibration-values small { display: block; color: var(--muted); font-size: 9px; }
.altimeter-values strong,
.attitude-calibration-values strong { display: block; margin-top: 5px; font: 750 13px var(--mono); }
.altimeter-values .altitude-primary strong { color: var(--cyan); font-size: 24px; }
.pressure-number-label { display: block; margin-top: 12px; color: var(--muted); font-size: 9px; }
.pressure-number-label input { width: 100%; margin-top: 5px; }
.instrument-button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.attitude-calibration-values { display: grid; gap: 9px; }
.attitude-calibration-values > div:first-child strong { color: var(--cyan); font-size: 21px; }
.attitude-buttons { margin-top: 15px; }
.instrument-note { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
@media (max-width: 1100px) {
  .instrument-calibration-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .instrument-calibration-grid { padding: 0 10px 12px; }
  .instrument-calibration-heading { display: grid; }
  .altimeter-control-layout { grid-template-columns: 1fr; }
  .pressure-knob { width: 160px; height: 160px; }
  .pressure-knob-pointer { height: 68px; transform-origin: 50% 68px; }
  .pressure-knob-center { inset: 43px; }
}


/* Fleet 5.4.5: synchronized graph / table / map point selection */
.sensor-chart-card canvas.sensor-chart-interactive {
  cursor: crosshair;
  touch-action: pan-y;
  border-radius: 8px;
  outline: none;
}
.sensor-chart-card canvas.sensor-chart-interactive:hover {
  background: rgba(85, 207, 242, .025);
}
.sensor-chart-card canvas.sensor-chart-interactive:focus-visible {
  box-shadow: 0 0 0 2px rgba(85, 207, 242, .48);
}
.selected-point-summary {
  margin: 6px 0 0;
  color: var(--cyan);
  font: 700 10px var(--mono);
  letter-spacing: .02em;
}
.flight-table-scroll tbody tr.hover-active td:first-child,
.flight-table-scroll tbody tr.selected td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}


/* Fleet 5.4.6: synchronized playback and time zoom */
.telemetry-review-toolbar {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(126,174,194,.18);
  border-radius: 12px;
  background: rgba(6,20,28,.48);
}
.telemetry-playback-controls,
.chart-zoom-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.telemetry-playback-controls label,
.chart-zoom-controls span {
  color: var(--muted);
  font: 700 10px var(--mono);
}
.telemetry-playback-controls select {
  min-width: 76px;
  margin-left: 5px;
}
.telemetry-playback-controls .inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.telemetry-playback-controls #telemetry-play.active {
  box-shadow: 0 0 0 2px rgba(85,207,242,.22), 0 0 24px rgba(85,207,242,.18);
}
.telemetry-range {
  width: 100%;
  accent-color: var(--cyan);
}
.chart-zoom-controls {
  border-top: 1px solid rgba(126,174,194,.12);
  padding-top: 10px;
}
.chart-zoom-controls [data-chart-window] {
  min-width: 220px;
  color: var(--cyan);
}
.chart-zoom-controls small {
  color: var(--muted);
  margin-left: auto;
}
.sensor-chart-card canvas.sensor-chart-interactive {
  touch-action: none;
  cursor: crosshair;
}
.sensor-chart-card canvas.sensor-chart-interactive:active {
  cursor: grabbing;
}
@media (max-width: 760px) {
  .chart-zoom-controls small { width: 100%; margin-left: 0; }
  .chart-zoom-controls [data-chart-window] { min-width: 100%; }
}

/* Fleet 5.5.0 — clearer navigation, NOTAM layer, demo and route gradients */
.demo-mode-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 34px; padding: 6px 18px; border-bottom: 1px solid rgba(246,168,59,.24);
  color: #ffd797; background: rgba(246,168,59,.08); font-size: 12px;
}
.demo-mode-banner strong { font: 800 10px var(--mono); letter-spacing: .12em; }
.auth-card-lead { margin-top: -8px; color: var(--muted); }
.demo-box-clean { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.demo-box-clean > div { display: grid; gap: 4px; }
.demo-box-clean small { color: var(--muted); line-height: 1.45; }
.demo-credentials-panel { display: grid; gap: 7px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(85,207,242,.04); }
.demo-credentials-panel > span { color: var(--cyan); font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.demo-credentials-panel small { color: var(--muted); line-height: 1.45; }
.map-overlay-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.map-overlay-toolbar label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); cursor: pointer; }
.map-overlay-toolbar input { accent-color: var(--cyan); }
.enhanced-layer-bar { display: grid; grid-template-columns: repeat(3, minmax(0, auto)) auto; gap: 10px 18px; align-items: center; }
.layer-group { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; }
.layer-group > span { width: 100%; color: var(--muted); font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.layer-group label { white-space: nowrap; }
.layer-status { color: var(--muted); font-size: 10px; }
.route-gradient-legend { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 260px; color: var(--muted); font: 10px var(--mono); }
.route-gradient-legend i { display: block; width: min(340px, 45vw); height: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); }
.route-gradient-legend .gradient-speed { background: linear-gradient(90deg, hsl(215 88% 55%), hsl(160 88% 50%), hsl(60 88% 55%), hsl(0 88% 55%)); }
.route-gradient-legend .gradient-altitude { background: linear-gradient(90deg, hsl(270 88% 55%), hsl(205 88% 55%), hsl(110 80% 52%), hsl(15 88% 55%)); }
.help-heading { margin-bottom: 18px; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.help-card { position: relative; padding: 20px; overflow: hidden; }
.help-card h2 { margin: 3px 0 8px; font-size: 18px; }
.help-card p { margin: 0; color: var(--muted); line-height: 1.62; }
.help-step { color: var(--cyan); font: 800 10px var(--mono); letter-spacing: .12em; }
.safety-note { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--orange); background: rgba(246,168,59,.07); color: #f3d1a0; font-size: 12px; line-height: 1.45; }
.sensor-gauge-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.main-nav a { transition: color .16s ease, background .16s ease, transform .16s ease; }
.main-nav a:hover { transform: translateY(-1px); }
.device-card { transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.device-card:hover { transform: translateY(-2px); border-color: var(--line-strong); background: rgba(85,207,242,.055); }

@media (max-width: 980px) {
  .enhanced-layer-bar { grid-template-columns: 1fr 1fr; }
  .help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .demo-box-clean { align-items: stretch; flex-direction: column; }
  .enhanced-layer-bar { grid-template-columns: 1fr; }
  .route-gradient-legend { min-width: 0; width: 100%; }
  .route-gradient-legend i { flex: 1; width: auto; }
  .demo-mode-banner { align-items: flex-start; flex-direction: column; gap: 2px; }
}
.help-quickstart { margin-bottom: 14px; padding: 16px 18px; }
.help-quickstart > div { display: grid; gap: 5px; }
.help-quickstart strong { color: var(--cyan); font: 800 11px var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.help-quickstart span { color: var(--text); line-height: 1.55; }
.help-grid-detailed .help-card p + p { margin-top: 9px; }
.help-card code { color: var(--cyan); font-size: .92em; }
.help-card a { color: var(--cyan); }
@media print {
  .main-header, .engineering-grid, .flash-stack, .demo-mode-banner, .help-heading .secondary-button { display: none !important; }
  body, .app-shell, main { background: #fff !important; color: #111 !important; }
  .panel, .help-card, .help-quickstart { box-shadow: none !important; background: #fff !important; border-color: #ccc !important; break-inside: avoid; }
  .help-card p, .help-quickstart span, .safety-note { color: #333 !important; }
  .help-grid { grid-template-columns: 1fr 1fr; }
}

/* Fleet 5.5.1 — full demo console, NOTAM focus and geofence sandbox */
.demo-showcase-heading { margin-bottom: 14px; }
.demo-full-layout { align-items: stretch; }
.demo-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.demo-flight-table .panel-heading p { margin: 6px 0 0; max-width: 900px; }
.device-card-actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--cyan); font-size: 10px; }
.mini-map-button {
  appearance: none; border: 1px solid var(--line-strong); background: rgba(255,255,255,.025);
  color: var(--text); border-radius: 8px; padding: 6px 9px; font: 700 9px var(--mono);
  letter-spacing: .04em; cursor: pointer;
}
.mini-map-button:hover { border-color: var(--cyan); color: var(--cyan); }
.demo-zone-sandbox {
  display: grid; gap: 3px; margin: 0 12px 10px; padding: 10px 12px;
  border: 1px solid rgba(85,207,242,.25); border-radius: 10px; background: rgba(85,207,242,.055);
}
.demo-zone-sandbox strong { color: var(--cyan); font: 800 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.demo-zone-sandbox span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.zone-system-badge {
  display: inline-flex; align-items: center; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--muted); font: 700 8px var(--mono); text-transform: uppercase; letter-spacing: .06em;
}
@media (max-width: 1180px) {
  .demo-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .demo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-overlay-toolbar .mini-map-button { width: 100%; }
}

/* 5.5.3 flight-first UX */
.flight-picker-panel{padding:14px}.flight-picker-toolbar{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(260px,1fr) auto;gap:12px;align-items:end;margin-bottom:14px}.flight-picker-toolbar label{display:grid;gap:5px;color:var(--muted);font-size:10px}.flight-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}.flight-picker-card{display:grid;gap:8px;padding:14px;border:1px solid rgba(126,174,194,.16);border-radius:12px;background:rgba(6,21,30,.74);text-decoration:none;color:var(--text);transition:.15s}.flight-picker-card:hover{transform:translateY(-1px);border-color:rgba(85,207,242,.5);background:rgba(9,31,43,.92)}.flight-picker-card-top,.flight-picker-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.flight-picker-card strong{font-size:14px}.flight-picker-card>span,.flight-picker-card small{color:var(--muted)}.flight-picker-card-footer b{color:var(--cyan);font-size:10px}.zone-wizard{width:min(760px,94vw);border:1px solid rgba(255,159,28,.35);border-radius:16px;background:#07141c;color:var(--text);padding:0;box-shadow:0 24px 70px #0009}.zone-wizard::backdrop{background:#02070ba8;backdrop-filter:blur(3px)}.zone-wizard-shell{padding:16px}.zone-wizard-head{display:flex;justify-content:space-between;align-items:flex-start}.zone-wizard-head h3{margin:4px 0}.icon-close{border:0;background:transparent;color:var(--muted);font-size:28px;cursor:pointer}.zone-stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}.zone-stepper span{padding:7px;border-radius:8px;background:rgba(126,174,194,.07);font:700 9px var(--mono);color:var(--muted)}.zone-stepper .active{background:rgba(255,159,28,.16);color:#ffb347}.zone-shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.zone-shape-grid button{display:grid;gap:3px;place-items:center;min-height:88px;border:1px solid rgba(126,174,194,.18);border-radius:11px;background:rgba(4,17,25,.85);color:var(--text);font-size:24px;cursor:pointer}.zone-shape-grid button:hover{border-color:#ff9f1c}.zone-shape-grid b{font-size:11px}.zone-shape-grid small{font-size:9px;color:var(--muted)}.zone-wizard-hint{padding:10px;border-left:3px solid #ff9f1c;background:rgba(255,159,28,.07)}.zone-wizard-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.zone-wizard-fields label{display:grid;gap:4px;font-size:9px;color:var(--muted)}.zone-wizard-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.notam-raw{white-space:pre-wrap;max-width:480px;font-size:10px}.ymaps-2-1-79-balloon__content{font-size:12px!important}
@media(max-width:800px){.flight-picker-toolbar{grid-template-columns:1fr}.zone-shape-grid,.zone-wizard-fields{grid-template-columns:repeat(2,1fr)}}

/* Fleet 5.5.3 — guided geofence drawing */
.zone-draft-toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px 14px;margin-top:8px;border:1px solid rgba(255,159,28,.55);background:rgba(255,159,28,.09);border-radius:12px}.zone-draft-toolbar.hidden{display:none}.zone-draft-toolbar>div:first-child{display:flex;flex-direction:column;gap:2px}.zone-draft-toolbar span{font-size:.86rem;color:var(--muted)}.zone-draft-actions{display:flex;gap:8px;flex-wrap:wrap}.notam-source-note{display:inline-block;margin-top:4px;color:#d97706;font-size:.86em}@media(max-width:760px){.zone-draft-toolbar{align-items:flex-start;flex-direction:column}.zone-draft-actions{width:100%}}

/* 5.5.3 */
.notam-balloon{max-width:520px}.notam-balloon .notam-raw{max-height:230px;overflow:auto;white-space:pre-wrap;font-size:10px}

/* 5.5.4 user activity */
.activity-filter-panel{margin-bottom:14px}.activity-filter-grid{display:grid;grid-template-columns:140px minmax(220px,1.4fr) minmax(170px,1fr) minmax(150px,.8fr) auto;gap:10px;align-items:end;padding:14px}.activity-filter-grid label{display:grid;gap:5px;font-size:12px;color:#8faab6}.activity-filter-grid select,.activity-filter-grid input{width:100%}.activity-filter-actions{display:flex;gap:7px}.activity-details{white-space:pre-wrap;max-width:440px;display:block}.activity-metrics .metric-card small{display:block;font-size:10px;font-weight:400;color:#8faab6;margin-top:3px}@media(max-width:1000px){.activity-filter-grid{grid-template-columns:1fr 1fr}.activity-filter-actions{grid-column:1/-1}}


/* 5.5.5 Express Analysis */
.route-gradient-legend .gradient-value{display:inline-block;width:120px;height:7px;border-radius:99px;background:linear-gradient(90deg,hsl(210 82% 54%),hsl(155 78% 49%),hsl(86 80% 50%),hsl(36 88% 55%))}
.route-gradient-legend em{font-style:normal;color:#ff6878;font-size:.72rem;margin-left:.35rem}
.express-analysis-panel{margin:12px 0;padding:14px 16px;border-color:rgba(85,207,242,.22)}
.express-analysis-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.express-analysis-heading h2{margin:.15rem 0 .25rem}.express-analysis-heading p{margin:0;color:var(--muted)}
.express-analysis-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.express-status{padding:7px 10px;border-radius:999px;font-weight:800;font-size:.78rem;border:1px solid var(--line);background:rgba(126,174,194,.08)}
.express-status.ok{color:#74e7a7;border-color:rgba(101,216,155,.38);background:rgba(101,216,155,.09)}
.express-status.warning{color:#ffd067;border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.09)}
.express-status.danger{color:#ff7a88;border-color:rgba(255,51,78,.55);background:rgba(255,51,78,.10)}
.express-analysis-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
.express-analysis-kpis>div{border:1px solid rgba(126,174,194,.14);background:rgba(3,14,20,.22);padding:9px 10px;border-radius:9px;display:flex;flex-direction:column;gap:3px}
.express-analysis-kpis span{color:var(--muted);font-size:.72rem}.express-analysis-kpis strong{font-size:1.05rem}
.express-limit-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px}
.express-limit-chips>span{display:flex;gap:6px;align-items:baseline;padding:5px 8px;border:1px solid rgba(126,174,194,.14);border-radius:7px;background:rgba(5,20,28,.45)}
.express-limit-chips small{color:var(--muted)}
.express-event-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:7px}
.express-event{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 10px;border-radius:8px;border:1px solid rgba(126,174,194,.16);border-left-width:4px;background:rgba(5,20,28,.5)}
.express-event.warning{border-left-color:#ffb020}.express-event.prohibited{border-left-color:#ff334e;background:rgba(255,51,78,.055)}
.express-event span,.express-event small{color:var(--muted);font-size:.72rem}.express-event strong{font-size:.84rem}
.chart-gradient-note{color:var(--muted);font-size:.78rem;margin:0 0 8px}.chart-gradient-note b{color:#ff6577}
.row-sensor-prohibited td{background:rgba(255,51,78,.075)!important}.row-sensor-warning td{background:rgba(255,176,32,.055)!important}
@media(max-width:800px){.express-analysis-heading{flex-direction:column}.express-analysis-actions{justify-content:flex-start}.express-analysis-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Fleet 5.5.7 aviation map */
.map-overlay-toolbar{flex-wrap:wrap}.map-overlay-toolbar #aerodrome-status{font-size:11px;color:var(--muted,#8faab6)}

/* Fleet 5.5.7 Airspace & Live Traffic */
.traffic-balloon{min-width:245px;line-height:1.45}.traffic-balloon strong{font-size:15px}.layer-bar #traffic-source-filter,.map-overlay-toolbar #traffic-source-filter{max-width:150px}.map-overlay-toolbar #live-traffic-status,#live-traffic-status{font-size:11px;color:var(--muted,#8faab6)}.notam-balloon details{margin-top:6px}.notam-balloon pre{white-space:pre-wrap;max-width:360px}.aviation-map-legend .legend-notam-palette{display:inline-flex;gap:2px;vertical-align:middle;margin-right:4px}.aviation-map-legend .legend-notam-palette i{display:block;width:8px;height:10px;border:0!important;border-radius:2px;margin:0}