:root{
  --acc:#822433; --acc-t:#F6ECEE; --acc-ink:#FFFFFF; --teal:#167F86; --teal-t:#E8F3F4; --teal-ink:#0E5459;
  --ink:#1F2A33; --slate:#5B6770; --line:#DDE2E7; --bg:#F5F6F8; --panel:#FFFFFF; --soft:#F3F5F7; --hover:#F7F8FA;
  --amber-t:#FBF3E4; --amber-ink:#6E4A0B; --blue:#2F6DB5; --seg-on:#1F2A33; --seg-on-ink:#FFFFFF; --legend:rgba(255,255,255,.95);
  --tip:rgba(31,42,51,.94); --shadow:0 1px 4px rgba(0,0,0,.08);
}
body[data-theme=navy]{
  --acc:#E1B24A; --acc-t:#2A2A22; --acc-ink:#0B1626; --teal:#5DA9E9; --teal-t:#14304A; --teal-ink:#BFDDF7;
  --ink:#E6ECF3; --slate:#9AAABD; --line:#22364F; --bg:#0B1626; --panel:#11223A; --soft:#172B45; --hover:#1A3050;
  --amber-t:#33291A; --amber-ink:#F1D29A; --blue:#5DA9E9; --seg-on:#E1B24A; --seg-on-ink:#0B1626; --legend:rgba(17,34,58,.95);
  --tip:rgba(4,10,20,.95); --shadow:0 1px 6px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:"Inter","Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
#app{height:100%;display:flex;flex-direction:column}

/* header */
header.top{display:flex;align-items:center;gap:14px;padding:9px 18px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:32px;height:32px;border-radius:8px;background:var(--acc);display:grid;place-items:center;color:var(--acc-ink);font-weight:800}
.bt{display:flex;flex-direction:column;line-height:1.15}.bt b{font-size:18px}.bt span{font-size:12.5px;color:var(--slate)}
.tabs{display:flex;gap:4px;margin-left:18px}
.tabs button{border:0;background:none;padding:8px 14px;border-radius:8px;font-weight:600;font-size:14px;color:var(--slate);white-space:nowrap}
.tabs button.on{background:var(--acc-t);color:var(--acc)}
body[data-theme=navy] .tabs button.on{background:rgba(225,178,74,.14)}
.topr{margin-left:auto;display:flex;align-items:center;gap:8px}
.ghost{background:none;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-weight:600;font-size:13px;color:var(--ink);text-decoration:none}
.themebtn{display:flex;align-items:center;gap:6px}
.themebtn i{width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,#fff 50%,#0B1626 50%);box-shadow:0 0 0 1px var(--line);display:inline-block}
body[data-theme=navy] .themebtn i{background:linear-gradient(90deg,#E1B24A 50%,#0B1626 50%)}
.lang{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.flag{display:flex;align-items:center;gap:6px;background:var(--panel);border:0;padding:6px 10px;font-weight:700;font-size:12.5px;color:var(--slate)}
.flag svg{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.flag.on{background:var(--seg-on);color:var(--seg-on-ink)}

/* controls */
.controls{display:flex;gap:18px;align-items:flex-end;padding:9px 18px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.ctl{display:flex;flex-direction:column;gap:4px;flex:none}
.ctl label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;background:none;padding:7px 11px;font-size:13px;font-weight:600;color:var(--slate);white-space:nowrap;border-left:1px solid var(--line)}
.seg button:first-child{border-left:0}
.seg button.on{background:var(--seg-on);color:var(--seg-on-ink)}
.seg button small{display:block;font-size:10.5px;font-weight:500;opacity:.8}
.switch{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:7px 12px;font-weight:600;font-size:13px;color:var(--slate)}
.switch i{width:30px;height:17px;border-radius:9px;background:#8E98A2;position:relative;transition:.2s}
.switch i::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:.2s}
.switch[aria-checked=true]{color:var(--ink);border-color:var(--blue)}
.switch[aria-checked=true] i{background:var(--blue)}.switch[aria-checked=true] i::after{left:15px}

/* main */
main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 420px;min-height:0}
.mapcol{display:flex;flex-direction:column;min-width:0;min-height:0;padding:12px 0 12px 12px}
#mapbox{position:relative;flex:1;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:14px 14px 0 0;overflow:hidden;touch-action:none;cursor:grab;outline:none}
#mapbox.drag{cursor:grabbing}
#map,#top{position:absolute;inset:0;width:100%;height:100%}
#top{pointer-events:none}
#cv,#hl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.layers{position:absolute;top:12px;left:12px;z-index:3;box-shadow:var(--shadow)}
.zoom{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:var(--shadow)}
.zoom button{width:36px;height:34px;border:0;border-top:1px solid var(--line);background:var(--panel);font-size:18px;font-weight:700;color:var(--ink)}
.zoom button:first-child{border-top:0}
.legend{position:absolute;left:12px;bottom:12px;z-index:3;background:var(--legend);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12px;color:var(--slate);min-width:220px;max-width:290px}
.legend>b{color:var(--ink);display:block;margin-bottom:5px;font-size:12.5px}
.legend .ramp{height:10px;border-radius:5px;margin:4px 0 3px}
.legend .row{display:flex;justify-content:space-between;gap:6px}
.legend .nod{display:flex;align-items:center;gap:7px;margin-top:6px}
.legend .nod i{width:26px;height:10px;display:inline-block;border-radius:2px}
.legend .key{margin-top:7px;padding-top:6px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px;font-size:11.5px}
.legend .key .kt{font-weight:700;color:var(--ink)}
.legend .key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .key b{color:var(--ink);margin-right:3px}
.tip{position:absolute;z-index:5;pointer-events:none;background:var(--tip);color:#fff;font-size:12.5px;padding:7px 10px;border-radius:8px;max-width:280px;display:none;line-height:1.35}
.hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;background:rgba(31,42,51,.88);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;display:none;pointer-events:none}
.loading{position:absolute;inset:0;z-index:8;background:color-mix(in srgb,var(--panel) 85%,transparent);display:flex;align-items:center;justify-content:center;gap:12px;font-weight:600;color:var(--slate)}
.loading[hidden]{display:none}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--acc);animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.timebar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;min-height:64px}
.play{width:38px;height:38px;border-radius:50%;background:var(--acc);display:grid;place-items:center;border:0;flex:none}
.play svg{width:14px;height:14px}.play svg *{fill:var(--acc-ink)}
.play[disabled]{opacity:.35;cursor:default}
.clockw{min-width:110px}
.clock{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.dlabel{font-size:12px;color:var(--slate)}
.tl{flex:1;position:relative;height:40px;touch-action:none;cursor:pointer;outline:none}
.tl .track{position:absolute;left:0;right:0;top:15px;height:5px;border-radius:3px;background:var(--line)}
.tl .fill{position:absolute;left:0;top:15px;height:5px;border-radius:3px;background:var(--acc)}
.tl .win{position:absolute;top:9px;height:17px;border-radius:5px;background:color-mix(in srgb,var(--acc) 16%,transparent);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);display:none}
.tl .knob{position:absolute;top:8px;width:19px;height:19px;margin-left:-9.5px;border-radius:50%;background:var(--panel);border:3px solid var(--acc);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.tl .ticks{position:absolute;left:0;right:0;top:26px;display:flex;justify-content:space-between;font-size:11px;color:var(--slate)}
.tl.fixed{cursor:default}.tl.fixed .knob,.tl.fixed .fill{display:none}.tl.fixed .win{display:block}

/* side panel */
aside{padding:12px;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.card h2{margin:0;font-size:17px;line-height:1.25}
.card h3{margin:0 0 6px;font-size:13.5px}
.sub{font-size:12.5px;color:var(--slate);margin-top:3px;line-height:1.4}
.head{display:flex;align-items:flex-start;gap:8px}
.head .grow{flex:1;min-width:0}
.back{border:0;background:var(--soft);border-radius:8px;width:30px;height:30px;flex:none;font-size:14px;color:var(--slate)}
.kp{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.kp>div{background:var(--soft);border-radius:10px;padding:8px 10px}
.kp .v{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px;line-height:1.15}
.kp .v small{font-size:12px;font-weight:600;color:var(--slate);margin-left:3px}
.kp .l{font-size:11.5px;color:var(--slate);margin-top:2px}
.word{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 8px;margin-top:4px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.badge{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--ink)}
.badge.ok{background:var(--teal-t);color:var(--teal-ink)}.badge.warn{background:var(--amber-t);color:var(--amber-ink)}
.badge .sw{margin-right:5px}
table.list{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
table.list td{padding:7px 4px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:middle}
table.list tr{cursor:pointer}table.list tr:hover td{background:var(--hover)}
table.list td.n{font-weight:700}table.list td.s{color:var(--slate);font-size:12px}
.cib{display:inline-block;min-width:46px;text-align:center;font-weight:800;border-radius:6px;padding:2px 6px;font-size:12.5px}
.sw{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:7px;vertical-align:-1px}
.chart{width:100%;display:block;margin-top:2px}
.legrow{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--slate);margin-top:4px}
.legrow i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}
.peaks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.peaks span{font-size:11.5px;font-weight:600;background:var(--soft);border-radius:999px;padding:3px 9px;color:var(--ink)}
.peaks b{color:var(--acc)}
.note{font-size:12px;line-height:1.45;border-radius:10px;padding:9px 12px;background:var(--teal-t);color:var(--teal-ink)}
.note.amber{background:var(--amber-t);color:var(--amber-ink)}
.wait{display:flex;align-items:center;gap:10px;color:var(--slate);font-size:13px}

/* modals */
.modal{position:fixed;inset:0;z-index:50;background:rgba(5,12,20,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.mbox{background:var(--panel);color:var(--ink);border-radius:16px;max-width:460px;width:100%;padding:22px 24px;position:relative;max-height:90vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.mbox.wide{max-width:620px}
.mbox h2{margin:0 0 12px;font-size:20px;color:var(--acc)}
.mbox ol{padding-left:20px;margin:0 0 10px;line-height:1.55}
.mbox li{margin-bottom:6px}
.mbox p{line-height:1.55;margin:0 0 10px}
.mbox h4{margin:14px 0 4px}
.small{font-size:12.5px;color:var(--slate)}
.primary{background:var(--acc);color:var(--acc-ink);border:0;border-radius:10px;padding:10px 18px;font-weight:700;font-size:14px;margin-top:6px}
.x{position:absolute;right:14px;top:12px;border:0;background:var(--soft);width:32px;height:32px;border-radius:8px;color:var(--ink)}

/* responsive */
@media (max-width: 1180px){ .tabs{order:3;margin-left:0;width:100%;overflow-x:auto} }
@media (max-width: 980px){
  html,body{height:auto}
  #app{height:auto;min-height:100%}
  main{display:block}
  .mapcol{padding:10px 10px 0}
  #mapbox{height:62vh;min-height:340px}
  aside{padding:10px;overflow:visible}
  .legend{min-width:0;max-width:210px;font-size:11px;padding:7px 9px}
  .legend .row span:nth-child(2){display:none}
}
@media (max-width: 600px){
  header.top{padding:8px 10px;gap:8px}
  .bt span{display:none}
  .ghost{padding:6px 9px;font-size:12px}
  .themebtn span{display:none}
  .flag{padding:6px 7px}.flag span{display:none}
  .tabs button{padding:7px 10px;font-size:13px}
  .controls{padding:8px 10px;gap:12px}
  .seg button{padding:7px 9px;font-size:12.5px}
  .layers{top:8px;left:8px}.layers button{padding:6px 8px;font-size:12px}
  .timebar{gap:10px;padding:8px 10px}
  .clockw{min-width:76px}.clock{font-size:17px}.dlabel{display:none}
  .kp .v{font-size:19px}
  .legend .key{display:none}.legend{max-width:170px}
}

@media (max-width: 600px){ .legend .sub{display:none} .legend>b{font-size:11.5px} }