/* Drone COP — dark ops-center theme */
:root {
  --bg: #070b11;
  --panel: #0f1622;
  --panel2: #0b111a;
  --line: #1c2836;
  --line2: #26364a;
  --text: #d8e4f0;
  --muted: #8493a5;
  --muted2: #5f6f82;
  --green: #39d98a;
  --amber: #f5b301;
  --red: #ff4d4d;
  --blue: #38bdf8;
  --cyan: #22b8cf;
  --purple: #c58bff;
  --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  overflow: hidden;
}
.btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(#1a2534, #131c28);
  border: 1px solid var(--line2);
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: #3a4f68; background: linear-gradient(#20304200, #182333); }
.btn.ghost { background: transparent; border-color: var(--line2); color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.btn.ghost.active { color: var(--cyan); border-color: var(--cyan); }
.btn.danger { border-color: #7a2b2b; color: #ffd7d7; background: linear-gradient(#3a1a1a, #2a1414); }
.btn.danger:hover { border-color: var(--red); }
.btn.running { border-color: var(--green); color: var(--green); }

/* ---- app shell ---- */
#app {
  display: grid;
  grid-template-rows: 46px 1fr 62px;
  grid-template-columns: 340px 1fr 320px;
  grid-template-areas:
    "header header header"
    "left   map    right"
    "footer footer footer";
  height: 100vh;
}
#topbar {
  grid-area: header;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: linear-gradient(#0f1826, #0b1017);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand .logo { font-weight: 800; letter-spacing: 1px; color: var(--cyan); font-size: 16px; }
.brand .sub { color: var(--muted); font-size: 11px; letter-spacing: .5px; }
#breadcrumb { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
.crumb { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 3px 6px; border-radius: 4px; font-family: var(--sans); }
.crumb:hover { color: var(--text); background: #16202e; }
.crumb.cur { color: var(--text); font-weight: 600; }
.sep { color: var(--muted2); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mock-flag { font-size: 10px; color: #0a0e14; background: var(--amber); padding: 2px 6px; border-radius: 3px; font-weight: 800; letter-spacing: .5px; }

/* ---- Sentry / Manual master toggle (top-right) ---- */
.mode-toggle {
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 11px 0 9px;
  border-radius: 8px; cursor: pointer;
  font-family: var(--sans);
  border: 1px solid var(--amber);
  background: linear-gradient(#241a06, #180f03);
  color: var(--amber);
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.mode-toggle:hover { box-shadow: 0 0 0 1px var(--amber) inset; }
.mode-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.mode-glyph { font-size: 15px; line-height: 1; }
.mode-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.08; }
.mode-title { font-weight: 800; font-size: 12px; letter-spacing: .6px; }
.mode-hint { font-size: 9px; letter-spacing: .2px; opacity: .82; }
.mode-switch {
  width: 40px; height: 18px; border-radius: 10px; position: relative; flex: 0 0 auto;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  transition: background .15s, border-color .15s;
}
.mode-switch .knob {
  position: absolute; top: 1px; left: 1px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--amber);
  transition: left .16s cubic-bezier(.3,1.4,.5,1), background .15s;
}
/* Armed = Sentry (auto) */
.mode-toggle[data-mode="sentry"] {
  border-color: var(--green); color: var(--green);
  background: linear-gradient(#06240f, #03160a);
  box-shadow: 0 0 12px rgba(57,217,138,.28);
}
.mode-toggle[data-mode="sentry"]:hover { box-shadow: 0 0 0 1px var(--green) inset, 0 0 12px rgba(57,217,138,.28); }
.mode-toggle[data-mode="sentry"] .mode-switch { background: rgba(57,217,138,.28); border-color: rgba(57,217,138,.55); }
.mode-toggle[data-mode="sentry"] .mode-switch .knob { left: 23px; background: var(--green); }

/* ---- panels ---- */
.col { background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
#left { grid-area: left; border-right: 1px solid var(--line); }
#right { grid-area: right; border-left: 1px solid var(--line); }
.panel { display: flex; flex-direction: column; min-height: 0; }
.panel > h3 { margin: 0; padding: 9px 12px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: var(--panel2); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.panel .scroll { overflow-y: auto; padding: 8px; }
#left .panel { flex: 1; min-height: 0; }

/* right-panel tabs */
.tabbar { display: flex; background: var(--panel2); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.tab { flex: 1; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 11px 4px; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--cyan); border-bottom-color: var(--cyan); background: #0d1721; }
.tab-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tab-content > .scroll { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; }

/* alert quick-filters */
.filter-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--panel2); flex: 0 0 auto; }
.fchip { font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: var(--muted); background: #0c1420; border: 1px solid var(--line); border-radius: 11px; padding: 3px 9px; cursor: pointer; }
.fchip:hover { color: var(--text); border-color: var(--line2); }
.fchip.active { color: #06222b; background: var(--cyan); border-color: var(--cyan); }

/* jamming status in drone detail */
.cm-status { width: 100%; font-size: 11px; border-radius: 5px; padding: 7px 9px; margin: 2px 0; line-height: 1.4; }
.cm-status.deploying { background: #0d1c26; border: 1px solid #1c414a; color: var(--blue); }
.cm-status.ok { background: #0c2118; border: 1px solid #1c4633; color: var(--green); }
.cm-status.bad { background: #22110f; border: 1px solid #4a2020; color: #ff9a9a; }
.cm-status.note { background: #0c1420; border: 1px solid var(--line2); color: var(--muted); }
.cm-bar { height: 5px; border-radius: 3px; background: #0a1420; overflow: hidden; margin-bottom: 6px; }
.cm-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); transition: width .25s linear; }
.empty { color: var(--muted2); font-size: 12px; padding: 14px; text-align: center; }

/* ---- center: overview map / tiled view ---- */
#center { grid-area: map; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#view-overview { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#map { flex: 1; min-height: 0; background: #05080d; }

/* site-selection strip (over the big map) */
#site-strip { display: flex; gap: 6px; overflow-x: auto; padding: 6px 8px; background: var(--panel2); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.strip-chip { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: #0c1420; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; white-space: nowrap; font-family: var(--sans); font-size: 12px; color: var(--text); }
.strip-chip:hover { border-color: var(--line2); background: #101a26; }
.strip-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 5px currentColor; }
.strip-chip .sc-threat { color: var(--red); font-family: var(--mono); font-weight: 700; }
.strip-chip .sc-det { color: var(--muted); font-size: 10.5px; }

/* tiled 7-up view */
#view-tiles { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 8px; padding: 8px; background: var(--bg); align-content: start; }
.site-tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.tile-head { padding: 6px 9px; background: var(--panel2); border-bottom: 1px solid var(--line); cursor: pointer; flex: 0 0 auto; }
.tile-head:hover { background: #12202e; }
.th-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.th-name { font-weight: 600; font-size: 12.5px; }
.th-sub { color: var(--muted); font-size: 10px; margin: 1px 0 5px; }
.th-kpis { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tile-map { flex: 0 0 auto; width: 100%; background: #05080d; }
.mini-drone-wrap { pointer-events: auto; }
.mini-drone { width: 18px; height: 18px; text-align: center; line-height: 18px; color: var(--c); font-size: 13px; text-shadow: 0 0 4px var(--c), 0 0 2px #000; cursor: pointer; }
.mini-drone.eng { animation: pulse 1s infinite; }
.dronecop-tt { background: #0c1420 !important; color: var(--text) !important; border: 1px solid var(--line2) !important; font-size: 11px !important; }
.leaflet-container { background: #05080d; font-family: var(--sans); }

/* site marker */
.dronecop-site-icon { display: flex; align-items: center; }
.site-dot { width: 9px; height: 9px; background: var(--cyan); border: 2px solid #0a0e14; border-radius: 2px; box-shadow: 0 0 6px var(--cyan); transform: rotate(45deg); }
.site-label { margin-left: 6px; color: #cfe0f0; font-size: 10px; font-weight: 600; text-shadow: 0 1px 3px #000, 0 0 3px #000; white-space: nowrap; }

/* drone marker — 34x34 container, generous circular hit area, label doesn't block clicks */
.dronecop-drone-wrap { pointer-events: auto; }
.dronecop-drone { position: relative; width: 34px; height: 34px; cursor: pointer; }
.dronecop-drone .hit { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; transition: background .12s, box-shadow .12s; }
.dronecop-drone .glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; color: var(--c); font-size: 15px; line-height: 1; text-shadow: 0 0 5px var(--c), 0 0 2px #000; pointer-events: none; }
.dronecop-drone .dlabel { position: absolute; left: calc(50% + 12px); top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 9px; color: #dfeaf5; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 2px #000; font-family: var(--mono); }
.dronecop-drone .dlabel i { display: block; font-style: normal; color: var(--muted); font-size: 8px; }
.dronecop-drone:hover .hit { background: rgba(255,255,255,.07); box-shadow: 0 0 0 1.5px var(--c) inset; }
.dronecop-drone.selected .hit { background: rgba(255,255,255,.05); box-shadow: 0 0 0 2px #fff, 0 0 10px var(--c); }
.dronecop-drone.selected .dlabel { color: #fff; }
.dronecop-drone.engaging .glyph { animation: pulse 1s infinite; }
.dronecop-drone.engaging .hit { box-shadow: 0 0 0 1.5px var(--c) inset; animation: hitpulse 1s infinite; }
.dronecop-drone.repeat .glyph::after { content: "⚠"; font-size: 8px; position: absolute; top: -8px; right: -8px; color: var(--amber); }
@keyframes pulse { 0%,100% { text-shadow: 0 0 3px var(--c); } 50% { text-shadow: 0 0 12px var(--c), 0 0 18px var(--c); } }
@keyframes hitpulse { 0%,100% { box-shadow: 0 0 0 1.5px var(--c) inset; } 50% { box-shadow: 0 0 0 3px var(--c) inset, 0 0 10px var(--c); } }

/* ---- alerts ---- */
.alert { border: 1px solid var(--line2); border-left-width: 3px; border-radius: 5px; padding: 7px 8px; margin-bottom: 6px; background: var(--panel2); }
.alert.ackd { opacity: .5; }
.alert.locatable { cursor: pointer; }
.alert.locatable:hover { border-color: var(--line2); background: #10192a; }
.a-loc { color: var(--muted2); font-weight: 500; margin-left: 6px; letter-spacing: 0; }
.alert.locatable:hover .a-loc { color: var(--cyan); }
.alert .a-row { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); font-family: var(--mono); }
.alert .a-sev { font-weight: 700; }
.alert .a-msg { margin: 3px 0 5px; font-size: 12px; line-height: 1.35; }
.alert .a-acts { display: flex; gap: 6px; }
.alert .a-acts .btn { padding: 3px 8px; font-size: 11px; }
.sev-info { border-left-color: var(--blue); }
.sev-info .a-sev { color: var(--blue); }
.sev-warn { border-left-color: var(--amber); }
.sev-warn .a-sev { color: var(--amber); }
.sev-urgent { border-left-color: var(--red); background: #1a0f12; }
.sev-urgent .a-sev { color: var(--red); }
.sev-success { border-left-color: var(--green); }
.sev-success .a-sev { color: var(--green); }

/* ---- site rows ---- */
.site-row { border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin-bottom: 6px; cursor: pointer; background: var(--panel2); }
.site-row:hover { border-color: var(--line2); }
.site-row.urgent { border-color: #5a2530; box-shadow: inset 0 0 0 1px #3a1820; }
.s-head { display: flex; justify-content: space-between; align-items: center; }
.s-name { font-weight: 600; font-size: 12.5px; }
.s-sub { color: var(--muted); font-size: 10.5px; margin: 2px 0 6px; }
.s-metrics { display: flex; flex-wrap: wrap; gap: 5px; }
.metric { font-size: 9px; letter-spacing: .5px; color: var(--muted); background: #0c1420; border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px; display: inline-flex; gap: 4px; align-items: baseline; }
.metric b { font-size: 12px; color: var(--text); font-family: var(--mono); }
.metric.red b { color: var(--red); }
.metric.green b { color: var(--green); }
.metric.amber b { color: var(--amber); }
.tak-badge { font-size: 9px; color: var(--cyan); border: 1px solid #17414a; background: #08171b; border-radius: 4px; padding: 3px 5px; letter-spacing: .5px; }
.pill { font-size: 9px; padding: 2px 6px; border-radius: 3px; font-weight: 700; letter-spacing: .5px; }
.pill.ok { color: var(--green); background: #0c2118; border: 1px solid #1c4633; }
.pill.warn { color: var(--purple); background: #1a1225; border: 1px solid #3a2a52; }
.pill.down { color: var(--red); background: #22110f; border: 1px solid #4a2020; }

/* ---- drone detail ---- */
.dd-head { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.dd-glyph { font-size: 22px; color: var(--c); text-shadow: 0 0 8px var(--c); }
.dd-id { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.dd-cls { font-size: 10px; color: var(--muted); letter-spacing: .5px; }
.dd-threat { margin-left: auto; text-align: right; font-size: 9px; color: var(--muted); }
.dd-threat b { font-size: 20px; color: var(--text); font-family: var(--mono); }
/* Platform reference photo in the drone Details panel */
.dd-photo { position: relative; background: #0a1119; border-bottom: 1px solid var(--line); }
.dd-photo img { display: block; width: 100%; height: 120px; object-fit: cover; object-position: center; }
.dd-credit {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px;
  font-size: 8px; line-height: 1.3; color: #9fb1c4;
  background: linear-gradient(to top, rgba(6,10,16,.92), rgba(6,10,16,0));
}
/* No photo for this model, or the file failed to load */
.dd-photo.empty { height: 120px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #0a1119, #0a1119 8px, #0c141d 8px, #0c141d 16px); }
.dd-photo.empty::after {
  content: "NO IMAGE AVAILABLE";
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--muted);
  border: 1px dashed var(--line2); border-radius: 4px; padding: 6px 10px;
}
.dd-body { padding: 8px 10px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #16202e; font-size: 12px; }
.kv span { color: var(--muted); }
.kv b { text-align: right; font-weight: 500; word-break: break-word; }
.reg-match { margin-top: 8px; border-radius: 5px; padding: 7px 8px; font-size: 11px; }
.reg-match.ok { background: #0c1c16; border: 1px solid #1c4633; }
.reg-match.ok b { color: var(--green); display: block; margin-bottom: 3px; }
.reg-match.no { background: #1c1410; border: 1px solid #4a3320; }
.reg-match.no b { color: var(--amber); display: block; }
.reg-match.no span { color: var(--muted); }
.dossier { margin-top: 8px; border-radius: 5px; padding: 7px 8px; background: #1c1410; border: 1px solid #4a3320; font-size: 11px; }
.dossier b { color: var(--amber); display: block; margin-bottom: 4px; }
.dossier .ps { color: var(--muted); padding: 2px 0; border-top: 1px dashed #33281a; }
.dd-acts { padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); }
.cm-live { color: var(--blue); font-size: 11px; }
.cm-ok { color: var(--green); font-size: 11px; }

/* ---- site context ---- */
.site-ctx-head { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.site-ctx-head h3 { margin: 0; font-size: 14px; }
.site-ctx-metrics { display: flex; gap: 6px; padding: 8px 10px; flex-wrap: wrap; align-items: center; }
.ctx-sub { margin: 6px 10px 4px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.zone-row { padding: 4px 10px; font-size: 11.5px; color: #e0b0b0; }
.track-row { display: flex; align-items: center; gap: 6px; width: calc(100% - 16px); margin: 3px 8px; padding: 5px 8px; background: #0c1420; border: 1px solid var(--line); border-radius: 5px; color: var(--text); font-size: 11px; font-family: var(--mono); cursor: pointer; text-align: left; }
.track-row:hover { border-color: var(--line2); }
.track-row .glyph { color: var(--c); text-shadow: 0 0 5px var(--c); }

/* ---- footer / scenario bar ---- */
#footer { grid-area: footer; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: linear-gradient(#0d1622, #0a0f16); border-top: 1px solid var(--line); }
.beat { min-width: 0; flex: 1; }
.beat-title { font-weight: 700; font-size: 12.5px; color: var(--cyan); }
.beat-narr { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controls { display: flex; align-items: center; gap: 6px; }
.controls .divider { width: 1px; height: 24px; background: var(--line2); margin: 0 4px; }
#sim-clock { font-family: var(--mono); font-size: 13px; color: var(--text); background: #0c1420; border: 1px solid var(--line2); border-radius: 4px; padding: 3px 8px; }

/* ---- history overlay ---- */
.overlay { position: fixed; inset: 0; background: rgba(3,6,10,.72); display: none; z-index: 1200; align-items: center; justify-content: center; }
.overlay.open { display: flex; }
.overlay-card { width: min(1000px, 92vw); height: min(680px, 86vh); background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.overlay-card > header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.overlay-card > header h2 { margin: 0; font-size: 14px; letter-spacing: .5px; }
#history-body { overflow: auto; padding: 12px; }
.hist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hist-head h3 { margin: 0; font-size: 13px; }
.ro-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ro-chip { font-size: 10.5px; font-family: var(--mono); color: var(--amber); background: #1c1410; border: 1px solid #4a3320; border-radius: 4px; padding: 4px 7px; cursor: pointer; }
.ro-chip:hover { border-color: var(--amber); }
.hist-table-wrap { overflow-x: auto; }
.hist-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.hist-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line2); position: sticky; top: 0; background: var(--panel); }
.hist-table td { padding: 6px 8px; border-bottom: 1px solid #131c28; }
.hist-table tr { cursor: pointer; }
.hist-table tr:hover td { background: #0e1621; }
.hist-table tr.repeat td { background: #150f0a; }
.tag { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 700; }
.tag.friendly { color: var(--green); background: #0c2118; }
.tag.unknown { color: var(--amber); background: #1c1410; }
.tag.hostile { color: var(--red); background: #22110f; }
.ro { color: var(--amber); font-family: var(--mono); }

/* ---- sim panel ---- */
#sim-panel { position: fixed; top: 46px; right: -360px; width: 340px; bottom: 62px; background: var(--panel); border-left: 1px solid var(--line2); z-index: 1100; transition: right .25s ease; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.4); }
#sim-panel.open { right: 0; }
#sim-panel > header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel2); }
#sim-panel > header h3 { margin: 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
#sim-panel-body { overflow-y: auto; padding: 10px; }
.sim-sec { margin-bottom: 14px; }
.sim-sec h4 { margin: 0 0 6px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--cyan); }
.sim-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.sim-btns.speed .btn { flex: 1; text-align: center; padding: 4px; }
.sim-slider { margin: 8px 0; }
.ss-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.ss-val { color: var(--text); font-family: var(--mono); }
.sim-slider input[type=range] { width: 100%; accent-color: var(--cyan); }
.sim-foot { color: var(--muted2); font-size: 10px; text-align: center; margin-top: 6px; }
.sim-toggle { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text); margin: 8px 0 2px; cursor: pointer; line-height: 1.3; }
.sim-toggle input { accent-color: var(--cyan); flex: 0 0 auto; width: 15px; height: 15px; }

/* ---- legend / laanc ---- */
.lg-sec { margin-bottom: 12px; }
.lg-sec h4 { margin: 0 0 6px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.lg-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 2px 0; color: var(--text); }
.lg-glyph { color: var(--c); width: 16px; text-align: center; text-shadow: 0 0 5px var(--c); }
.lg-ring { width: 18px; height: 12px; border-radius: 2px; }
.lg-ring.dashed { border: 1px dashed var(--cyan); }
.lg-ring.solid { border: 1px dashed var(--red); }
.lg-ring.nofly { border: 1.5px dashed #ff8c1a; background: rgba(255,140,26,.08); }
.lg-note { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.mock { font-size: 9px; color: #0a0e14; background: var(--amber); padding: 1px 4px; border-radius: 2px; font-weight: 800; }
.laanc-note { font-size: 10px; color: var(--muted); margin-bottom: 8px; }
.laanc-item { border: 1px solid var(--line); border-radius: 5px; padding: 7px 8px; margin-bottom: 6px; background: var(--panel2); }
.l-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.l-head b { font-size: 11.5px; }
.l-body .kv { font-size: 11px; }

/* ---- toast + banner ---- */
#toast { position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%) translateY(20px); background: #16202e; border: 1px solid var(--line2); color: var(--text); padding: 8px 16px; border-radius: 6px; font-size: 12px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 1300; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#alert-banner { position: fixed; top: 54px; left: 50%; transform: translateX(-50%) translateY(-20px); background: #2a0f12; border: 1px solid var(--red); color: #ffd7d7; padding: 8px 18px; border-radius: 6px; font-size: 12.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .3s; z-index: 1300; box-shadow: 0 4px 18px rgba(255,60,60,.25); }
#alert-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #1e2a38; border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }