:root {
  color-scheme: dark;
  --bg:#020914;
  --panel:#071522;
  --panel-2:#0b1e2e;
  --line:rgba(112,166,190,.24);
  --text:#e8f5fb;
  --muted:#86a6b7;
  --cyan:#36d8ff;
  --green:#3ce6a0;
  --amber:#ffbf3f;
  --red:#ff506a;
  --cargo:#35d07f;
  --tanker:#ff596f;
  --passenger:#3e9dff;
  --service:#ffad3d;
  --pleasure:#ed65d6;
  --other:#9a7cff;
  --grid:rgba(75,188,215,.18);
  --grid-text:#7ca6b8;
  --grid-card:rgba(2,12,20,.76);
  --grid-label:#d8edf5;
  --own-ship:#36d8ff;
  --own-ship-core:#dffaff;
  --own-ship-halo:rgba(54,216,255,.24);
  --radar-center:#09263a;
  --radar-mid:#04131f;
  --radar-edge:#020a12;
}

:root[data-theme="day"] {
  color-scheme:light;
  --bg:#dbe9ee;
  --panel:#f6fbfd;
  --panel-2:#e7f2f6;
  --line:rgba(37,86,105,.28);
  --text:#102b38;
  --muted:#547383;
  --cyan:#007ca6;
  --green:#008e5b;
  --amber:#bd7100;
  --red:#d62747;
  --cargo:#008b52;
  --tanker:#da2947;
  --passenger:#087dc2;
  --service:#c66b00;
  --pleasure:#a936a0;
  --other:#634cc0;
  --grid:rgba(22,92,116,.24);
  --grid-text:#315f72;
  --grid-card:rgba(244,251,253,.88);
  --grid-label:#183d4c;
  --own-ship:#006f98;
  --own-ship-core:#ffffff;
  --own-ship-halo:rgba(0,111,152,.22);
  --radar-center:#d8eef1;
  --radar-mid:#c4e0e6;
  --radar-edge:#a8cdd5;
}

:root[data-theme="dracula"] {
  color-scheme:dark;
  --bg:#191a2a;
  --panel:#282a3f;
  --panel-2:#34364f;
  --line:rgba(189,147,249,.28);
  --text:#f8f8f2;
  --muted:#aeb0c8;
  --cyan:#8be9fd;
  --green:#50fa7b;
  --amber:#f1fa8c;
  --red:#ff5555;
  --cargo:#50fa7b;
  --tanker:#ff5555;
  --passenger:#8be9fd;
  --service:#ffb86c;
  --pleasure:#ff79c6;
  --other:#bd93f9;
  --grid:rgba(139,233,253,.18);
  --grid-text:#b7b9d1;
  --grid-card:rgba(30,31,48,.84);
  --grid-label:#f8f8f2;
  --own-ship:#f1fa8c;
  --own-ship-core:#ffffff;
  --own-ship-halo:rgba(241,250,140,.22);
  --radar-center:#34344f;
  --radar-mid:#25263b;
  --radar-edge:#171824;
}

* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:radial-gradient(circle at 45% 30%,var(--radar-center) 0,var(--bg) 46%,var(--radar-edge) 100%); color:var(--text); font-family:Inter,Segoe UI,Arial,sans-serif; }
button,select,input,a { font:inherit; }
button,select { color:var(--text); }
button,a { cursor:pointer; }
input[type=number] { color:var(--text); }

