:root { --ink:#eaf7f7; --muted:#94adb2; --dark:#071c2a; --panel:#0d2a39; --panel-light:#123849; --line:rgba(202,239,236,.13); --aqua:#68ead6; --lime:#d3f36b; --orange:#ffc66d; --coral:#ff8f7b; }
* { box-sizing:border-box; } html { background:var(--dark); } body { margin:0; color:var(--ink); background:radial-gradient(circle at 80% -10%,#174b5a 0,transparent 32rem),var(--dark); font:500 15px/1.5 Manrope,Arial,sans-serif; min-height:100vh; }
button,input,select { font:inherit; } button { cursor:pointer; } .app-shell { max-width:720px; margin:auto; min-height:100vh; padding:0 20px 112px; } .topbar { height:88px; display:flex; justify-content:space-between; align-items:center; } .brand { color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.7px; font-size:18px; display:flex; align-items:center; } .brand-copy { display:flex; flex-direction:column; gap:1px; line-height:1.05; } .brand-copy strong { font-size:18px; } .brand-copy small { color:var(--muted); font:500 9px DM Mono,monospace; letter-spacing:0; } .brand-mark { display:inline-grid; place-items:center; flex:0 0 auto; width:27px; height:27px; margin-right:7px; color:var(--dark); background:var(--aqua); border-radius:9px; font-size:24px; line-height:1; transform:rotate(-8deg); } .topbar-actions { display:flex; align-items:center; gap:9px; }.profile-button { width:37px; height:37px; border:1px solid rgba(104,234,214,.4); color:var(--aqua); background:#0c2938; border-radius:50%; font:500 11px DM Mono,monospace; }.account-button { padding:7px 9px; border:1px solid var(--line); border-radius:8px; color:var(--aqua); background:#0c2938; font:10px DM Mono,monospace; }
.view { display:none; animation:enter .25s ease-out; } .view.is-active { display:block; } @keyframes enter { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} } .eyebrow,.label { margin:0; color:var(--aqua); font:500 10px/1.3 DM Mono,monospace; text-transform:uppercase; letter-spacing:1.4px; } .hero-heading { display:flex; justify-content:space-between; align-items:center; margin:12px 0 24px; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:5px; font-size:39px; line-height:1.08; letter-spacing:-1.8px; } h1 .accent { color:var(--aqua); } .hero-heading p,.page-heading p { margin-bottom:0; color:var(--muted); font-size:13px; } .score-orb { width:73px; height:73px; display:grid; place-content:center; flex-shrink:0; border:1px solid rgba(211,243,107,.55); color:var(--lime); border-radius:50%; background:radial-gradient(circle at 30% 25%,rgba(211,243,107,.2),transparent 55%),#11323e; text-align:center; transform:rotate(8deg); } .score-orb strong { font-size:28px; line-height:25px; letter-spacing:-1px; }.score-orb span { font:10px DM Mono,monospace; }
.onboarding-card { margin:0 0 24px; padding:18px; border:1px solid rgba(104,234,214,.32); border-radius:18px; background:linear-gradient(135deg,rgba(23,63,76,.96),rgba(12,49,60,.98)); }.onboarding-heading { display:flex; gap:14px; justify-content:space-between; }.onboarding-heading h2 { margin:4px 0 5px; font-size:20px; letter-spacing:-.8px; }.onboarding-heading p:not(.label) { margin:0; color:var(--muted); font-size:12px; }.onboarding-heading .text-button { flex:0 0 auto; }.onboarding-steps { display:grid; gap:7px; margin:16px 0 0; padding:0; list-style:none; }.onboarding-steps button { display:grid; grid-template-columns:28px 1fr; column-gap:10px; width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:rgba(7,28,42,.36); text-align:left; }.onboarding-steps span { grid-row:1 / span 2; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:var(--dark); background:var(--aqua); font:700 11px DM Mono,monospace; }.onboarding-steps strong { font-size:12px; }.onboarding-steps small { color:var(--muted); font-size:10px; }.onboarding-steps .is-complete button { border-color:rgba(211,243,107,.35); }.onboarding-steps .is-complete span { background:var(--lime); font-size:0; }.onboarding-steps .is-complete span::after { content:'✓'; font-size:12px; }
.decision-card,.rig-card,.backup-card,.timeline-block,.spot-card,.gear-card,.session-item,.log-form,.session-stats article { border:1px solid var(--line); background:linear-gradient(135deg,rgba(23,63,76,.96),rgba(10,35,48,.98)); box-shadow:0 18px 40px rgba(0,0,0,.12); }.decision-card { border-radius:23px; padding:19px; }.decision-topline,.spot-summary,.section-heading,.subheading,.page-heading { display:flex; justify-content:space-between; align-items:flex-start; }.decision-topline { color:var(--muted); font-size:11px; }.status-pill { display:inline-flex; gap:7px; align-items:center; color:var(--lime); font:500 10px DM Mono,monospace; letter-spacing:.4px; text-transform:uppercase; }.status-pill i { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px rgba(211,243,107,.1); }.spot-summary { align-items:flex-end; margin:25px 0 20px; }.spot-summary h2,.section-heading h2,.subheading h2 { margin:3px 0 2px; font-size:24px; letter-spacing:-1px; }.spot-summary p:not(.label) { color:var(--muted); font-size:12px; margin:0; }.text-button { padding:0; color:var(--aqua); border:0; background:none; font-size:12px; }.text-button span { margin-left:3px; font-size:16px; }.forecast-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; border-top:1px solid var(--line); padding-top:16px; }.forecast-grid article { padding-left:12px; border-left:1px solid var(--line); }.forecast-grid article:first-child { padding-left:0; border:0; }.forecast-grid span,.backup-card span,.gear-card span,.session-item .date,.session-stats span { display:block; color:var(--muted); font:10px DM Mono,monospace; text-transform:uppercase; letter-spacing:.7px; }.forecast-grid strong { display:block; margin-top:4px; font-size:13px; color:#fff; letter-spacing:-.4px; }
.section-block { margin-top:35px; }.section-heading { align-items:flex-end; margin-bottom:13px; }.section-heading h2 { font-size:21px; }.wind-tag { padding:6px 9px; border-radius:8px; background:rgba(104,234,214,.12); color:var(--aqua); font:10px DM Mono,monospace; }.rig-card { display:flex; gap:14px; align-items:center; min-height:112px; padding:16px; border-radius:18px 18px 6px 6px; }.rig-icon { width:42px; height:54px; display:grid; place-items:center; color:var(--dark); background:var(--orange); clip-path:polygon(0 0,100% 16%,70% 100%,14% 76%); font-size:28px; transform:rotate(15deg); }.rig-main { flex:1; }.rig-main h3 { margin:3px 0 5px; font-size:17px; letter-spacing:-.6px; }.rig-main p:not(.label) { max-width:270px; color:var(--muted); font-size:11px; line-height:1.45; margin:0; }.rig-score { padding-left:11px; border-left:1px solid var(--line); text-align:right; }.rig-score strong { display:block; color:var(--lime); font:700 17px DM Mono,monospace; }.rig-score span { display:block; color:var(--muted); font-size:8px; white-space:nowrap; }.backup-card { display:grid; grid-template-columns:62px 43px 1fr; gap:8px; align-items:center; padding:12px 16px; border-top:0; border-radius:0 0 18px 18px; background:#0b2938; }.backup-card strong { color:var(--orange); font-size:18px; }.backup-card p { margin:0; color:var(--muted); font-size:10px; }.why-list { padding:0; margin:0; list-style:none; display:grid; gap:10px; }.why-list li { display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:11px; background:rgba(14,55,67,.7); color:#d1e0e0; font-size:12px; }.check { display:grid; place-items:center; flex:0 0 17px; height:17px; margin-top:1px; color:var(--dark); background:var(--aqua); border-radius:50%; font-size:10px; font-weight:800; }.timeline-block { padding:17px; border-radius:18px; }.timeline { position:relative; display:flex; justify-content:space-between; margin:26px 5px 11px; }.timeline-line { position:absolute; width:calc(100% - 20px); height:2px; left:10px; top:19px; background:linear-gradient(90deg,#3a6972,var(--aqua),#3a6972); }.time-point { position:relative; z-index:1; display:grid; gap:5px; min-width:38px; padding:0; color:var(--muted); background:transparent; border:0; font:10px DM Mono,monospace; }.time-point b { display:grid; place-items:center; width:38px; height:38px; border:1px solid #356774; border-radius:50%; background:#0e2c39; color:var(--ink); font:500 11px DM Mono,monospace; }.time-point.is-best b { border-color:var(--aqua); background:var(--aqua); color:var(--dark); box-shadow:0 0 0 6px rgba(104,234,214,.12); }.timeline-note { margin:17px 0 0; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }.timeline-note strong { color:var(--ink); }
.bottom-nav { position:fixed; z-index:5; bottom:16px; left:50%; transform:translateX(-50%); width:min(680px,calc(100% - 28px)); display:grid; grid-template-columns:repeat(4,1fr); padding:8px; border:1px solid rgba(180,235,230,.14); border-radius:18px; background:rgba(7,25,37,.92); box-shadow:0 18px 50px rgba(0,0,0,.45); backdrop-filter:blur(20px); }.nav-item { display:grid; place-items:center; gap:3px; padding:7px 2px; border:0; border-radius:11px; color:#78949a; background:transparent; font:10px Manrope,sans-serif; }.nav-item span { font-size:17px; line-height:15px; }.nav-item.is-active { color:var(--aqua); background:rgba(104,234,214,.1); }.feedback-button { display:block; width:fit-content; margin:32px auto 0; padding:8px 12px; border:1px solid rgba(104,234,214,.32); border-radius:999px; color:var(--aqua); background:rgba(104,234,214,.07); font:600 11px Manrope,sans-serif; }.safety-note { max-width:540px; margin:13px auto 0; color:#6d888e; text-align:center; font-size:9px; }
.page-heading { margin:17px 0 27px; }.page-heading h1 { margin:4px 0 5px; }.circle-action { width:43px; height:43px; border:0; border-radius:50%; color:var(--dark); background:var(--aqua); font-size:24px; line-height:1; }.spot-list,.gear-list,.session-list { display:grid; gap:11px; }.spot-card { position:relative; display:flex; gap:14px; padding:16px; border-radius:16px; text-align:left; }.spot-card.is-selected { border-color:rgba(104,234,214,.6); }.spot-card .spot-score { display:grid; place-items:center; flex:0 0 45px; height:45px; border-radius:13px; color:var(--lime); background:rgba(211,243,107,.1); font:700 16px DM Mono,monospace; }.spot-card .spot-copy { flex:1; }.spot-card h3 { margin:0 0 3px; font-size:17px; }.spot-card p { margin:0; color:var(--muted); font-size:11px; }.spot-card .spot-meta { margin-top:9px; color:var(--aqua); font:10px DM Mono,monospace; }.spot-card button { align-self:center; padding:7px 9px; border:1px solid var(--line); border-radius:7px; color:var(--aqua); background:transparent; font-size:10px; }.gear-columns { display:grid; gap:30px; }.subheading { align-items:center; margin-bottom:11px; }.subheading h2 { margin:0; }.subheading span { color:var(--muted); font:10px DM Mono,monospace; }.gear-card { display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; }.gear-mark { display:grid; place-items:center; width:39px; height:39px; border-radius:11px; background:rgba(255,198,109,.12); color:var(--orange); font-size:18px; }.gear-card h3 { margin:0 0 2px; font-size:14px; }.gear-card p { margin:0; color:var(--muted); font-size:10px; }.gear-card strong { margin-left:auto; color:var(--aqua); font:500 14px DM Mono,monospace; }.log-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; padding:15px; border-radius:15px; }.log-form label { display:grid; gap:5px; color:var(--muted); font:10px DM Mono,monospace; text-transform:uppercase; letter-spacing:.7px; }.log-form input,.log-form select { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#092534; outline:none; font:12px Manrope,sans-serif; text-transform:none; letter-spacing:0; }.wide { grid-column:1 / -1; }.primary-button { padding:12px 16px; border:0; border-radius:9px; color:var(--dark); background:var(--aqua); font-weight:800; }.session-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }.session-stats article { padding:13px; border-radius:13px; }.session-stats strong { display:block; margin-top:3px; font-size:20px; letter-spacing:-1px; }.session-item { display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:13px; border-radius:13px; }.session-item .date { text-align:center; color:var(--aqua); line-height:1.25; }.session-item .date b { display:block; color:var(--ink); font:700 19px Manrope,sans-serif; }.session-item h3 { margin:0 0 2px; font-size:13px; }.session-item p { margin:0; color:var(--muted); font-size:10px; }.session-rating { color:var(--lime); font:700 15px DM Mono,monospace; }.modal { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(1,12,19,.7); backdrop-filter:blur(8px); }.modal-card { position:relative; width:min(380px,100%); padding:27px; border:1px solid rgba(104,234,214,.25); border-radius:20px; background:#10303e; box-shadow:0 25px 70px rgba(0,0,0,.4); }.modal-card h2 { margin:7px 0; font-size:25px; letter-spacing:-1px; }.modal-card p:not(.eyebrow) { color:var(--muted); font-size:13px; }.modal-card .primary-button { width:100%; margin-top:10px; }.close-button { position:absolute; right:13px; top:10px; border:0; color:var(--muted); background:transparent; font-size:24px; }
@media (min-width:650px) { .app-shell { padding-left:35px; padding-right:35px; } .topbar { height:100px; } .hero-heading { margin-top:17px; } h1 { font-size:47px; } .decision-card { padding:24px; } .forecast-grid strong { font-size:15px; } }

.modal[hidden] { display:none; }
.form-help.is-error { color:var(--coral); }
.gear-sail-fields[hidden],.gear-board-fields[hidden],.gear-foil-fields[hidden],#log-foil-field[hidden] { display:none!important; }.gear-checkbox { grid-column:1 / -1; display:flex!important; align-items:center; gap:8px; text-transform:none!important; letter-spacing:0!important; font:12px Manrope,sans-serif!important; }.gear-checkbox input { width:auto!important; }.session-actions { display:flex; gap:6px; margin-top:7px; }.session-actions button { padding:4px 7px; border:1px solid var(--line); border-radius:6px; color:var(--aqua); background:transparent; font-size:9px; }.session-actions button[data-action="delete-session"] { color:var(--coral); }.empty-state { margin:0; color:var(--muted); font-size:12px; }
.drive-override { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font:10px DM Mono,monospace; text-transform:uppercase; letter-spacing:.7px; }.drive-override select { padding:6px 8px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#092534; font:11px Manrope,sans-serif; text-transform:none; }.drive-alternatives { display:flex; align-items:center; gap:7px; margin-top:10px; color:var(--muted); font-size:10px; }.drive-alternatives input { accent-color:var(--aqua); }.drive-alternatives-note { min-height:14px; margin:5px 0 0; color:var(--orange); font-size:10px; line-height:1.35; }.out-of-range-alternatives { padding:15px; border:1px solid rgba(255,198,109,.3); border-radius:17px; background:rgba(255,198,109,.06); }.out-of-range-alternatives .section-heading { margin-bottom:5px; }.alternatives-intro { margin:0 0 11px; color:var(--muted); font-size:11px; }.alternative-list { display:grid; gap:7px; }.alternative-card { display:flex; justify-content:space-between; gap:10px; padding:11px; border:1px solid rgba(255,198,109,.18); border-radius:10px; background:rgba(9,37,52,.7); }.alternative-card h3,.alternative-card p { margin:0; }.alternative-card h3 { font-size:13px; }.alternative-card p,.alternative-card span { color:var(--muted); font:10px DM Mono,monospace; }.alternative-card > div:last-child { display:grid; align-content:center; text-align:right; }.alternative-card strong { color:var(--orange); font:700 14px DM Mono,monospace; }.reason-negative .check { background:var(--coral); }.reason-neutral .check { color:var(--ink); background:var(--orange); }.week-list { display:grid; gap:8px; }.week-card { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:rgba(14,55,67,.7); }.week-card p,.week-card h3,.week-card span { margin:0; }.week-card p,.week-card span { color:var(--muted); font:10px DM Mono,monospace; }.week-card h3 { margin:2px 0 3px; font-size:14px; }.week-card strong { color:var(--lime); font:700 15px DM Mono,monospace; }.week-maybe strong { color:var(--orange); }.week-bad strong { color:var(--coral); }.week-outside { margin-top:6px!important; color:var(--orange)!important; }.outside-badge { display:inline-block; margin-left:7px; padding:2px 5px; border-radius:5px; color:var(--orange); background:rgba(255,198,109,.12); font:8px DM Mono,monospace; letter-spacing:.3px; text-transform:uppercase; vertical-align:middle; }
.drive-routing { display:grid; gap:4px; margin-top:10px; }.drive-routing .text-button { justify-self:start; }.drive-routing .text-button:disabled { color:var(--muted); cursor:default; }.drive-routing p { min-height:14px; margin:0; color:var(--muted); font-size:10px; line-height:1.35; }
.approach-meta { margin-top:7px!important; color:var(--muted)!important; font-size:9px!important; }
.sailing-window { display:grid; grid-template-columns:1fr auto; gap:3px 12px; padding:12px 13px; border:1px solid rgba(104,234,214,.22); border-radius:12px; background:rgba(104,234,214,.07); }.sailing-window span,.sailing-window p { margin:0; color:var(--muted); font:10px DM Mono,monospace; }.sailing-window strong { align-self:center; grid-row:1 / 3; grid-column:2; color:var(--lime); font:700 16px DM Mono,monospace; }
.auth-label { display:grid; gap:5px; margin:18px 0 10px; color:var(--muted); font:10px DM Mono,monospace; text-transform:uppercase; letter-spacing:.7px; }.auth-label input,.auth-label select,.auth-label textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#092534; outline:none; font:12px Manrope,sans-serif; text-transform:none; letter-spacing:0; }.auth-label textarea { resize:vertical; }.auth-message { min-height:18px; margin:9px 0!important; color:var(--muted)!important; font-size:11px!important; }.auth-message.is-error { color:var(--coral)!important; }.auth-logout { display:block; width:100%; margin-top:14px; text-align:center; }

.editor-card { width:min(560px,100%); max-height:calc(100vh - 32px); overflow:auto; }.editor-card h2 { margin-bottom:18px; }.editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.editor-grid label { display:grid; gap:5px; color:var(--muted); font:10px DM Mono,monospace; text-transform:uppercase; letter-spacing:.7px; }.editor-grid input,.editor-grid select { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#092534; outline:none; font:12px Manrope,sans-serif; text-transform:none; letter-spacing:0; }.editor-wide { grid-column:1 / -1; }.direction-editor { margin:21px 0; padding-top:17px; border-top:1px solid var(--line); }.direction-editor .subheading { margin-bottom:10px; }.direction-editor h3 { margin:0; font-size:15px; }.direction-editor p { margin:2px 0 0; color:var(--muted); font-size:10px; }.tier-tabs { display:flex; gap:6px; margin-bottom:13px; }.tier-tab { flex:1; padding:8px 5px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#092534; font-size:10px; }.tier-tab.is-active[data-direction-tier="ideal"] { color:var(--lime); border-color:rgba(211,243,107,.5); background:rgba(211,243,107,.1); }.tier-tab.is-active[data-direction-tier="acceptable"] { color:var(--aqua); border-color:rgba(104,234,214,.5); background:rgba(104,234,214,.1); }.tier-tab.is-active[data-direction-tier="unsafe"] { color:var(--coral); border-color:rgba(255,143,123,.5); background:rgba(255,143,123,.1); }.direction-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.direction-picker button { min-height:38px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#0a2837; font:500 11px DM Mono,monospace; }.direction-picker button.is-ideal { color:var(--dark); border-color:var(--lime); background:var(--lime); }.direction-picker button.is-acceptable { color:var(--dark); border-color:var(--aqua); background:var(--aqua); }.direction-picker button.is-unsafe { color:var(--dark); border-color:var(--coral); background:var(--coral); }.form-help { margin-top:12px!important; font:10px DM Mono,monospace!important; }
.spot-actions { display:grid; gap:6px; align-self:center; }.spot-actions button { min-width:56px; }.spot-actions button:disabled { cursor:default; color:var(--muted); border-color:transparent; background:rgba(104,234,214,.08); }
.location-lookup { display:grid; gap:5px; align-content:start; }.location-lookup .text-button { justify-self:start; text-align:left; }.location-results { display:grid; gap:6px; }.location-result { padding:9px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#092534; text-align:left; font:11px Manrope,sans-serif; }.location-result:hover,.location-result:focus-visible { border-color:var(--aqua); color:var(--aqua); }.location-lookup .form-help { margin:0!important; }
.gear-actions { display:grid; gap:5px; margin-left:auto; }.gear-actions button { min-width:51px; padding:5px 7px; border:1px solid var(--line); border-radius:7px; color:var(--aqua); background:transparent; font-size:9px; }.gear-actions button[data-action="delete-gear"] { color:var(--coral); }