:root{--bg:#163d3b;--panel:#f4d7a1;--panel-dark:#1f5652;--accent:#de7d55;--text:#173f3d;--white:#fffaf0;--muted:#6d7f78;--danger:#bf4b4b;--safe:#27745e;--shadow:0 12px 28px rgba(32,68,61,.22)}*{box-sizing:border-box}html,body,#map{height:100%;margin:0;font-family:"DM Sans",system-ui,sans-serif}body{overflow:hidden;background:var(--bg);color:var(--text)}button,a{font:inherit}.hidden{display:none!important}#map{position:fixed;inset:0;background:#b8d8d3}.leaflet-control-zoom{margin-top:112px!important;margin-left:14px!important}.leaflet-control-zoom a{color:var(--text)!important;background:var(--white)!important;border-color:rgba(23,63,61,.18)!important}.topbar{position:fixed;z-index:900;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:2px solid rgba(255,255,255,.5);border-radius:22px;padding:10px 12px;box-shadow:var(--shadow)}.topbar strong{display:block;font-size:18px;color:var(--text)}.topbar span:not(.material-symbols-rounded){display:block;color:var(--muted);font-size:11px;margin-top:1px}.top-actions{display:flex;gap:2px;align-items:center}.icon-btn{border:0;color:var(--text);background:transparent;border-radius:14px;width:44px;height:44px;display:grid;place-items:center;text-decoration:none;cursor:pointer}.icon-btn:hover,.icon-btn:focus{background:rgba(23,63,61,.1)}.material-symbols-rounded{font-size:27px;line-height:1}.demo-banner{position:fixed;z-index:880;top:calc(92px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;background:var(--accent);color:var(--white);border-radius:999px;padding:7px 13px;font-size:12px;box-shadow:var(--shadow);white-space:nowrap}.instrument-panel{position:fixed;z-index:850;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));background:var(--panel);border:2px solid rgba(255,255,255,.5);border-radius:24px;padding:12px;display:grid;grid-template-columns:108px 1fr;gap:12px;box-shadow:var(--shadow)}.speed{display:flex;flex-direction:column;justify-content:center;align-items:center;border-right:1px solid rgba(23,63,61,.18)}.speed span{font-size:42px;font-weight:700;line-height:1;color:var(--text)}.speed small{color:var(--muted)}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px}.metrics div{background:rgba(255,250,240,.55);border-radius:12px;padding:7px}.metrics label{display:block;color:var(--muted);font-size:11px}.metrics b{font-size:14px}.zone{grid-column:1/-1;text-align:center;border-radius:12px;padding:9px;font-weight:700;font-size:13px}.zone.neutral{background:rgba(23,63,61,.1)}.zone.safe{background:rgba(39,116,94,.16);color:#1d614e}.zone.warn{background:rgba(242,153,74,.2);color:#84420b}.zone.danger{background:rgba(191,75,75,.18);color:#8c2727}.zone.land{background:rgba(54,112,100,.17);color:#275d52}.zone.speeding{animation:pulse 1.2s infinite;background:rgba(191,75,75,.28);color:#8c2727}@keyframes pulse{50%{transform:scale(.99)}}.controls{position:fixed;z-index:910;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;gap:9px}.round-control{width:58px;height:58px;border:2px solid rgba(255,255,255,.55);border-radius:20px;background:var(--panel-dark);color:var(--white);display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer}.round-control .material-symbols-rounded{font-size:29px}.round-control.active{background:var(--accent);transform:translateY(-2px)}.drawer{position:fixed;z-index:1200;top:0;right:0;bottom:0;width:min(90vw,390px);background:var(--panel);color:var(--text);padding:calc(18px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));box-shadow:-15px 0 40px rgba(0,0,0,.25);overflow:auto}.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.drawer label{display:block;padding:13px 0;border-bottom:1px solid rgba(23,63,61,.15);font-size:14px}.drawer input{accent-color:var(--accent);margin-right:10px}.trip-grid{display:grid;grid-template-columns:1fr auto;gap:10px;color:var(--muted)}.trip-grid b{color:var(--text)}.drawer-link{display:flex;align-items:center;gap:8px;margin-top:18px;padding:12px;border-radius:12px;background:rgba(31,86,82,.1);color:var(--text);text-decoration:none}.danger{width:100%;height:44px;margin-top:10px;border:0;border-radius:12px;background:rgba(191,75,75,.13);color:#8c2727;cursor:pointer}.note{color:var(--muted);font-size:12px;line-height:1.45}.toast{position:fixed;z-index:1500;top:calc(98px + env(safe-area-inset-top));left:16px;right:16px;max-width:520px;margin:auto;background:var(--white);color:var(--text);padding:14px;border-radius:16px;box-shadow:var(--shadow);text-align:center}.modal{position:fixed;z-index:2000;inset:0;background:rgba(13,53,50,.55);display:grid;place-items:center;padding:20px}.modal-card{width:min(390px,100%);background:var(--panel);border:2px solid rgba(255,255,255,.65);border-radius:26px;padding:25px;text-align:center;box-shadow:0 22px 70px rgba(0,0,0,.3)}.modal-icon{font-size:42px;color:var(--panel-dark)}.modal-card h2{margin:8px 0}.modal-card p{color:#4d6963;line-height:1.5}.dont-show{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;margin:18px 0}.modal-card button{border:0;border-radius:12px;padding:11px 22px;background:var(--panel-dark);color:white;font-weight:700;cursor:pointer}.map-icon-wrap{background:transparent;border:0}.map-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--white);border:2px solid var(--white);box-shadow:0 3px 12px rgba(0,0,0,.3)}.port-icon{background:var(--panel-dark)}.parking-icon{background:#557a58}.mooring-icon{background:var(--accent)}.boat-marker{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--panel);color:var(--panel-dark);border:4px solid var(--accent);box-shadow:0 0 0 7px rgba(222,125,85,.22),0 4px 16px rgba(0,0,0,.3);font-size:28px;transform:rotate(45deg)}.line-label{font-family:"DM Sans",sans-serif;font-weight:700;text-align:center;white-space:nowrap;text-shadow:0 1px 2px rgba(255,255,255,.95),0 -1px 2px rgba(255,255,255,.95);transform-origin:center;pointer-events:none}.map-popup h3{margin:0 0 4px}.map-popup p{margin:4px 0}.popup-tags{display:flex;gap:4px;flex-wrap:wrap;margin:7px 0}.popup-tags span{padding:3px 6px;border-radius:999px;background:#e8dcc1;font-size:11px}.leaflet-popup-content-wrapper{border-radius:16px;background:var(--white);color:var(--text)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:600px){.topbar{left:8px;right:8px}.top-actions .icon-btn{width:38px}.instrument-panel{left:8px;right:8px;grid-template-columns:100px 1fr}.controls{right:8px;gap:6px}.round-control{width:53px;height:53px;border-radius:17px}.leaflet-control-zoom{margin-top:106px!important;margin-left:10px!important}.demo-banner{max-width:calc(100% - 20px);white-space:normal;text-align:center}}@media(min-width:800px){.instrument-panel{left:auto;width:430px}.controls{right:14px}}
:root{--nav-icon-color:#205d58;--port-icon-color:#205d58;--parking-icon-color:#d57a4b;--mooring-icon-color:#205d58}
.round-control .material-symbols-rounded{color:var(--nav-icon-color)}
.port-icon{color:var(--port-icon-color)!important}.parking-icon{color:var(--parking-icon-color)!important}.mooring-icon{color:var(--mooring-icon-color)!important}
.metrics>div{cursor:default;transition:.18s ease}.metrics>div:has(#heading){cursor:pointer}.metrics>div:has(#heading).active{outline:2px solid var(--accent)}
.metrics>div.metric-warn{background:#7a5a25!important;color:#fff}.metrics>div.metric-danger{background:#7c3137!important;color:#fff;animation:navPulse 1.2s infinite alternate}
@keyframes navPulse{to{filter:brightness(1.18)}}
.onboard-actions{display:flex;gap:10px;margin-top:16px}.onboard-actions button{flex:1}.onboard-count{display:block;margin-top:12px;opacity:.7}