:root{--bg:#0e1424;--card:rgba(16,24,44,.88);--fg:#e8edf7;--mut:#93a0ba;--acc:#4cc9f0;--warn:#f4b942;--ok:#4ade80;--bad:#f87171}
@media (prefers-color-scheme: light){:root{--bg:#eef2f8;--card:rgba(255,255,255,.92);--fg:#16203a;--mut:#56627c}}
*{box-sizing:border-box}
body{display:flex;width:100%}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:14px/1.4 -apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}
#mapwrap{position:relative;flex:1;min-width:0;height:100%;overflow:hidden}
#cesiumContainer{position:absolute;inset:0}
.card{position:absolute;background:var(--card);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
#sidebar{width:clamp(248px,22vw,330px);flex-shrink:0;height:100%;overflow-y:auto;background:#0f1f3d;color:#ccc;display:flex;flex-direction:column;z-index:5}
.sb-sec{padding:12px 16px;border-bottom:1px solid #1a2a4a}
#sidebar h1{font-size:1.05rem;margin:0;color:#fff}
#portSelect{margin-top:6px;width:100%;background:#16213f;color:#fff;border:1px solid #2c3b66;border-radius:4px;padding:4px 6px;font:inherit}
#sidebar h3{font-size:.8rem;color:#90a4ae;margin:0 0 8px;font-weight:600}
#header p{margin:2px 0 8px;font-size:.78rem;color:#7e93a8}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg span{padding:8px 6px;border-radius:6px;background:#1b3a5b;color:#dbe7f3;text-align:center;font-size:.8rem;cursor:pointer;user-select:none;border:1px solid transparent;transition:background .12s}
.seg span:hover{background:#245080}
.seg span.on{background:#2e6da4;border-color:#4fc3f7;color:#fff;font-weight:600}
.seg span.off{opacity:.45}
#sidebar .msg{color:#7e93a8}
#sidebar-footer{margin-top:auto;padding:12px 16px;font-size:.7rem;color:#5f7389}
.status{padding:6px 8px;border-radius:6px;font-size:12px;margin-bottom:6px}
.status.ok{background:rgba(74,222,128,.15);color:var(--ok)}.status.warn{background:rgba(244,185,66,.15);color:var(--warn)}.status.bad{background:rgba(248,113,113,.15);color:var(--bad)}
.msg{font-size:12px;color:var(--mut);min-height:16px}
#legend{right:14px;bottom:44px;width:250px}
#legBar{height:12px;border-radius:6px;margin:6px 0 2px}
.legTicks{display:flex;justify-content:space-between;font-size:11px;color:var(--mut)}
.note{font-size:11px;color:var(--mut);margin-top:4px}
#attrib{position:absolute;left:190px;right:14px;bottom:6px;font-size:11px;color:var(--mut);text-align:center;pointer-events:none}
@media (max-width:900px){#legend{bottom:44px}}

#particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
h2{font-size:14px;margin:0 0 6px}h2 small{display:block;font-weight:400;color:var(--mut);font-size:12px}
button{background:var(--acc);color:#04202c;border:0;border-radius:6px;padding:7px 12px;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.1)}
#brand-overlay{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;background:rgba(10,22,40,.78);backdrop-filter:blur(6px);border:1px solid #1a2a4a;border-radius:22px;padding:7px 18px;display:block}
#brand-logo{height:clamp(1.9rem,2.6vw,2.75rem);width:auto;display:block;opacity:.92}
@media (max-width:900px){#brand-overlay{display:none}}
#sidebar h3 small{font-weight:400;color:#6a8199;font-size:.7rem;margin-left:4px}
#time-control label{display:block;font-size:.8rem;color:#90a4ae;margin:0 0 6px}
#time-control strong{color:#4fc3f7;font-size:.95rem}
#time-control #slider{width:100%;accent-color:#4fc3f7;margin:2px 0 8px}
#time-buttons button{width:100%;background:#1b3a5b;color:#dbe7f3;border:1px solid #2e6da4;padding:6px;font-weight:600}
#time-buttons button:hover{background:#245080;filter:none}
#time-control .times{margin-top:8px;font-size:.7rem;color:#6a8199}
#frame-time{position:absolute;top:12px;left:12px;z-index:3;background:rgba(10,22,40,.82);backdrop-filter:blur(6px);border:1px solid #1a2a4a;border-radius:8px;padding:6px 12px;font-size:1rem;font-weight:700;letter-spacing:.3px;color:#4fc3f7;pointer-events:none}
#frame-time small{display:block;font-size:.594rem;font-weight:400;letter-spacing:.4px;text-transform:uppercase;color:#7e93a8}
#frame-time small:last-child{text-transform:none;letter-spacing:.2px;margin-top:1px;color:#5e7488}
@media (max-width:900px){#brand-overlay{display:none}}
/* Cesium logo credit hidden: no Cesium ion assets are used. The "Data attribution" link stays, and CesiumJS is credited in #attrib. */
.cesium-credit-logoContainer{display:none !important}
#forecast-layers label,#overlay-layers label{display:flex;align-items:center;gap:4px;font-size:.8rem;padding:4px 0;cursor:pointer;color:#ccc;margin:0}
#forecast-layers input,#overlay-layers input{accent-color:#4fc3f7;margin-right:4px}
#forecast-layers small,#overlay-layers small{color:#6a8199;font-size:.7rem}
.sw{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:2px;flex-shrink:0}.sw-grad{width:22px}
#legend .lg{margin-bottom:10px}#legend .lg:last-child{margin-bottom:0}
#legend .lgt{font-size:13px}.keyrow{display:flex;align-items:center;gap:8px;font-size:12px}
#sidebar .msg{white-space:pre-line}
#rightcol{position:absolute;top:14px;right:14px;bottom:30px;width:250px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;pointer-events:none;z-index:2}
#rightcol .card{position:static;width:auto;pointer-events:auto;flex-shrink:0}
@media (max-width:900px){#rightcol{width:200px}}
.hidden{display:none !important}
#toast{position:absolute;top:84px;left:50%;transform:translateX(-50%);z-index:6;background:rgba(10,22,40,.92);color:#dbe7f3;border:1px solid #2e6da4;border-radius:8px;padding:8px 14px;font-size:13px;pointer-events:none}
#point-popup{position:absolute;z-index:6;width:380px;max-height:calc(100% - 24px);overflow-y:auto;background:#0f1f3d;color:#ccc;border:1px solid #2e6da4;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.5)}
#pp-head,#bd-head{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 12px 8px;border-bottom:1px solid #1a2a4a;position:sticky;top:0;background:#0f1f3d;z-index:1}
#pp-head b,#bd-head b{color:#fff;font-size:.9rem}#pp-head small,#bd-head small{display:block;color:#7e93a8;font-size:.7rem;margin-top:2px}
#pp-close{background:transparent;color:#90a4ae;border:0;font-size:16px;padding:0 4px;cursor:pointer}#pp-close:hover{color:#fff;filter:none}
.pp-block{padding:8px 12px 4px}.pp-t{font-size:.78rem;color:#cfd8dc;font-weight:600}.pp-t small{color:#6a8199;font-weight:400}
.pp-c{position:relative;height:96px}.pp-s{font-size:.68rem;color:#6a8199;min-height:14px}
#vessel-card{position:absolute;z-index:6;min-width:200px;max-width:260px;background:#0f1f3d;color:#cfd8dc;border:1px solid #2e6da4;border-radius:8px;padding:8px 10px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#vessel-card b{color:#fff;font-size:13px}#vessel-card .vc-sub{color:#7e93a8;font-size:11px;margin-bottom:4px}#vessel-card div.vc-r{display:flex;justify-content:space-between;gap:10px}
#vessel-card .vc-x{float:right;cursor:pointer;color:#90a4ae;margin-left:8px}
#ais-legend{margin:2px 0 0 22px}#ais-legend .keyrow{padding:2px 0;font-size:.75rem;color:#cfd8dc}
#ais-legend .vkeys{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:.72rem;color:#cfd8dc}#ais-legend .vkeys i{font-style:normal;font-size:.7rem;margin-right:3px}
#ais-legend .note{font-size:.68rem;color:#6a8199;margin-top:4px;line-height:1.35}

#tools .tool{padding:8px 0;border-top:1px solid rgba(128,140,170,.2)}#tools h2+.tool{border-top:0;padding-top:2px}
#tools label{display:flex;align-items:center;gap:6px;cursor:pointer}
#tools .tool-h{font-size:13px;font-weight:600}
#tools input{accent-color:#4fc3f7}
#tools .tool-b{font-size:11.5px;color:var(--mut);margin:4px 0 0 22px}
#tools .tool-o{margin:6px 0 2px;font-size:12px;color:var(--fg)}
#driftList{margin-top:6px}
.dr-item{display:flex;gap:7px;align-items:flex-start;padding:5px 0;border-top:1px solid rgba(128,140,170,.15);font-size:11px;color:var(--fg)}
.dr-item i{width:10px;height:10px;border-radius:50%;margin-top:3px;flex-shrink:0;border:1.5px solid #fff}
.dr-item div{flex:1;min-width:0}.dr-item b{display:block;font-size:11.5px}.dr-item span{color:var(--mut)}
.dr-x{background:transparent;color:var(--mut);padding:0 3px;font-size:13px}.dr-x:hover{color:#fff;filter:none}
#driftClear{margin-top:6px;padding:4px 10px;font-size:11px;background:#1b3a5b;color:#dbe7f3;border:1px solid #2e6da4}
body.tool-on #cesiumContainer{cursor:crosshair}
#bathy-legend{margin:2px 0 0 22px}#bathy-legend .bar{height:8px;border-radius:2px;margin:3px 0 2px}
#bathy-legend .ticks{display:flex;justify-content:space-between;font-size:.68rem;color:#cfd8dc}
#bathy-legend .note{font-size:.68rem;color:#6a8199;margin-top:4px;line-height:1.35}

#berths h2{margin:0 0 6px}#berths table{width:100%;border-collapse:collapse;font-size:11.5px}
#berths th{color:var(--mut);font-weight:600;text-align:right;padding:2px 3px;position:sticky;top:0}#berths th:first-child,#berths td:first-child{text-align:left}
#berths td{padding:2px 3px;text-align:right;border-top:1px solid rgba(128,140,170,.12);font-variant-numeric:tabular-nums;cursor:pointer}
#berths tr:hover td{background:rgba(79,195,247,.12)}#berths tr.sel td{background:rgba(79,195,247,.22)}
#berths .note{font-size:.68rem;color:#6a8199;margin-top:6px;line-height:1.35}
#berth-detail{position:absolute;z-index:6;left:290px;bottom:34px;width:400px;max-height:calc(100% - 120px);overflow-y:auto;background:#0f1f3d;color:#ccc;border:1px solid #2e6da4;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.5)}
#bd-close{background:transparent;color:#90a4ae;border:0;font-size:16px;padding:0 4px;cursor:pointer}#bd-close:hover{color:#fff;filter:none}
#bd-now{padding:8px 12px 0;font-size:.72rem;line-height:1.45;color:#cfd8dc}
#berth-filter{display:flex;gap:6px;align-items:center;margin-bottom:4px}#berth-filter select,#berth-filter input[type=search]{min-width:0;flex:1;font-size:11.5px;padding:3px 5px;border-radius:5px;border:1px solid rgba(128,140,170,.4);background:rgba(255,255,255,.7);color:#223}
#berth-filter label{font-size:11px;white-space:nowrap;display:flex;gap:3px;align-items:center}
#berth-count{font-size:.68rem;color:#6a8199;margin-bottom:3px}#berth-scroll{max-height:38vh;overflow-y:auto}
body.berths-on #rightcol{width:min(440px,42vw)}
#berths th{white-space:nowrap}#berths td{padding:3px 6px}
#berths th,#berths td{text-align:center}#berths th:first-child,#berths td:first-child{text-align:left}
#berth-filter2{display:flex;gap:6px;margin-bottom:4px}#berth-filter2 select{min-width:0;flex:1;font-size:11.5px;padding:3px 5px;border-radius:5px;border:1px solid rgba(128,140,170,.4);background:rgba(255,255,255,.7);color:#223}
.sdot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:3px}#berths td small{font-size:10px;color:#667}
#bd-status{padding:8px 12px 0;font-size:.78rem;line-height:1.4;color:#e3edf6}#bd-status small{color:#8fa4b8;font-size:.68rem}
body.berths-on #rightcol{width:min(500px,46vw)}
#berths td{white-space:nowrap}#berth-detail{left:14px}
#berths th,#berths td{padding-left:3px;padding-right:3px}#berths th{font-size:10.5px}
#berth-scroll{overflow-x:hidden}