:root { color-scheme: dark; --bg:#161a20; --panel:#202630; --card:#29313c; --line:#394453; --text:#f5f7fa; --muted:#aeb7c4; --blue:#1976d2; --green:#18a558; --red:#b83b3b; --orange:#d17a18; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
button,input,select { font:inherit; }
button { color:inherit; cursor:pointer; border:0; font-weight:700; }
.shell { height:100%; display:grid; grid-template-columns:82% 18%; }
.map-panel { position:relative; min-width:0; background:#101318; }
#map { width:100%; height:100%; border:0; display:block; }
.edition { position:absolute; left:16px; bottom:16px; z-index:2; padding:7px 10px; border:1px solid #ffffff30; border-radius:999px; background:#12171ddd; color:inherit; font-size:10px; font-weight:800; letter-spacing:.15em; text-decoration:none; }
.edition:hover { border-color:#ffffff80; background:#2b333ddd; }
.sidebar { display:flex; flex-direction:column; gap:9px; width:100%; height:100vh; min-height:0; padding:17px; overflow-x:hidden; overflow-y:scroll; overscroll-behavior:contain; scrollbar-gutter:stable; border-left:1px solid var(--line); background:var(--panel); }
.sidebar > * { flex-shrink:0; }
.sidebar { scrollbar-color:#667589 #171c23; scrollbar-width:auto; }
.sidebar::-webkit-scrollbar { width:12px; }
.sidebar::-webkit-scrollbar-track { background:#171c23; }
.sidebar::-webkit-scrollbar-thumb { border:3px solid #171c23; border-radius:999px; background:#667589; }
.sidebar::-webkit-scrollbar-thumb:hover { background:#8191a6; }
header { display:flex; justify-content:space-between; gap:12px; align-items:start; margin-bottom:4px; }
.eyebrow { color:#7eb8ff; font-size:11px; font-weight:800; letter-spacing:.16em; }
h1 { margin:3px 0 0; font-size:21px; line-height:1.15; }
.icon { width:38px; height:38px; border-radius:8px; background:#394553; font-size:20px; }
.card { border:1px solid #394453; border-radius:8px; overflow:hidden; background:var(--card); }
.card-title { display:flex; width:100%; justify-content:space-between; padding:13px; background:transparent; font-size:11px; letter-spacing:.08em; text-align:left; }
.card:not(.open) .card-body { display:none; }
.card:not(.open) .card-title span { transform:rotate(180deg); }
.card-body { max-height:55vh; padding:0 12px 12px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-color:#667589 #202630; scrollbar-width:thin; font-size:14px; }
.card-body::-webkit-scrollbar { width:9px; }
.card-body::-webkit-scrollbar-track { background:#202630; }
.card-body::-webkit-scrollbar-thumb { border:2px solid #202630; border-radius:999px; background:#667589; }
.card-body::-webkit-scrollbar-thumb:hover { background:#8191a6; }
label { display:block; margin:7px 0 6px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.row,.two,.bearing { display:grid; grid-template-columns:1fr auto; gap:7px; }
.two { grid-template-columns:1fr 1fr; }
input,select { min-width:0; border:1px solid #4d5a69; border-radius:6px; padding:10px; background:#151a21; color:white; outline:none; }
input:focus { border-color:#65aaff; box-shadow:0 0 0 3px #1976d233; }
.actions { display:grid; gap:7px; }
.actions button,.secondary,.save { min-height:43px; border-radius:6px; padding:10px 12px; text-align:left; }
.primary { background:var(--blue); }.compact { border-radius:6px; padding:0 16px; }
.success { background:var(--green); }.danger { background:var(--red); }.warning { background:var(--orange); }.secondary { background:#465466; }.ghost { background:#6f2929; }
.bearing { grid-template-columns:1fr 70px 1fr; margin-bottom:7px; }
.bearing button { height:42px; border-radius:6px; background:#465466; font-size:21px; }
.bearing output { display:grid; place-items:center; border-radius:6px; background:#f4f6f8; color:#202630; font-weight:800; }
.status { margin-top:auto; padding:11px; border-radius:7px; background:#151a21; color:#dce3eb; font-size:13px; line-height:1.35; }
.save { flex:0 0 auto; background:#e04b32; text-align:center; text-transform:uppercase; letter-spacing:.08em; }
button:disabled { opacity:.42; cursor:not-allowed; }
.check { display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:12px; }
.check input { width:17px; height:17px; padding:0; accent-color:var(--blue); }
input[type="range"] { width:100%; padding:0; accent-color:var(--blue); }
label output { float:right; color:var(--text); }
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.tool-grid button { min-height:62px; border-radius:6px; text-align:center; font-size:18px; }
.tool-grid small { display:block; margin-top:4px; font-size:10px; }
.tool-grid button.active { outline:2px solid #65aaff; background:#1976d2; }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; padding:10px; border-radius:6px; background:#151a21; font-size:11px; }
.metrics output { text-align:right; font-weight:700; }
.hint { padding:9px; border-radius:6px; background:#151a21; color:var(--muted); font-size:11px; }
@media (max-width:760px) { .shell { grid-template-columns:1fr; grid-template-rows:52vh 48vh; height:100vh; min-height:0; }.map-panel { min-height:0; }.sidebar { height:48vh; max-height:48vh; border-left:0; border-top:1px solid var(--line); }.edition { bottom:10px; } }