:root{
  --bg:#05081f; --navy:#0a0f4a; --navy2:#111a5e; --card:#0c1240; --card2:#0f1750;
  --teal:#12b8b8; --teal2:#5fe0dc; --gray:#a7adb8; --text:#eef3fb; --text2:#c4cce0; --muted:#93a0bd;
  --go:#2fbf71; --caution:#f2b632; --nogo:#e2463b; --radius:14px; --line:rgba(18,184,184,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html.night{filter:grayscale(1) sepia(1) saturate(6) hue-rotate(-45deg) brightness(.62) contrast(1.15);background:#000}
html.night body{background:#000}
body{margin:0;background:radial-gradient(120% 50% at 50% 0%,#141c6a 0%,var(--bg) 60%) fixed,var(--bg);color:var(--text);
  font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:var(--teal2)}
h1,h2,h3{letter-spacing:.2px}
.sr{position:absolute;left:-9999px}
.hero{text-align:center;padding:12px 12px 10px;border-bottom:2px solid var(--teal);background:linear-gradient(180deg,rgba(18,184,184,.14),rgba(5,8,31,0))}
.loc-row{display:flex;justify-content:center;margin-bottom:8px}
.loc-row select{background:var(--card2);color:var(--text);border:1px solid var(--teal);border-radius:999px;padding:6px 12px;font-size:14px;max-width:92vw}
.logo-badge{display:inline-block;background:#fff;border-radius:18px;padding:6px 12px;box-shadow:0 6px 20px rgba(0,0,0,.55),0 0 0 2px rgba(18,184,184,.5)}
.logo-badge img{display:block;width:min(64vw,260px);height:auto}
.hero h1{margin:8px 0 0;font-size:22px;color:#fff}
.sub{margin:2px 0 2px;color:var(--text2);font-size:13px}
.boat{margin:2px 0 8px;color:var(--teal2);font-size:12px}
.status-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.updated{font-size:12.5px;color:var(--text2)} .updated.stale{color:var(--caution)}
.btn{background:linear-gradient(180deg,#16c9c9,#0e9a9a);color:#021018;border:0;border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--teal2);border:1px solid var(--teal)}
.btn.sm{padding:4px 10px;font-size:12.5px} .btn:disabled{opacity:.6}
.banner{margin:10px auto 0;max-width:620px;font-size:13px;border-radius:10px;padding:8px 10px;background:rgba(226,70,59,.15);border:1px solid var(--nogo);color:#ffd9d4}
.banner.info{background:rgba(242,182,50,.12);border-color:var(--caution);color:#ffeebf}
main{max-width:860px;margin:0 auto;padding:10px 10px 30px}
h2.step{margin:22px 4px 4px;font-size:17px;color:var(--teal2);text-transform:uppercase;letter-spacing:1px;border-left:4px solid var(--teal);padding-left:8px}
h2.step small{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;color:var(--muted)}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin:10px 0;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.card h2{margin:0 0 10px;font-size:17px;color:#fff} .card h2 small{font-size:12px;color:var(--text2);font-weight:400}
.card h3{margin:12px 0 4px;font-size:14px;color:var(--teal2)}
.muted{color:var(--muted);font-size:12.5px}
.warn{color:var(--caution)} .short{color:#ff7b70;font-weight:700}
.controls{display:flex;flex-direction:column;gap:8px;position:sticky;top:0;z-index:1200;background:rgba(5,8,31,.94);backdrop-filter:blur(6px)}
.seg{display:flex;border:1px solid var(--teal);border-radius:10px;overflow:hidden}
.seg button{flex:1;background:transparent;color:var(--text);border:0;border-right:1px solid var(--line);padding:8px 4px;font-size:14px;font-weight:700;cursor:pointer}
.seg button small{display:block;font-size:10.5px;font-weight:400;color:var(--muted)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--teal);color:#021018} .seg button.on small{color:#063c3c}
.seg.small{width:auto} .seg.small button{padding:4px 8px;font-size:12px}
.pt-row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.chip,.fish-chip{flex:none;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.chip.on,.fish-chip.on{background:var(--teal);color:#021018;border-color:var(--teal)}
.now-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:620px){.now-grid{grid-template-columns:repeat(4,1fr)}}
.now-grid .big{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;background:rgba(0,0,0,.25)}
.stat{background:rgba(0,0,0,.25);border-radius:10px;padding:8px}
.stat.wide{grid-column:1/-1} .warnbox{border:1px solid var(--caution);color:#ffeebf;font-size:13px}
.stat .k{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.stat .v{font-size:20px;font-weight:700;color:#fff} .stat .v small{font-size:12px;font-weight:400;color:var(--text2)}
.stat .d{font-size:12px;color:var(--muted)}
.reasons{font-size:13px;color:var(--text2)}
.arrow{display:inline-block;color:var(--teal2)}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-weight:800;font-size:12px;color:#06121c;letter-spacing:.3px;white-space:nowrap}
.pill.lg{font-size:18px;padding:6px 14px} .pill.sm{font-size:10px;padding:1px 6px}
.pill.go{background:var(--go)} .pill.caution{background:var(--caution)} .pill.nogo{background:var(--nogo);color:#fff} .pill.na{background:#55657a;color:#fff}
.go-bg{background:var(--go)} .caution-bg{background:var(--caution)} .nogo-bg{background:var(--nogo)} .na-bg{background:#55657a}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.compare{border-collapse:collapse;width:100%;font-size:12.5px;min-width:520px}
table.compare th,table.compare td{padding:6px 5px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
table.compare th{color:var(--text2);font-weight:600;font-size:11.5px}
table.compare td small,table.compare th small{display:block;color:var(--muted);font-size:10.5px;font-weight:400}
table.compare tr.sel td{background:rgba(18,184,184,.12)}
table.compare tr[data-z],table.compare td[data-z]{cursor:pointer}
td.why{color:var(--muted);font-size:11.5px;max-width:220px}
table.detail{min-width:760px}
.hour-strip{display:flex;gap:3px;overflow-x:auto;padding-bottom:6px}
.hcell{flex:none;width:52px;text-align:center;font-size:11px;color:var(--text2);background:rgba(0,0,0,.2);border-radius:6px;padding:3px 1px}
.hcell b{display:block;color:var(--teal2);font-size:10.5px}
.hcell.day0{border-left:2px solid var(--teal)}
.hcell .bar{height:10px;border-radius:3px;margin:3px 4px}
.days{display:flex;flex-direction:column;gap:6px}
.day{display:grid;grid-template-columns:62px 1fr auto;gap:4px 8px;background:rgba(0,0,0,.22);border-radius:10px;padding:8px;font-size:13px}
.day .dn{font-weight:800;color:#fff} .day .dn small{display:block;font-weight:400;color:var(--muted)}
.day .dr{text-align:right;line-height:1.9} .day .sun{grid-column:1/-1;font-size:12px;color:var(--text2)}
.chart{width:100%} .chart svg{width:100%;height:auto;display:block}
.chart-leg{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--text2)} .chart-leg i{display:inline-block;width:10px;height:3px;margin-right:4px;vertical-align:middle}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .head-row h2{margin:0}
.map-box{position:relative;margin-top:8px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.map{height:min(70vh,440px);background:#0a1030;position:relative;z-index:0;isolation:isolate}
.map-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text2);background:rgba(5,8,31,.6);font-size:13px;text-align:center;padding:10px;z-index:500}
.radar-bar{display:flex;gap:8px;align-items:center;margin-top:8px} .radar-bar input{flex:1}
.radar-time{font-size:12px;color:var(--text2);margin-top:4px}
.layer-seg{margin-top:6px;flex-wrap:wrap}
.legend{display:flex;flex-direction:column;gap:4px;margin-top:6px;font-size:11.5px;color:var(--text2)}
.legend .lg{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.legend .bar{display:inline-block;width:110px;height:8px;border-radius:4px}
.legend .ln{display:inline-block;width:22px;height:0} .legend .sq{display:inline-block;width:12px;height:12px;border-radius:3px}
.legend .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff}
.fish-table td:first-child{white-space:nowrap} .fish-table tr.sp{cursor:pointer}
.fish-table tr.why td{color:var(--muted);font-size:11px;padding-top:0}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.pill.fish-poor{background:#4d5876;color:#fff} .pill.fish-fair{background:#3d8bd6;color:#fff} .pill.fish-good{background:var(--teal)} .pill.fish-hot{background:#ff6a3d;color:#fff}
.fish-note{font-size:12.5px;color:var(--text2)}
details.how{margin-top:10px;font-size:13px;color:var(--text2)} details.how summary{cursor:pointer;color:var(--teal2);font-weight:600}
table.season{border-collapse:collapse;font-size:11px;width:100%;min-width:520px} table.season td,table.season th{padding:3px;text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}
table.season td.s0{color:#56617f} table.season td.s1{background:rgba(61,139,214,.25)} table.season td.s2{background:rgba(18,184,184,.4)} table.season td.s3{background:rgba(255,106,61,.65);color:#fff;font-weight:700}
table.season td:first-child,table.season th:first-child{text-align:left;white-space:nowrap}
.thresh{border-collapse:collapse;width:100%;font-size:13px} .thresh th,.thresh td{padding:5px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.links{padding-left:18px;font-size:13.5px} .links li{margin:5px 0}
.settings .set-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:520px){.settings .set-grid{grid-template-columns:1fr}}
.settings label{display:flex;flex-direction:column;font-size:12px;color:var(--text2);gap:3px}
.settings label.chk{flex-direction:row;align-items:center;gap:8px;font-size:13px}
.settings input[type=text],.settings input[type=number]{background:#050a2a;color:#fff;border:1px solid var(--line);border-radius:8px;padding:7px;font-size:15px}
.set-btns{margin-top:10px}
table.plan{min-width:700px} table.plan td{text-align:center;padding:4px 2px;font-size:11px}
table.plan td.conf-med{opacity:.85} table.plan td.conf-low{opacity:.6;outline:1px dashed rgba(255,255,255,.3);outline-offset:-2px}
table.plan td.best{box-shadow:inset 0 0 0 2px #ffd34d;border-radius:6px} table.plan td .sc{display:block;font-weight:700;color:#fff}
table.plan th{text-align:center}
.conf-key{display:inline-block;padding:0 6px;border-radius:6px;font-size:11px} .conf-key.high{background:rgba(255,255,255,.12)} .conf-key.med{background:rgba(255,255,255,.08);opacity:.85} .conf-key.low{outline:1px dashed rgba(255,255,255,.4);opacity:.65}
.plan-best{font-size:13px;color:var(--text2)} .plan-best li{margin:3px 0}
.ring-lbl{color:#cfe;font-size:10px;text-shadow:0 0 3px #000;white-space:nowrap}
.pt-lbl{color:#fff;font-size:10px;font-weight:700;text-shadow:0 0 3px #000;white-space:nowrap}
.wx-mk{font-size:10px;font-weight:700;color:#fff;text-shadow:0 0 3px #000;white-space:nowrap;text-align:center}
.leaflet-container{background:#0a1030;font:12px/1.3 -apple-system,Segoe UI,Roboto,sans-serif}
.smooth-ov{image-rendering:auto}
.disclaimer{border-color:var(--caution)}
footer{text-align:center;color:var(--muted);font-size:11px;padding:10px 0 24px}