:root{--sbw:296px}
html[data-theme=light]{--bg:#eef6f9;--panel:#ffffff;--panel2:#f2f8fb;
--ink:#0f2a3d;--mut:#557089;--line:#d3e4ee;--accent:#0e7c9c;
--accent-ink:#ffffff;--shadow:0 10px 30px rgba(15,42,61,.16)}
html[data-theme=dark]{--bg:#0a1826;--panel:#102638;--panel2:#0d2030;
--ink:#e7f2f8;--mut:#8fabc1;--line:#1f3d55;--accent:#3ec2dd;
--accent-ink:#04222c;--shadow:0 12px 34px rgba(0,0,0,.55)}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,
Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#map-wrap{position:fixed;inset:0 0 0 var(--sbw)}
#map{position:absolute;inset:0;background:var(--bg)}
#sidebar{position:fixed;inset:0 auto 0 0;width:var(--sbw);
background:var(--panel);border-right:1px solid var(--line);
overflow-y:auto;padding:14px 16px 10px;z-index:1100;display:flex;
flex-direction:column;gap:12px}
.hrow{display:flex;align-items:center;justify-content:space-between}
#sidebar h1{font-size:17px;margin:0;letter-spacing:.01em}
#theme-btn{width:32px;height:32px;border:1px solid var(--line);
border-radius:9px;background:var(--panel2);cursor:pointer;font-size:15px}
#theme-btn:hover{border-color:var(--accent)}
#sidebar .sub{margin:3px 0 0;color:var(--mut);font-size:12px}
#sidebar h2{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
color:var(--accent);margin:0 0 7px}
#sidebar section{border-top:1px solid var(--line);padding-top:11px}
.stack{display:flex;flex-direction:column;gap:7px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.stack label,.row label{display:flex;gap:8px;align-items:center;
cursor:pointer;min-height:24px}
input[type=radio],input[type=checkbox]{accent-color:var(--accent);
width:15px;height:15px}
.indent{margin-left:23px;display:flex;flex-direction:column;gap:7px}
.hint{display:inline-flex;align-items:center;justify-content:center;
width:15px;height:15px;border-radius:50%;background:var(--panel2);
border:1px solid var(--line);color:var(--mut);font-size:10px;cursor:help}
label[data-tip]{position:relative;cursor:help}
label[data-tip]:hover::after,label[data-tip]:focus-within::after{
content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:22px;
width:236px;background:var(--panel);color:var(--ink);border:1px solid
var(--accent);border-radius:10px;padding:9px 11px;font-size:12px;
line-height:1.45;box-shadow:var(--shadow);z-index:2000;white-space:normal;
pointer-events:none}
.lseason select{margin-left:2px;padding:3px 6px;border:1px solid
var(--line);border-radius:7px;background:var(--panel2);max-width:150px}
#search{width:100%;padding:8px 10px;border:1px solid var(--line);
border-radius:9px;font-size:13px;background:var(--panel2)}
#search::placeholder{color:var(--mut)}
.years{color:var(--mut);font-size:12px;display:flex;gap:7px;
align-items:center}
.years select{padding:3px 6px;border:1px solid var(--line);
border-radius:7px;background:var(--panel2)}
#surface-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#surface-ctl select{padding:3px 6px;border:1px solid var(--line);
border-radius:7px;background:var(--panel2);max-width:168px}
.src-row{align-items:center;gap:12px}
.src-lab{color:var(--mut);font-size:12px}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.preset{border:1px solid var(--line);background:var(--panel2);
border-radius:999px;padding:3px 10px;font-size:11.5px;cursor:pointer;
color:var(--mut)}
.preset:hover{border-color:var(--accent);color:var(--ink)}
#sidebar footer{margin-top:auto;color:var(--mut);font-size:11px;
border-top:1px solid var(--line);padding-top:9px}
.map-ui{position:absolute;top:12px;right:12px;z-index:1000;display:flex;
gap:8px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}
.map-ui>button{border:1px solid var(--line);background:var(--panel);
border-radius:10px;padding:7px 11px;cursor:pointer;font-size:13px;
box-shadow:var(--shadow)}
.map-ui>button:hover{border-color:var(--accent)}
#legend-btn[aria-expanded=true]{background:var(--accent);
color:var(--accent-ink);border-color:var(--accent)}
#legend-panel{position:absolute;top:44px;right:0;width:342px;
max-height:calc(100vh - 130px);overflow:auto;
max-width:calc(100vw - 24px);background:var(--panel);border:1px solid
var(--line);border-radius:13px;box-shadow:var(--shadow);
padding:13px 14px;font-size:12.5px}
.lhead{font-weight:700;margin:9px 0 6px;font-size:11px;letter-spacing:.08em;
text-transform:uppercase;color:var(--accent)}
.lhead:first-child{margin-top:0}
.lsub{font-weight:400;text-transform:none;letter-spacing:0;
color:var(--mut)}
.lsub2{color:var(--mut);font-size:11.5px;margin:-3px 0 7px}
.chips{display:flex;flex-direction:column;gap:5px}
.chip{display:flex;gap:9px;align-items:center;border:1px solid
var(--line);background:var(--panel2);border-radius:9px;
padding:5px 10px;cursor:pointer;font-size:12.5px;text-align:left}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed=false]{opacity:.42}
.chip[aria-pressed=false] .chip-name{text-decoration:line-through}
.chip-name{font-weight:600;min-width:88px}
.chip-rng{color:var(--mut);margin-left:auto}
.lg-row{display:flex;gap:10px;align-items:center;margin:6px 0}
.lg-g{flex:0 0 26px}
.lg-t{font-size:12.5px;line-height:1.25}
.lg-sub{color:var(--mut);font-size:11.5px}
.lfoot{color:var(--mut);font-size:11.5px;border-top:1px solid var(--line);
margin-top:9px;padding-top:8px}
.sw{display:inline-block;width:11px;height:11px;border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.sw-line{display:inline-block;width:16px;height:0;border-top:2px solid
#4292c6;vertical-align:3px;margin-right:2px}
.sw-diamond{color:var(--mut);font-weight:700}
.lrow{margin:4px 0;color:var(--ink)}
.ring{display:inline-block;width:11px;height:11px;border-radius:50%;
background:#b6c9d8;vertical-align:-1px;margin-right:3px}
.ring.cont{border:2.5px solid #333}
.ring.visit{border:1.5px solid #fff;box-shadow:0 0 0 1px #8aa}
#detail{position:fixed;left:0;right:0;bottom:0;height:312px;
background:var(--panel);border-top:1px solid var(--line);
box-shadow:0 -10px 28px rgba(6,20,32,.28);padding:12px 46px 10px 16px;
z-index:1150;color:var(--ink)}
body.detail-open #map-wrap{bottom:312px}
body.detail-open #sidebar{bottom:312px}
#sidebar{transition:bottom .15s}
.d-cols{display:flex;gap:18px;height:100%}
#d-info{width:calc(var(--sbw) - 18px);min-width:250px;overflow:auto;
padding-right:10px;border-right:1px solid var(--line)}
#d-chart{flex:1;display:flex;align-items:center;justify-content:center;
min-width:0}
#d-chart{position:relative}
#d-chart svg.ichart{width:100%;height:100%;max-height:284px;display:block}
#d-chart .nochart{color:var(--mut);font-size:13px}
.cgrid{stroke:var(--line);stroke-width:1}
.cline{fill:none;stroke:#1c7ed6;stroke-width:1.7}
html[data-theme=dark] .cline{stroke:#57b6ff}
.cline-dot{fill:#1c7ed6}
.ccast{stroke:#ffffff;stroke-width:.8}
.ccast-q{fill:none;stroke:#868e96;stroke-width:1.3}
.cthr{stroke-dasharray:5 4;stroke-width:1.3}
.cthr.red{stroke:#e03131}.cthr.amber{stroke:#f59f00}
.clab{font-size:12.5px;fill:var(--mut);
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.caxis{font-size:13px;font-weight:600;fill:var(--mut);
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.lens-cap{fill:var(--accent);font-weight:700}
.clab.red{fill:#e03131}.clab.amber{fill:#f59f00}
.cend{text-anchor:end}.cmid{text-anchor:middle}.cmut{opacity:.75}
.creset{fill:var(--accent);cursor:pointer;font-weight:700}
path.map-scrim{fill:#eef6f9;fill-opacity:.78;stroke:none}
html[data-theme=dark] path.map-scrim{fill:#0a1826;fill-opacity:.8}
path.coastline{stroke:#31485c;fill:none}
html[data-theme=dark] path.coastline{stroke:#cfe0ec}
.cmband{fill:#495057;opacity:.15;stroke:none}
html[data-theme=dark] .cmband{fill:#b7cbdb;opacity:.18}
.cmline{stroke:#495057;stroke-width:1.8;stroke-dasharray:6 4}
html[data-theme=dark] .cmline{stroke:#c6d8e6}
.ccross{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 3}
.cfocus{fill:none;stroke:var(--accent);stroke-width:2}
.cbrush{fill:var(--accent);opacity:.16}
.hiddenattr{visibility:hidden}
.ctip{position:absolute;background:var(--panel);border:1px solid
var(--accent);border-radius:8px;padding:5px 9px;font-size:12px;
pointer-events:none;box-shadow:var(--shadow);white-space:nowrap;z-index:50}
#detail table td{color:var(--ink)}
.i-h{font-size:16px;font-weight:700;margin:2px 0 1px}
.i-subh{color:var(--mut);font-size:12px;margin-bottom:4px}
.i-sec{border-top:1px solid var(--line);padding:8px 0 6px}
.i-lab{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--accent);margin-bottom:4px}
.i-row{font-size:12.5px;margin:2px 0}
.i-pills{display:flex;flex-direction:column;gap:5px}
.i-pill{display:inline-flex;align-items:center;gap:7px;background:
var(--panel2);border:1px solid var(--line);border-radius:999px;
padding:4px 11px;font-size:12.5px;width:fit-content}
.i-dot{width:10px;height:10px;border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.i-stats{display:flex;gap:8px}
.i-st{flex:1;background:var(--panel2);border:1px solid var(--line);
border-radius:10px;padding:7px 4px;text-align:center}
.i-st b{display:block;font-size:15px}
.i-st span{color:var(--mut);font-size:10.5px;text-transform:uppercase;
letter-spacing:.06em}
.i-note{margin-top:8px;padding:7px 10px;border-radius:8px;font-size:11.5px;
line-height:1.45;background:var(--panel2);color:var(--ink)}
.i-note.warn{border-left:3px solid #f59f00}
.i-note.info{border-left:3px solid #5c7cfa}
.leaflet-tooltip.vi-tt{background:var(--panel);color:var(--ink);
border:1px solid var(--line);border-radius:9px;
box-shadow:var(--shadow);padding:7px 10px;font:12px/1.4 inherit}
.leaflet-tooltip.vi-tt::before{display:none}
.tt-h{font-weight:700;font-size:12.5px}
.tt-r{display:flex;align-items:center;gap:6px;margin-top:2px;
color:var(--ink)}
.tt-dot{width:9px;height:9px;border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);flex:0 0 9px}
.tt-mut{color:var(--mut)}
.tt-b{background:var(--panel2);border:1px solid var(--line);
border-radius:6px;padding:0 5px;font-size:10.5px;color:var(--mut)}
#d-close{position:absolute;top:8px;right:12px;border:1px solid
var(--line);border-radius:8px;background:var(--panel2);width:28px;
height:28px;font-size:16px;cursor:pointer;color:var(--mut)}
#d-close:hover{border-color:var(--accent);color:var(--ink)}
.hidden{display:none!important}
#sb-toggle{display:none;position:fixed;top:10px;left:10px;z-index:1300;
width:38px;height:38px;border:1px solid var(--line);border-radius:10px;
background:var(--panel);font-size:17px;cursor:pointer;
box-shadow:var(--shadow)}
html[data-theme=dark] .leaflet-container{background:#0a1826}
html[data-theme=dark] #detail div[style*='font-family']{color:var(--ink)}
html[data-theme=dark] #d-chart svg text{fill:#dbe9f2}
html[data-theme=dark] #d-body td[style*='color:#666']{color:#8fabc1!important}
html[data-theme=dark] #d-body div[style*='color:#888']{color:#8fabc1!important}
@media(max-width:880px){
#search,.years select,.lseason select,#surface-ctl select{font-size:16px}
.leaflet-left .leaflet-control-zoom{margin-top:56px}
#map-wrap{inset:0}
#sidebar{transform:translateX(-100%);transition:transform .18s;width:302px;
box-shadow:var(--shadow)}
#sidebar.open{transform:none}
#sb-toggle{display:block}
.map-ui{top:10px;right:10px}
#detail{left:0;height:56vh;height:56dvh;padding:10px 44px 8px 12px}
body.detail-open #map-wrap{bottom:56vh;bottom:56dvh}
body.detail-open #sidebar{bottom:0}
.d-cols{flex-direction:column;gap:10px}
#d-info{width:auto;min-width:0;order:2;flex:1;border-right:0;
border-top:1px solid var(--line);padding-top:8px}
#d-chart{order:1;min-height:150px;max-height:40%}}