/* =========================================================
   SPOTWIND · STYLES
   navy #0B1F33 · blue #1E8BE0 · lime #C6F432 · white
========================================================= */
:root{--ink:#0B1F33;--muted:#5A6B7C;--muted2:#4A5D70;--line:#E6EDF3;--soft:#F4F8FB;--soft2:#EEF3F7;--blue:#1E8BE0;--blue-t:#1670C9;--lime:#C6F432;--go:#2FBF5B;--ok:#F2C511;--care:#F59A1B;--no:#E5484D;--night:#C9D3DC;--r:18px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 15px/1.5 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}
a{color:var(--blue-t)}a:hover{color:var(--ink)}
img{max-width:100%}
h1,h2,h3{line-height:1.12;margin:0}
button{font-family:inherit;cursor:pointer}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}.skip:focus{left:8px}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- header ---------- */
.hd{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:30}
.hd-in{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);flex:none}
.logo span{font-weight:800;font-size:28px;letter-spacing:-1px}
.hd-search{position:relative;flex:1 1 260px;max-width:340px;display:flex;align-items:center;gap:8px;background:#F1F5F9;border-radius:12px;padding:0 14px}
.hd-search input{flex:1;min-width:0;border:0;background:transparent;font:500 14px inherit;font-family:inherit;padding:13px 0;color:var(--ink);outline:none}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(11,31,51,.14);overflow:hidden;z-index:50}
.sugg a{display:block;padding:10px 14px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--soft2)}
.sugg a:last-child{border-bottom:0}.sugg a:hover,.sugg a.on{background:var(--soft)}
.sugg b{display:block;font-size:14px}.sugg span{font-size:12px;color:var(--muted)}
.hd-nav{display:flex;gap:24px;font-weight:600;font-size:15px;margin-left:8px}
.hd-nav a{color:var(--ink);text-decoration:none;padding:10px 0;border-bottom:3px solid transparent}
.hd-nav a.on,.hd-nav a:hover{border-bottom-color:var(--lime)}
.hd-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.ic-btn{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;border-radius:12px}
.ic-btn:hover{background:var(--soft)}
.units{display:flex;background:var(--soft2);border-radius:999px;padding:4px}
.units button{border:0;background:transparent;font-weight:600;font-size:13px;color:var(--ink);padding:8px 12px;border-radius:999px}
html[data-units=metric] .units [data-u=metric],html[data-units=us] .units [data-u=us]{background:var(--blue);color:#fff;font-weight:700}
.menu-btn{display:none}
.gt{padding:6px 28px;border-top:1px solid var(--line)}

/* ---------- hero ---------- */
.hero{position:relative;height:360px;overflow:hidden;background:#0B3A5A;color:#fff}
.hero img{position:absolute;right:0;top:0;height:100%;width:78%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#072A44 0%,#072A44 26%,rgba(7,42,68,.55) 44%,rgba(7,42,68,0) 62%)}
.hero .wrap{position:relative;z-index:1;padding-top:52px}
.kick{font-weight:700;font-size:13px;letter-spacing:1.8px;text-transform:uppercase}
.hero h1,.hero .h1{margin:14px 0 0;font-weight:800;font-size:56px;line-height:1.02;letter-spacing:-1.6px}
.hero h1 em,.hero .h1 em{font-style:normal;color:var(--lime)}
.brush{display:block;margin:4px 0 0 -8px}
.hero p{margin:14px 0 0;font-weight:600;font-size:18px;line-height:1.45}
.hero-search{margin-top:22px;display:flex;gap:8px;max-width:560px;background:#fff;border-radius:16px;padding:6px;position:relative}
.hero-search input{flex:1;min-width:0;border:0;font:500 16px inherit;font-family:inherit;padding:12px 12px;outline:none;color:var(--ink);background:transparent}
.hero-search .sugg{top:calc(100% + 6px)}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 20px;font-weight:800;font-size:15px;text-decoration:none;cursor:pointer}
.btn-lime{background:var(--lime);color:var(--ink)}.btn-lime:hover{background:#B5E61E;color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#163552;color:#fff}
.btn-soft{background:var(--soft2);color:var(--ink);font-weight:700}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--soft2);color:var(--ink);font-weight:600;font-size:14px;padding:11px 16px;border-radius:12px;text-decoration:none}
.chip svg{flex:none}
.chip.on{background:var(--lime);font-weight:700}
a.chip:hover{background:#E1EAF1}
.pill{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:6px;white-space:nowrap}
.lv3{background:#D5F5C4;color:#1F5C0B}.lv2{background:#E3F7D9;color:#2C6E12}.lv1{background:#FFF2C2;color:#6E5200}.lv0{background:#FDE2E1;color:#8E1B1F}.lvn{background:#E3E9EF;color:#3A4D60}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--soft2);border-radius:999px;padding:4px;gap:2px}
.seg button{border:0;background:transparent;font-weight:600;font-size:13px;color:var(--ink);padding:8px 14px;border-radius:999px}
.seg button.on{background:var(--blue);color:#fff;font-weight:700}

/* ---------- cards ---------- */
.card{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:18px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.card-h h2{font-size:20px;font-weight:800}
.card-h a{font-size:13px;font-weight:700;text-decoration:none}
.sec{padding-top:18px}
.sec-h{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:-.6px}
.sec-p{margin:0 0 18px;color:var(--muted2);font-size:16px}
.row{display:flex;flex-wrap:wrap;gap:18px}
.grow{flex:999 1 620px;min-width:0}.side{flex:1 1 340px;min-width:0}
.half{flex:1 1 440px;min-width:0}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.muted{color:var(--muted)}
.list{display:grid;gap:8px;font-size:14px}
.li{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--soft);border-radius:10px;padding:11px 12px;color:var(--ink);text-decoration:none}
.li span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.li b:last-child{flex:none}
a.li:hover{background:#E8F0F6}
.empty{color:var(--muted);font-size:14px;padding:6px 0}
.skel{background:linear-gradient(90deg,#EEF3F7 25%,#F7FAFC 50%,#EEF3F7 75%);background-size:200% 100%;animation:sk 1.3s infinite;border-radius:10px}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- spot top ---------- */
.crumb{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;font-weight:500;padding-top:20px}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--ink)}
.crumb span[aria-current]{color:var(--ink);font-weight:600}
.sp-title{display:flex;align-items:center;gap:8px;margin-top:10px}
.sp-title h1{flex:1;font-weight:800;font-size:46px;letter-spacing:-1.4px;line-height:1.05}
.sp-desc{margin:10px 0 18px;font-size:16px;line-height:1.55;color:var(--muted2);max-width:620px}
.mapbox{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:20px}
.map{flex:3 1 360px;min-width:0;height:320px;position:relative;background:#2B5F7A}
.map img.sat{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map .pin{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#FF6B2C;border:4px solid #fff;box-shadow:0 0 0 10px rgba(255,255,255,.3)}
.map .seg{position:absolute;left:12px;top:12px;z-index:500;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.map .leaflet-container{position:absolute;inset:0}
.map-load{position:absolute;right:12px;bottom:12px;z-index:2}
.info{flex:2 1 220px;min-width:0;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.info-i{display:flex;gap:14px;align-items:center}
.info-i small{display:block;font-size:12px;color:var(--muted)}
.info-i b{font-size:15px}
.info .btn{margin-top:auto;border-radius:999px}

/* right now */
.now-h{display:flex;justify-content:space-between;align-items:center}
.now-h h2{font-size:18px;font-weight:800}.now-h span{font-size:12px;color:var(--muted)}
.now-main{display:flex;align-items:center;gap:18px;margin:14px 0 16px}
.compass{width:86px;height:86px;border-radius:50%;border:2px solid var(--line);position:relative;display:grid;place-items:center;flex:none}
.compass i{position:absolute;font-style:normal;font-size:11px;font-weight:800}
.compass .n{top:3px}.compass .s{bottom:3px}.compass .e{right:5px}.compass .w{left:5px}
.compass svg{transition:transform .6s}
.big{font-weight:800;font-size:46px;line-height:1;letter-spacing:-1px}
.big small{font-size:22px;font-weight:700;letter-spacing:0}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{display:flex;gap:10px;align-items:center;background:var(--soft);border-radius:12px;padding:12px;min-width:0}
.stat small{display:block;font-size:12px;color:var(--muted)}
.stat b{font-size:17px;white-space:nowrap}
.now .btn{width:100%;margin-top:14px}

/* activity tiles */
.acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.act{border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:center;text-decoration:none;color:var(--ink);background:#fff}
.act img{width:100%;height:62px;object-fit:cover;display:block;background:var(--soft2)}
.act div{padding:6px 4px 8px}
.act b{font-size:13px;display:block}
.act .pill{margin-top:4px}
a.act:hover{border-color:#BFD3E3}

/* tabs */
.tabs{display:flex;gap:28px;flex-wrap:wrap;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;margin-top:26px}
.tabs a{text-decoration:none;color:#3A4D60;padding:12px 0;border-bottom:3px solid transparent}
.tabs a.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:800}
.tabs a:hover{color:var(--ink)}

/* charts */
.chart-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted2);flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:14px;height:8px;border-radius:4px;display:inline-block}
svg.ch{display:block;width:100%;height:auto;font-family:inherit;font-size:10px;fill:var(--muted2);overflow:visible}
.ch-tip{position:absolute;pointer-events:none;background:#fff;border:1px solid #DCE5EC;border-radius:10px;padding:6px 10px;font-size:12px;box-shadow:0 8px 20px rgba(11,31,51,.12);white-space:nowrap;z-index:5}
.chbox{position:relative}

/* weather details */
.wx{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:18px 12px}
.wx div{display:flex;gap:8px;align-items:center;min-width:0}
.wx small{display:block;font-size:11px;color:var(--muted)}
.wx b{white-space:nowrap}

/* nearby */
.near{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.near a{text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.near img{width:100%;height:86px;object-fit:cover;display:block;background:var(--soft2)}
.near div{padding:10px 12px}.near b{font-size:13px;display:block;line-height:1.3}.near small{font-size:12px;color:var(--muted)}

/* guide text */
.guide p{margin:0 0 10px;color:#33475B;line-height:1.65}
.guide h3{font-size:16px;margin:14px 0 6px}

/* sharkwind band */
.band{background:var(--ink);color:#fff;border-radius:20px;padding:26px 28px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-top:26px}
.band b{font-size:20px}.band p{color:#B8C9D8;font-size:14px;margin:4px 0 0}

/* ---------- forecast page ---------- */
.act-tabs{display:flex;gap:10px;flex-wrap:wrap}
.act-tabs a{display:flex;align-items:center;gap:8px;text-decoration:none;background:var(--soft2);color:var(--ink);font-weight:600;font-size:15px;padding:12px 18px;border-radius:14px}
.act-tabs a.on{background:var(--ink);color:#fff;font-weight:700}
.act-tabs a.on svg{stroke:var(--lime)}
.act-tabs a.ext{background:transparent;border:1.5px dashed #9FB3C4}
.verdict{border-radius:20px;padding:22px 24px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;border:1px solid}
.verdict.v3,.verdict.v2{background:#E9F9EE;border-color:#BFE8CB}.verdict.v1{background:#FFF8DB;border-color:#F3E09A}.verdict.v0{background:#FDECEC;border-color:#F4C2C3}.verdict.vn{background:var(--soft);border-color:var(--line)}
.vbadge{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:22px;flex:none;text-align:center;line-height:1.1}
.vtext{flex:1 1 300px;min-width:0}
.vtext .kick{color:var(--muted2);font-size:12px}
.vtext h2{font-size:26px;font-weight:800;margin-top:4px;letter-spacing:-.5px}
.vtext p{font-size:15px;color:#33475B;margin:6px 0 0}
.vstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:1 1 260px}
.vstats div{background:#fff;border-radius:12px;padding:10px 12px}.vstats small{display:block;font-size:11px;color:var(--muted)}
.hourly{display:grid;gap:8px 6px;align-items:center;font-size:13px}
.hourly .lab{color:var(--muted);font-weight:700;font-size:12px}
.hourly .c{text-align:center}
.hourly .cell{text-align:center;border-radius:6px;padding:6px 0;font-weight:800;font-size:11px}
.hourly .dim{color:var(--muted)}
.harr{display:grid;justify-items:center;gap:2px}.harr small{font-size:10px;color:var(--muted)}
.c3{background:var(--go);color:var(--ink)}.c2{background:#8FDB6E;color:var(--ink)}.c1{background:var(--ok);color:var(--ink)}.c0{background:var(--care);color:var(--ink)}.cx{background:var(--no);color:#fff}.cn{background:var(--night);color:var(--ink)}
.hlist{display:none}
.hrow{display:grid;grid-template-columns:44px 64px 1fr 1fr 1fr;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--soft2);font-size:13px}
.hrow:last-child{border-bottom:0}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.dayc{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;text-align:left;color:var(--ink);font-family:inherit}
.dayc.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(30,139,224,.2)}
.dayc .pill{margin:8px 0;display:inline-block}
.dayc div{font-size:13px;color:var(--muted2)}
.tips{margin:0;padding-left:18px;font-size:14px;line-height:1.7;color:#33475B}

/* ---------- home / lists ---------- */
.hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.hcard{text-decoration:none;color:var(--ink);padding:22px;border-radius:20px;background:var(--soft);display:flex;flex-direction:column;gap:8px}
.hcard b{font-size:18px}.hcard span{font-size:14px;color:var(--muted2);line-height:1.5}
.hcard:hover{background:#E9F1F7}
.places{display:flex;flex-wrap:wrap;gap:10px}
.places a{text-decoration:none;color:var(--ink);border:1px solid #DCE5EC;border-radius:14px;padding:12px 16px;font-weight:700;background:#fff}
.places a small{font-weight:500;color:var(--muted)}
.places a:hover{border-color:var(--blue)}
.spots{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.spotc{text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.spotc img{width:100%;height:120px;object-fit:cover;display:block;background:var(--soft2)}
.spotc div{padding:12px 14px}.spotc b{display:block;font-size:15px;line-height:1.3}.spotc small{color:var(--muted);font-size:13px}
.spotc:hover{border-color:#BFD3E3}
.bigmap{height:420px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative;background:#CDE7EE}
.page-h{padding-top:8px}
.page-h h1{font-size:40px;font-weight:800;letter-spacing:-1.2px;margin-top:8px}
.page-h p{color:var(--muted2);margin:8px 0 0;max-width:720px}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);margin-top:36px;background:#fff}
.ft-in{display:flex;flex-wrap:wrap;gap:20px 40px;padding-top:30px;padding-bottom:34px;justify-content:space-between}
.ft-brand{max-width:360px}.ft-brand p{font-size:13px;color:var(--muted);margin:10px 0 0}
.ft-brand .logo span{font-size:22px}
.ft-nav{display:flex;flex-wrap:wrap;gap:12px 22px;font-size:14px;font-weight:600;align-content:flex-start}
.ft-nav a{color:var(--ink);text-decoration:none}
.ft-copy{flex:1 1 100%;font-size:12px;color:var(--muted);margin:0}

/* leaflet popups */
.leaflet-popup-content{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hd-nav{display:none}
  .hd-nav.open{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:6px 28px 12px;margin:0;box-shadow:0 14px 24px rgba(11,31,51,.08)}
  .hd-nav.open a{padding:12px 0;border-bottom:1px solid var(--soft2)}
  .menu-btn{display:grid}
}
@media (max-width:900px){
  .hero{height:auto;min-height:330px}
  .hero img{width:100%}
  .hero:after{background:linear-gradient(180deg,rgba(7,42,68,.35),rgba(7,42,68,.85))}
  .hero .wrap{padding-top:40px;padding-bottom:30px}
  .hero h1,.hero .h1{font-size:42px}
  .sp-title h1{font-size:36px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hd-in{gap:10px;flex-wrap:wrap}
  .logo span{font-size:22px}.logo svg{width:32px;height:32px}
  .hd-search{order:5;flex:1 1 100%;max-width:none}
  .units button{padding:7px 9px;font-size:12px}
  .hero h1,.hero .h1{font-size:34px;letter-spacing:-1px}
  .hero p{font-size:15px}
  .brush{width:240px}
  .sp-title h1{font-size:30px;letter-spacing:-.8px}
  .chip{padding:9px 12px;font-size:13px}
  .map{height:240px;flex-basis:100%}
  .big{font-size:40px}
  .tabs{gap:6px 18px;font-size:14px}
  .tabs a{padding:9px 0}
  .near{grid-template-columns:1fr}
  .near a{display:flex}.near img{width:110px;height:auto;min-height:72px}
  .sec-h{font-size:24px}
  .page-h h1{font-size:30px}
  .card{padding:14px}
  .vbadge{width:72px;height:72px;font-size:18px}
  .vtext h2{font-size:21px}
  .hgrid{display:none}
  .hlist{display:block}
  .act-tabs a{padding:10px 12px;font-size:14px}
  .band{padding:20px}
  .bigmap{height:320px}
}
@media (max-width:380px){.acts{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:1fr}}

/* ---------- near you / activity pages ---------- */
.hero-s{height:300px}
.hero-s h1{margin:12px 0 0;font-weight:800;font-size:50px;line-height:1.04;letter-spacing:-1.4px}
.hero-s p{max-width:560px}
.loc-chip{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;padding:6px 6px 6px 12px;font-size:14px;font-weight:600;backdrop-filter:blur(4px)}
.loc-chip button{border:0;background:var(--lime);color:var(--ink);font-weight:700;font-size:12px;padding:7px 12px;border-radius:999px}
.loc-chip-l{margin-top:0;background:var(--soft);border-color:var(--line);color:var(--ink)}
.near-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:6px}
.nc{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px}
.nc:hover{border-color:#BFD3E3}
.nc-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.nc-h b{font-size:16px;line-height:1.25;display:block}.nc-h small{color:var(--muted);font-size:12px}
.nc-v{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted2)}
.nc-v strong{font-size:22px;color:var(--ink);font-weight:800}
.nc-v span{display:flex;align-items:center;gap:4px}
.nearbig{display:flex;flex-direction:column;gap:14px}
.nb-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.nb-top h3{font-size:24px;font-weight:800;letter-spacing:-.5px}.nb-top small{color:var(--muted)}
.nb-main{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nb-pills{display:flex;gap:8px;flex-wrap:wrap}
.nb-pills a{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);background:var(--soft);border-radius:10px;padding:8px 10px;font-size:13px;font-weight:700}
.nl{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--soft2);text-decoration:none;color:var(--ink);font-size:14px}
.nl:last-child{border-bottom:0}.nl small{display:block;color:var(--muted);font-size:12px}.nl b{white-space:nowrap}
.hubmap{height:560px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#CDE7EE;position:relative;margin-top:12px}
.map-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tog{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:var(--soft2);padding:8px 12px;border-radius:999px;cursor:pointer}
.tog input{accent-color:var(--blue);width:16px;height:16px}
.wa{display:flex;flex-direction:column;align-items:center;pointer-events:none}
.wa b{font-size:10px;font-weight:800;color:#0B1F33;background:rgba(255,255,255,.88);border-radius:6px;padding:0 4px;margin-top:-2px}
.pop b{font-size:14px}.pop .pr{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0;font-size:12px}.pop a{font-weight:700}
@media (max-width:640px){.hero-s{height:auto;min-height:280px}.hero-s h1{font-size:34px}.hubmap{height:420px}.nb-top h3{font-size:20px}}

/* ---------- forecast tabs: themed banner ---------- */
.fch{position:relative;overflow:hidden;border-radius:24px;padding:28px 30px;margin-top:14px;color:#fff;display:flex;gap:20px;align-items:center;min-height:220px}
.fch-boating{background:linear-gradient(135deg,#061A2C 0%,#0B3A5A 70%,#0E4E74 100%)}
.fch-diving{background:linear-gradient(160deg,#032036 0%,#05406A 55%,#0A6B9A 100%)}
.fch-fishing{background:linear-gradient(135deg,#0B2E23 0%,#145A3F 70%,#1F7A55 100%)}
.fch-surf{background:linear-gradient(160deg,#0A3D62 0%,#0E7FB8 55%,#38C6D9 100%)}
.fch-sup{background:linear-gradient(135deg,#053F4A 0%,#0A6E7E 65%,#0F8A9B 100%)}
.fch-txt{flex:1 1 420px;min-width:0;position:relative;z-index:1}
.fch .kick{color:#C6F432}
.fch h1{font-size:44px;font-weight:800;letter-spacing:-1.2px;margin-top:8px;line-height:1.05}
.fch p{margin:8px 0 0;color:#D6E6F1;max-width:620px}
.fch-art{flex:0 0 200px;opacity:.95}
.fch-art svg{width:200px;height:200px;display:block}
.fch-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.fch-stats div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:8px 12px;min-width:96px}
.fch-stats small{display:block;font-size:11px;color:#CFE3F0;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.fch-stats b{font-size:18px}
@media (max-width:640px){.fch{padding:20px;min-height:0}.fch h1{font-size:30px}.fch-art{display:none}}

/* ---------- special sections ---------- */
.sp{border-radius:22px;padding:22px;margin-top:18px;position:relative;overflow:hidden}
.sp-h h2{font-size:24px;font-weight:800;letter-spacing:-.4px}
.sp-h p{margin:6px 0 16px;max-width:760px}

/* boat radar */
.sp-boat{background:#061A2C;color:#E3F1FA}
.sp-boat .sp-h p{color:#9FC0D6}
.radar-wrap{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.radar-box{flex:1 1 420px;max-width:560px;min-width:0}
.radar-box canvas{width:100%;height:auto;display:block;border-radius:50%;background:radial-gradient(circle,#0A3350 0%,#06243A 60%,#041827 100%);box-shadow:0 0 0 2px rgba(198,244,50,.25),0 20px 50px rgba(0,0,0,.35)}
.radar-side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px}
.rd-read{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rd-read div{background:rgba(255,255,255,.06);border:1px solid rgba(198,244,50,.18);border-radius:12px;padding:10px 12px}
.rd-read small{display:block;font-size:11px;color:#8FB3CB;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.rd-read b{font-size:19px;color:#fff;font-variant-numeric:tabular-nums}
.rd-read .st{grid-column:1/-1;font-weight:800;font-size:15px}
.rd-time{display:flex;align-items:center;gap:10px}
.rd-time button{width:44px;height:44px;border-radius:50%;border:0;background:#C6F432;color:#061A2C;font-size:16px;font-weight:900}
.rd-time input{flex:1;accent-color:#C6F432}
.rd-time span{min-width:84px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.rd-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:#9FC0D6}
.rd-legend span{display:flex;align-items:center;gap:6px}
.rd-legend i{display:inline-block;width:14px;height:6px;border-radius:3px}
.lg-w{background:#7FE7FF}.lg-s{background:#C6F432}.lg-m{background:#FFB74D;width:10px!important;height:10px!important;border-radius:2px!important}.lg-l{background:#FFF;width:10px!important;height:10px!important;border-radius:50%!important}.lg-p{background:#1E8BE0;width:10px!important;height:10px!important;border-radius:50%!important}
.rd-h{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#C6F432}
.rd-list{display:grid;gap:6px;max-height:260px;overflow:auto}
.rd-list a,.rd-list div{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;font-size:13px;color:#E3F1FA;text-decoration:none;background:rgba(255,255,255,.05);border-radius:10px;padding:8px 10px}
.rd-list a:hover{background:rgba(198,244,50,.12)}
.rd-list b{font-variant-numeric:tabular-nums;color:#C6F432}

/* dive planner */
.sp-dive{background:linear-gradient(180deg,#05406A 0%,#032036 100%);color:#E6F4FC}
.sp-dive .sp-h p{color:#A9D3EA}
.bubbles i{position:absolute;bottom:-20px;width:10px;height:10px;border:2px solid rgba(159,227,255,.55);border-radius:50%;animation:bub 9s linear infinite}
.bubbles i:nth-child(1){left:8%;animation-delay:0s}.bubbles i:nth-child(2){left:22%;width:6px;height:6px;animation-delay:2s}.bubbles i:nth-child(3){left:40%;animation-delay:4s}.bubbles i:nth-child(4){left:58%;width:14px;height:14px;animation-delay:1s}
.bubbles i:nth-child(5){left:70%;animation-delay:5s}.bubbles i:nth-child(6){left:83%;width:7px;height:7px;animation-delay:3s}.bubbles i:nth-child(7){left:93%;animation-delay:6s}.bubbles i:nth-child(8){left:50%;width:5px;height:5px;animation-delay:7s}
@keyframes bub{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(-700px);opacity:0}}
@media (prefers-reduced-motion:reduce){.bubbles{display:none}}
.dv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;position:relative}
.dv-card{background:rgba(255,255,255,.08);border:1px solid rgba(159,227,255,.22);border-radius:18px;padding:16px;min-width:0}
.dv-wide{grid-column:span 3}
.dv-card h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#9FE3FF;margin-bottom:10px}
.dv-big{font-size:30px;font-weight:800;color:#fff;line-height:1.1}
.dv-card p{margin:6px 0 0;font-size:13px;color:#C7E3F2}
.gauge{width:100%;max-width:220px;display:block;margin:0 auto}
.suit{display:flex;gap:12px;align-items:center}
.thermo{width:34px;height:120px;flex:none}
.slack{display:grid;gap:6px}
.slack div{display:flex;justify-content:space-between;background:rgba(255,255,255,.07);border-radius:10px;padding:8px 10px;font-size:14px}
.strip{display:grid;gap:3px;margin-top:6px}
.strip i{height:30px;border-radius:5px;display:block}
.strip-l{display:flex;justify-content:space-between;font-size:11px;color:#A9D3EA;margin-top:4px}
.sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.sites div{background:rgba(255,255,255,.07);border-radius:12px;padding:10px 12px;font-size:13px}
.sites b{display:block;color:#fff;font-size:14px}
@media (max-width:900px){.dv-grid{grid-template-columns:1fr}.dv-wide{grid-column:auto}}

/* fishing */
.sp-fish{background:linear-gradient(180deg,#EEF8F1,#FFFFFF);border:1px solid #CFE8D8}
.sp-fish .sp-h h2{color:#0F3D2E}
.fs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:14px}
.fs-card{background:#fff;border:1px solid #D7EBDF;border-radius:18px;padding:16px;min-width:0}
.fs-card h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#1F6B4A;margin-bottom:10px}
.sol-top{display:flex;gap:14px;align-items:center}
.sol-stars{color:#E8A317;font-size:20px;letter-spacing:2px}
.sol-list{display:grid;gap:6px;margin-top:10px}
.sol-list div{display:flex;justify-content:space-between;gap:8px;font-size:14px;background:#F3FAF5;border-radius:10px;padding:8px 10px}
.sol-list b{font-variant-numeric:tabular-nums}
.tagM{background:#1F6B4A;color:#fff;font-size:10px;font-weight:800;border-radius:5px;padding:2px 6px;margin-right:6px}.tagm{background:#C6F432;color:#0B1F33;font-size:10px;font-weight:800;border-radius:5px;padding:2px 6px;margin-right:6px}
.species{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.fish{border:1px solid #D7EBDF;border-radius:14px;padding:12px;background:#FBFEFC}
.fish b{font-size:15px;display:block}.fish i{font-size:12px;color:#5A6B7C}
.fish .lures{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.fish .lures span{background:#E7F5EC;color:#14533A;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 9px}
.fish p{font-size:12.5px;color:#4A5D70;margin:8px 0 0}
@media (max-width:900px){.fs-grid{grid-template-columns:1fr}}

/* surf */
.sp-surf{background:linear-gradient(180deg,#EAF6FD,#FFFFFF);border:1px solid #CBE6F6}
.sp-surf .sp-h h2{color:#0B4F7C}
.sf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:14px}
.sf-card{background:#fff;border:1px solid #D6ECF8;border-radius:18px;padding:16px;min-width:0}
.sf-full{grid-column:1/-1}
.sf-card h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#0E6BA8;margin-bottom:10px}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.pick{border-radius:14px;padding:12px 14px;background:#EEF7FD;border:1px solid #CBE6F6}
.pick b{display:block;font-size:16px}.pick span{font-size:13px;color:#3E5C74}
@media (max-width:900px){.sf-grid{grid-template-columns:1fr}}

/* sup */
.sp-sup{background:linear-gradient(180deg,#E8F8FA,#FFFFFF);border:1px solid #C8EAEF}
.sp-sup .sp-h h2{color:#075E6B}
.su-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:14px}
.su-card{background:#fff;border:1px solid #CFEAEE;border-radius:18px;padding:16px;min-width:0}
.su-card h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#0A6E7E;margin-bottom:10px}
.dayrow{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center;margin-bottom:8px}
.dayrow b{font-size:13px}
.hrs{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:2px}
.hrs i{height:26px;border-radius:4px;display:block}
.hrs-l{display:grid;grid-template-columns:70px 1fr;gap:8px;font-size:11px;color:#5A6B7C}
.hrs-l div{display:flex;justify-content:space-between}
@media (max-width:900px){.su-grid{grid-template-columns:1fr}}
.cmp{width:100%;max-width:260px;display:block;margin:0 auto}
.cmp-note{text-align:center;font-weight:800;margin-top:8px}
.lg-h{width:0!important;height:0!important;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid #FF5A5A;border-radius:0!important;background:none!important}
/* captain's chart */
.sp-chart{background:#0B1F33;color:#E3F1FA}
.sp-chart .sp-h p{color:#9FC0D6}
.cap-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.sp-chart .seg{background:rgba(255,255,255,.1)}.sp-chart .seg button{color:#E3F1FA}.sp-chart .seg button.on{background:#C6F432;color:#0B1F33}
.sp-chart .tog{background:rgba(255,255,255,.1);color:#E3F1FA}
.capmap{height:560px;border-radius:18px;overflow:hidden;background:#0E2A44;position:relative}
.capmap iframe{width:100%;height:100%;border:0;display:block}
.cap-note{font-size:12px;color:#8FB3CB;margin:10px 0 0}
@media (max-width:640px){.capmap{height:420px}}
/* radar smaller + full screen */
.radar-box{max-width:400px}
.rd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
#capOpts:not([hidden]){display:contents}
.rfs{position:fixed;inset:0;z-index:9999;background:#030F1A}
.rfs[hidden]{display:none}
.rfs-map,.rfs-ships{position:absolute;inset:0}
.rfs-ships iframe{width:100%;height:100%;border:0}
.rfs-map .leaflet-tile-pane{filter:saturate(.6)}
.rfs-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:500}
.rfs-bar{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;z-index:600}
.rfs-bar .seg{background:rgba(3,15,26,.8);border:1px solid rgba(198,244,50,.3)}
.rfs-bar .seg button{color:#E3F1FA}.rfs-bar .seg button.on{background:#C6F432;color:#061A2C}
.rfs-btn{border:1px solid rgba(198,244,50,.4);background:rgba(3,15,26,.85);color:#E3F1FA;font-weight:700;font-size:14px;padding:10px 14px;border-radius:999px;min-height:44px}
#rfsClose{margin-left:auto;width:44px;padding:0;font-size:18px}
.rfs-panel{position:absolute;left:12px;bottom:12px;z-index:600;background:rgba(3,15,26,.86);border:1px solid rgba(198,244,50,.3);border-radius:16px;padding:12px 14px;color:#E3F1FA;display:grid;grid-template-columns:repeat(3,minmax(90px,auto));gap:8px 18px;max-width:calc(100% - 24px)}
.rfs-panel small{display:block;font-size:10.5px;color:#8FB3CB;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.rfs-panel b{font-size:16px;font-variant-numeric:tabular-nums;color:#fff}
.rfs-panel .wide{grid-column:1/-1;font-size:13px;color:#C6F432;font-weight:700}
@media (max-width:640px){.rfs-panel{grid-template-columns:repeat(2,minmax(0,1fr));right:12px}.rfs-panel b{font-size:14px}}
/* compact chart at the top of forecast tabs */
.tch{border:1px solid var(--line);border-radius:20px;padding:14px 16px 10px;margin-top:16px;background:#fff}
.tch-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tch-top h2{font-size:18px;font-weight:800}
.tch-chips{display:flex;gap:6px;flex-wrap:wrap}
.tch-chips button{border:1px solid #CFDCE5;background:#fff;color:#3A4D60;font-weight:700;font-size:12px;padding:6px 10px;border-radius:999px;min-height:32px}
.tch-chips button.on{background:#E6F7DA;border-color:#9BE04A;color:#1E5A10}
.tch-svg text{fill:#4A5D70;font-size:10.5px}
.tch-leg{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted2);margin-top:4px}
.tch-leg span{display:flex;align-items:center;gap:5px}.tch-leg i{display:inline-block;width:14px;height:6px;border-radius:3px}
.tch-leg .lgt{font-weight:700;color:var(--ink)}
.hrow{grid-template-columns:40px 58px 30px 1fr 1fr 1fr}
@media (max-width:640px){.tch{padding:12px 10px 8px}.tch-chips button{font-size:11px;padding:5px 8px}}
/* boating: map + radar side by side on desktop, map full screen */
.boat-duo{display:block}
@media (min-width:1000px){
  .boat-duo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:stretch}
  .boat-duo>.sp{margin-top:18px}
  .boat-duo .sp-chart{display:flex;flex-direction:column}
  .boat-duo .sp-chart .capmap{flex:1 1 auto;height:auto;min-height:480px}
  .boat-duo .radar-wrap{flex-direction:column;align-items:stretch;gap:16px}
  .boat-duo .radar-box{flex:none;max-width:340px;width:100%;margin:0 auto}
  .boat-duo .radar-side{flex:none}
  .boat-duo .rd-list{max-height:240px;overflow:auto}
  .boat-duo .rd-top .btn{font-size:13px;padding:9px 14px}
}
.cap-fsb{margin-left:auto;border:1px solid rgba(198,244,50,.45);background:rgba(255,255,255,.08);color:#E3F1FA;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;min-height:40px;cursor:pointer}
.cap-fsb:hover{background:#C6F432;color:#0B1F33}
.sp-chart.cap-fs{position:fixed;inset:0;z-index:9998;margin:0;border-radius:0;padding:12px;display:flex;flex-direction:column}
.sp-chart.cap-fs .sp-h,.sp-chart.cap-fs .cap-note{display:none}
.sp-chart.cap-fs .capmap{flex:1 1 auto;height:auto;min-height:0;border-radius:12px}
.sp-chart.cap-fs .capmap[hidden]{display:none}
.sp-chart.cap-fs .cap-fsb{background:#C6F432;color:#0B1F33}
body.cap-lock{overflow:hidden}
.rfs-btn.on{background:#C6F432;color:#061A2C}
/* dive & snorkel planner */
.dv-w2{grid-column:span 2}
.dv-card h4{font-size:14px;color:#fff;margin:0 0 8px}
.dvw-row{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:center;margin-bottom:8px}
.dvw-lab b{display:block;color:#fff;font-size:15px}.dvw-lab span{font-size:12px;font-weight:800}
.dvw-row small{display:block;font-size:12px;color:#A9D3EA;margin-top:3px}
.dvw-row .strip{margin-top:0}.dvw-row .strip i{height:24px}
.dvw-l{margin-left:102px}
.dv-tip{background:rgba(255,255,255,.07);border-radius:10px;padding:8px 10px}
.dv-tip b{color:#9FE3FF}
.dv-fac{display:grid;gap:5px;margin-top:8px}
.dv-fac div{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;font-size:12.5px;color:#C7E3F2}
.dv-fac i{width:10px;height:10px;border-radius:50%}.dv-fac b{color:#fff;font-weight:700;text-align:right}
.surge{width:100%;display:block}.surge .dz,.dv-tide .dz{font-size:11px;fill:#A9D3EA;font-weight:600}.surge .dl,.dv-comp .dl,.dv-tide .dl{font-size:11px;font-weight:800}
.dv-cur{display:flex;gap:14px;align-items:center}.dv-comp{width:110px;height:110px;flex:none}
.dv-bars{display:flex;align-items:flex-end;gap:2px;height:44px;margin-top:10px}.dv-bars i{flex:1;border-radius:2px 2px 0 0;min-height:2px}
.dv-sst{display:flex;gap:6px;align-items:flex-end;height:90px;margin-top:12px}
.dv-sst div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:11px;color:#A9D3EA}
.dv-sst i{display:block;width:70%;background:linear-gradient(180deg,#FF8A65,#1FA0E6);border-radius:5px 5px 2px 2px;margin-bottom:3px}
.dv-sst b{color:#fff;font-size:11.5px}
.dv-tide{width:100%;display:block;margin-bottom:8px}
.dv-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dv-kv div{background:rgba(255,255,255,.07);border-radius:10px;padding:8px 10px;min-width:0}
.dv-kv .w,.dv-safe .w{grid-column:1/-1}
.dv-kv small,.dv-safe small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#9FE3FF;font-weight:700}
.dv-kv b,.dv-safe b{color:#fff;font-size:16px}
.dv-safe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dv-safe div{background:rgba(255,255,255,.07);border-radius:10px;padding:8px 10px;min-width:0;font-size:13px;color:#C7E3F2}
.dv-safe .w b{font-size:14px}
.dv-safe a{color:#C6F432;text-decoration:none;font-weight:800}
.dv-flag{display:flex!important;gap:10px;align-items:center}.dv-flag svg{flex:none;border-radius:3px}
.lf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.lf{background:rgba(255,255,255,.07);border:1px solid rgba(159,227,255,.15);border-radius:14px;padding:10px 12px}
.lf-warn{border-color:rgba(229,72,77,.55);background:rgba(229,72,77,.1)}
.lf-h{display:flex;gap:10px;align-items:center}.lf-e{font-size:26px;line-height:1}
.lf-h b{display:block;color:#fff;font-size:14px}.lf-h small{font-size:11.5px;color:#A9D3EA}
.lf-m{display:flex;align-items:flex-end;gap:2px;height:34px;margin-top:8px}
.lf-m i{flex:1;background:rgba(127,231,255,.55);border-radius:2px 2px 0 0}.lf-m i.now{background:#C6F432}
.lf-warn .lf-m i{background:rgba(255,138,101,.65)}.lf-warn .lf-m i.now{background:#C6F432}
.lf-ml{display:flex;gap:2px;font-size:9px;color:#7FA9C2;margin-top:2px}.lf-ml span{flex:1;text-align:center}.lf-ml .now{color:#C6F432;font-weight:800}
.lf-b{display:block;font-size:11.5px;color:#C7E3F2;margin-top:4px}
.lf-wh{margin:14px 0 8px!important;color:#FF8A65!important;font-size:13px;text-transform:uppercase;letter-spacing:1px}
.dv-mt{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sp-dive .seg{background:rgba(255,255,255,.1)}.sp-dive .seg button{color:#E6F4FC}.sp-dive .seg button.on{background:#C6F432;color:#032036}
.dv-map{height:440px;border-radius:14px;overflow:hidden;background:#0E2A44}
.dv-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:#C7E3F2;margin-top:8px}
.dv-leg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1.5px solid #fff}
.dv-leg i.tri{border:0;border-radius:0;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid #E5484D}
#dvSites .sites-1{grid-template-columns:1fr;max-height:520px;overflow:auto}
.dv-tools{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dv-tool{background:rgba(255,255,255,.06);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.dv-tool label{font-size:13px;color:#C7E3F2;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dv-tool input[type=range]{flex:1;min-width:140px;accent-color:#C6F432}
.dv-tool label b{color:#fff;min-width:46px}
.ndl{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.ndl div{background:rgba(255,255,255,.07);border-radius:10px;padding:6px 8px;text-align:center}
.ndl b{display:block;color:#fff;font-size:14px}.ndl span{font-size:12px;color:#9FE3FF}
@media (max-width:900px){.dv-w2{grid-column:auto}.dv-tools{grid-template-columns:1fr}.dv-map{height:360px}.dvw-row{grid-template-columns:76px 1fr}.dvw-l{margin-left:86px}}
.dv-mt .seg[hidden]{display:none}
.dv-links{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.dv-links a{display:block;background:rgba(198,244,50,.12);border:1px solid rgba(198,244,50,.4);color:#C6F432;font-weight:700;font-size:13px;border-radius:10px;padding:9px 12px;text-decoration:none}
.dv-links a:hover{background:#C6F432;color:#032036}
.dv-site{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;background:rgba(255,255,255,.07);border:1px solid transparent;border-radius:12px;padding:10px 12px;font-size:13px;color:#C7E3F2;cursor:pointer;font-family:inherit}
.dv-site:hover,.dv-site:focus-visible{border-color:#C6F432;background:rgba(198,244,50,.1)}
.dv-site i{width:12px;height:12px;border-radius:50%;border:2px solid #fff}
.dv-site b{display:block;color:#fff;font-size:14px}.dv-site em{font-style:normal;font-weight:800;color:#C6F432;white-space:nowrap}
.dvp{position:fixed;inset:0;z-index:9999;background:rgba(2,16,28,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.dvp[hidden]{display:none}
.dvp-box{position:relative;background:#06263E;color:#E6F4FC;border:1px solid rgba(159,227,255,.3);border-radius:20px;width:min(940px,100%);max-height:calc(100vh - 32px);overflow:auto;display:grid;grid-template-columns:1.3fr 1fr}
.dvp-map{min-height:420px;background:#0E2A44}
.dvp-info{padding:20px}
.dvp-info>small{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#9FE3FF;font-weight:800}
.dvp-info h3{font-size:22px;color:#fff;margin:4px 0 14px}
.dvp-info .dv-kv a{color:#C6F432;font-weight:800;text-decoration:none}
.dvp-btns{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.dvp-btns a{background:#C6F432;color:#032036;font-weight:800;font-size:14px;text-decoration:none;border-radius:999px;padding:11px 16px;text-align:center}
.dvp-btns a+a{background:rgba(255,255,255,.1);color:#E6F4FC}
.dvp-x{position:absolute;top:10px;right:10px;z-index:1000;width:40px;height:40px;border-radius:50%;border:0;background:rgba(2,16,28,.85);color:#fff;font-size:18px;cursor:pointer}
.dvp-dist span{display:inline-block;background:#C6F432;color:#032036;font-weight:800;font-size:12px;padding:4px 9px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.4);white-space:nowrap}
.dvp-go{margin-top:6px;border:0;background:#032036;color:#C6F432;font-weight:800;border-radius:999px;padding:5px 10px;cursor:pointer;font-family:inherit}
@media (max-width:760px){.dvp{padding:0;align-items:stretch}.dvp-box{grid-template-columns:1fr;border-radius:0;max-height:100vh}.dvp-map{min-height:300px}}
.dv-cnt{margin:0 0 8px!important;font-weight:700;color:#9FE3FF!important}
/* fishing guide */
.fs-full{grid-column:1/-1}
.fs-hrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.fs-hrow h3{margin:0!important}
.seg-g{background:#E7F5EC}.seg-g button{color:#14533A}.seg-g button.on{background:#1F6B4A;color:#fff}
.fishg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fishc{position:relative;display:flex;flex-direction:column;text-align:left;border:1px solid #D7EBDF;border-radius:16px;overflow:hidden;background:#FBFEFC;padding:0;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s}
.fishc:hover,.fishc:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,61,46,.14);border-color:#1F6B4A}
.fishc img,.fish-ph{width:100%;height:140px;object-fit:cover;display:block;background:#E7F5EC}
.fish-ph{display:flex;align-items:center;justify-content:center}.fish-ph .lure-svg{width:60%}
.fish-ph.big{height:100%;min-height:300px}
.fish-tag{position:absolute;top:10px;left:10px;background:#C6F432;color:#0B1F33;font-size:11px;font-weight:800;border-radius:999px;padding:3px 9px}
.fish-b{padding:10px 12px 12px}.fish-b b{display:block;font-size:15px;color:#0F3D2E}.fish-b i{font-size:12px;color:#5A6B7C}
.fish-b .lures{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.fish-b .lures span{background:#E7F5EC;color:#14533A;font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.fs-other{font-size:13px;color:#4A5D70;margin:12px 0 0}
.lure-svg{width:100%;height:auto;display:block}
.tackle{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tk{display:flex;gap:12px;border:1px solid #D7EBDF;border-radius:14px;padding:10px;background:#FBFEFC;align-items:flex-start}
.tk-img{width:96px;height:72px;flex:none;border-radius:10px;background:#F3FAF5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tk-img img{width:100%;height:100%;object-fit:cover}
.tk-b b{display:block;color:#0F3D2E;font-size:15px}.tk-b small{display:block;font-size:12px;color:#1F6B4A;font-weight:700;margin-top:2px}.tk-b p{font-size:12.5px;color:#4A5D70;margin:5px 0 0}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wk{border:1px solid #D7EBDF;border-radius:12px;padding:8px 4px;text-align:center;cursor:pointer;background:#FBFEFC;display:flex;flex-direction:column;align-items:center;gap:3px}
.wk.on{border-color:#1F6B4A;background:#E7F5EC}.wk b{font-size:12.5px;color:#0F3D2E}.wk small{font-size:10.5px;color:#5A6B7C;line-height:1.2}
.wk-f{font-size:12px;line-height:1;display:flex;flex-wrap:wrap;justify-content:center;max-width:56px}.wk-f .off{opacity:.18;filter:grayscale(1)}
.fpl{display:grid;gap:6px;max-height:430px;overflow:auto;margin-top:10px}
.sp-fish .dv-site{background:#F3FAF5;color:#4A5D70}.sp-fish .dv-site b{color:#0F3D2E}.sp-fish .dv-site em{color:#1F6B4A}.sp-fish .dv-site i{border-color:#fff;box-shadow:0 0 0 1px #CFE8D8}
.sp-fish .dv-site:hover{border-color:#1F6B4A;background:#E7F5EC}
.fs-retry{border:0;background:#1F6B4A;color:#fff;font-weight:800;border-radius:999px;padding:8px 14px;cursor:pointer}
.fs-g{color:#1F6B4A;font-weight:800}
.fs-mapc{grid-column:span 1}
.fs-map{height:420px;border-radius:14px;overflow:hidden;background:#E7F5EC}
.fs-leg{color:#4A5D70}.fs-leg i{border-color:#fff;box-shadow:0 0 0 1px #CFE8D8}
.rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.rules div{background:#F3FAF5;border-radius:12px;padding:12px}.rules b{color:#0F3D2E;font-size:15px}.rules p{font-size:13px;color:#4A5D70;margin:6px 0}.rules a{color:#1F6B4A;font-weight:800;font-size:13px}
.fsp .dvp-media{position:relative;background:#0F3D2E;min-height:320px}
.fsp .dvp-media img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
.fsp-cr{position:absolute;left:8px;bottom:8px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:6px;max-width:90%}
.fsp-sci{font-style:italic;color:#A9D3EA;font-size:13px;margin:-8px 0 10px}
.fsp-tip{font-size:14px;color:#E6F4FC}
.dvp-info h4{color:#C6F432;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin:14px 0 8px}
.fsp-lures{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.fsp-lures div{background:rgba(255,255,255,.95);border-radius:12px;padding:6px;text-align:center}
.fsp-lures span{display:block;font-size:12px;font-weight:700;color:#0F3D2E;margin-top:2px}
@media (max-width:900px){.week{grid-template-columns:repeat(4,minmax(0,1fr))}.fs-map{height:340px}}
/* marine life with photos */
.lf-grid-p{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.lfp{display:flex;flex-direction:column;padding:0;overflow:hidden;text-align:left;cursor:pointer;font-family:inherit;color:inherit;transition:transform .15s,border-color .15s}
.lfp:hover,.lfp:focus-visible{transform:translateY(-2px);border-color:#C6F432}
.lf-img{position:relative;height:130px;background:linear-gradient(160deg,#0A5C8F,#03263F);display:flex;align-items:center;justify-content:center}
.lf-img img{width:100%;height:100%;object-fit:cover;display:block}
.lf-img .lf-e{font-size:48px}
.lf-cnt{position:absolute;right:8px;bottom:8px;background:rgba(3,32,54,.85);color:#C6F432;font-size:11px;font-weight:800;border-radius:999px;padding:3px 9px}
.lf-bd{padding:10px 12px 12px}.lf-bd b{display:block;color:#fff;font-size:15px}.lf-bd small{font-size:11.5px;color:#A9D3EA}
.lf-sp{font-size:12px;color:#E6F4FC;margin-top:5px;line-height:1.35}
.lf-warn .lf-img{background:linear-gradient(160deg,#7A2A2A,#2A0E0E)}
.lf-big{font-size:90px;background:linear-gradient(160deg,#0A5C8F,#03263F)}
.lfp-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 26px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));color:#fff}
.lfp-cap b{display:block;font-size:18px}.lfp-cap i{font-size:13px;opacity:.85}
.lfp-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.lfp-th{border:2px solid transparent;background:rgba(255,255,255,.06);border-radius:10px;padding:0;overflow:hidden;cursor:pointer;color:#E6F4FC;font-family:inherit;text-align:center}
.lfp-th.on{border-color:#C6F432}
.lfp-th img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.lfp-th span{display:block;font-size:10.5px;padding:4px 3px;line-height:1.2}
/* famous wrecks & dive spots */
.fam{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.famc{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;cursor:pointer;font-family:inherit;color:inherit;background:rgba(255,255,255,.07);border:1px solid rgba(159,227,255,.2);border-radius:14px;transition:transform .15s,border-color .15s}
.famc:hover,.famc:focus-visible{transform:translateY(-2px);border-color:#FF7AC6}
.fam-img{position:relative;height:150px;background:linear-gradient(160deg,#21507A,#03263F);display:flex;align-items:center;justify-content:center;font-size:52px}
.fam-img img{width:100%;height:100%;object-fit:cover;display:block}
.fam-img em{position:absolute;left:8px;top:8px;font-style:normal;background:#FF7AC6;color:#2A0820;font-size:11px;font-weight:800;border-radius:999px;padding:3px 9px}
.fam-b{padding:10px 12px 12px}.fam-b b{display:block;color:#fff;font-size:15px}.fam-b small{font-size:12px;color:#A9D3EA}.fam-b p{font-size:12.5px;color:#C7E3F2;margin:6px 0 0}
.dvp-photo{width:100%;height:170px;object-fit:cover;border-radius:12px;margin-bottom:12px;display:block}
.dvp-ex{font-size:13.5px;color:#C7E3F2;margin:-6px 0 12px}
/* surf report */
.seg-s{background:#E1F2FC}.seg-s button{color:#0B4F7C}.seg-s button.on{background:#0E86D4;color:#fff}
.sf-now{background:linear-gradient(135deg,#F3F9FE,#FFFFFF)}
.sfn{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:20px;align-items:center}
.sfn-main small{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#0E6BA8;font-weight:800}
.sfn-h{font-size:48px;font-weight:900;color:#0B2F4A;line-height:1.05;letter-spacing:-1px;margin:4px 0 8px}
.sfn-r{display:inline-block;color:#1A1A1A;font-weight:900;font-size:15px;letter-spacing:.5px;border-radius:999px;padding:6px 14px}
.sfn-bar{display:flex;gap:4px;margin-top:12px}.sfn-bar i{flex:1;height:8px;border-radius:4px}
.sfn-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sfn-kv div{background:#EEF7FD;border-radius:12px;padding:10px 12px}
.sfn-kv small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#0E6BA8;font-weight:800}.sfn-kv b{font-size:14.5px;color:#0B2F4A}
.sf-alert{margin-top:12px;background:#0B2F4A;color:#E6F6FF;border-radius:12px;padding:10px 14px;font-size:14px}.sf-alert b{color:#FFC94A}
.sfd-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.sfd{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid #D6ECF8;background:#F7FBFE;border-radius:14px;padding:10px 6px;cursor:pointer;font-family:inherit;min-width:0}
.sfd.on{border-color:#0E86D4;box-shadow:0 0 0 2px #0E86D4 inset}
.sfd b{font-size:13px;color:#0B2F4A}.sfd-h{font-size:13px;font-weight:800;color:#0B4F7C;white-space:nowrap}
.sfd-bars{display:flex;align-items:flex-end;gap:3px;height:60px;width:100%;padding:0 4px}.sfd-bars i{flex:1;border-radius:3px 3px 0 0}
.sfd-r{font-size:9.5px;font-weight:900;border-radius:999px;padding:3px 7px;color:#1A1A1A;text-align:center;line-height:1.15}
.swt{display:grid;gap:8px}
.swr{display:grid;grid-template-columns:40px minmax(0,1.6fr) repeat(3,minmax(0,.7fr)) minmax(0,1.2fr);gap:10px;align-items:center;background:#F3F9FE;border-radius:12px;padding:10px 12px}
.swr b{display:block;color:#0B2F4A;font-size:14.5px}.swr small{font-size:11.5px;color:#4A6478}
.swr-v{text-align:center}
.swr-p div{height:8px;background:#DCEEF9;border-radius:4px;overflow:hidden}.swr-p i{display:block;height:100%;background:linear-gradient(90deg,#38C6D9,#0E86D4)}
.sf-kv div{background:#EEF7FD}.sf-kv small{color:#0E6BA8}.sf-kv b{color:#0B2F4A}
.sf-windy{height:460px;border-radius:14px;overflow:hidden;background:#DCEEF9}.sf-windy iframe{width:100%;height:100%;border:0;display:block}
.sfnb{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.sfnb-i{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;background:#F3F9FE;border:1px solid #D6ECF8;border-radius:12px;padding:10px 12px;text-decoration:none;color:inherit}
.sfnb-i:hover{border-color:#0E86D4}.sfnb-r{width:10px;height:36px;border-radius:5px}
.sfnb-i b{display:block;color:#0B2F4A;font-size:14px}.sfnb-i small{font-size:12px;color:#4A6478}.sfnb-i em{font-style:normal;font-weight:800;color:#0B4F7C;white-space:nowrap}
.sp-surf .dv-site{background:#F3F9FE;color:#4A6478}.sp-surf .dv-site b{color:#0B2F4A}.sp-surf .dv-site em{color:#0E86D4}.sp-surf .dv-site:hover{border-color:#0E86D4;background:#E3F2FC}
.sf-rules div{background:#F3F9FE}.sf-rules b{color:#0B2F4A}
@media (max-width:900px){.sfn{grid-template-columns:1fr}.sfn-kv{grid-template-columns:repeat(2,minmax(0,1fr))}.sfd-row{grid-template-columns:repeat(4,minmax(0,1fr))}.swr{grid-template-columns:36px 1fr repeat(3,auto)}.swr-p{grid-column:1/-1}.sf-windy{height:380px}}

/* surf: ocean & sun look */
.sp-surf{background:linear-gradient(180deg,#E6F5FF 0%,#F3FAFF 45%,#FFFFFF 100%)}
.sf-now{background:linear-gradient(135deg,#0A3D62 0%,#0E7FB8 60%,#38C6D9 100%);border:0;color:#fff;position:relative;overflow:hidden}
.sf-now::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#FFD966 0%,#FFC94A 45%,rgba(255,201,74,0) 70%);opacity:.55;pointer-events:none}
.sf-now .sfn-main small{color:#BFE9FF}.sf-now .sfn-h{color:#fff}
.sf-now .sfn-kv div{background:rgba(255,255,255,.14);backdrop-filter:blur(2px)}.sf-now .sfn-kv small{color:#BFE9FF}.sf-now .sfn-kv b{color:#fff}
.sf-now .sfn-bar i[style*="outline"]{outline-color:#fff!important}
.sf-now .muted{color:#D6F1FF!important}
.sf-now .sf-alert{background:#FFC94A;color:#0B2F4A}.sf-now .sf-alert b{color:#0B2F4A}
.sf-now h3{color:#fff}
/* surf v3: photo banner, live bar, wave chart, sessions */
.fch-surf{background:linear-gradient(90deg,#06263F 0%,#08304F 48%,rgba(8,48,79,.55) 62%,rgba(8,48,79,0) 78%),url(/assets/img/surf-hero.jpg) right center/auto 100% no-repeat,#08304F;min-height:270px}
.fch-surf .fch-art{display:none}
.fch-surf h1{font-size:62px;font-weight:900;text-transform:uppercase;letter-spacing:-1.5px}
.fch-surf .fch-stats div{background:rgba(6,38,63,.55);backdrop-filter:blur(3px)}
@media (max-width:640px){.fch-surf{background:linear-gradient(180deg,rgba(6,38,63,.75),rgba(6,38,63,.92)),url(/assets/img/surf-hero.jpg) center/cover no-repeat}.fch-surf h1{font-size:36px}}
.sf-now{background:linear-gradient(160deg,#062B47 0%,#0A4F7E 55%,#0E7FB8 100%)!important;padding:18px}
.sf-now::after{display:none}
.sfn-top{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:stretch}
.sfn-bar2{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;background:rgba(3,20,36,.45);border:1px solid rgba(127,231,255,.18);border-radius:16px;padding:14px 18px}
.sfn-lab{font-size:12px;font-weight:900;letter-spacing:1px;color:#C6F432;text-transform:uppercase;width:100%}
.sfm{display:flex;gap:10px;align-items:center}.sfm-i{width:30px;height:30px;color:#7FE7FF;flex:none}.sfm-i svg{width:100%;height:100%}
.sfm b{display:block;color:#fff;font-size:19px;line-height:1.1}.sfm small{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#A9D3EA;font-weight:700}
.sfn-rate{background:#C6F432;color:#0B2F4A;border-radius:16px;padding:14px 20px;display:flex;gap:12px;align-items:center;min-width:230px}
.sfn-rate svg{width:48px;height:48px}.sfn-rate small{font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.sfn-sc{font-size:18px;font-weight:800}.sfn-sc b{font-size:38px;font-weight:900;letter-spacing:-1px}
.sfn-rate span{font-size:14px;font-weight:900;letter-spacing:.5px}
.sfn-mid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:14px;align-items:stretch}
.sfn-scale{position:relative;background:linear-gradient(180deg,#0B5F95 0%,#0A4F7E 100%);border-radius:16px;overflow:hidden}
.wscale{width:100%;display:block}.wscale .ref{font-size:11px;fill:#D6F1FF;font-weight:700}.wscale .hl{font-size:22px;fill:#FFC94A;font-weight:900}
.sfn-body{position:absolute;left:16px;top:12px}.sfn-body b{display:block;color:#fff;font-size:20px}.sfn-body span{font-size:13px;color:#BFE9FF}
.sf-now .sfn-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-now .sfn-kv div{background:rgba(255,255,255,.1)}
.sf-now .sfn-bar{margin-top:6px}
.sfw .ax{font-size:11px;fill:#5A6B7C}.sfw .pk{font-size:13px;font-weight:900;fill:#0B2F4A}.sfw .day{font-size:12px;font-weight:800;fill:#0B2F4A}.sfw .now{font-size:12px;font-weight:900;fill:#7AA80F}.sfw .dl2{font-size:10px;font-weight:700;fill:#0B2F4A}
.tch-leg .dash,.legend .dash{display:inline-block;width:18px;height:0;border-top:2px dashed;vertical-align:middle;margin-right:5px;background:none!important}
.tch-leg .rib i{display:inline-block;width:12px;height:6px;margin:0 1px 0 0;border-radius:1px}
.sfc{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#0A6EA8,#062B47);max-width:340px;margin:0 auto}
.sfc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sfc-o{position:absolute;inset:0;width:100%;height:100%}.sfc-o .cd{font-size:13px;font-weight:900;fill:#fff;paint-order:stroke;stroke:#062B47;stroke-width:3}.sfc-o .cl{font-size:9px;font-weight:900;paint-order:stroke;stroke:#062B47;stroke-width:3}
.sess{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ses{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid #D6ECF8;border-radius:16px;overflow:hidden;background:#fff;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s}
.ses:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,61,98,.15)}
.ses-art{position:relative}.sart{width:100%;display:block}
.ses-day{position:absolute;left:10px;top:8px;color:#fff;font-weight:900;font-size:13px;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.ses-r{position:absolute;left:10px;bottom:8px;font-size:11px;font-weight:900;border-radius:6px;padding:3px 8px;color:#0B2F4A}
.ses-b{padding:10px 12px 12px}.ses-b>b{font-size:15px;color:#0B2F4A}
.ses-m{display:flex;gap:14px;margin-top:6px;font-size:13px;color:#3E5C74;font-weight:700}.ses-m span{display:inline-flex;gap:5px;align-items:center}.ses-m svg{width:18px;height:18px;color:#0E86D4}
.stars{display:block;margin-top:6px;font-size:17px;letter-spacing:2px}.stars .f{color:#2FBF5B}.stars .h{color:#9BD33A;opacity:.8}.stars .e{color:#D6DEE5}
.tw{display:grid;grid-template-columns:1fr 1fr;gap:18px}.tw .tl{font-size:12px;fill:#0B2F4A}.tw .ax{font-size:10.5px;fill:#5A6B7C}.tw .day{font-size:12px;font-weight:800;fill:#0B2F4A}
@media (max-width:900px){.sfn-top,.sfn-mid,.tw{grid-template-columns:1fr}.sess{grid-template-columns:repeat(2,minmax(0,1fr))}.sfn-rate{min-width:0}.sfm b{font-size:16px}}
@media (max-width:520px){.sess{grid-template-columns:1fr}}
.fch-surf .fch-txt{max-width:66%}.fch-surf h1{font-size:clamp(34px,4.6vw,62px);line-height:1}
@media (max-width:640px){.fch-surf .fch-txt{max-width:none}}
@media (max-width:900px){.sfn-body{position:static;padding:12px 14px 0}.sfn-body b{font-size:18px}.sp-surf{padding:14px}.sf-card{padding:12px}}
/* SUP paddle report */
.su-full{grid-column:1/-1}
.seg-u{background:#DDF3F6}.seg-u button{color:#075E6B}.seg-u button.on{background:#0A6E7E;color:#fff}
.su-now{background:linear-gradient(160deg,#043B45 0%,#06606F 55%,#0FA3B1 100%)!important}
.su-rate{background:#C6F432}.su-rate svg{width:46px;height:46px}
.su-scene{background:#E6F8FB}.suscene{width:100%;display:block}.suscene .sus-l{font-size:14px;font-weight:900;fill:#05313A}
.su-best{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.su-best span{font-size:12.5px;font-weight:800;border-radius:999px;padding:6px 10px}
.su-best .ok{background:#C6F432;color:#05313A}.su-best .no{background:rgba(255,255,255,.1);color:#A7D7DE;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.su-alert{background:#FFC94A!important;color:#05313A!important}.su-alert b{color:#05313A!important}
.su-tip{font-size:14px;color:#2C4A55;text-align:center;margin:8px 0 10px}
.su-tbl{display:grid;gap:6px}.su-tbl div{display:flex;justify-content:space-between;background:#F0FAFB;border-radius:10px;padding:8px 12px;font-size:14px}
.su-tbl .su-th{background:none;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#0A6E7E;font-weight:800;padding:0 12px}
.su-tbl b{color:#05313A}
button.dayrow{width:100%;border:1px solid transparent;background:none;border-radius:10px;padding:4px;font-family:inherit;text-align:left;cursor:pointer;color:inherit}
button.dayrow.on{border-color:#0A6E7E;background:#F0FAFB}
.su-cw{font-size:12px;color:#4A5D70;margin-top:3px}
.su2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.su-nb{grid-template-columns:1fr}.su-nb .sfnb-i{background:#F0FAFB;border-color:#CFEAEE}.su-nb .sfnb-i b{color:#05313A}.su-nb .sfnb-i em{color:#0A6E7E}
.su-dw{background:linear-gradient(90deg,#E6F8FB,#F7FDFE);border:1px solid #CFEAEE;border-radius:12px;padding:10px 12px;margin-bottom:8px}
.su-dw-r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.su-dw-r b{color:#05313A}.su-dw-r span{color:#0A6E7E;font-weight:800;font-size:13px}.su-dw small{color:#4A5D70;font-size:12px}
.su-kv div{background:#F0FAFB}.su-kv small{color:#0A6E7E}.su-kv b{color:#05313A}
.su-gear{display:grid;grid-template-columns:1fr;gap:12px}
.su-tool{background:#F0FAFB}.su-tool label{color:#2C4A55}.su-tool label b{color:#05313A}.su-tool input[type=range]{accent-color:#0A6E7E}
.su-check h4{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#0A6E7E;margin:0 0 6px}.su-check ul{margin:0;padding-left:18px;font-size:13.5px;color:#2C4A55;line-height:1.6}
.sp-sup .dv-site{background:#F0FAFB;color:#4A5D70}.sp-sup .dv-site b{color:#05313A}.sp-sup .dv-site em{color:#0A6E7E}.sp-sup .dv-site:hover{border-color:#0A6E7E}
.su-rules div{background:#F0FAFB}.su-rules b{color:#05313A}
@media (max-width:900px){.su2{grid-template-columns:1fr}}