.app-shell { min-height:100vh; padding:12px; }
.app-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(5,17,29,.92);
  box-shadow:0 16px 50px rgba(0,0,0,.28);
}
.brand,.header-status,.module-nav,.control-bar,.segmented,.alarm-strip,.panel header,.detail-title { display:flex; align-items:center; }
.brand { gap:10px; }
.brand-mark { display:grid; place-items:center; width:48px; height:36px; border-radius:7px; background:linear-gradient(135deg,#38d9ff,#1387d5); color:#00111c; font-weight:950; letter-spacing:.08em; }
.brand div { display:grid; gap:2px; }
.brand strong { font-size:15px; letter-spacing:.12em; }
.brand small,.header-status { color:var(--muted); font-size:11px; }
.header-status { gap:12px; }
.module-nav {
  gap:3px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:8px;
  background:color-mix(in srgb,var(--panel-2) 78%,transparent);
}
.header-status button,.header-status a,.control-bar button,.control-bar select,.control-bar label select {
  min-height:32px;
  border:1px solid var(--line);
  border-radius:7px;
  background:rgba(10,31,47,.88);
  padding:6px 10px;
}
.header-status a {
  display:inline-flex;
  align-items:center;
  color:var(--text);
  font-size:10px;
  font-weight:850;
  letter-spacing:.04em;
  text-decoration:none;
  white-space:nowrap;
}
.module-nav a {
  min-height:27px;
  padding:4px 8px;
  border-color:transparent;
  background:transparent;
  font-size:9px;
}
.module-nav a[aria-current="page"] {
  border-color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 14%,var(--panel-2));
  color:var(--cyan);
  box-shadow:inset 0 0 12px color-mix(in srgb,var(--cyan) 10%,transparent);
}
.header-status a:hover,
.header-status a:focus-visible {
  outline:2px solid color-mix(in srgb,var(--cyan) 55%,transparent);
  outline-offset:2px;
  border-color:var(--cyan);
  color:var(--cyan);
}
.control-bar input[type=number] {
  width:58px;
  min-height:32px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:5px 7px;
  color:var(--text);
  background:rgba(10,31,47,.88);
}
.status-badge { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; border:1px solid var(--line); border-radius:999px; background:rgba(10,31,47,.72); }
.status-badge i { width:8px; height:8px; border-radius:50%; background:#64798a; }
.status-badge.online i { background:var(--green); box-shadow:0 0 9px var(--green); }
.status-badge.offline i { background:var(--red); }

.control-bar {
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(5,17,29,.84);
}
.control-bar label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.segmented { gap:0; }
.segmented button { border-radius:0; border-right:0; }
.segmented button:first-child { border-radius:7px 0 0 7px; }
.segmented button:last-child { border-radius:0 7px 7px 0; border-right:1px solid var(--line); }
.segmented button.active { color:#00131d; background:var(--cyan); border-color:var(--cyan); font-weight:800; }
.sound-btn.active { color:#001b13; background:var(--green); border-color:var(--green); }
.prototype-badge { margin-left:auto; padding:6px 9px; border:1px solid rgba(255,191,63,.38); border-radius:999px; color:var(--amber); background:rgba(94,62,4,.22); font-size:10px; font-weight:850; letter-spacing:.08em; }

.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,390px); gap:12px; margin-top:10px; }
.radar-column { min-width:0; }
.alarm-strip { justify-content:flex-start; gap:12px; min-height:40px; margin-bottom:8px; padding:7px 12px; border:1px solid rgba(60,230,160,.26); border-radius:9px; background:rgba(4,69,49,.18); }
.alarm-strip strong { color:var(--green); font-size:12px; letter-spacing:.06em; }
.alarm-strip span { color:#b8d6d0; font-size:11px; }
.alarm-strip .mail-status { margin-left:auto; padding:4px 7px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:8px; font-weight:850; letter-spacing:.08em; white-space:nowrap; }
.alarm-strip .mail-status.ready { color:var(--green); border-color:color-mix(in srgb,var(--green) 45%,transparent); }
.alarm-strip .mail-status.sent { color:#00150e; border-color:var(--green); background:var(--green); }
.alarm-strip .mail-status.queued { color:var(--amber); border-color:color-mix(in srgb,var(--amber) 55%,transparent); }
.alarm-strip .mail-status.error { color:var(--red); border-color:color-mix(in srgb,var(--red) 55%,transparent); }
.alarm-strip button { margin-left:auto; border:1px solid var(--line); border-radius:6px; padding:5px 9px; color:var(--muted); background:rgba(7,21,34,.82); }
.alarm-strip .mail-status + button { margin-left:0; }
.alarm-strip.danger { border-color:rgba(255,80,106,.6); background:rgba(110,10,30,.36); animation:alarmPulse 1.1s infinite alternate; }
.alarm-strip.danger strong { color:var(--red); }
@keyframes alarmPulse { to { box-shadow:0 0 24px rgba(255,80,106,.22); } }

.radar-wrap { position:relative; min-height:520px; height:calc(100vh - 180px); max-height:860px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:radial-gradient(circle,var(--radar-center) 0,var(--radar-mid) 56%,var(--radar-edge) 100%); }
#radar { display:block; width:100%; height:100%; }
.radar-hud { position:absolute; z-index:2; display:grid; gap:3px; padding:7px 9px; border:1px solid rgba(90,170,200,.17); border-radius:7px; background:rgba(2,12,20,.7); pointer-events:none; backdrop-filter:blur(5px); }
.radar-hud b { color:#dff8ff; font-size:11px; letter-spacing:.05em; }
.radar-hud span { color:var(--muted); font-size:10px; }
.top-left { left:12px; top:12px; }
.top-right { right:12px; top:12px; text-align:right; }
.bottom-left { left:12px; bottom:12px; }
.legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:7px; padding:7px 10px; color:var(--muted); font-size:10px; }
.legend span { display:inline-flex; align-items:center; gap:5px; }
.legend i { width:9px; height:9px; border-radius:50%; background:var(--other); }
.legend i.cargo { background:var(--cargo); }
.legend i.tanker { background:var(--tanker); }
.legend i.passenger { background:var(--passenger); }
.legend i.service { background:var(--service); }
.legend i.pleasure { background:var(--pleasure); }
.legend i.danger-ring { background:transparent; border:2px solid var(--red); }

.side-panel { display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; min-height:0; }
.panel { min-width:0; border:1px solid var(--line); border-radius:11px; background:linear-gradient(145deg,rgba(7,21,34,.96),rgba(7,28,43,.9)); overflow:hidden; }
.panel header { justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); }
.panel header div { display:grid; gap:3px; min-width:0; }
.panel header span { color:var(--cyan); font-size:9px; font-weight:850; letter-spacing:.12em; }
.panel header strong { overflow:hidden; color:var(--text); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.risk-pill { padding:5px 7px; border-radius:999px; color:#00140e; background:var(--green); font-size:9px; }
.risk-pill.warn { color:#1d1200; background:var(--amber); }
.risk-pill.danger { color:#210008; background:var(--red); }
.detail-empty { padding:18px 12px; color:var(--muted); font-size:11px; }
.detail-grid { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; padding:11px 12px; font-size:11px; }
.detail-grid dt { color:var(--muted); }
.detail-grid dd { margin:0; text-align:right; font-weight:700; }
.detail-cpa { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 12px 12px; }
.detail-cpa div { display:grid; gap:3px; padding:7px; border:1px solid var(--line); border-radius:7px; background:rgba(10,31,47,.64); }
.detail-cpa span { color:var(--muted); font-size:9px; }
.detail-cpa strong { font-size:12px; }
.target-list-panel { min-height:0; }
.target-list-head,.target-row { display:grid; grid-template-columns:minmax(0,1.6fr) .64fr .64fr .64fr; gap:6px; align-items:center; }
.target-list-head { padding:7px 10px; color:#607f90; font-size:9px; text-align:right; }
.target-list-head span:first-child { text-align:left; }
.target-list { max-height:calc(100vh - 380px); min-height:240px; overflow:auto; }
.target-row { width:100%; padding:8px 10px; border:0; border-top:1px solid rgba(112,166,190,.11); color:var(--text); background:transparent; text-align:right; font-size:10px; }
.target-row:hover,.target-row.selected { background:rgba(54,216,255,.08); }
.target-row.danger { background:rgba(255,80,106,.1); }
.target-main { display:grid; grid-template-columns:8px minmax(0,1fr); gap:6px; text-align:left; }
.target-main i { width:7px; height:7px; margin-top:3px; border-radius:50%; background:var(--target-color,var(--other)); }
.target-main div { display:grid; gap:2px; min-width:0; }
.target-main strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.target-main span { color:var(--muted); font-size:9px; }
.target-empty { padding:20px 12px; color:var(--muted); font-size:11px; text-align:center; }

.settings-panel { position:fixed; z-index:30; top:12px; right:12px; width:min(350px,calc(100% - 24px)); padding:14px; border:1px solid rgba(54,216,255,.36); border-radius:13px; color:var(--text); background:rgba(5,17,29,.98); box-shadow:0 28px 80px rgba(0,0,0,.6); }
.settings-panel.hidden { display:none; }
.settings-panel header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.settings-panel header div { display:grid; gap:3px; }
.settings-panel header span { color:var(--cyan); font-size:9px; font-weight:850; letter-spacing:.12em; }
.settings-panel header button { width:28px; height:28px; border:1px solid var(--line); border-radius:7px; color:var(--text); background:var(--panel-2); font-size:18px; }
.settings-panel > label:not(.switch) { display:grid; grid-template-columns:1fr auto; gap:7px; margin:12px 0; color:var(--muted); font-size:11px; }
.settings-panel > label select,.settings-panel input[type=range] { grid-column:1/-1; width:100%; }
.settings-panel select { min-height:34px; border:1px solid var(--line); border-radius:7px; padding:6px 9px; color:var(--text); background:var(--panel-2); }
.settings-panel output { color:var(--cyan); }
.settings-divider { margin:14px 0 5px; padding-top:12px; border-top:1px solid var(--line); }
.settings-divider span { color:var(--cyan); font-size:9px; font-weight:850; letter-spacing:.12em; }
.switch { display:flex; align-items:center; gap:9px; margin:10px 0; color:#bcd1dc; font-size:11px; cursor:pointer; }
.switch input { position:absolute; opacity:0; }
.switch span { position:relative; width:32px; height:18px; border-radius:999px; background:#233a49; }
.switch span::after { content:""; position:absolute; left:3px; top:3px; width:12px; height:12px; border-radius:50%; background:#829cab; transition:.2s; }
.switch input:checked + span { background:#0a6f79; }
.switch input:checked + span::after { left:17px; background:var(--cyan); }
.settings-panel p { margin:14px 0 0; padding-top:11px; border-top:1px solid var(--line); color:#6f8d9d; font-size:10px; line-height:1.45; }

:root[data-theme="day"] .app-header,
:root[data-theme="day"] .control-bar { background:rgba(246,251,253,.92); }
:root[data-theme="day"] .panel { background:linear-gradient(145deg,rgba(246,251,253,.98),rgba(229,242,246,.96)); }
:root[data-theme="day"] .radar-hud { background:rgba(246,251,253,.82); }
:root[data-theme="day"] .radar-hud b { color:#143746; }
:root[data-theme="day"] .settings-panel { background:rgba(246,251,253,.98); }
:root[data-theme="day"] .header-status button,
:root[data-theme="day"] .header-status a,
:root[data-theme="day"] .control-bar button,
:root[data-theme="day"] .control-bar select,
:root[data-theme="day"] .control-bar label select { background:rgba(231,242,246,.94); }
:root[data-theme="day"] .control-bar input[type=number] { background:rgba(231,242,246,.94); }

:root[data-theme="dracula"] .app-header,
:root[data-theme="dracula"] .control-bar { background:rgba(40,42,63,.94); }
:root[data-theme="dracula"] .panel { background:linear-gradient(145deg,rgba(40,42,63,.98),rgba(48,49,73,.94)); }
:root[data-theme="dracula"] .radar-hud { background:rgba(31,32,49,.82); }
:root[data-theme="dracula"] .radar-hud b { color:#f8f8f2; }
:root[data-theme="dracula"] .settings-panel { background:rgba(40,42,63,.98); }

@media (max-width:1000px) {
  .workspace { grid-template-columns:1fr; }
  .radar-wrap { height:70vh; min-height:500px; }
  .target-list { max-height:420px; }
}
@media (max-width:680px) {
  .app-shell { padding:6px; }
  .app-header { align-items:flex-start; }
  .header-status { flex-wrap:wrap; justify-content:flex-end; }
  .module-nav { flex-wrap:wrap; justify-content:flex-end; }
  .control-bar { align-items:stretch; }
  .control-bar label { flex:1 1 120px; justify-content:space-between; }
  .prototype-badge { width:100%; margin-left:0; text-align:center; }
  .radar-wrap { min-height:420px; height:65vh; }
  .target-list-head,.target-row { grid-template-columns:minmax(0,1.4fr) .7fr .7fr; }
  .target-list-head span:last-child,.target-row > span:last-child { display:none; }
}