:root{--ink:#12334f;--ink-soft:#36516a;--surface:rgba(255,255,255,.78);--surface2:rgba(255,255,255,.92);--line:rgba(22,73,108,.18);--brand:#0f766e;--sky:#0ea5e9;--accent:#f97316;--danger:#dc2626;--ok:#15803d;--shadow:0 14px 40px rgba(22,57,84,.15)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{font-family:"Sora",sans-serif;color:var(--ink);background:radial-gradient(1200px 500px at -10% -30%,#d6f3ff 0,transparent 55%),radial-gradient(900px 420px at 110% -20%,#ffedd5 0,transparent 60%),linear-gradient(130deg,#f4fbff 0,#ecfbf5 55%,#fff8f0 100%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(to right,rgba(29,78,111,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(29,78,111,.06) 1px,transparent 1px);background-size:44px 44px}
.app-shell{max-width:1440px;margin:0 auto;padding:22px;position:relative;z-index:1}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-bottom:20px;padding:24px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(130deg,rgba(255,255,255,.86),rgba(233,249,255,.7));box-shadow:var(--shadow)}
.eyebrow{margin:0;color:var(--brand);text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700}
.hero h1{margin:10px 0;font-size:clamp(1.45rem,2vw,2.1rem);line-height:1.25}.hero-copy{margin:0;color:var(--ink-soft);max-width:56ch}
.hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hero-kpi{background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;gap:4px}
.hero-kpi span{color:var(--ink-soft);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}.hero-kpi strong{font-size:1.05rem}.hero-kpi.warn{background:rgba(255,243,224,.85)}
.layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}.span-4{grid-column:span 4}
.panel{border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:16px;backdrop-filter:blur(10px)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.panel h2,.panel h3{margin:0}.panel h2{font-size:1.03rem}.panel h3{font-size:.9rem;color:var(--ink-soft);margin-bottom:8px}
.map{width:100%;height:clamp(320px,48vh,560px);border-radius:14px;border:1px solid var(--line);overflow:hidden}
.control-grid{display:grid;gap:10px;margin-top:12px}.group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.group.tight{gap:6px}.group.actions{margin-top:12px}
label{display:grid;gap:4px;color:var(--ink-soft);font-size:12px;font-weight:600}
input,select,.inline-input{border:1px solid rgba(22,73,108,.28);background:var(--surface2);border-radius:10px;padding:9px 11px;font:inherit;color:var(--ink)}
.inline-input{max-width:220px;width:100%}input:focus,select:focus,.inline-input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.toggle-inline{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(22,73,108,.18);background:rgba(255,255,255,.72);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--ink-soft);font-weight:700}
.toggle-field{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(22,73,108,.18);background:rgba(255,255,255,.72);border-radius:10px;padding:9px 11px;color:var(--ink-soft);font-size:12px;font-weight:700}
.toggle{position:relative;display:inline-block;width:52px;height:30px;flex:0 0 auto}
.toggle.mini{width:46px;height:26px}
.toggle input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0}
.toggle-slider{position:absolute;inset:0;border-radius:999px;border:1px solid rgba(22,73,108,.25);background:rgba(201,214,226,.65);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.toggle-slider:before{content:"";position:absolute;left:3px;top:50%;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid rgba(22,73,108,.18);box-shadow:0 2px 8px rgba(22,73,108,.22);transform:translateY(-50%);transition:left .2s ease}
.toggle.mini .toggle-slider:before{width:18px;height:18px}
.toggle input:checked + .toggle-slider{background:linear-gradient(130deg,#0f766e,#0ea5e9);border-color:#0b7189}
.toggle input:checked + .toggle-slider:before{left:calc(100% - 25px)}
.toggle.mini input:checked + .toggle-slider:before{left:calc(100% - 21px)}
.toggle input:focus-visible + .toggle-slider{box-shadow:0 0 0 3px rgba(14,165,233,.2)}
.table-toggle{display:block;margin:0 auto}
.table td .table-toggle input{width:100%;height:100%}
.table td .table-toggle .toggle-slider{background:rgba(201,214,226,.78)}
.table td .table-toggle input:checked + .toggle-slider{background:linear-gradient(130deg,#15803d,#22c55e);border-color:#1e9b4a}
input:disabled{background:rgba(221,233,242,.5);color:#335065}
.btn{border:0;border-radius:10px;padding:10px 13px;background:linear-gradient(130deg,var(--brand),#0891b2);color:#f7fbff;font-weight:700;letter-spacing:.02em;cursor:pointer}.btn:hover{filter:brightness(1.05)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.alt{background:linear-gradient(130deg,#0f766e,#14b8a6)}.btn.accent{background:linear-gradient(130deg,#f97316,#ea580c)}.btn.ghost{background:rgba(255,255,255,.7);border:1px solid rgba(22,73,108,.22);color:var(--ink)}.btn.start{background:linear-gradient(130deg,#16a34a,#22c55e)}.btn.amber{background:linear-gradient(130deg,#d97706,#f59e0b)}.btn.danger{background:linear-gradient(130deg,#b91c1c,#dc2626)}.btn.sm{padding:8px 10px;font-size:12px}
.pill-row,.telemetry-row{display:flex;gap:8px;flex-wrap:wrap}.pill{background:rgba(255,255,255,.73);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12px;color:var(--ink-soft)}.pill b{color:var(--ink)}
.progress-wrap{margin-top:12px;display:grid;gap:7px}.progress-track,.tick-track{height:10px;border-radius:999px;border:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.72)}.tick-track{height:8px}.progress-track i,.tick-track i{display:block;height:100%;width:0}.progress-track i{background:linear-gradient(90deg,#0ea5e9,#14b8a6)}.tick-track i{background:linear-gradient(90deg,#f59e0b,#f97316)}
@keyframes tick-sweep{from{width:0%}to{width:100%}}
.traffic-box{margin-top:8px;border:1px solid rgba(22,73,108,.16);border-radius:12px;background:rgba(255,255,255,.64);padding:9px 10px;display:grid;gap:8px}
.traffic-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft)}
.traffic-head b{font-size:12px;color:var(--ink)}
.traffic-list{display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px;min-height:30px}
.traffic-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;border:1px solid rgba(22,73,108,.22);background:rgba(232,248,255,.72);color:#0f3f5f}
.traffic-chip.ok{border-color:rgba(21,128,61,.35);background:rgba(220,252,231,.72);color:#166534}
.traffic-chip.warn{border-color:rgba(217,119,6,.45);background:rgba(255,237,213,.78);color:#9a3412}
.traffic-chip.danger{border-color:rgba(220,38,38,.5);background:rgba(254,226,226,.82);color:#991b1b}
.checklist{margin:10px 0 0;padding-left:18px}.checklist li{margin:4px 0;color:var(--ink-soft);font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.form-grid .wide{grid-column:span 2}.align-end{align-self:end}
.chip-row{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}.chip{border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.75);font-size:12px;padding:5px 10px}.chip.ok{border-color:rgba(21,128,61,.4);color:var(--ok)}.chip.err{border-color:rgba(185,28,28,.45);color:var(--danger)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;border-bottom:1px solid rgba(22,73,108,.12);padding:9px 10px;vertical-align:middle}
.table th{background:rgba(220,243,255,.62);color:var(--ink-soft);font-size:12px;text-transform:uppercase;letter-spacing:.05em}.table td input,.table td select{width:100%}.table.compact td,.table.compact th{padding:8px;font-size:12px}
.subpanel{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:10px;background:rgba(255,255,255,.65)}.quick-list{display:grid;gap:6px}
.alloc-list{margin-top:8px;display:grid;gap:6px}
.alloc-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:12px;padding:7px 9px;border:1px solid rgba(22,73,108,.14);border-radius:10px;background:rgba(255,255,255,.74)}
.alloc-item input{appearance:auto;border:0;background:transparent;padding:0;box-shadow:none;border-radius:0;width:16px;height:16px;margin:0}
.alloc-chip{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid rgba(22,73,108,.18);text-transform:uppercase;letter-spacing:.04em}
.alloc-chip.ok{border-color:rgba(21,128,61,.35);background:rgba(220,252,231,.75);color:#166534}
.alloc-chip.warn{border-color:rgba(217,119,6,.45);background:rgba(255,237,213,.78);color:#9a3412}
.alloc-empty{font-size:12px;color:var(--ink-soft)}
.alloc-hint{margin-top:7px;font-size:12px;color:var(--ink-soft)}
.quick-item{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;border:1px solid rgba(22,73,108,.12);border-radius:10px;padding:7px 9px;background:rgba(255,255,255,.7)}.quick-item .ok{color:var(--ok);font-weight:700}.quick-item .err{color:var(--danger);font-weight:700}
#speedChart{width:100%;max-height:260px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.78)}
.history{display:grid;gap:7px}.history-item{border:1px solid rgba(22,73,108,.12);border-radius:10px;padding:8px;background:rgba(255,255,255,.72);font-size:12px;color:var(--ink-soft)}.history-item b{color:var(--ink)}
.event-log{height:260px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:10px;font-family:"JetBrains Mono",monospace;background:#f8fcff}
.event{display:grid;grid-template-columns:95px 90px 1fr;gap:10px;padding:5px 0;border-bottom:1px dashed rgba(22,73,108,.12);font-size:12px}.event:last-child{border-bottom:0}.event .time{color:var(--ink-soft)}.event .kind{color:#0369a1;font-weight:700}.event.warning .kind{color:#b45309}.event.error .kind{color:#b91c1c}
.toast-rack{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:40}.toast{min-width:250px;max-width:380px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.92);padding:10px 12px;box-shadow:var(--shadow);font-size:13px;color:var(--ink)}.toast.warn{border-color:rgba(180,83,9,.35)}.toast.err{border-color:rgba(185,28,28,.35)}
.ship-wrap{width:28px;height:28px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ship-track{position:relative;width:28px;height:28px;transform-origin:50% 50%;transition:transform .15s linear}
.ship-hull{position:absolute;left:50%;top:3px;width:13px;height:19px;transform:translateX(-50%);clip-path:polygon(50% 0,100% 54%,72% 100%,28% 100%,0 54%);background:linear-gradient(160deg,#0284c7,#0f766e);border:1px solid rgba(255,255,255,.88);box-shadow:0 2px 9px rgba(2,132,199,.45)}
.ship-tail{position:absolute;left:50%;bottom:2px;width:3px;height:9px;transform:translateX(-50%);border-radius:2px;background:rgba(15,118,110,.55)}
.ship-wrap.active .ship-hull{background:linear-gradient(160deg,#ea580c,#f97316);box-shadow:0 0 0 2px rgba(255,255,255,.82),0 0 0 5px rgba(249,115,22,.35),0 6px 12px rgba(194,65,12,.3)}
.ship-wrap.active .ship-tail{background:rgba(234,88,12,.62)}
@media (max-width:1180px){.hero{grid-template-columns:1fr}.span-8,.span-7,.span-6,.span-5,.span-4{grid-column:span 12}}
@media (max-width:760px){.app-shell{padding:12px}.hero{padding:16px}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:span 1}.event{grid-template-columns:1fr;gap:4px}.table th,.table td{font-size:12px;padding:7px}}