:root{color-scheme:dark;--navy:#061624;--panel:#102637;--panel2:#112e41;--cyan:#4cdcf4;--blue:#098de3;--ink:#f0f9ff;--muted:#8eacbd;--line:rgba(151,214,239,.16);--orange:#ffb15c;--safe:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--navy);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}a{color:var(--cyan)}.app-shell{max-width:600px;margin:0 auto;min-height:100dvh;background:radial-gradient(ellipse 100% 50% at top,#123b58 0,transparent 58%),var(--navy);box-shadow:0 0 50px #010e16;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:1200;display:flex;justify-content:space-between;align-items:center;height:66px;background:rgba(6,22,36,.96);backdrop-filter:blur(15px);padding:12px 17px;border-bottom:1px solid var(--line);padding-top:max(12px,env(safe-area-inset-top))}.brand{display:flex;align-items:center;gap:10px}.brand img{width:40px;height:40px;object-fit:cover;border-radius:13px;border:1px solid #326d84}.brand div{display:flex;flex-direction:column;letter-spacing:.11em}.brand b{font-size:14px;font-weight:900}.brand span{font-size:10px;color:var(--cyan);font-weight:800;margin-top:3px}.brand i{font-style:normal;color:#6d8492}.topbar-right{display:flex;gap:5px;align-items:center;color:var(--muted);font-size:10px}.status-dot{width:6px;height:6px;border-radius:50%;background:#687d88}.status-dot.active{background:#20e2a5;box-shadow:0 0 7px #20e2a5}.icon-button{color:#d4ebf8;border:0;background:transparent;font-size:22px;padding:4px 5px}main{flex:1;min-height:0}.view{display:none;padding:22px 18px 32px}.view.active{display:block}.view h1{margin:2px 0 10px;line-height:1.03;font-size:33px;letter-spacing:-1.2px;font-weight:840}.view h1 em{color:var(--cyan);font-style:normal}.eyebrow{color:var(--cyan);font-weight:800;font-size:10px;letter-spacing:.16em;margin:0 0 10px}.section-intro{font-size:14px;color:var(--muted);margin:0 0 21px;line-height:1.5}.hero{position:relative;min-height:300px;border:1px solid rgba(89,225,246,.24);border-radius:25px;overflow:hidden;background:radial-gradient(ellipse at 90% 10%,#0f688c 0,transparent 45%),linear-gradient(130deg,#103e57,#061b32 65%);display:flex;align-items:flex-start;margin-bottom:26px;padding:29px 19px}.hero:before{content:' ';position:absolute;inset:auto -20px -65px 20px;height:170px;background:repeating-radial-gradient(ellipse at center,transparent 0 18px,rgba(50,164,189,.1) 19px 20px);transform:rotate(-12deg)}.hero-content{position:relative;z-index:1;width:77%}.hero h1{font-size:29px;letter-spacing:-.9px}.hero p:not(.eyebrow){max-width:220px;font-size:12px;color:#c0d9e5;line-height:1.5;margin:13px 0 23px}.hero img{position:absolute;object-fit:cover;border-radius:21px;width:180px;height:180px;right:-36px;bottom:14px;filter:drop-shadow(0 15px 18px #04111e);transform:rotate(-9deg);opacity:.93}.segmented{display:flex;background:#092737;border:1px solid #25546a;border-radius:100px;padding:4px;position:relative;z-index:2;width:max-content}.segmented button{border:none;background:transparent;color:#9cb9c7;font-size:12px;font-weight:780;padding:10px 13px;border-radius:100px;transition:.15s}.segmented .active{background:var(--cyan);color:#082334}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:23px 0 13px}.section-heading h2{font-size:19px;letter-spacing:-.4px;margin:0}.section-heading span{font-size:10px;letter-spacing:.13em;color:#7d9dad;font-weight:800}.metric-grid,.forecast-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.metric,.wide-metric{min-height:135px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(135deg,#132f43,#0b2030);padding:15px;display:flex;flex-direction:column}.metric-icon{font-size:25px;line-height:1;color:var(--cyan);margin-bottom:6px}.metric>span:not(.metric-icon){color:#a5bdc9;font-size:12px}.metric b{font-size:32px;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;line-height:1.25}.metric small{font-size:10px;color:#819eae;line-height:1.3}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.quick{display:flex;flex-direction:column;text-align:left;justify-content:center;min-height:116px;gap:3px;padding:13px;border-radius:18px;background:#112b3c;border:1px solid var(--line);color:var(--ink)}.quick.primary{border-color:#17678d;background:linear-gradient(130deg,#13608d,#0e3853)}.quick strong{font-size:25px;color:var(--cyan)}.quick b{font-size:13px}.quick small{color:#97b8c8;font-size:10px}.safety-note{border-radius:13px;padding:12px;background:rgba(255,177,92,.07);border:1px solid rgba(255,177,92,.2);color:#d2c19f;font-size:11px;line-height:1.5;margin-top:22px}.tabbar{position:sticky;bottom:0;z-index:1199;background:rgba(5,18,29,.97);backdrop-filter:blur(14px);border-top:1px solid #244354;display:flex;min-height:68px;padding:5px 4px calc(7px + var(--safe));justify-content:space-around;gap:3px}.tab{color:#96b0c0;background:transparent;border:0;font-weight:720;min-width:0;flex:1;border-radius:13px;padding:5px 1px;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:3px}.tab span{font-size:23px;line-height:1.3}.tab.active{color:var(--cyan);background:rgba(39,139,179,.15)}.map-view{height:calc(100dvh - 134px - env(safe-area-inset-top) - var(--safe));min-height:510px;padding:0;display:none;flex-direction:column}.map-view.active{display:flex}.map-header{display:flex;justify-content:space-between;padding:15px 16px 8px;align-items:center}.map-header h1{font-size:27px;margin:0}.map-actions{display:flex;gap:7px}.round-btn{width:39px;height:39px;border-radius:50%;background:#113446;color:#d9f8ff;border:1px solid #2d6478;font-size:23px;display:grid;place-items:center}.map-instrument-row{display:flex;justify-content:space-around;padding:9px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#051929}.map-instrument-row>div{display:flex;gap:3px;align-items:baseline}.map-instrument-row span{font-size:10px;color:var(--cyan);font-weight:800;margin-right:4px}.map-instrument-row b{font-size:18px;font-variant-numeric:tabular-nums}.map-instrument-row small{font-size:9px;color:var(--muted)}#map-container{position:relative;flex:1;min-height:200px;background:radial-gradient(circle at 55% 40%,#065c83,#08334f 65%,#0b2133);overflow:hidden}#map{position:absolute;inset:0}.map-overlay-label{position:absolute;z-index:500;pointer-events:none;bottom:8px;left:7px;background:#071c2ccc;color:#fff;padding:6px 9px;border-radius:8px;font-size:9px;max-width:65%}.map-fallback{position:absolute;inset:0;z-index:600;background:radial-gradient(ellipse at center,#145878,#061b2c 75%);padding:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;text-align:center}.map-fallback[hidden]{display:none}.map-fallback p{color:#b6d1e2;font-size:13px}.map-bottom{background:#071c2a;border-top:1px solid #345a6b;padding:9px 13px 10px}.selected-point,.navigation-panel{display:flex;justify-content:space-between;align-items:center;gap:10px}.selected-point small,.navigation-panel small{display:block;color:var(--cyan);font-size:9px;font-weight:800;letter-spacing:.07em}.selected-point strong,.navigation-panel strong{font-size:12px;display:block;margin-top:4px;word-break:break-word}.navigation-panel{padding:11px;margin-top:7px;border-radius:12px;background:#103e50;border:1px solid #208da7}.navigation-panel[hidden]{display:none}.navigation-panel span{font-size:11px;color:#cae5ec;display:block;margin-top:4px}.navigation-panel button{font-size:11px;border:1px solid #a56450;background:#452820;color:#fff;border-radius:10px;padding:9px}.map-legend{font-size:9px;color:#95b1bf;margin-top:9px}.legend-cyan{color:var(--cyan)}.legend-orange{color:var(--orange)}.legend-white{color:white}.small-solid,.big-cta{color:#042337;border:0;background:linear-gradient(125deg,#5de7f5,#32a9e7);border-radius:11px;padding:11px 15px;font-size:12px;font-weight:850;white-space:nowrap}.big-cta{width:100%;padding:15px;font-size:14px;border-radius:14px}.leaflet-container{background:#b6dbe8!important}.leaflet-control-attribution{font-size:8px!important;background:#ffffffc7!important}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0b2738;color:#fff}.leaflet-popup-content{font-size:13px}.popup-action{border:0;border-radius:7px;background:#26cee9;color:#052132;padding:8px 11px;font-weight:850;cursor:pointer}.waypoint-marker{width:32px;height:32px;border:2px solid white;background:#139ccc;border-radius:50% 50% 50% 10%;transform:rotate(-45deg);box-shadow:0 2px 9px #0008}.waypoint-marker:after{content:'●';display:block;color:white;font-size:16px;transform:rotate(45deg);text-align:center;line-height:28px}.position-marker{width:17px;height:17px;border-radius:50%;border:3px solid white;background:#f3a34b;box-shadow:0 0 0 7px #f3a34b44}.session-hero{border:1px solid #286f81;background:linear-gradient(135deg,#173d53,#0a2030);border-radius:22px;padding:21px;display:flex;align-items:center;flex-direction:column;text-align:center;margin:14px 0 30px}.circle-icon{height:66px;width:66px;display:grid;place-items:center;font-size:33px;border-radius:50%;background:#0d5368;margin-bottom:9px}.session-hero h2{font-size:21px;margin:6px 0}.session-hero p{font-size:12px;color:#a6bfcb;line-height:1.55;max-width:320px;margin:4px 0 18px}.live-metrics{display:flex;gap:30px;margin:0 0 15px}.live-metrics div{display:flex;flex-direction:column;align-items:center}.live-metrics small{font-size:9px;color:#86a5b5}.live-metrics b{font-size:19px;margin-top:5px}.stack-list{display:flex;flex-direction:column;gap:10px;margin:12px 0}.empty-state{padding:20px;text-align:center;color:#90aebe;font-size:13px;border:1px dashed #3a5868;border-radius:15px}.list-card{background:#0e2839;border:1px solid var(--line);border-radius:15px;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:9px}.list-card h3{font-size:14px;margin:0 0 5px;overflow-wrap:anywhere}.list-card small{font-size:11px;color:#97b3c1;line-height:1.55}.list-card .list-buttons{display:flex;gap:4px;flex-shrink:0}.list-buttons button{border:1px solid #285f77;background:#0d3a51;border-radius:9px;padding:8px;color:var(--cyan);font-size:11px;font-weight:800}.list-buttons button.danger{border-color:#874c4c;color:#ffc1a9;background:#452a2a}.forecast-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0}.forecast-toolbar>span{color:#a1b7c4;font-size:11px;max-width:230px;overflow:hidden;text-overflow:ellipsis}.forecast-message{border-radius:12px;border:1px solid var(--line);background:#0d3043;padding:12px;color:#a9d2e1;font-size:12px;line-height:1.5;margin:11px 0 16px}.wide-metric{min-height:143px}.wide-metric small{color:var(--cyan);font-size:10px;letter-spacing:.04em;font-weight:850}.wide-metric b{font-size:29px;letter-spacing:-1px;margin:auto 0 5px}.wide-metric span{font-size:11px;color:#a2bdca}.credits{color:#7196aa;font-size:11px}.archive-tabs{display:flex;gap:9px;margin:12px 0 17px}.archive-tab{border-radius:13px;padding:11px 16px;border:1px solid #255269;color:#aec9d7;background:#0b2738;font-size:12px;font-weight:780}.archive-tab.active{background:#164c64;border-color:var(--cyan);color:#fff}.archive-toolbar{display:flex;gap:9px;align-items:center}.archive-toolbar input{flex:1;min-width:0;border:1px solid #2a566a;background:#0a2435;border-radius:10px;color:#fff;padding:10px 11px;font-size:14px}.data-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.data-actions button{min-height:46px;border:1px solid #386b7c;background:#103649;border-radius:12px;color:#b3eff7;font-size:12px;font-weight:800}.tiny-note{font-size:11px;color:#9fb4c1;line-height:1.6}.sheet-backdrop{position:fixed;z-index:2000;inset:0;background:#000b;display:flex;align-items:flex-end;justify-content:center}.sheet-backdrop[hidden]{display:none}.sheet{background:#102b3d;color:#fff;border-radius:25px 25px 0 0;border:1px solid #31657d;padding:19px 20px calc(20px + var(--safe));width:min(600px,100%);max-height:87dvh;overflow-y:auto;box-shadow:0 -20px 50px #0009}.sheet-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}.sheet-title h2{font-size:20px;margin:0}.close-sheet{font-size:28px;border:0;background:#194458;color:#e1f8ff;border-radius:50%;width:35px;height:35px;line-height:1}.switch-line{padding:12px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.switch-line b{display:block;font-size:14px}.switch-line small{display:block;font-size:11px;color:#8dacbc;margin-top:4px}.switch-line input{accent-color:var(--cyan);width:23px;height:23px;flex-shrink:0}.input-label{display:block;color:#a9c4d1;font-size:12px;margin:10px 0 13px}.input-label input,.input-label select,.input-label textarea{display:block;margin-top:7px;padding:12px;border:1px solid #3d6576;background:#051d2e;border-radius:11px;width:100%;color:white;font-size:16px}.input-label textarea{resize:vertical}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings-logo{display:flex;align-items:center;gap:13px;padding:10px 0}.settings-logo img{width:72px;height:72px;border-radius:16px}.settings-logo div{display:flex;flex-direction:column;gap:5px}.settings-logo b{font-size:13px}.settings-logo span{color:#a1c0ca;font-size:11px}.sheet p{color:#a8c2ce;font-size:12px;line-height:1.6}.toast{position:fixed;z-index:3000;bottom:calc(82px + var(--safe));left:50%;transform:translateX(-50%);background:#d4faff;color:#063144;border:1px solid white;padding:10px 18px;border-radius:11px;box-shadow:0 5px 25px #0008;white-space:normal;min-width:210px;max-width:85%;text-align:center;font-size:12px;font-weight:750}.toast[hidden]{display:none}@media(min-width:601px){.app-shell{border-left:1px solid #245269;border-right:1px solid #245269}.map-view{height:calc(100dvh - 134px)}}@media(max-width:360px){.brand b{font-size:12px}.topbar-right{font-size:9px}.hero{padding:23px 14px}.hero h1{font-size:25px}.hero img{width:160px;height:160px}.view{padding-left:13px;padding-right:13px}.metric{padding:12px}.metric b{font-size:28px}}

/* --- LAB 02 · MapLibre / professional controls / iPhone safe area --- */
html,body{overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
.app-shell{overflow-x:clip}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mi{display:block;width:24px;height:24px;flex:none}
.topbar{min-height:68px}
.hero{min-height:280px;isolation:isolate}
.hero-content{position:relative;z-index:2;min-width:0}
.hero img{width:clamp(115px,35%,165px)!important;height:auto!important;max-height:170px!important;object-fit:contain!important;right:10px!important;bottom:10px!important;top:auto!important;clip-path:none!important;border-radius:26px;filter:drop-shadow(0 12px 18px #000a)}
.hero h1{max-width:100%;padding-right:4px;font-size:clamp(28px,6.8vw,36px)}
.hero-content>p:not(.eyebrow){max-width:60%;min-width:185px}
.hero .segmented{max-width:64%}
.tabbar{min-height:70px;gap:2px;padding-bottom:calc(6px + var(--safe));background:rgba(4,20,32,.97)}
.tab{min-height:54px;gap:4px;padding:6px 2px;color:#a5c0cd;font-size:11px;transition:background-color .12s,color .12s}
.tab .mi{width:23px;height:23px;stroke-width:1.85}
.tab span{font-size:10px!important;line-height:1.15!important}
.tab.active{background:linear-gradient(180deg,rgba(39,157,188,.27),rgba(39,157,188,.08));color:#53e1f5;border:1px solid rgba(72,213,243,.25)}
.map-view{height:calc(100dvh - 137px - env(safe-area-inset-top) - var(--safe));min-height:500px}
.map-header{padding:10px 14px 8px;gap:8px}
.map-header h1{font-size:23px}
.map-header .eyebrow{font-size:9px;letter-spacing:.13em}
.map-actions{gap:5px}
.round-btn{width:43px;height:43px;flex:none;border-radius:14px;background:#113747;color:#c4faff}
.round-btn .mi{width:22px;height:22px}
#map-container{touch-action:none;background:linear-gradient(135deg,#b0e0ef,#b7d9e7)}
#map{touch-action:none;overscroll-behavior:contain}
#map .maplibregl-canvas{touch-action:none}
.maplibregl-ctrl-attrib{font-size:9px!important;max-width:94vw}
.maplibregl-ctrl-bottom-right{bottom:6px}
.maplibregl-ctrl-bottom-left{bottom:35px}
.maplibregl-popup-content{background:#0a2b40!important;color:#f1fbff!important;border-radius:13px!important;border:1px solid #31788f!important;box-shadow:0 7px 24px #0008!important;min-width:180px}
.maplibregl-popup-tip{border-top-color:#0a2b40!important}
.map-popup{display:flex;flex-direction:column;gap:8px;padding:5px;font-size:13px}
.map-popup small{color:#a0d0df}
.map-popup button{background:#4ddbed;color:#073044;border:0;padding:10px;border-radius:10px;font-weight:750}
.map-floating-actions{position:absolute;z-index:10;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.map-floating-actions button{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #b0f6ff88;border-radius:14px;background:#07283fe6;color:white;font-weight:750;font-size:12px;min-height:45px;padding:8px 12px;box-shadow:0 4px 14px #041a2955}
.map-floating-actions .mi{width:20px;height:20px;color:#5ce4ee}
.map-overlay-label{z-index:9;bottom:7px;left:7px;font-size:9px;max-width:76%;background:#051c2fe9}
.map-overlay-label b{color:#54e5ef;letter-spacing:.07em}
.map-context{position:absolute;z-index:10;top:108px;right:8px;max-width:225px;background:#042338df;border:1px solid #61d8eb;border-radius:10px;padding:8px;color:white;font-size:11px}
.map-context[hidden]{display:none}
.map-bottom{padding:8px 13px}
.map-legend{display:none}
.map-instrument-row{padding:8px 4px}
.map-instrument-row b{font-size:16px}
#view-map.is-fullscreen{position:fixed;inset:0;max-width:none;width:100%;height:100dvh;z-index:1750;min-height:0;background:#041725;display:flex;padding-top:env(safe-area-inset-top,0px)}
#view-map.is-fullscreen .map-header{background:#061b2ce8;min-height:56px}
#view-map.is-fullscreen .map-header .eyebrow{display:none}
#view-map.is-fullscreen .map-header h1{font-size:18px}
#view-map.is-fullscreen #map-container{min-height:0}
#view-map.is-fullscreen .map-instrument-row{padding:5px}
#view-map.is-fullscreen .map-bottom{padding:8px 12px calc(8px + var(--safe))}
#view-map.is-fullscreen .selected-point small{display:none}
#view-map.is-fullscreen .selected-point strong{font-size:11px}
#view-map.is-fullscreen .map-floating-actions{top:12px;right:12px}
.sheet-backdrop{z-index:2100}
.nautical-sheet{background:#0b2032;border-color:#3b6676}
.sheet-eyebrow{font-size:9px;color:#4bd7ea;letter-spacing:.16em;font-weight:800}
.map-style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0 18px}
.map-style-choice{border:1px solid #32586a;background:#102f42;color:#f1faff;padding:7px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.map-style-choice.selected{border:2px solid #61e8f8;background:#12394d}
.map-style-choice strong{font-size:11px}
.map-style-choice small{font-size:9px;color:#9ab7c8;line-height:1.15}
.style-thumb{width:100%;height:65px;border-radius:9px;display:grid;place-items:center;border:1px solid #ffffff21}
.style-thumb svg{width:32px;height:32px}
.style-classic{background:linear-gradient(135deg,#e7e8c9 0 41%,#79c7df 42% 100%);color:#073c58}
.style-nautic{background:linear-gradient(135deg,#ffe9ac 0 40%,#c8eaff 42% 64%,#66a4d3 65%);color:#173d55}
.style-bathy{background:linear-gradient(135deg,#20abc4,#0b76b1 45%,#15417c 70%,#0c214b);color:white}
.style-relief{background:repeating-linear-gradient(155deg,#0e356a 0 13px,#1f7495 14px 27px,#2bafbb 28px 42px);color:white}
.style-night{background:linear-gradient(135deg,#0b1729 0 60%,#17344d);color:#6bdbef;font-size:33px}
.map-option-row{display:flex;align-items:center;justify-content:space-between;color:#c3e5ee;font-size:12px;margin:12px 0 6px}
.opacity-range{width:100%;height:32px;accent-color:#42dce9}
.zone-shortcuts{padding:13px 0 6px}
.zone-shortcuts>small{color:#5bdce9;font-weight:850;font-size:10px;letter-spacing:.08em}
.zone-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0}
.zone-buttons button{color:#c7eef4;background:#123849;border:1px solid #356b79;padding:10px 12px;border-radius:10px;font-size:11px}
@media(max-width:380px){.map-style-grid{gap:6px}.map-style-choice{padding:5px}.map-style-choice strong{font-size:10px}.map-header .eyebrow{font-size:8px}.hero img{width:120px!important}.hero h1{font-size:29px}}
@media(prefers-reduced-motion:reduce){.tab{transition:none}*{scroll-behavior:auto!important}}