:root { --ink:#062f3d; --water:#087c9a; --lime:#d9f169; --paper:#fffdfa; --soft:#f3f4ef; --muted:#657b80; --line:#dce3dd; --shadow:0 14px 42px rgba(4,38,47,.2); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); }
* { box-sizing:border-box; } html,body,.app { width:100%; height:100%; margin:0; overflow:hidden; background:#dce8e5; } button,input { font:inherit; } button { cursor:pointer; } .app { position:relative; max-width:960px; margin:auto; box-shadow:0 0 70px rgba(5,39,48,.15); } #map { position:absolute; inset:0; background:#dce8e5; }
.topbar { position:absolute; z-index:4; top:max(15px,env(safe-area-inset-top)); left:15px; right:15px; display:flex; gap:9px; align-items:center; pointer-events:none; }.topbar>* { pointer-events:auto; }.brand { background:var(--ink); color:white; border:0; border-radius:14px; padding:10px 14px 10px 11px; font-size:19px; letter-spacing:-.7px; font-weight:850; box-shadow:0 4px 13px rgba(0,0,0,.15); }.brand i { display:inline-block; width:13px; height:16px; border:3px solid var(--lime); border-top:0; border-bottom:0; margin-right:5px; vertical-align:-2px; transform:skewX(-20deg); }.network-state { margin-left:auto; background:rgba(255,253,250,.93); border-radius:18px; padding:7px 10px; color:#416167; font-weight:750; font-size:11px; box-shadow:0 2px 9px rgba(0,0,0,.1); }.network-state span { width:7px; height:7px; display:inline-block; background:#42a47d; border-radius:50%; margin-right:5px; }.round-button { width:41px; height:41px; border:0; border-radius:13px; display:grid; place-items:center; background:rgba(255,253,250,.96); color:var(--ink); font-size:21px; box-shadow:0 3px 11px rgba(0,0,0,.12); }
.search-card { position:absolute; top:max(71px,calc(env(safe-area-inset-top) + 56px)); left:15px; right:15px; z-index:4; max-width:560px; margin:auto; }.search-input { display:flex; align-items:center; gap:7px; background:rgba(255,253,250,.98); border-radius:14px; padding:5px 6px 5px 13px; box-shadow:var(--shadow); }.search-input span { color:#52757a; font-size:22px; }.search-input input { min-width:0; flex:1; background:transparent; border:0; outline:0; color:var(--ink); font-size:14px; }.search-input input::placeholder { color:#8b9a9b; }.search-input button { color:white; background:var(--ink); border:0; font-size:12px; font-weight:800; border-radius:10px; padding:9px 11px; }.search-results { margin-top:6px; overflow:hidden; background:var(--paper); border-radius:13px; box-shadow:var(--shadow); }.search-result { display:block; width:100%; border:0; border-bottom:1px solid #edf0ec; padding:11px 13px; background:white; text-align:left; color:var(--ink); font-size:13px; font-weight:750; }.search-result span { display:block; margin-top:3px; color:var(--muted); font-size:11px; font-weight:550; }
.map-controls { z-index:3; position:absolute; right:15px; top:142px; display:grid; gap:7px; }.map-controls .round-button { border-radius:12px; font-weight:650; }.map-key { position:absolute; z-index:3; left:15px; bottom:calc(52dvh + 8px); color:#365c61; background:rgba(255,253,250,.9); border-radius:9px; padding:5px 8px; box-shadow:0 2px 8px rgba(0,0,0,.12); font-size:10px; font-weight:750; }.map-key b { display:inline-block; background:#0a627d; width:17px; height:4px; border-radius:4px; vertical-align:2px; }.map-key span { margin-left:5px; color:#667d7f; font-weight:550; }
.route-sheet { position:absolute; z-index:4; bottom:0; width:100%; max-height:57dvh; overflow-y:auto; overscroll-behavior:contain; background:var(--paper); border-radius:25px 25px 0 0; box-shadow:0 -7px 26px rgba(5,40,48,.14); padding:11px 16px calc(20px + env(safe-area-inset-bottom)); }.drag-handle { width:34px; height:4px; border-radius:4px; background:#d8ddd7; margin:0 auto 14px; }.mode-heading, .dialog header, .nav-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.eyebrow { margin:0 0 3px; color:#63777b; font-size:10px; font-weight:850; letter-spacing:1.1px; text-transform:uppercase; }.mode-heading h1,.dialog h2,.nav-head h2 { margin:0; font-size:21px; letter-spacing:-.7px; line-height:1.15; }.text-button { color:#0d6d80; background:transparent; border:0; font-size:12px; font-weight:850; padding:5px 0; }
.route-form { position:relative; margin:14px 0 7px; padding:2px 12px; border:1px solid #e2e7e1; background:#f5f6f1; border-radius:15px; }.route-form label { display:flex; align-items:center; height:43px; gap:10px; }.route-form input { min-width:0; flex:1; color:#163e48; background:transparent; border:0; outline:0; font-size:13px; font-weight:750; padding-right:27px; }.dot { width:11px; height:11px; flex:none; border-radius:50%; }.dot.start { background:#087c9a; border:3px solid #a8d7df; }.dot.end { background:#e75c45; border:3px solid #ffd0c8; }.form-line { position:absolute; left:17px; top:43px; height:5px; border-left:1px dashed #b9c7c1; }.swap-button { position:absolute; z-index:1; right:9px; top:28px; width:29px; height:29px; padding:0; border:1px solid #d6ded7; background:white; border-radius:9px; color:#3a6e76; }.locate-field { border:0; background:transparent; color:#287688; font-size:18px; padding:2px; }.route-hint { margin:0 2px 9px; font-size:11px; color:#728486; line-height:1.35; }.quick-ends { display:flex; gap:7px; overflow:auto; padding:0 0 4px; scrollbar-width:none; }.quick-ends::-webkit-scrollbar { display:none; }.quick-ends button { white-space:nowrap; color:#41666b; background:white; border:1px solid #d9e1da; border-radius:17px; padding:6px 9px; font-size:11px; font-weight:750; }
.primary { width:100%; display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:white; padding:13px 14px; border:0; border-radius:12px; font-size:14px; font-weight:850; }.primary span { font-size:19px; color:var(--lime); }.route-summary { margin:13px 0 10px; border:1px solid #dbe6df; background:#fff; border-radius:16px; padding:13px; }.summary-top { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#637a7e; font-size:10px; font-weight:750; }.route-chip { padding:4px 6px; border-radius:7px; color:#0d5d6d; background:#e5f3f0; font-size:9px; letter-spacing:.55px; text-transform:uppercase; }.summary-stats { display:grid; grid-template-columns:1.15fr 1fr .9fr; margin:14px 0 7px; }.summary-stats div { border-left:1px solid #e1e7e1; padding-left:9px; }.summary-stats div:first-child { border:0; padding-left:0; }.summary-stats strong { display:block; font-size:20px; letter-spacing:-.7px; }.summary-stats span { color:#718183; font-size:9px; font-weight:650; }.route-summary p { margin:0 0 11px; color:#567176; font-size:11px; line-height:1.4; }.constraint-card { margin:0 0 10px; padding:9px; background:#fff3e8; color:#774720; border-left:3px solid #ce7e38; border-radius:5px; font-size:11px; line-height:1.35; }
.nav-panel { padding:5px 0 1px; }.nav-head { align-items:center; }.nav-head h2 { font-size:20px; }.close-nav { color:#91442f; font-size:26px; }.route-progress { height:8px; overflow:hidden; border-radius:8px; background:#dce6df; margin:14px 0 6px; }.route-progress span { display:block; width:0%; height:100%; background:linear-gradient(90deg,#087c9a,#d9f169); transition:width .4s; }.nav-figures { display:flex; justify-content:space-between; color:#688084; font-size:11px; font-weight:700; }.nav-actions { display:grid; grid-template-columns:1.1fr 1fr 1.2fr; gap:7px; margin-top:12px; }.nav-actions button { color:#355e64; background:#edf3ef; border:0; border-radius:10px; padding:10px 4px; font-size:10px; font-weight:850; }.data-note { display:flex; align-items:flex-start; gap:8px; margin-top:13px; padding:9px; border:1px solid #e9ddc4; background:#fffaf2; color:#73634f; border-radius:11px; font-size:10px; line-height:1.35; }.data-note>span { background:#ba813d; border-radius:50%; width:16px; height:16px; flex:none; display:grid; place-items:center; color:white; font-weight:900; }.data-note p { margin:0; }.data-note strong { color:#5b4b36; }
.map-choice { position:absolute; z-index:5; left:15px; right:15px; bottom:calc(57dvh + 12px); margin:auto; max-width:480px; padding:12px; background:rgba(255,253,250,.98); box-shadow:var(--shadow); border-radius:14px; }.map-choice strong { display:block; font-size:13px; }.map-choice>span { display:block; color:#728285; font-size:10px; margin:3px 0 9px; }.map-choice>div { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.map-choice button { color:#165d6b; background:#e6f2ef; border:0; border-radius:9px; padding:9px; font-size:11px; font-weight:850; }
.map-pin { width:24px; height:24px; border-radius:50% 50% 50% 0; border:3px solid white; box-shadow:0 2px 8px rgba(3,40,49,.35); transform:rotate(-45deg); }.map-pin.start-pin { background:#087c9a; }.map-pin.end-pin { background:#e65b45; }.map-pin.boat-pin { width:28px; height:28px; border-radius:50%; transform:none; background:#073e50; box-shadow:0 0 0 7px rgba(217,241,105,.55),0 2px 8px rgba(3,40,49,.35); }
.dialog { width:calc(100% - 28px); max-width:560px; padding:0; border:0; border-radius:20px; background:transparent; box-shadow:0 25px 65px rgba(0,0,0,.3); }.dialog::backdrop { background:rgba(3,31,38,.55); backdrop-filter:blur(2px); }.dialog-panel { margin:0; padding:20px; background:var(--paper); }.dialog header .round-button { background:#edf1ec; box-shadow:none; }.dialog p { color:#65777c; font-size:12px; line-height:1.45; }.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:16px 0; }.profile-grid label { color:#587075; font-size:10px; font-weight:850; }.profile-grid span { display:flex; align-items:center; border:1px solid #dce4dc; border-radius:8px; padding:0 8px; margin-top:4px; color:#65777c; }.profile-grid input { width:100%; min-width:0; padding:8px 1px; border:0; outline:0; background:transparent; color:var(--ink); font-weight:800; }.saved-routes { display:grid; gap:8px; margin-top:14px; }.saved-route { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid #dce5de; background:#fbfcf9; padding:11px; border-radius:11px; }.saved-route strong { font-size:13px; }.saved-route span { display:block; color:#718287; font-size:11px; margin-top:3px; }.saved-route button { color:#105c6c; background:#e1f0ed; border:0; border-radius:8px; padding:7px 9px; font-size:11px; font-weight:850; }.toast { position:absolute; z-index:10; left:50%; bottom:18px; transform:translate(-50%,80px); opacity:0; background:#073d4c; color:white; border-radius:10px; padding:10px 14px; font-size:12px; font-weight:750; box-shadow:var(--shadow); transition:.25s; text-align:center; max-width:calc(100% - 30px); }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (min-width:760px) { body { background:#d1ddd8; padding:22px; }.app { height:calc(100% - 44px); border-radius:25px; overflow:hidden; }.route-sheet { width:390px; max-height:calc(100% - 30px); top:15px; bottom:15px; left:15px; border-radius:20px; box-shadow:var(--shadow); }.drag-handle { display:none; }.topbar { left:426px; }.search-card { left:426px; margin:0; right:auto; width:430px; }.map-controls { top:142px; }.map-key { left:426px; bottom:15px; }.map-choice { left:426px; right:auto; bottom:55px; }.route-sheet::-webkit-scrollbar { width:5px; }.route-sheet::-webkit-scrollbar-thumb { background:#dce4dd; border-radius:10px; } }