:root {
  color-scheme: dark;
  --ink: #f5fbff;
  --muted: #9bb3bf;
  --deep: #061721;
  --panel: rgba(12, 38, 50, 0.82);
  --line: rgba(183, 224, 236, 0.13);
  --aqua: #55e6c5;
  --blue: #5bbfea;
  --yellow: #ffd35a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: linear-gradient(160deg, #061a27 0%, #071d2b 45%, #092635 100%);
  font-family: "DM Sans", system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.sky-glow { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.sky-glow-one { width: 500px; height: 500px; right: -180px; top: -180px; background: rgba(46, 176, 190, .16); }
.sky-glow-two { width: 450px; height: 450px; left: -240px; top: 40%; background: rgba(34, 121, 161, .12); }

.shell { position: relative; width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 42px; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 58px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(85, 230, 197, .3); border-radius: 13px; background: rgba(85, 230, 197, .09); }
.brand-mark svg { width: 29px; fill: rgba(85, 230, 197, .12); stroke: var(--aqua); stroke-width: 2; }
.top-actions { display: flex; align-items: center; gap: 10px; }
button { font: inherit; }
.icon-button, .refresh-button { color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,.035); cursor: pointer; transition: .2s ease; }
.icon-button:hover, .refresh-button:hover { border-color: rgba(85,230,197,.45); background: rgba(85,230,197,.08); transform: translateY(-1px); }
.icon-button { width: 42px; height: 42px; border-radius: 50%; font-weight: 700; }
.refresh-button { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 22px; font-weight: 600; }
.refresh-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.refresh-button.loading svg { animation: spin 1s linear infinite; }

.intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.eyebrow { margin: 0 0 8px; color: var(--aqua); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: Manrope, sans-serif; letter-spacing: -.04em; }
h1 { font-size: clamp(2.5rem, 7vw, 5.4rem); line-height: .98; }
h2 { font-size: 1.55rem; }
.updated { margin: 15px 0 0; color: var(--muted); }

.notice { margin: 0 0 18px; padding: 13px 16px; border: 1px solid rgba(255,211,90,.25); border-radius: 12px; color: #ffe89b; background: rgba(255,211,90,.07); }
.hidden { display: none; }

.card { border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(16,49,63,.87), rgba(8,30,41,.9)); box-shadow: 0 24px 70px rgba(0,0,0,.15); backdrop-filter: blur(14px); }
.current-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 16px; }
.current-card { min-height: 300px; padding: 35px; display: flex; flex-direction: column; justify-content: space-between; }
.current-main { display: flex; align-items: center; gap: 28px; }
.temperature { font-family: Manrope, sans-serif; font-size: clamp(4.5rem, 10vw, 8rem); font-weight: 700; line-height: .85; letter-spacing: -.08em; }
.condition { margin: 18px 0 3px; font-size: 1.2rem; font-weight: 600; }
.feels { margin: 0; color: var(--muted); }
.current-details { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 28px; margin-top: 26px; border-top: 1px solid var(--line); }
.metric { padding: 0 22px; border-right: 1px solid var(--line); }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .78rem; }
.metric strong { font-family: Manrope, sans-serif; font-size: 1rem; }
.weather-icon { position: relative; flex: 0 0 auto; width: 68px; height: 58px; }
.large-icon { width: 110px; height: 95px; }
.weather-icon .sun { position: absolute; width: 42%; aspect-ratio: 1; right: 4%; top: 0; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 28px rgba(255,211,90,.25); }
.weather-icon .cloud { position: absolute; width: 75%; height: 40%; left: 0; bottom: 15%; border-radius: 40px; background: #d5e8ee; }
.weather-icon .cloud::before, .weather-icon .cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.weather-icon .cloud::before { width: 44%; aspect-ratio:1; left: 14%; bottom: 25%; }
.weather-icon .cloud::after { width: 35%; aspect-ratio:1; right: 12%; bottom: 22%; }
.weather-icon .rain { position:absolute; left: 15%; bottom: -2%; width: 56%; height: 20%; background: repeating-linear-gradient(110deg, transparent 0 9px, #5bbfea 10px 13px, transparent 14px 20px); }
.weather-icon .moon { position:absolute; width:42%; aspect-ratio:1; right:7%; top:0; border-radius:50%; background:#dcecff; box-shadow:-8px 5px 0 0 #173645 inset; }

.source-card { padding: 30px; display: flex; flex-direction: column; }
.source-top { display:flex; align-items:center; justify-content:space-between; margin-bottom: 38px; }
.source-badge { display:grid; place-items:center; width:58px; height:38px; border-radius:8px; color:#082638; background:#e7f7fb; font-family:Manrope,sans-serif; font-weight:800; }
.live-dot { color:var(--muted); font-size:.78rem; }
.live-dot i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 5px rgba(85,230,197,.08); }
.source-card p { color:var(--muted); line-height:1.6; }
.text-link { margin-top:auto; color:var(--aqua); text-decoration:none; font-weight:700; }
.text-link span { margin-left:5px; }

.forecast-section { padding: 64px 0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:20px; }
.source-pill { padding:7px 11px; border:1px solid var(--line); border-radius:20px; color:var(--muted); font-size:.72rem; }
.forecast-grid { display:grid; grid-template-columns:repeat(7, minmax(145px,1fr)); gap:10px; overflow-x:auto; padding-bottom:8px; }
.forecast-day { min-width:145px; padding:20px 16px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); transition:.2s ease; }
.forecast-day:first-child { border-color:rgba(85,230,197,.35); background:rgba(85,230,197,.065); }
.forecast-day:hover { transform:translateY(-3px); background:rgba(255,255,255,.05); }
.day-name { margin:0 0 4px; font-weight:700; }
.day-date { color:var(--muted); font-size:.75rem; }
.forecast-day .weather-icon { margin:20px 0 12px; transform:scale(.72); transform-origin:left center; }
.forecast-description { min-height:2.8em; margin:0 0 14px; color:var(--ink); font-size:.78rem; font-weight:600; line-height:1.4; }
.temps { display:flex; align-items:baseline; gap:8px; font-family:Manrope,sans-serif; }
.temps strong { font-size:1.35rem; }
.temps span { color:var(--muted); }
.rain-forecast { margin-top:12px; }
.rain-chance, .rain-amount { margin:0; font-size:.75rem; }
.rain-chance { color:var(--blue); }
.rain-amount { margin-top:3px; color:var(--muted); font-weight:600; }

.astronomy-section { padding:0 0 64px; }
.astronomy-grid { display:grid; grid-template-columns:repeat(7, minmax(180px, 1fr)); gap:10px; overflow-x:auto; padding-bottom:8px; }
.astronomy-day { min-width:180px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.astronomy-day:first-child { border-color:rgba(85,230,197,.35); background:rgba(85,230,197,.055); }
.astro-day-heading { display:flex; align-items:baseline; justify-content:space-between; padding:15px 16px; border-bottom:1px solid var(--line); }
.astro-day-heading span { color:var(--muted); font-size:.72rem; }
.astro-body { position:relative; padding:15px 16px; }
.moon-body { border-top:1px solid var(--line); }
.astro-object { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-family:Manrope,sans-serif; font-size:.82rem; }
.astro-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#ffd35a; background:rgba(255,211,90,.09); font-size:1.05rem; }
.moon-icon { color:#dcecff; background:rgba(220,236,255,.08); }
.astro-body dl { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }
.astro-body dl div { min-width:0; }
.astro-body dt { color:var(--muted); font-size:.68rem; }
.astro-body dd { margin:3px 0 0; font-family:Manrope,sans-serif; font-size:.82rem; font-weight:700; }
.moon-phase { margin:12px 0 0; color:var(--blue); font-size:.7rem; font-weight:700; }
.astronomy-note { margin:7px 0 0; color:var(--muted); font-size:.72rem; }
.loading-card { display:grid; place-items:center; min-height:210px; padding:24px; color:var(--muted); text-align:center; }

.radar-section { margin-bottom:16px; padding:30px; }
.radar-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.radar-heading p:last-child { max-width:680px; margin:9px 0 0; color:var(--muted); line-height:1.5; }
.radar-refresh { display:flex; align-items:center; flex:0 0 auto; gap:8px; min-height:42px; padding:0 15px; border:1px solid var(--line); border-radius:22px; color:var(--ink); background:rgba(255,255,255,.035); cursor:pointer; font-weight:700; }
.radar-refresh:hover { border-color:rgba(85,230,197,.45); background:rgba(85,230,197,.08); }
.radar-refresh svg { width:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.radar-refresh.loading svg { animation:spin 1s linear infinite; }
.radar-frame { position:relative; display:grid; place-items:center; min-height:360px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#e8edf0; }
.radar-stack { position:relative; width:min(100%, 780px); aspect-ratio:512 / 557; background:#b9d3e2; }
.radar-layer { position:absolute; inset:0 auto auto 0; display:block; width:100%; height:auto; pointer-events:none; }
.radar-rain-layer { z-index:2; }
.radar-overlay { z-index:3; }
.radar-legend { z-index:4; }
.radar-loading { position:absolute; inset:auto 16px 16px; padding:9px 12px; border-radius:9px; color:#fff; background:rgba(3,16,24,.78); font-size:.76rem; text-align:center; backdrop-filter:blur(8px); }
.radar-frame-time { position:absolute; top:14px; left:14px; padding:7px 10px; border-radius:8px; color:#fff; background:rgba(3,16,24,.72); font-size:.75rem; font-weight:700; backdrop-filter:blur(8px); }
.radar-controls { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:15px 4px 2px; }
.radar-play { min-width:72px; padding:8px 14px; border:1px solid rgba(85,230,197,.35); border-radius:9px; color:#062530; background:var(--aqua); cursor:pointer; font-weight:800; }
.radar-controls input { width:100%; accent-color:var(--aqua); cursor:pointer; }
.radar-controls span { color:var(--muted); font-size:.75rem; white-space:nowrap; }
.radar-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:14px; color:var(--muted); font-size:.75rem; }
.radar-footer p { margin:0; }
.radar-footer a { color:var(--aqua); text-decoration:none; font-weight:700; }

.seaway-wind-section { margin-bottom:16px; padding:30px; }
.seaway-wind-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }
.seaway-wind-heading p:last-child { max-width:680px; margin:9px 0 0; color:var(--muted); line-height:1.5; }
.seaway-live { display:grid; grid-template-columns:1.2fr repeat(3, 1fr); margin-bottom:18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.seaway-direction, .seaway-metric { min-height:108px; padding:20px 22px; border-right:1px solid var(--line); }
.seaway-direction { display:flex; align-items:center; gap:18px; }
.seaway-metric { display:flex; flex-direction:column; justify-content:center; }
.seaway-live > :last-child { border-right:0; }
.wind-arrow { display:grid; place-items:center; width:52px; height:52px; border:1px solid rgba(85,230,197,.28); border-radius:50%; color:var(--aqua); background:rgba(85,230,197,.07); font-size:1.8rem; transition:transform .3s ease; }
.seaway-direction strong, .seaway-metric strong { margin-top:5px; font-family:Manrope,sans-serif; font-size:1.45rem; }
.seaway-metric small { margin-top:3px; color:var(--muted); }
.gust-metric strong { color:#ffd77a; }
.wind-history-panel { padding:22px; border-radius:16px; background:rgba(3,19,28,.48); }
.wind-history-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.wind-history-top h3 { margin:0; font-family:Manrope,sans-serif; font-size:1rem; }
.wind-history-top p { margin:6px 0 0; color:var(--muted); font-size:.78rem; }
.history-range { display:flex; flex:0 0 auto; gap:4px; padding:3px; border:1px solid var(--line); border-radius:10px; }
.history-range button { min-width:48px; padding:7px 10px; border:0; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-weight:700; }
.history-range button.active { color:#062530; background:var(--aqua); }
.wind-chart-wrap { position:relative; min-height:270px; margin-top:14px; overflow:hidden; }
.wind-chart { display:block; width:100%; min-width:620px; height:auto; }
.chart-grid line { stroke:rgba(183,224,236,.12); stroke-width:1; }
.chart-grid text, .chart-times text, .chart-unit, .direction-label { fill:#829ca8; font:11px "DM Sans",sans-serif; }
.chart-grid text { text-anchor:end; }
.chart-times text { text-anchor:middle; }
.chart-directions text { text-anchor:middle; }
.direction-arrow { fill:var(--blue); font:700 18px "DM Sans",sans-serif; transform-box:fill-box; transform-origin:center; }
.direction-label { font-size:9px; font-weight:700; }
.speed-line, .gust-line { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.speed-line { stroke:var(--aqua); stroke-width:3; }
.gust-line { stroke:#ffd77a; stroke-width:2; stroke-dasharray:5 7; opacity:.9; }
.latest-speed { fill:var(--aqua); stroke:#082833; stroke-width:3; }
.chart-message { position:absolute; inset:0; display:grid; place-items:center; margin:0; color:var(--muted); }
.wind-history-footer { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; }
.wind-history-footer p { margin:0; }
.wind-history-footer div { display:flex; gap:18px; }
.wind-history-footer a { color:var(--aqua); text-decoration:none; white-space:nowrap; }

.tide-section { margin-bottom:16px; padding:30px; }
.tide-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.tide-heading p:last-child { max-width:680px; margin:9px 0 0; color:var(--muted); line-height:1.5; }
.next-tides { display:grid; grid-template-columns:repeat(4, 1fr); margin-bottom:18px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.next-tide { display:flex; flex-direction:column; justify-content:center; min-height:104px; padding:18px 20px; border-right:1px solid var(--line); }
.next-tide:last-child { border-right:0; }
.next-tide span { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.next-tide strong { margin-top:5px; font-family:Manrope,sans-serif; font-size:1.35rem; }
.next-tide small { margin-top:3px; color:var(--blue); }
.high-tide strong { color:var(--aqua); }
.low-tide strong { color:#9ecbe0; }
.tide-grid { display:grid; grid-template-columns:repeat(7, minmax(170px, 1fr)); gap:10px; overflow-x:auto; padding-bottom:8px; }
.tide-day { min-width:170px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:rgba(3,19,28,.34); }
.tide-day:first-child { border-color:rgba(85,230,197,.35); }
.tide-day-heading { display:flex; justify-content:space-between; padding:14px 15px; border-bottom:1px solid var(--line); }
.tide-day-heading span { color:var(--muted); font-size:.72rem; }
.tide-events { padding:7px 15px; }
.tide-event { display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:9px 0; border-bottom:1px solid rgba(183,224,236,.08); }
.tide-event:last-child { border-bottom:0; }
.tide-event strong { font-family:Manrope,sans-serif; font-size:.8rem; text-align:right; }
.tide-event small { grid-column:2; color:var(--muted); text-align:right; }
.tide-type { grid-row:1 / 3; align-self:center; color:var(--muted); font-size:.75rem; font-weight:700; }
.tide-type.high { color:var(--aqua); }
.tide-type.low { color:var(--blue); }
.tide-footer { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-top:10px; color:var(--muted); font-size:.72rem; }
.tide-footer p { margin:0; }
.tide-footer a { color:var(--aqua); text-decoration:none; white-space:nowrap; }

.wave-section { margin-bottom:16px; padding:30px; }
.wave-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.wave-heading p:last-child { max-width:680px; margin:9px 0 0; color:var(--muted); line-height:1.5; }
.wave-metrics { display:grid; grid-template-columns:1.35fr repeat(4, 1fr); overflow:hidden; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.wave-primary, .wave-metric { display:flex; flex-direction:column; justify-content:center; min-height:120px; padding:20px; border-right:1px solid var(--line); }
.wave-metrics > :last-child { border-right:0; }
.wave-primary strong { margin-top:5px; color:var(--aqua); font-family:Manrope,sans-serif; font-size:2.1rem; letter-spacing:-.05em; }
.wave-primary small, .wave-metric small { margin-top:4px; color:var(--muted); font-size:.68rem; }
.wave-metric strong { display:block; margin-top:5px; font-family:Manrope,sans-serif; font-size:1.2rem; }
.wave-direction-metric { flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; }
.wave-direction-arrow { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border:1px solid rgba(91,191,234,.3); border-radius:50%; color:var(--blue); background:rgba(91,191,234,.08); font-size:1.25rem; transition:transform .3s ease; }
.wave-footer { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-top:14px; color:var(--muted); font-size:.72rem; }
.wave-footer p { margin:0; }
.wave-footer a { color:var(--aqua); text-decoration:none; white-space:nowrap; }

.reports-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.report-card { display:flex; flex-direction:column; min-width:0; padding:28px 30px 24px; }
.report-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.surf-observation { display:grid; grid-template-columns:1.25fr 1fr 1fr; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); }
.surf-report-primary, .surf-report-metric { display:flex; flex-direction:column; justify-content:center; min-height:104px; padding:17px; border-right:1px solid var(--line); }
.surf-observation > :last-child { border-right:0; }
.surf-report-primary strong { color:var(--aqua); font-family:Manrope,sans-serif; font-size:1.7rem; }
.surf-report-primary small { margin-top:3px; color:var(--muted); text-transform:capitalize; }
.surf-report-metric strong { font-family:Manrope,sans-serif; font-size:1rem; }
.report-copy, .fishing-report-copy { color:#c8dce4; font-size:.86rem; line-height:1.65; }
.report-copy { margin:18px 0; }
.fishing-report-copy { max-height:315px; overflow:auto; padding-right:8px; }
.fishing-report-copy p { margin:0 0 12px; }
.fishing-report-copy p:last-child { margin-bottom:0; }
.report-footer { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:.7rem; }
.report-footer p { margin:0; }
.report-footer a { flex:0 0 auto; color:var(--aqua); text-decoration:none; white-space:nowrap; }

.windguru-section { margin-bottom:16px; padding:28px 30px 24px; overflow:hidden; }
.windguru-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; margin-bottom:24px; }
.windguru-heading h2 { max-width:650px; }
.windguru-heading p:last-child { max-width:700px; margin:10px 0 0; color:var(--muted); line-height:1.55; }
.windguru-widget { min-height:280px; overflow-x:auto; border-radius:14px; background:#fff; }
.windguru-widget iframe { min-width:680px; border-radius:14px; }

.surf-cam-section { margin-bottom:16px; padding:28px 30px 24px; }
.surf-cam-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.surf-cam-heading p:last-child { margin:9px 0 0; color:var(--muted); }
.cam-switch { display:flex; flex:0 0 auto; gap:5px; padding:4px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.cam-option { padding:8px 14px; border:0; border-radius:8px; color:var(--muted); background:transparent; cursor:pointer; font-weight:700; }
.cam-option.active { color:#062530; background:var(--aqua); }
.surf-video-wrap { position:relative; overflow:hidden; aspect-ratio:16 / 9; border-radius:16px; background:#031018; }
.surf-video-wrap video { display:block; width:100%; height:100%; object-fit:cover; }
.camera-status { position:absolute; top:14px; left:14px; padding:7px 10px; border-radius:8px; color:#fff; background:rgba(3,16,24,.72); font-size:.75rem; font-weight:700; backdrop-filter:blur(8px); pointer-events:none; }
.surf-cam-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:15px; }
.surf-cam-footer p { margin:0; color:var(--muted); font-size:.72rem; }
.surf-cam-footer a { flex:0 0 auto; color:var(--aqua); text-decoration:none; font-size:.8rem; font-weight:700; }

footer { display:flex; justify-content:space-between; gap:20px; padding-top:32px; color:#718c99; font-size:.72rem; }
footer a { color:#9bb3bf; }

@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width: 800px) {
  .shell { width:min(100% - 28px, 1160px); }
  .topbar { padding-bottom:40px; }
  .intro { align-items:start; flex-direction:column; }
  .current-grid { grid-template-columns:1fr; }
  .current-card { padding:26px; }
  .source-card { min-height:230px; }
  .radar-heading { flex-direction:column; }
  .seaway-live { grid-template-columns:repeat(2, 1fr); }
  .seaway-live > :nth-child(2) { border-right:0; }
  .seaway-live > :nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .next-tides { grid-template-columns:repeat(2, 1fr); }
  .next-tide:nth-child(2) { border-right:0; }
  .next-tide:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .wave-metrics { grid-template-columns:repeat(2, 1fr); }
  .wave-metrics > * { border-bottom:1px solid var(--line); }
  .wave-metrics > :nth-child(even) { border-right:0; }
  .wave-metrics > :nth-child(5) { grid-column:1 / -1; border-right:0; border-bottom:0; }
  .reports-grid { grid-template-columns:1fr; }
  .windguru-heading { flex-direction:column; gap:16px; }
  .surf-cam-heading { flex-direction:column; }
  footer { flex-direction:column; }
}
@media (max-width: 520px) {
  .refresh-button span { display:none; }
  .refresh-button { width:42px; padding:0; justify-content:center; }
  h1 { font-size:2.7rem; }
  .current-main { align-items:flex-start; gap:12px; }
  .large-icon { width:76px; height:70px; }
  .temperature { font-size:4.7rem; }
  .current-details { gap:12px; }
  .metric { padding:0 10px; }
  .metric strong { font-size:.83rem; }
  .section-heading { align-items:start; flex-direction:column; gap:12px; }
  .windguru-section { padding:24px 20px 20px; }
  .radar-section { padding:24px 20px 20px; }
  .radar-refresh { width:100%; justify-content:center; }
  .radar-frame { min-height:260px; }
  .radar-controls { grid-template-columns:auto 1fr; }
  .radar-controls span { grid-column:1 / -1; text-align:center; }
  .radar-footer { align-items:flex-start; flex-direction:column; gap:8px; }
  .seaway-wind-section { padding:24px 20px 20px; }
  .tide-section { padding:24px 20px 20px; }
  .tide-heading, .tide-footer { flex-direction:column; }
  .wave-section { padding:24px 20px 20px; }
  .wave-heading, .wave-footer { flex-direction:column; }
  .wave-heading .live-dot { align-self:flex-start; }
  .report-card { padding:24px 20px 20px; }
  .report-heading, .report-footer { flex-direction:column; }
  .surf-observation { grid-template-columns:1fr 1fr; }
  .surf-report-primary { grid-column:1 / -1; border-right:0; border-bottom:1px solid var(--line); }
  .surf-report-metric:nth-child(2) { border-right:1px solid var(--line); }
  .surf-report-metric:last-child { border-right:0; }
  .seaway-wind-heading, .wind-history-top, .wind-history-footer { flex-direction:column; }
  .seaway-wind-heading .live-dot { align-self:flex-start; }
  .wind-history-panel { padding:18px 12px; }
  .history-range { width:100%; }
  .history-range button { flex:1; }
  .wind-chart-wrap { overflow-x:auto; }
  .wind-history-footer div { align-items:flex-start; flex-direction:column; gap:8px; }
  .surf-cam-section { padding:24px 20px 20px; }
  .cam-switch { width:100%; }
  .cam-option { flex:1; }
  .surf-cam-footer { align-items:flex-start; flex-direction:column; }
}