:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body,#map{height:100%;width:100%;margin:0}body{overflow:hidden;background:#dfe9e8;color:#132625}a{color:#0b625f}
#map{position:fixed;inset:0;z-index:1}.leaflet-control-zoom{margin-top:88px!important}.leaflet-control-attribution{font-size:9px!important}
.leaflet-top.leaflet-right .leaflet-control-scale{margin-top:12px;margin-right:12px}
.leaflet-control-scale-line{border-color:#123f3d;border-top:none;background:rgba(255,255,255,.9);color:#123f3d;font-weight:800;line-height:1.2;text-shadow:none}
.topbar{position:fixed;z-index:1000;left:10px;right:10px;top:calc(8px + var(--safe-top));display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);box-shadow:0 5px 20px rgba(0,0,0,.14)}
.title{font-weight:750;font-size:18px}.subtitle{font-size:11px;opacity:.68;margin-top:2px}.iconbtn{border:0;border-radius:12px;background:#123b3a;color:white;font-size:24px;width:42px;height:42px;line-height:42px}.iconbtn:disabled{opacity:.45}
.panel{position:fixed;z-index:1000;left:8px;right:8px;bottom:calc(8px + var(--safe-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-radius:18px;padding:6px 12px 12px;box-shadow:0 -4px 22px rgba(0,0,0,.16);max-height:38vh;overflow:auto;transition:max-height .2s ease,padding .2s ease}
.panel-toggle{position:sticky;top:0;z-index:2;width:100%;min-height:32px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:rgba(255,255,255,.96);color:#24413f;font:inherit;font-size:11px;font-weight:750;cursor:pointer}.panel-toggle::before{content:"";width:42px;height:4px;border-radius:4px;background:#aab5b4}.panel-chevron{font-size:18px;line-height:1;transition:transform .18s ease}.panel.collapsed{max-height:44px;overflow:hidden;padding-bottom:6px}.panel.collapsed .panel-content{display:none}.panel.collapsed .panel-chevron{transform:rotate(180deg)}.layer-row{display:flex;flex-wrap:wrap;gap:7px}.layer-row label{background:#eef3f2;border-radius:999px;padding:7px 9px;font-size:12px;white-space:nowrap}.layer-row input{vertical-align:-1px}.time-block{margin-top:10px}.time-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}.time-label strong{font-size:12px}#timeSlider{width:100%}.legend{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;margin-top:7px}.compact-legend{opacity:.72}.note{font-size:9.5px;line-height:1.3;opacity:.7;margin-top:7px}
.vector-leaflet-icon{background:transparent!important;border:0!important}.vector-wrap{position:relative;width:64px;height:58px;text-align:center;pointer-events:none}.vector-glyph{position:absolute;left:0;top:0;width:64px;height:48px;transform-origin:32px 23px;overflow:visible;filter:drop-shadow(0 1px 1px rgba(255,255,255,.95)) drop-shadow(0 0 2px rgba(255,255,255,.9))}.wind-glyph{opacity:.96}.current-glyph{opacity:.94}.vector-label{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:8px;font-weight:700;line-height:1.15;text-align:center;background:rgba(255,255,255,.88);border:1px solid rgba(0,0,0,.08);border-radius:5px;padding:1px 3px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.12);color:#18312f}.wind-vector .vector-label{border-bottom:2px solid rgba(42,75,145,.35)}.current-vector .vector-label{border-bottom:2px solid rgba(0,126,132,.35)}
.data-label{background:rgba(255,255,255,.88);border:1px solid rgba(0,0,0,.17);border-radius:9px;padding:2px 4px;font-size:9px;font-weight:700;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.12);text-align:center}.temp-label{min-width:42px}.salinity-label{min-width:58px}
.spot-marker{width:28px;height:28px;border-radius:50%;border:3px solid white;box-shadow:0 1px 5px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:11px;color:white;font-weight:800;background:#176d68}
.spot-marker.filter-dim{opacity:.24;filter:saturate(.35)}.spot-marker.top-filter{width:34px;height:34px;background:#b54816;border-color:#fff7d1;font-size:15px;box-shadow:0 2px 8px rgba(75,28,5,.55)}.spot-marker.top-filter small{position:absolute;right:-5px;bottom:-5px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:#123b3a;color:#fff;border:1px solid #fff;font-size:8px;line-height:14px;text-align:center}
.location-control{margin-top:8px!important}.location-button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;background:#fff;color:#173f3d;cursor:pointer}.location-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.location-button.locating{color:#087a73;animation:location-button-pulse 1.25s ease-in-out infinite}.location-button.active{background:#0b716b;color:#fff}.location-leaflet-icon{background:transparent!important;border:0!important;overflow:visible!important}.location-marker-wrap{position:relative;width:64px;height:64px;pointer-events:none}.location-heading{position:absolute;inset:0;width:64px;height:64px;transform-origin:32px 32px;overflow:visible;filter:drop-shadow(0 1px 2px rgba(255,255,255,.92))}.location-heading path{fill:#087a73;fill-opacity:.72;stroke:#fff;stroke-width:1.5}.location-pulse{position:absolute;left:21px;top:21px;width:22px;height:22px;border-radius:50%;background:rgba(17,133,197,.22);animation:location-marker-pulse 2s ease-out infinite}.location-dot{position:absolute;left:25px;top:25px;width:14px;height:14px;border-radius:50%;background:#0b84d1;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45)}.location-accuracy{fill:#0b84d1;fill-opacity:.12;stroke:#0b84d1;stroke-opacity:.55;stroke-width:1.5}.location-toast{position:fixed;z-index:1150;top:calc(64px + var(--safe-top));left:50%;transform:translateX(-50%);max-width:min(90vw,420px);padding:9px 12px;border-radius:12px;background:rgba(18,59,58,.94);color:#fff;font-size:12px;line-height:1.3;text-align:center;box-shadow:0 5px 18px rgba(0,0,0,.24);pointer-events:none}.location-toast.error{background:rgba(126,47,26,.96)}@keyframes location-button-pulse{50%{opacity:.45}}@keyframes location-marker-pulse{0%{transform:scale(.5);opacity:.8}80%,100%{transform:scale(1.8);opacity:0}}
.protection-status{margin-top:7px;padding:7px 9px;border-radius:10px;background:#fff3df;color:#70410d;font-size:10px;line-height:1.35}.protection-popup{font-size:12px;line-height:1.4}.protection-popup b{font-size:13px}.protection-popup .warning{color:#9a3d19;font-weight:750}.protection-alert{margin:10px 0;padding:10px;border-radius:12px;background:#fff0e8;border:1px solid #e89a70;color:#6e2d0d;font-size:12px;line-height:1.35}
.top-filter{margin-top:8px;padding:8px;border-radius:12px;background:rgba(247,241,226,.94);border:1px solid rgba(128,82,24,.16)}.top-filter-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#563a17}.top-filter-head button{border:0;background:transparent;color:#8b3d19;font:inherit;font-size:9px;font-weight:750}.top-filter-controls{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(80px,.7fr);gap:5px;margin-top:6px}.top-filter select{min-width:0;border:1px solid rgba(18,59,58,.16);border-radius:8px;background:#fff;color:#18312f;padding:6px 7px;font:inherit;font-size:10px}.top-filter-status{margin-top:5px;font-size:8.8px;line-height:1.3;color:#6b5638}.top-filter-results{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:3px;max-height:126px;overflow:auto}.top-filter-results button{width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:6px;align-items:center;border:0;border-radius:8px;background:rgba(255,255,255,.82);padding:5px 6px;text-align:left;color:#203836;font:inherit;font-size:9.5px}.top-filter-rank{font-weight:850;color:#a23f15}.top-filter-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-filter-value{font-weight:800;white-space:nowrap}
.rating-box{margin-top:12px;padding:11px;border-radius:13px;background:#f0f4ff;border:1px solid rgba(49,76,142,.20);font-size:11px;line-height:1.4;color:#1d3156}.rating-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-weight:800}.rating-head b{font-size:19px}.rating-meta,.rating-date{font-size:9.5px;opacity:.72}.rating-times{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;margin:8px 0 6px;font-size:9.5px;font-weight:750}.rating-times select{min-width:0;width:100%;border:1px solid rgba(49,76,142,.18);border-radius:8px;padding:6px;background:rgba(255,255,255,.82);color:#263d69;font:inherit}.rating-reason{margin:8px 0 6px}.rating-context summary{cursor:pointer;font-weight:750}.rating-context p{margin:5px 0}.rating-limit{margin-top:7px;padding-top:7px;border-top:1px solid rgba(49,76,142,.14);font-size:9px;opacity:.72}
.spot-forecast-box{margin:12px 0;padding:11px;border-radius:14px;background:#edf7f8;border:1px solid #b9dbe0}.spot-forecast-head{display:flex;justify-content:space-between;gap:10px;color:#19586a;font-size:12px;font-weight:800}.spot-forecast-time{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0;color:#536c70;font-size:11px}.spot-forecast-time select{max-width:190px;border:1px solid #bad3d6;border-radius:8px;background:#fff;padding:6px 8px;color:#193737}.spot-forecast-metrics{margin-top:7px}.spot-forecast-summary{margin-top:8px;color:#38585b;font-size:10px;line-height:1.35}
dialog{border:0;border-radius:18px;max-width:min(92vw,440px);width:92vw;padding:18px;color:#132625;box-shadow:0 20px 60px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(0,0,0,.28);backdrop-filter:blur(3px)}.close{position:absolute;right:8px;top:8px;border:0;background:#eef3f2;border-radius:50%;width:32px;height:32px;font-size:22px}.spot-title{font-size:20px;font-weight:750;margin-right:32px}.spot-sub{font-size:11px;opacity:.68;margin-top:3px;line-height:1.35}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}.metric{background:#f1f5f4;border-radius:12px;padding:9px;min-height:58px}.metric b{display:block;font-size:15px}.metric span{font-size:10px;opacity:.67;line-height:1.25}.precision-note{font-size:11px;line-height:1.42;margin:11px 0}.warning,.no-data{background:#fff5dc;border-radius:10px;padding:9px;font-size:11px;line-height:1.4;margin-top:12px}.source{font-size:10px;opacity:.68;margin-top:12px;line-height:1.45}
.spot-actions{margin-top:10px}.spot-action{width:100%;border:0;border-radius:11px;background:#123b3a;color:#fff;padding:10px 12px;font:inherit;font-size:12px;font-weight:750;cursor:pointer}.spot-action:active{transform:translateY(1px)}
@media (min-width:700px){.panel{left:16px;right:auto;width:490px}.topbar{right:auto;width:490px}}
@media (max-width:699px){
  .topbar{left:6px;right:6px;top:calc(4px + var(--safe-top));padding:5px 7px 5px 9px;border-radius:12px;min-height:40px}
  .title{font-size:14px;line-height:1.05}.subtitle{font-size:9px;line-height:1.1;margin-top:1px;max-width:calc(100vw - 74px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .iconbtn{width:32px;height:32px;line-height:32px;border-radius:9px;font-size:19px}
  .leaflet-control-zoom{margin-top:58px!important}
  .location-toast{top:calc(50px + var(--safe-top));font-size:11px}
  .panel{left:6px;right:6px;bottom:calc(6px + var(--safe-bottom));border-radius:14px;padding-left:9px;padding-right:9px}
}
.data-legend{margin-top:7px;padding:6px 8px;border-radius:9px;background:rgba(237,244,243,.88);font-size:9.5px;line-height:1.3;color:#27413f}
.data-error{margin-top:7px;padding:7px 8px;border-radius:9px;background:#fff1e8;border:1px solid rgba(172,80,32,.18);font-size:9.5px;line-height:1.35;color:#743c20}

.field-canvas{position:absolute;left:0;top:0;pointer-events:none;mix-blend-mode:multiply}
.depth-block{margin-top:9px;display:flex;align-items:center;gap:9px}
.depth-title{font-size:11px;font-weight:700;white-space:nowrap;color:#29413f}
.depth-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1}
.depth-btn{border:1px solid rgba(18,59,58,.13);background:#eef3f2;color:#1c3937;border-radius:9px;padding:6px 5px;font-size:11px;font-weight:650}
.depth-btn.active{background:#123b3a;color:#fff;border-color:#123b3a}
.data-legend .legend-line{display:flex;align-items:center;gap:6px;margin:2px 0}
.data-legend .gradient-bar{display:inline-block;width:58px;height:7px;border-radius:999px;border:1px solid rgba(0,0,0,.12)}
.data-legend .temp-gradient{background:linear-gradient(90deg,hsl(220 72% 48%),hsl(110 72% 48%),hsl(5 72% 48%))}
.data-legend .salt-gradient{background:linear-gradient(90deg,hsl(185 72% 45%),hsl(235 72% 48%),hsl(285 72% 48%))}

.bathymetry-legend{
  margin-top:6px;
  padding:6px 8px;
  border-radius:9px;
  background:rgba(235,243,247,.88);
  color:#294755;
  font-size:10px;
  line-height:1.25;
}


.progress-card{margin-top:10px;padding:8px 9px;border-radius:12px;background:rgba(237,244,243,.94);border:1px solid rgba(18,59,58,.08)}
.progress-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;font-weight:700;color:#223f3d}
.progress-bar{margin-top:6px;height:9px;border-radius:999px;background:rgba(18,59,58,.10);overflow:hidden}
#progressFill{height:100%;width:0;background:#123b3a;border-radius:999px;transition:width .18s ease}
.progress-meta{margin-top:6px;font-size:9.5px;line-height:1.3;color:#31514f}
.bathymetry-label-icon{background:transparent!important;border:0!important;overflow:visible!important}
.bathymetry-label{position:absolute;left:50%;top:50%;transform-origin:center center;background:rgba(249,252,253,.94);border:1px solid rgba(36,84,109,.34);color:#173d4d;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:800;line-height:1.25;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.14);pointer-events:none}
.bathymetry-label.depth-major{background:rgba(238,247,250,.96);font-size:10.5px}
.bathymetry-label.depth-shallow{background:rgba(252,253,253,.95);font-size:9.5px}

.spot-marker.compact{width:13px;height:13px;border-width:2px;font-size:0;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.spot-marker.mid{width:22px;height:22px;border-width:2px;font-size:9px}


.guide-box{margin-top:12px;padding:10px;border-radius:12px;background:#edf4f2;border:1px solid rgba(18,59,58,.12);font-size:11px;line-height:1.35}
.guide-box.guide-forbidden{background:#fff1e8;border-color:rgba(166,69,27,.32)}
.guide-title{font-size:10px;font-weight:750;opacity:.72;margin-bottom:4px}
.guide-status{font-size:13px;margin-bottom:7px}
.guide-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:3px 8px}
.guide-grid span{opacity:.68}.guide-grid b{font-weight:700}
.guide-note{margin-top:7px;padding-top:6px;border-top:1px solid rgba(0,0,0,.08)}
.guide-legal{margin-top:7px;padding:7px;border-radius:8px;background:rgba(255,255,255,.72);font-size:10px;line-height:1.35}
.guide-source{margin-top:7px;font-size:9px;opacity:.62}

.vector-legend{margin-top:6px;padding:6px 8px;border-radius:9px;background:rgba(245,248,248,.90);font-size:9.5px;line-height:1.35;color:#29413f}.vector-legend-row{display:flex;align-items:center;gap:7px;margin:3px 0;flex-wrap:wrap}.vector-legend-icon{display:inline-flex;width:30px;height:16px;align-items:center;justify-content:center;font-weight:850;font-size:18px;line-height:1}.vector-legend-icon.wind{color:hsl(208 78% 43%)}.vector-legend-icon.current{color:hsl(184 72% 39%)}.vector-legend-note{opacity:.72;margin-top:4px}.vector-legend .ramp{display:inline-block;width:44px;height:6px;border-radius:999px;vertical-align:1px;border:1px solid rgba(0,0,0,.10)}.vector-legend .wind-ramp{background:linear-gradient(90deg,hsl(210 78% 43%),hsl(109 78% 43%),hsl(8 78% 43%))}.vector-legend .current-ramp{background:linear-gradient(90deg,hsl(178 72% 39%),hsl(235 72% 39%),hsl(292 72% 39%))}

.wave-glyph{opacity:.96}.wave-vector .vector-label{border-bottom:2px solid rgba(88,70,175,.38)}
.vector-legend-icon.wave{color:hsl(220 76% 42%)}
.vector-legend .wave-ramp{background:linear-gradient(90deg,hsl(194 76% 42%),hsl(260 76% 42%),hsl(326 76% 42%))}
#waveProgressFill{height:100%;width:0;background:#5363a7;border-radius:999px;transition:width .18s ease}
.wave-progress-card{background:rgba(242,243,251,.95)}
.wave-status{margin-top:6px;padding:5px 7px;border-radius:8px;background:rgba(238,241,250,.9);font-size:9.5px;line-height:1.25;color:#35436b}
.wave-box{margin:8px 0;padding:8px;border-radius:10px;background:rgba(239,242,251,.94);border:1px solid rgba(83,99,167,.20)}
.wave-box.muted{font-size:10px;color:#57616d;background:rgba(244,246,247,.9)}
.wave-title{font-size:11px;font-weight:800;color:#34446e;margin-bottom:5px}.wave-metrics{margin-top:4px}
.water-level-box{margin:9px 0;padding:9px;border-radius:12px;background:#edf6f8;border:1px solid rgba(25,103,126,.2)}
.water-level-title{font-size:11px;font-weight:800;color:#20556a}
.water-level-current{display:flex;align-items:baseline;gap:5px;margin-top:3px;color:#133f50}.water-level-current b{font-size:19px}.water-level-current span{font-size:12px;font-weight:700}
.water-level-reference{font-size:9.5px;line-height:1.3;color:#4a6874;margin:1px 0 6px}.water-level-message{font-size:10.5px;line-height:1.4;margin-top:6px;color:#49636d}
.water-level-chart{display:block;width:100%;height:auto;min-height:132px;overflow:visible;touch-action:manipulation;background:rgba(255,255,255,.76);border-radius:9px}
.water-line{fill:none;stroke:#087d9b;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}.water-zero{stroke:#91a8b0;stroke-width:.8;stroke-dasharray:3 3}.water-now{stroke:#d07829;stroke-width:1.2;stroke-dasharray:3 2}.water-now-label{font-size:8px;fill:#a35112;text-anchor:middle}.water-selected{stroke:#123b3a;stroke-width:1.4}.water-extreme{stroke:#fff;stroke-width:1.3}.water-extreme.high{fill:#d06231}.water-extreme.low{fill:#356fba}.water-target{fill:transparent;stroke:transparent;cursor:pointer}.water-axis{font-size:7.5px;fill:#526b74}.water-axis-bottom{font-size:8px}.water-level-legend{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:8.5px;color:#526b74}.water-level-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:2px}.water-level-legend i.high{background:#d06231}.water-level-legend i.low{background:#356fba}.water-level-cache-note{margin-top:5px;padding:5px 6px;border-radius:7px;background:#fff5dc;font-size:9px;line-height:1.35;color:#744b20}
@media (max-width:699px){dialog{padding:14px;max-height:88vh}.water-level-chart{min-height:120px}}