:root {
  --ink: #102326;
  --muted: #5d6f70;
  --paper: #fff7e8;
  --mist: #e7f5f0;
  --sea: #007f8f;
  --deep: #073b4c;
  --coral: #ff6b4a;
  --gold: #ffc857;
  --kelp: #2d6a4f;
  --rose: #d45d79;
  --line: rgba(16, 35, 38, 0.14);
  --shadow: 0 24px 70px rgba(7, 59, 76, 0.18);
  --admin-bg: #f3f7f3;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #041a33;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background:
    linear-gradient(174deg, transparent 0 12%, rgba(255,255,255,0.16) 12.4% 15.6%, transparent 16.2% 100%),
    linear-gradient(187deg, transparent 0 21%, rgba(255,255,255,0.1) 21.4% 24.6%, transparent 25.2% 100%),
    linear-gradient(180deg, #061531 0%, #08284e 34%, #0d4f79 70%, #0a6f83 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -9;
  pointer-events: none;
  background:
    linear-gradient(178deg, transparent 0 8%, rgba(255,255,255,0.09) 8.4% 10.6%, transparent 11.2% 100%),
    linear-gradient(180deg, rgba(255, 247, 232, 0.08), rgba(255, 247, 232, 0.3) 68%, rgba(255, 247, 232, 0.52) 100%),
    linear-gradient(115deg, transparent 0 58%, rgba(184, 243, 255, 0.12) 58% 64%, transparent 64%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(18px, 4vw, 56px);
  background: rgba(4, 26, 51, 0.76);
  border-bottom: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(18px);
  isolation: isolate;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; color: white; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: white;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 200, 87, 0.22), transparent 24%),
    linear-gradient(145deg, #073b4c 0%, #007f8f 58%, #ff6b4a 100%);
  box-shadow: 0 10px 24px rgba(7, 59, 76, 0.18);
  overflow: hidden;
}
.brand-mark svg {
  width: 39px;
  height: 39px;
}
.brand-sun { fill: var(--gold); }
.brand-wave { fill: #f5fff8; }
.brand-foam { fill: #00a7c8; opacity: 0.96; }
.brand-cut { fill: var(--deep); opacity: 0.94; }
.site-header .brand > span:last-child {
  color: white;
  letter-spacing: 0;
}
.site-nav { display: flex; align-items: center; gap: 22px; color: rgba(255,255,255,0.86); font-weight: 700; }
.site-nav a { position: relative; }
.site-nav a[href="/herramienta-tabla"] {
  padding: 9px 12px;
  border-radius: 8px;
  color: white;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.24);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--coral);
  transition: transform 180ms ease;
}
.site-nav a:hover::after { transform: scaleX(1); }
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(7, 59, 76, 0.18);
  border-radius: 8px;
  color: white;
  background: var(--deep);
  font-size: 1.35rem;
  line-height: 1;
}

.hero {
  position: relative;
  min-height: min(790px, 92vh);
  overflow: hidden;
  display: grid;
  align-items: end;
  padding: clamp(28px, 5vw, 72px);
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  bottom: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
}
.hero-content::before {
  content: "";
  display: block;
  width: 128px;
  height: 9px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--coral), rgba(255,255,255,0.72));
  box-shadow: 0 12px 36px rgba(255, 200, 87, 0.35);
}
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 30, 37, 0.82), rgba(5, 30, 37, 0.28) 50%, rgba(5, 30, 37, 0.04)),
    linear-gradient(0deg, rgba(5, 30, 37, 0.78), transparent 55%);
  z-index: -2;
}
.sea-lines { position: absolute; inset: auto 0 0; height: 30%; z-index: -1; opacity: 0.18; overflow: hidden; pointer-events: none; }
.sea-lines span {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 70px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  animation: drift 18s ease-in-out infinite;
}
.sea-lines span:nth-child(1) { bottom: 25%; animation-delay: -1s; }
.sea-lines span:nth-child(2) { bottom: 38%; animation-delay: -3s; }
.sea-lines span:nth-child(3) { bottom: 53%; animation-delay: -5s; }
.sea-lines span:nth-child(4) { bottom: 68%; animation-delay: -7s; }
@keyframes drift {
  0%, 100% { transform: translateX(-16px); }
  50% { transform: translateX(16px); }
}
.hero-content { max-width: 780px; color: white; padding-bottom: clamp(30px, 7vh, 80px); }
.eyebrow {
  margin: 0 0 12px;
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero .eyebrow { color: var(--gold); }
h1, h2, h3 { margin: 0; line-height: 0.98; letter-spacing: 0; }
.hero h1 { font-size: clamp(4rem, 15vw, 11rem); font-weight: 950; text-shadow: 0 20px 70px rgba(0,0,0,0.38); }
.hero p { max-width: 620px; font-size: clamp(1.08rem, 2.4vw, 1.45rem); line-height: 1.55; }
.hero-actions, .form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.button, button {
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 850;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.button:hover, button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(7, 59, 76, 0.18); }
.primary, button { color: white; background: linear-gradient(135deg, var(--coral), var(--rose)); }
.ghost { color: white; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.4); }

.intro-grid, .card-grid, .section, .page-shell, .article, .tool-teaser, .rankings-strip, .tool-explainer { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
.intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  transform: translateY(-38px) rotate(-0.6deg);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.intro-grid a { background: white; padding: clamp(20px, 3vw, 34px); transform: rotate(0.6deg); }
.intro-grid a:nth-child(2) { background: #f5fbff; }
.intro-grid a:nth-child(3) { background: #fff4ef; }
.intro-grid a {
  position: relative;
}
.intro-grid a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--sea), var(--gold), var(--coral));
}
.intro-grid strong, .intro-grid span { display: block; }
.intro-grid strong { font-size: 1.22rem; margin-bottom: 8px; }
.intro-grid span { color: var(--muted); line-height: 1.5; }

.section { padding: 38px 0 70px; }
.section::before {
  content: "";
  display: block;
  width: min(1180px, calc(100% - 36px));
  height: 7px;
  margin: 0 auto 32px;
  background: repeating-linear-gradient(90deg, var(--sea) 0 52px, var(--gold) 52px 78px, var(--coral) 78px 112px, var(--kelp) 112px 148px);
  border-radius: 999px;
}
.section-heading, .page-hero { max-width: 760px; margin-bottom: 28px; }
.section-heading h2, .page-hero h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
.section-heading p, .page-hero p { color: var(--muted); line-height: 1.65; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 70px; }
.swell-note {
  width: min(1180px, calc(100% - 36px));
  margin: 4px auto 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
  gap: clamp(18px, 4vw, 52px);
  align-items: end;
  padding: clamp(24px, 5vw, 56px);
  color: white;
  background:
    linear-gradient(135deg, rgba(255, 200, 87, 0.26), transparent 35%),
    linear-gradient(150deg, #074655, #007f8f 62%, #2d6a4f);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.swell-note::after {
  content: "";
  position: absolute;
  width: 440px;
  height: 180px;
  right: -80px;
  bottom: -116px;
  border: 28px solid rgba(255,255,255,0.18);
  border-radius: 50%;
}
.swell-note h2 { font-size: clamp(2rem, 5vw, 4.8rem); }
.swell-note p { margin: 0; line-height: 1.6; color: rgba(255,255,255,0.78); }
.swell-note .eyebrow { color: var(--gold); }
.tool-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62)),
    repeating-linear-gradient(-8deg, rgba(0,127,143,0.12) 0 18px, transparent 18px 36px);
  box-shadow: 0 18px 54px rgba(16, 35, 38, 0.11);
}
.tool-teaser h2 {
  max-width: 900px;
  font-size: clamp(1.8rem, 4vw, 3.6rem);
}
.tool-teaser p {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.6;
}
.rankings-strip {
  padding: 26px 0 6px;
}
.rankings-strip > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.rankings-strip a {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 18px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(145deg, var(--deep), var(--sea));
  box-shadow: 0 16px 42px rgba(7, 59, 76, 0.16);
}
.rankings-strip a:nth-child(2n) { background: linear-gradient(145deg, var(--coral), var(--rose)); }
.rankings-strip a:nth-child(3n) { background: linear-gradient(145deg, var(--kelp), var(--deep)); }
.rankings-strip strong { font-size: 1.05rem; line-height: 1.2; }
.rankings-strip span { color: rgba(255,255,255,0.76); line-height: 1.35; }
.content-card {
  position: relative;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(16, 35, 38, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.content-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sea), var(--gold), var(--coral));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.content-card:hover::after { transform: scaleX(1); }
.content-card:hover { transform: translateY(-5px); box-shadow: 0 26px 70px rgba(16, 35, 38, 0.16); }
.content-card img { width: 100%; aspect-ratio: 1.3; object-fit: cover; }
.content-card.board-card img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center;
  padding: clamp(12px, 2vw, 22px);
  background:
    linear-gradient(145deg, rgba(231, 245, 240, 0.92), rgba(255,255,255,0.96)),
    radial-gradient(circle at 72% 18%, rgba(0, 127, 143, 0.12), transparent 34%);
}
.content-card img {
  filter: saturate(1.08) contrast(1.03);
  transition: transform 260ms ease;
}
.content-card:hover img { transform: scale(1.035); }
.content-card a { display: block; min-height: 100%; }
.content-card span, .content-card h3, .content-card p { margin-left: 18px; margin-right: 18px; }
.content-card span {
  display: inline-block;
  margin-top: 18px;
  color: var(--coral);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.content-card h3 { margin-top: 8px; font-size: 1.35rem; line-height: 1.12; }
.content-card p { margin-bottom: 22px; color: var(--muted); line-height: 1.55; }

.page-shell { padding: 70px 0; }
.page-hero.compact { position: relative; padding-top: 34px; }
.page-hero.compact::before {
  content: "";
  display: block;
  width: 92px;
  height: 8px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--gold), var(--sea));
}
.collection-page {
  padding-top: clamp(34px, 5vw, 64px);
}
.collection-page .page-hero.compact {
  max-width: 940px;
  margin-bottom: 28px;
  padding: clamp(22px, 4vw, 38px);
  border-radius: 8px;
  color: var(--deep);
  background:
    linear-gradient(135deg, rgba(255, 200, 87, 0.12), transparent 44%),
    rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 22px 64px rgba(2, 14, 31, 0.2);
}
.collection-page .page-hero.compact .eyebrow {
  color: var(--sea);
}
.collection-page .page-hero.compact h1 {
  color: var(--deep);
}
.collection-page .page-hero.compact p {
  color: #435d60;
}
.collection-page .card-grid {
  padding: clamp(4px, 1vw, 10px) 0 76px;
}
.article { padding-bottom: 80px; }
.article-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  gap: clamp(24px, 5vw, 60px);
  align-items: end;
  padding: 58px 0 26px;
}
.article-hero img { width: 100%; aspect-ratio: 1.15; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); }
.article-hero > div:last-child {
  color: white;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(4, 26, 51, 0.9), rgba(7, 59, 76, 0.72));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 24px 70px rgba(2, 14, 31, 0.2);
}
.article-hero > div:last-child .eyebrow {
  color: var(--gold);
}
.article-hero > div:last-child p {
  color: rgba(255,255,255,0.78);
}
.product-article-hero {
  grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1fr);
  align-items: start;
  padding-top: clamp(14px, 2.5vw, 28px);
  gap: clamp(22px, 4vw, 48px);
}
.product-media {
  display: grid;
  gap: 14px;
}
.product-media img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center top;
  max-height: min(68vh, 700px);
  padding: clamp(14px, 2.6vw, 30px);
  background:
    linear-gradient(145deg, rgba(231, 245, 240, 0.92), rgba(255,255,255,0.98)),
    radial-gradient(circle at 70% 24%, rgba(0, 127, 143, 0.13), transparent 32%);
}
.product-hero-buy {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.66);
  border-radius: 8px;
  color: white;
  background:
    linear-gradient(120deg, rgba(255, 200, 87, 0.34), transparent 40%),
    linear-gradient(145deg, var(--deep), var(--sea));
  box-shadow: 0 16px 44px rgba(7, 59, 76, 0.15);
}
.product-hero-buy span {
  display: block;
  color: rgba(255,255,255,0.76);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.product-hero-buy strong {
  display: block;
  margin-top: 2px;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}
.article-hero.product-article-hero h1 {
  font-size: clamp(1.9rem, 3.7vw, 3.8rem);
  line-height: 1.04;
  overflow-wrap: anywhere;
}
.article-hero.product-article-hero p {
  max-width: 600px;
}
.article-hero h1 { font-size: clamp(2.6rem, 7vw, 6.2rem); }
.article-hero p { font-size: 1.1rem; line-height: 1.65; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts span { padding: 10px 14px; border-radius: 8px; background: white; border: 1px solid var(--line); }
.product-buy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 22px 0 8px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 8px;
  color: white;
  background:
    linear-gradient(120deg, rgba(255, 200, 87, 0.22), transparent 42%),
    linear-gradient(145deg, var(--deep), var(--sea));
  box-shadow: 0 18px 50px rgba(7, 59, 76, 0.16);
}
.product-buy-panel .eyebrow { color: var(--gold); }
.product-buy-panel h2 {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
}
.product-buy-panel p {
  margin: 8px 0 0;
  color: rgba(255,255,255,0.76);
  line-height: 1.5;
}
.buy-button {
  min-width: 180px;
  text-align: center;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  color: var(--ink);
}
.article-body { max-width: 760px; font-size: 1.12rem; line-height: 1.78; padding: 38px 0; }
.article-body h2 { font-size: 2rem; margin: 34px 0 12px; }
.article-body blockquote { margin: 28px 0; padding: 18px 22px; border-left: 4px solid var(--coral); background: white; }
.surf-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 42px;
}
.surf-insights article {
  padding: clamp(20px, 3vw, 28px);
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 18px 46px rgba(16, 35, 38, 0.08);
}
.surf-insights article:first-child {
  grid-column: 1 / -1;
  color: white;
  background: linear-gradient(135deg, var(--deep), var(--sea));
}
.surf-insights article:first-child .eyebrow { color: var(--gold); }
.surf-insights h2 {
  font-size: clamp(1.7rem, 4vw, 3rem);
}
.surf-insights p, .surf-insights li {
  line-height: 1.6;
}
.performance-grid div, .spot-grid div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.performance-grid span, .spot-grid span, .quiver-result .result-grid span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background: var(--mist);
  color: var(--ink);
}
.performance-grid strong, .spot-grid strong {
  color: var(--sea);
}
.marine-data-panel {
  display: grid;
  gap: 14px;
}
.marine-data-panel > p {
  margin-bottom: 0;
  color: var(--muted);
}
.marine-data-panel > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.marine-data-panel a {
  display: grid;
  gap: 8px;
  padding: 16px;
  min-height: 170px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 200, 87, 0.16), transparent 46%),
    var(--mist);
  border: 1px solid rgba(0, 127, 143, 0.16);
}
.marine-data-panel a:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(16, 35, 38, 0.12);
}
.marine-data-panel strong {
  color: var(--deep);
  font-size: 1.05rem;
}
.marine-data-panel span,
.marine-data-panel small {
  color: var(--muted);
  line-height: 1.45;
}
.marine-data-panel small {
  align-self: end;
  color: var(--sea);
  font-weight: 850;
}
.fit-list ul {
  padding-left: 20px;
}
.reader-reviews small {
  display: block;
  margin: 8px 0 10px;
  color: rgba(255,255,255,0.62);
}
.tool-hero {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 12px;
}
.quiver-page {
  padding-top: 8px;
}
.quiver-page .page-hero.compact {
  padding-top: 0;
}
.quiver-page .page-hero.compact::before {
  display: none;
}
.tool-hero > div:first-child::before {
  content: "";
  display: block;
  width: 92px;
  height: 7px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--gold), var(--sea));
}
.tool-hero h1 {
  font-size: clamp(2.05rem, 4.6vw, 4rem);
}
.tool-hero p {
  max-width: 650px;
  font-size: 0.98rem;
  line-height: 1.5;
  margin-bottom: 0;
}
.tool-hero-card {
  min-width: 160px;
  padding: 12px 16px;
  border-radius: 8px;
  color: white;
  background:
    linear-gradient(135deg, rgba(255, 200, 87, 0.28), transparent 42%),
    linear-gradient(145deg, var(--deep), var(--sea));
  box-shadow: 0 18px 46px rgba(16, 35, 38, 0.14);
}
.tool-hero-card span {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 950;
}
.tool-hero-card small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,0.78);
  font-weight: 850;
}
.quiver-tool {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.quiver-form, .quiver-result, .quiver-controls {
  display: grid;
  gap: 10px;
  padding: clamp(15px, 2.5vw, 22px);
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 18px 54px rgba(16, 35, 38, 0.11);
}
.quiver-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px 0 0;
  background: rgba(255,255,255,0.94);
  border: 0;
  box-shadow: none;
}
.quiver-controls {
  grid-area: controls;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
}
.quiver-controls summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  color: var(--deep);
  font-weight: 900;
}
.quiver-controls summary::-webkit-details-marker {
  display: none;
}
.quiver-controls summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: white;
  background: var(--sea);
  font-size: 1.35rem;
  line-height: 1;
}
.quiver-controls[open] summary::after {
  content: "-";
}
.quiver-controls summary strong,
.quiver-controls summary small {
  display: block;
}
.quiver-controls summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 750;
}
.form-section-title {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.form-section-title strong {
  font-size: 1.18rem;
}
.form-section-title span {
  max-width: 360px;
  color: var(--muted);
  line-height: 1.35;
  font-size: 0.92rem;
}
.quiver-control {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(16, 35, 38, 0.12);
  border-radius: 8px;
  background: #f7fbf7;
}
.quiver-choice {
  display: grid;
  gap: 8px;
}
.quiver-form label,
.quiver-control legend {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.94rem;
}
.quiver-control legend {
  display: block;
  padding: 0;
  margin-bottom: 8px;
}
.quiver-control.wide {
  grid-column: span 2;
}
.segmented-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.segmented-options.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.segmented-options.four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.segmented-options.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.sensation-control .segmented-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sensation-control .segmented-options label:last-child {
  grid-column: 1 / -1;
}
.segmented-options label {
  display: block;
  min-width: 0;
}
.segmented-options input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.segmented-options span {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 8px 7px;
  border: 1px solid rgba(7, 59, 76, 0.16);
  border-radius: 8px;
  color: var(--deep);
  background: white;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}
.segmented-options input:checked + span {
  color: white;
  border-color: transparent;
  background: linear-gradient(135deg, var(--sea), var(--kelp));
  box-shadow: 0 10px 22px rgba(7, 59, 76, 0.14);
}
.segmented-options input:focus-visible + span {
  outline: 3px solid rgba(255, 200, 87, 0.8);
  outline-offset: 2px;
}
.quiver-slider {
  align-content: space-between;
}
.quiver-slider strong {
  color: var(--deep);
  font-size: 1.25rem;
  line-height: 1;
}
.quiver-slider input[type="range"] {
  width: 100%;
  min-height: 34px;
  padding: 0;
  accent-color: var(--sea);
  cursor: pointer;
}
.quiver-form input, .quiver-form select {
  padding: 10px 11px;
  min-height: 42px;
}
.quiver-current input {
  width: 100%;
  border: 1px solid rgba(7, 59, 76, 0.16);
  border-radius: 8px;
  background: white;
}
.quiver-result {
  position: relative;
  grid-template-columns: minmax(270px, 0.82fr) minmax(330px, 1fr) minmax(320px, 0.98fr);
  grid-template-areas:
    "main specs market"
    "score specs market"
    "actions specs market"
    "controls controls controls";
  align-items: start;
  color: white;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 200, 87, 0.28), transparent 28%),
    linear-gradient(145deg, var(--deep), #08727b 58%, #0d8a94);
  overflow: hidden;
}
.quiver-result::before {
  content: "";
  position: absolute;
  inset: auto -10% -38px;
  height: 92px;
  opacity: 0.42;
  background:
    radial-gradient(ellipse at 20% 0, rgba(255,255,255,0.88) 0 20%, transparent 21%),
    radial-gradient(ellipse at 52% 4%, rgba(255,255,255,0.62) 0 17%, transparent 18%),
    radial-gradient(ellipse at 82% 0, rgba(255,255,255,0.78) 0 20%, transparent 21%);
  pointer-events: none;
}
.quiver-result > * {
  position: relative;
  z-index: 1;
}
.quiver-result .eyebrow { color: var(--gold); }
.quiver-result h2 {
  font-size: clamp(1.85rem, 3.4vw, 3rem);
}
.quiver-result p {
  color: rgba(255,255,255,0.78);
  line-height: 1.42;
}
.result-main {
  grid-area: main;
  padding-bottom: 10px;
}
.quiver-result .result-grid {
  grid-area: specs;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.quiver-result .button {
  grid-area: actions;
  justify-self: start;
  align-self: end;
}
.score-strip {
  grid-area: score;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.score-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 8px 11px;
  color: var(--ink);
  background: var(--gold);
  font-weight: 800;
}
.recommendation-block {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
}
.quiver-result > .recommendation-block:nth-of-type(4) {
  grid-area: market;
  background: rgba(255,255,255,0.13);
}
.quiver-result > .recommendation-block:nth-of-type(5) {
  display: none;
}
.quiver-result > .recommendation-block:nth-of-type(6) {
  display: none;
}
.quiver-result > .recommendation-block:nth-of-type(7) {
  display: none;
}
.recommendation-block h3 {
  font-size: 1rem;
  color: white;
}
.recommendation-block ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
}
.alternative-list {
  display: grid;
  gap: 8px;
}
.alternative-list a, .market-list a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  color: white;
  background: rgba(255,255,255,0.1);
}
.market-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.market-list a {
  justify-content: flex-start;
}
.market-list a:nth-child(n+4) {
  display: none;
}
.market-list img {
  width: 62px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 7px;
  background: white;
}
.market-list strong, .market-list small {
  display: block;
  line-height: 1.35;
}
.market-list small {
  color: rgba(255,255,255,0.72);
}
.market-list > span {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.1);
}
.alternative-list span {
  color: var(--gold);
  font-weight: 900;
  white-space: nowrap;
}
.catalogue-link {
  display: inline-flex;
  margin-top: 10px;
  color: white;
  background: linear-gradient(135deg, var(--sea), var(--kelp));
}
.catalogue-source a {
  display: inline-flex;
  margin-top: 10px;
  color: var(--ink);
  background: var(--gold);
  border-radius: 8px;
  padding: 11px 14px;
  font-weight: 900;
}
.pagination {
  width: min(1180px, calc(100% - 36px));
  margin: -42px auto 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: var(--deep);
  font-weight: 850;
}
.pagination a, .pagination span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  background: white;
  box-shadow: 0 12px 32px rgba(16, 35, 38, 0.07);
}
.tool-explainer {
  margin-top: 22px;
  margin-bottom: 22px;
  padding: clamp(20px, 4vw, 34px);
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 18px 46px rgba(16, 35, 38, 0.08);
}
.tool-explainer h2 {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
}
.tool-explainer p {
  max-width: 820px;
  color: var(--muted);
  line-height: 1.65;
}
.conditions-page {
  width: min(1240px, calc(100% - 32px));
  padding-top: clamp(18px, 4vw, 42px);
  padding-bottom: clamp(48px, 8vw, 82px);
}
.conditions-tool {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(239, 249, 250, 0.92)),
    linear-gradient(135deg, rgba(255, 200, 87, 0.14), transparent 42%);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 30px 80px rgba(2, 14, 31, 0.24);
}
.forecast-detail-page .conditions-tool {
  gap: 16px;
}
.conditions-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(16px, 4vw, 34px);
  align-items: center;
  padding: clamp(4px, 1vw, 8px) clamp(4px, 1vw, 8px) 8px;
}
.forecast-detail-page .conditions-header {
  align-items: end;
}
.forecast-visual {
  position: relative;
  min-height: clamp(360px, 48vw, 560px);
  overflow: hidden;
  border-radius: 8px;
  background: #073b4c;
  box-shadow: 0 26px 70px rgba(2, 14, 31, 0.22);
}
.forecast-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04) brightness(1.05);
}
.forecast-visual-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 14, 31, 0.58), rgba(2, 14, 31, 0.24) 46%, rgba(2, 14, 31, 0.02)),
    linear-gradient(0deg, rgba(2, 14, 31, 0.34), transparent 54%);
}
.forecast-visual-content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 14px;
  min-height: inherit;
  width: min(720px, 100%);
  padding: clamp(22px, 5vw, 48px);
  color: white;
  text-shadow: 0 2px 16px rgba(2, 14, 31, 0.52);
}
.forecast-visual-content .eyebrow {
  color: var(--gold);
}
.forecast-visual-content h2 {
  color: white;
  font-size: clamp(2.35rem, 7vw, 5.8rem);
  line-height: 0.92;
}
.forecast-visual-content p {
  max-width: 48rem;
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.5;
  width: fit-content;
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: 8px;
  background: rgba(2, 14, 31, 0.2);
  backdrop-filter: blur(5px);
}
.forecast-visual-content > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 620px;
}
.forecast-visual-content span {
  display: grid;
  gap: 4px;
  min-height: 74px;
  align-content: center;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
}
.forecast-visual-content strong {
  color: white;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1;
}
.forecast-visual-content small {
  color: rgba(255,255,255,0.76);
  font-weight: 850;
}
.forecast-visual-credit {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  max-width: min(380px, calc(100% - 24px));
  padding: 6px 8px;
  border-radius: 8px;
  color: rgba(255,255,255,0.86);
  background: rgba(2, 14, 31, 0.46);
  font-size: 0.72rem;
  font-weight: 800;
}
.conditions-header .eyebrow {
  color: var(--sea);
}
.conditions-header h1 {
  max-width: 780px;
  color: var(--deep);
  font-size: clamp(2.4rem, 5.8vw, 5.2rem);
  line-height: 0.96;
}
.conditions-header p {
  max-width: 680px;
  color: #4d6568;
  line-height: 1.55;
}
.conditions-controls {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(7, 59, 76, 0.12);
  box-shadow: 0 16px 42px rgba(7, 59, 76, 0.08);
}
.conditions-controls label {
  display: grid;
  gap: 8px;
  color: var(--deep);
  font-weight: 850;
}
.conditions-controls select {
  min-height: 48px;
  border-color: rgba(7, 59, 76, 0.22);
  font-weight: 850;
}
.conditions-controls span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
}
.conditions-refresh {
  min-height: 44px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--deep), var(--sea));
}
.conditions-refresh:disabled {
  cursor: wait;
  opacity: 0.62;
}
.conditions-score {
  display: grid;
  grid-template-columns: minmax(220px, 0.6fr) minmax(260px, 1fr) minmax(180px, 0.48fr);
  gap: clamp(12px, 2.5vw, 24px);
  align-items: center;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 8px;
  color: white;
  background:
    linear-gradient(120deg, rgba(255, 200, 87, 0.28), transparent 42%),
    linear-gradient(145deg, #075466, #0091a1);
  box-shadow: 0 18px 50px rgba(0, 127, 143, 0.18);
}
.conditions-score.is-stale {
  background:
    linear-gradient(120deg, rgba(255, 200, 87, 0.28), transparent 42%),
    linear-gradient(145deg, #4c2f07, var(--deep));
}
.conditions-score.is-loading {
  background:
    linear-gradient(120deg, rgba(255,255,255,0.12), transparent 42%),
    linear-gradient(145deg, #0b4054, #0d6d77);
}
.conditions-score span,
.conditions-score p {
  color: rgba(255,255,255,0.88);
  margin: 0;
}
.conditions-score strong {
  display: block;
  color: white;
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1;
}
.conditions-score meter {
  width: 100%;
  height: 16px;
}
.source-status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.source-pill {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 7px;
  align-items: center;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
}
.source-pill i {
  grid-row: span 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffb84d;
  box-shadow: 0 0 0 4px rgba(255, 184, 77, 0.16);
}
.source-pill.online i {
  background: #00df86;
  box-shadow: 0 0 0 4px rgba(0, 223, 134, 0.18), 0 0 20px rgba(0, 223, 134, 0.48);
}
.source-pill.standby i {
  background: #ffc857;
  box-shadow: 0 0 0 4px rgba(255, 200, 87, 0.2);
}
.source-pill.offline i {
  background: #ff6b4a;
  box-shadow: 0 0 0 4px rgba(255, 107, 74, 0.18);
}
.source-pill strong {
  color: white;
  font-size: 0.88rem;
  line-height: 1.1;
}
.source-pill small {
  color: rgba(255,255,255,0.74);
  font-size: 0.76rem;
  line-height: 1.15;
}
.spot-map-panel {
  display: grid;
  grid-template-columns: minmax(230px, 0.34fr) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 24px);
  align-items: stretch;
  padding: clamp(16px, 3vw, 24px);
  border-radius: 8px;
  border: 1px solid rgba(7, 59, 76, 0.1);
  background:
    linear-gradient(135deg, rgba(0, 127, 143, 0.12), transparent 42%),
    rgba(255,255,255,0.96);
  box-shadow: 0 18px 46px rgba(7, 59, 76, 0.1);
}
.spot-map-copy {
  display: grid;
  gap: 10px;
  align-content: center;
}
.spot-map-copy h2 {
  color: var(--deep);
  font-size: clamp(1.55rem, 3vw, 2.55rem);
}
.spot-map-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.spot-map-canvas {
  min-height: 340px;
  position: relative;
}
.spot-map-canvas > span {
  display: grid;
  min-height: 260px;
  place-items: center;
  color: var(--muted);
  font-weight: 850;
}
.spot-map {
  position: relative;
  width: 100%;
  min-height: 340px;
  overflow: hidden;
  border-radius: 8px;
  background: #dbe9ea;
  border: 1px solid rgba(7, 59, 76, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.spot-map .maplibregl-ctrl-attrib,
.spot-map .maplibregl-ctrl-attrib a {
  color: #31565d;
}
.spot-map-marker {
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  border: 2px solid white;
  border-radius: 50%;
  background: #ff6b4a;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(7, 59, 76, 0.12), 0 12px 24px rgba(2, 14, 31, 0.2);
}
.spot-map-marker.good { background: #00b979; }
.spot-map-marker.maybe { background: #ffc857; }
.spot-map-marker.poor { background: #ff9f4a; }
.spot-map-marker.flat { background: #ff6b4a; }
.spot-map-marker.top {
  width: 21px;
  height: 21px;
  box-shadow: 0 0 0 5px rgba(255, 200, 87, 0.22), 0 0 24px rgba(255, 200, 87, 0.42);
}
.spot-map-marker span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 160px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--deep);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 10px 24px rgba(2, 14, 31, 0.18);
  font-size: 0.78rem;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.spot-map-marker:hover span,
.spot-map-marker:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0);
}
.spot-map .maplibregl-popup-content {
  display: grid;
  gap: 5px;
  min-width: 160px;
  padding: 12px;
  border-radius: 8px;
  color: var(--deep);
  box-shadow: 0 14px 34px rgba(2, 14, 31, 0.18);
}
.spot-map .maplibregl-popup-content strong {
  font-size: 1rem;
}
.spot-map .maplibregl-popup-content span,
.spot-map .maplibregl-popup-content em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}
.spot-map .maplibregl-popup-content button,
.spot-map .maplibregl-popup-content a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 4px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--deep);
  color: white;
  font-size: 0.84rem;
  font-weight: 900;
}
.spot-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}
.spot-map-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}
.spot-map-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b4a;
}
.spot-map-legend i.good { background: #00a96b; }
.spot-map-legend i.maybe { background: #d89b00; }
.spot-map-legend i.poor { background: #de7d22; }
.spot-ranking {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 3vw, 24px);
  border-radius: 8px;
  border: 1px solid rgba(7, 59, 76, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 200, 87, 0.16), transparent 38%),
    rgba(255,255,255,0.96);
  box-shadow: 0 18px 46px rgba(7, 59, 76, 0.1);
}
.spot-ranking-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}
.spot-ranking-head h2 {
  color: var(--deep);
  font-size: clamp(1.65rem, 3.4vw, 3rem);
}
.spot-ranking-head span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
  text-align: right;
}
.spot-ranking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.spot-ranking-grid article,
.ranking-card {
  display: grid;
  gap: 8px;
  min-height: 154px;
  align-content: center;
  padding: clamp(14px, 2vw, 18px);
  border-radius: 8px;
  color: white;
  background:
    linear-gradient(135deg, rgba(255, 200, 87, 0.22), transparent 40%),
    linear-gradient(145deg, #073b4c, #007f8f);
  box-shadow: 0 14px 34px rgba(7, 59, 76, 0.16);
}
.ranking-card:nth-child(1) {
  background:
    linear-gradient(135deg, rgba(255, 200, 87, 0.34), transparent 44%),
    linear-gradient(145deg, #05263e, #008f9c);
}
.ranking-card span,
.ranking-card small,
.spot-ranking-grid article span,
.spot-ranking-grid article small {
  color: rgba(255,255,255,0.76);
  line-height: 1.35;
}
.ranking-card strong,
.spot-ranking-grid article strong {
  color: white;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1;
}
.ranking-card em {
  color: var(--gold);
  font-style: normal;
  font-weight: 900;
}
.ranking-table {
  display: grid;
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgba(7, 59, 76, 0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.72);
}
.ranking-table a {
  display: grid;
  grid-template-columns: 36px minmax(160px, 1.2fr) minmax(130px, 0.72fr) minmax(150px, 0.78fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  color: var(--deep);
  border-bottom: 1px solid rgba(7, 59, 76, 0.08);
}
.ranking-table a:last-child {
  border-bottom: 0;
}
.ranking-table a:hover {
  background: rgba(0, 127, 143, 0.08);
}
.ranking-table span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--sea);
  font-size: 0.82rem;
  font-weight: 900;
}
.ranking-table strong {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.ranking-table strong small,
.ranking-table > a > small {
  color: var(--muted);
  font-weight: 750;
}
.ranking-table em {
  color: #006978;
  font-style: normal;
  font-weight: 900;
  line-height: 1.22;
  overflow-wrap: anywhere;
}
.ranking-empty {
  margin: 0;
  color: var(--muted);
}
.conditions-webcam {
  display: grid;
  gap: 14px;
  min-height: 0;
}
.model-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 3vw, 24px);
  padding: clamp(16px, 3vw, 24px);
  border-radius: 8px;
  border: 1px solid rgba(7, 59, 76, 0.1);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 87, 0.2), transparent 32%),
    linear-gradient(145deg, rgba(6, 21, 49, 0.96), rgba(5, 84, 102, 0.94));
  box-shadow: 0 18px 46px rgba(2, 14, 31, 0.16);
  color: white;
}
.model-panel.model-offline {
  grid-template-columns: 1fr;
  background: linear-gradient(145deg, rgba(4, 26, 51, 0.92), rgba(77, 101, 104, 0.88));
}
.model-now {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}
.model-now > .wave-size-card {
  grid-column: 1;
}
.model-now > .model-now-metrics {
  grid-column: 2;
}
.model-now > .best-window {
  grid-column: 1 / -1;
  justify-self: start;
}
@media (max-width: 860px) {
  .model-now {
    grid-template-columns: 1fr;
  }
  .model-now > .wave-size-card,
  .model-now > .model-now-metrics,
  .model-now > .best-window {
    grid-column: 1;
  }
}
.model-now .eyebrow {
  color: var(--gold);
}
.model-now h2 {
  color: white;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
}
.model-now p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
}
.wave-size-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
}
.wave-size-card p {
  font-size: 0.88rem;
}
.wave-ratio-visual,
.wave-ratio-mini {
  display: grid;
  gap: 5px;
}
.wave-ratio-stage {
  position: relative;
  min-height: 128px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(6, 24, 38, 0.18) 0 100%),
    url('/assets/img/wave-icon-1.svg') center bottom / contain no-repeat,
    linear-gradient(180deg, #c7f1f5 0%, #0e7490 58%, #064e5f 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.wave-ratio-visual[data-wave-tier="0"] .wave-ratio-stage {
  background-image:
    linear-gradient(180deg, rgba(6, 24, 38, 0.18) 0 100%),
    url('/assets/img/wave-icon-0.svg'),
    linear-gradient(180deg, #c7f1f5 0%, #0e7490 58%, #064e5f 100%);
}
.wave-ratio-visual[data-wave-tier="2"] .wave-ratio-stage {
  background-image:
    linear-gradient(180deg, rgba(6, 24, 38, 0.18) 0 100%),
    url('/assets/img/wave-icon-2.svg'),
    linear-gradient(180deg, #c7f1f5 0%, #0e7490 58%, #064e5f 100%);
}
.wave-ratio-stage .wave-ratio-swell,
.wave-ratio-stage .wave-ratio-face,
.wave-ratio-stage .wave-ratio-lip,
.wave-ratio-stage .wave-ratio-sky {
  display: none;
}
.wave-ratio-sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(8deg, transparent 0 34%, rgba(255,255,255,0.24) 35% 40%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.3), transparent 48%);
}
.wave-ratio-swell,
.wave-ratio-face,
.wave-ratio-lip {
  position: absolute;
  left: 12%;
  right: 8%;
  bottom: 14px;
  transform-origin: bottom center;
}
.wave-ratio-swell {
  height: var(--wave-height);
  border-radius: 90% 24% 42% 36%;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,0.95) 0 8%, transparent 9%),
    linear-gradient(135deg, #26c6da 0%, #008ca2 48%, #064e5f 100%);
  transform: skewX(-8deg);
  box-shadow: 0 -10px 24px rgba(255,255,255,0.12), inset -18px -22px 36px rgba(2, 14, 31, 0.2);
}
.wave-ratio-face {
  height: var(--wave-face-height);
  left: 22%;
  right: 18%;
  border-radius: 70% 18% 48% 42%;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(10, 111, 131, 0.74));
  transform: translateY(9px) skewX(-12deg);
  opacity: 0.78;
}
.wave-ratio-lip {
  width: var(--wave-lip-width);
  height: var(--wave-lip-height);
  left: auto;
  right: 8%;
  bottom: var(--wave-lip-bottom);
  border-radius: 72% 28% 66% 20%;
  background: rgba(255,255,255,0.9);
  transform: rotate(-16deg);
  opacity: 0.82;
}
.wave-ratio-visual strong,
.wave-ratio-mini strong {
  color: white;
  font-size: 1.35rem;
  line-height: 1;
}
.wave-ratio-visual small,
.wave-ratio-mini small {
  color: rgba(255,255,255,0.72);
  font-weight: 850;
  line-height: 1.2;
}
.model-now > div:not(.wave-size-card) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.model-now > div:not(.wave-size-card) > span,
.forecast-strip > span {
  display: grid;
  align-content: start;
  overflow: hidden;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
}
.model-now > div:not(.wave-size-card) > span > strong,
.forecast-strip em {
  color: white;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}
.model-now > div:not(.wave-size-card) > span > small,
.forecast-strip > span > small {
  color: rgba(255,255,255,0.72);
  line-height: 1.2;
}
.forecast-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 900px) {
  .forecast-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.forecast-strip > span {
  min-height: 0;
  align-content: start;
}
.forecast-strip > span > em,
.forecast-strip > span > small {
  display: inline;
}
.forecast-strip > span {
  grid-template-columns: auto auto;
}
.forecast-strip > span > strong,
.forecast-strip > span > .wave-ratio-mini { grid-column: 1 / -1; }
.forecast-strip > span > small {
  justify-self: end;
  color: rgba(255,255,255,0.65);
}
.forecast-strip .wave-ratio-mini {
  gap: 3px;
}
.forecast-strip .wave-ratio-stage {
  min-height: 48px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(6, 24, 38, 0.12) 0 100%),
    url('/assets/img/wave-icon-1.svg') center bottom / contain no-repeat,
    linear-gradient(180deg, #c7f1f5 0%, #0e7490 58%, #064e5f 100%);
}
.forecast-strip > span[data-wave-tier="0"] .wave-ratio-stage {
  background-image:
    linear-gradient(180deg, rgba(6, 24, 38, 0.12) 0 100%),
    url('/assets/img/wave-icon-0.svg') center bottom / contain no-repeat,
    linear-gradient(180deg, #c7f1f5 0%, #0e7490 58%, #064e5f 100%);
}
.forecast-strip > span[data-wave-tier="2"] .wave-ratio-stage {
  background-image:
    linear-gradient(180deg, rgba(6, 24, 38, 0.12) 0 100%),
    url('/assets/img/wave-icon-2.svg'),
    linear-gradient(180deg, #c7f1f5 0%, #0e7490 58%, #064e5f 100%);
}

.wave-ratio-visual[data-wave-tier="3"] .wave-ratio-stage {
  background-image:
    linear-gradient(180deg, rgba(6, 24, 38, 0.18) 0 100%),
    url('/assets/img/wave-icon-3.svg'),
    linear-gradient(180deg, #c7f1f5 0%, #0e7490 58%, #064e5f 100%);
}
.forecast-strip > span[data-wave-tier="3"] .wave-ratio-stage {
  background-image:
    linear-gradient(180deg, rgba(6, 24, 38, 0.12) 0 100%),
    url('/assets/img/wave-icon-3.svg'),
    linear-gradient(180deg, #c7f1f5 0%, #0e7490 58%, #064e5f 100%);
}

.best-window {
  display: inline-block;
  margin: 6px 0 2px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.22), rgba(255, 200, 87, 0.1));
  border: 1px solid rgba(255, 200, 87, 0.45);
  color: #ffd770;
  font-weight: 850;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}
.dir-arrow {
  display: inline-block;
  margin-left: 7px;
  font-size: 0.85em;
  color: #7fd8e8;
  transform: rotate(var(--dir, 0deg));
  transition: transform 0.3s ease;
}
.forecast-strip .wave-ratio-swell,
.forecast-strip .wave-ratio-face,
.forecast-strip .wave-ratio-lip,
.forecast-strip .wave-ratio-sky {
  display: none;
}
.forecast-strip .wave-ratio-swell {
  left: 10%;
  right: 6%;
  bottom: 8px;
}
.forecast-strip .wave-ratio-face {
  bottom: 8px;
}
.forecast-strip .wave-ratio-lip {
}
.forecast-strip .wave-ratio-mini strong {
  font-size: 1.05rem;
}
.forecast-strip .wave-ratio-mini small {
  font-size: 0.72rem;
}
.forecast-strip strong {
  color: var(--gold);
}
.webcam-player,
.webcam-links {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 24px);
  align-items: stretch;
  padding: clamp(16px, 3vw, 24px);
  border-radius: 8px;
  border: 1px solid rgba(7, 59, 76, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 200, 87, 0.12), transparent 45%),
    rgba(255,255,255,0.96);
  box-shadow: 0 16px 42px rgba(7, 59, 76, 0.08);
}
.webcam-links {
  grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr);
}
.webcam-copy,
.webcam-links > div:first-child {
  display: grid;
  align-content: center;
  gap: 10px;
}
.webcam-copy h2,
.webcam-links h2 {
  color: var(--deep);
  font-size: clamp(1.45rem, 3vw, 2.4rem);
}
.webcam-copy p,
.webcam-links p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.webcam-copy a {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 8px;
  color: white;
  background: var(--deep);
  font-weight: 850;
}
.webcam-frame {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(145deg, #061531, #0a6f83);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.webcam-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.webcam-image-link {
  position: absolute;
  inset: 0;
  display: block;
}
.webcam-image-link img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.webcam-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  color: white;
  text-align: center;
  font-weight: 850;
  line-height: 1.35;
  background: linear-gradient(145deg, rgba(6, 21, 49, 0.96), rgba(8, 102, 122, 0.92));
}
.webcam-frame-failed .webcam-image-link img {
  display: none;
}
.webcam-frame-failed .webcam-fallback {
  display: grid;
}
.webcam-more-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.webcam-more-list a {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 78px;
  padding: 8px;
  border: 1px solid rgba(6, 95, 115, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(12, 41, 58, 0.08);
}
.webcam-more-list img,
.webcam-more-placeholder {
  width: 86px;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
}
.webcam-more-list img {
  display: block;
  object-fit: cover;
}
.webcam-more-placeholder {
  display: grid;
  place-items: center;
  color: white;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(145deg, #075985, #0f766e);
}
.webcam-more-list span {
  min-width: 0;
}
.webcam-more-list strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.93rem;
  line-height: 1.15;
}
.webcam-more-list small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}
.webcam-link-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.webcam-link-list a {
  display: grid;
  gap: 8px;
  min-height: 86px;
  align-content: center;
  padding: 14px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(145deg, var(--deep), var(--sea));
  box-shadow: 0 12px 28px rgba(7, 59, 76, 0.14);
}
.webcam-link-list span {
  color: rgba(255,255,255,0.76);
  font-size: 0.9rem;
}
.conditions-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.conditions-metrics article {
  display: grid;
  gap: 6px;
  min-height: 132px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(7, 59, 76, 0.1);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 14px 34px rgba(7, 59, 76, 0.08);
}
.conditions-metrics span,
.conditions-metrics small {
  color: var(--muted);
  line-height: 1.35;
}
.conditions-metrics strong {
  color: #063849;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1;
}
.spot-location-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.44fr) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 24px);
  align-items: stretch;
  padding: clamp(16px, 3vw, 24px);
  border-radius: 8px;
  border: 1px solid rgba(7, 59, 76, 0.1);
  background:
    linear-gradient(135deg, rgba(0, 127, 143, 0.1), transparent 42%),
    rgba(255,255,255,0.96);
  box-shadow: 0 16px 42px rgba(7, 59, 76, 0.08);
}
.spot-location-copy {
  display: grid;
  gap: 12px;
  align-content: center;
}
.spot-location-copy h2 {
  color: var(--deep);
  font-size: clamp(1.5rem, 3vw, 2.45rem);
}
.spot-location-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.spot-location-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.spot-location-facts span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  align-content: center;
  padding: 12px;
  border-radius: 8px;
  background: rgba(239, 249, 250, 0.92);
  border: 1px solid rgba(7, 59, 76, 0.1);
}
.spot-location-facts strong {
  color: var(--deep);
  font-size: 1rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.spot-location-facts small {
  color: var(--muted);
  font-weight: 850;
  line-height: 1.2;
}
.spot-location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.spot-location-actions a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, var(--deep), var(--sea));
  font-weight: 900;
}
.spot-location-actions a:nth-child(2) {
  color: var(--deep);
  background: rgba(255, 200, 87, 0.32);
}
.spot-location-map {
  min-height: 360px;
  overflow: hidden;
  border-radius: 8px;
  background: #dbe9ea;
  border: 1px solid rgba(7, 59, 76, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
}
.spot-location-map iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
  border: 0;
}
.conditions-reading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  gap: 14px;
}
.forecast-return {
  display: flex;
  justify-content: center;
}
.forecast-return a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, var(--deep), var(--sea));
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(7, 59, 76, 0.16);
}
.conditions-reading article {
  padding: clamp(18px, 3vw, 26px);
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 16px 40px rgba(7, 59, 76, 0.08);
}
.conditions-reading h2 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}
.conditions-reading p,
.conditions-reading li {
  color: var(--muted);
  line-height: 1.55;
}
.conditions-reading li.stale {
  color: #9b3412;
  font-weight: 850;
}
.conditions-sources {
  display: grid;
  gap: 8px;
}
.conditions-sources p {
  margin: 0;
}
.conditions-sources a {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  color: white;
  background: var(--deep);
  font-weight: 850;
}

.reviews-panel, .newsletter-band {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(300px, 1fr);
  gap: 28px;
  align-items: start;
  padding: clamp(26px, 4vw, 42px);
  background: linear-gradient(135deg, rgba(255, 107, 74, 0.22), transparent 38%), linear-gradient(145deg, var(--deep), #085f63);
  color: white;
}
.reviews-panel { border-radius: 8px; }
.reviews-panel p { color: rgba(255,255,255,0.76); }
.review-auth {
  display: grid;
  gap: 10px;
  grid-column: 2;
}
.x-review-button, .x-user-panel {
  min-height: 48px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.12);
  color: white;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.x-review-button::before {
  content: "X";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0f1720;
  color: white;
  font-weight: 900;
}
.x-user-panel img, .review-identity img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.5);
}
.x-user-panel a {
  margin-left: auto;
  color: white;
  text-underline-offset: 3px;
}
form input, form textarea, form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  background: white;
  color: var(--ink);
}
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
textarea { resize: vertical; }
.review-form textarea {
  min-height: 170px;
  line-height: 1.55;
}
.review-form, .newsletter-form, .cms-form, .upload-form { display: grid; gap: 12px; }
.reviews-panel .review-form { grid-column: 2; }
.form-note { min-height: 1.2em; font-size: 0.92rem; }
.reader-reviews { grid-column: 1 / -1; display: grid; gap: 12px; }
.reader-reviews blockquote { margin: 0; padding: 16px; border-radius: 8px; background: rgba(255,255,255,0.1); }
.review-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,0.9);
  font-style: normal;
}
.newsletter-band { width: min(1180px, calc(100% - 36px)); margin: 20px auto 0; border-radius: 8px; }
.newsletter-band h2 { font-size: clamp(1.8rem, 4vw, 3.6rem); }
.footer-wave {
  position: relative;
  z-index: 0;
  height: 238px;
  margin-top: 12px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 18% 72%, rgba(255,255,255,0.12) 0 4%, transparent 10%),
    radial-gradient(ellipse at 78% 76%, rgba(255,255,255,0.1) 0 5%, transparent 12%),
    linear-gradient(180deg, transparent 0%, rgba(111, 207, 232, 0.18) 30%, rgba(10, 118, 181, 0.42) 62%, rgba(3, 55, 112, 0.86) 83%, #062748 100%);
}
.footer-wave::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 74px;
  background:
    radial-gradient(ellipse at 16% 42%, rgba(255,255,255,0.16) 0 2px, transparent 3px),
    radial-gradient(ellipse at 39% 52%, rgba(255,255,255,0.12) 0 2px, transparent 3px),
    radial-gradient(ellipse at 71% 35%, rgba(255,255,255,0.14) 0 2px, transparent 3px),
    linear-gradient(180deg, #d7b06f 0%, #b98548 58%, #8d5b35 100%);
  clip-path: ellipse(78% 76% at 50% 100%);
}
.wave-layer {
  position: absolute;
  z-index: 1;
  left: -720px;
  width: calc(100% + 1440px);
  height: 100%;
  bottom: -1px;
  background-repeat: repeat-x;
  background-size: 720px 170px;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.wave-one {
  opacity: 0.98;
  animation: footerWave 20s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg width='720' height='170' viewBox='0 0 720 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='38' x2='0' y2='170'%3E%3Cstop stop-color='%230781b9'/%3E%3Cstop offset='.52' stop-color='%23045c99'/%3E%3Cstop offset='1' stop-color='%23033072'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 82 C60 54 120 54 180 82 C240 110 300 110 360 82 C420 54 480 54 540 82 C600 110 660 110 720 82 V170 H0 Z' fill='url(%23g)'/%3E%3Cpath d='M20 88 C72 65 125 65 177 88 M380 88 C432 65 485 65 537 88' stroke='%23b8f3ff' stroke-width='5' fill='none' opacity='.5' stroke-linecap='round'/%3E%3Cpath d='M225 115 C270 127 316 126 360 111 M585 115 C630 127 676 126 720 111' stroke='%230bb8d2' stroke-width='4' fill='none' opacity='.35'/%3E%3C/svg%3E");
}
.wave-two {
  opacity: 0.8;
  bottom: 18px;
  animation: footerWaveReverse 28s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg width='720' height='170' viewBox='0 0 720 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 98 C72 68 108 68 180 98 C252 128 288 128 360 98 C432 68 468 68 540 98 C612 128 648 128 720 98 V170 H0 Z' fill='%2300a7c8'/%3E%3Cpath d='M0 98 C72 68 108 68 180 98 M360 98 C432 68 468 68 540 98' stroke='%23e7fdff' stroke-width='4' fill='none' opacity='.55' stroke-linecap='round'/%3E%3Cpath d='M200 122 C248 139 315 137 360 116 M560 122 C608 139 675 137 720 116' stroke='%2304689e' stroke-width='4' fill='none' opacity='.24'/%3E%3C/svg%3E");
}
.wave-three {
  opacity: 0.62;
  bottom: 42px;
  animation: footerWave 36s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg width='720' height='170' viewBox='0 0 720 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 106 C58 86 122 86 180 106 C238 126 302 126 360 106 C418 86 482 86 540 106 C598 126 662 126 720 106 V170 H0 Z' fill='%23d8fbff'/%3E%3Cpath d='M0 106 C58 86 122 86 180 106 M360 106 C418 86 482 86 540 106' stroke='%23ffffff' stroke-width='4' fill='none' opacity='.8'/%3E%3C/svg%3E");
}
.marlin {
  position: absolute;
  z-index: 2;
  width: 170px;
  height: 92px;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 6px 8px rgba(3, 39, 76, 0.26));
  background-image: url("data:image/svg+xml,%3Csvg width='230' height='124' viewBox='0 0 230 124' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M42 74 C75 37 135 30 180 57 C153 75 98 88 42 74 Z' fill='%23082f49' stroke='%23f3feff' stroke-width='4'/%3E%3Cpath d='M171 57 L224 36' stroke='%23f3feff' stroke-width='5'/%3E%3Cpath d='M174 57 L224 36' stroke='%23082f49' stroke-width='2'/%3E%3Cpath d='M94 42 C108 17 131 8 159 7 C142 25 132 43 132 62' fill='%230a4f83' stroke='%23f3feff' stroke-width='4'/%3E%3Cpath d='M45 73 L8 58 L34 91 Z' fill='%23082f49' stroke='%23f3feff' stroke-width='4'/%3E%3Cpath d='M74 83 C63 101 43 113 19 116 C29 94 48 82 73 78' fill='%230a4f83' stroke='%23f3feff' stroke-width='4'/%3E%3Cpath d='M74 62 C102 55 133 56 160 66' fill='none' stroke='%2300a7c8' stroke-width='7'/%3E%3Ccircle cx='162' cy='55' r='3' fill='%23f3feff'/%3E%3Cpath d='M26 102 C46 94 59 96 73 108 M10 108 C24 102 37 103 48 113' fill='none' stroke='%23d8fbff' stroke-width='4' opacity='.85'/%3E%3C/g%3E%3C/svg%3E");
}
.marlin-one {
  left: 8%;
  top: 24px;
  transform: translate3d(-90px, 78px, 0) rotate(-14deg);
  animation: marlinLeap 46s linear infinite;
}
.marlin-two {
  right: 7%;
  top: 42px;
  width: 126px;
  transform: translate3d(90px, 66px, 0) scaleX(-1) rotate(-8deg);
  animation: marlinLeapSmall 64s linear infinite 29s;
}
.sea-life {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 10px rgba(2, 22, 44, 0.28));
}
.sea-life-octopus {
  left: 9%;
  bottom: 18px;
  width: 78px;
  height: 72px;
  opacity: 0.82;
  animation: seaLifeBob 8s ease-in-out infinite;
  background-image: url("data:image/svg+xml,%3Csvg width='116' height='104' viewBox='0 0 116 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 40 C36 18 80 18 80 40 C80 61 69 69 58 69 C47 69 36 61 36 40Z' fill='%23d45d79' stroke='%23fff4ef' stroke-width='4'/%3E%3Ccircle cx='50' cy='42' r='4' fill='%23041a33'/%3E%3Ccircle cx='66' cy='42' r='4' fill='%23041a33'/%3E%3Cpath d='M41 67 C34 77 27 82 17 84 M51 69 C48 82 42 91 32 97 M61 69 C64 82 72 91 82 97 M75 66 C84 72 92 75 101 73' stroke='%23d45d79' stroke-width='9'/%3E%3Cpath d='M41 67 C34 77 27 82 17 84 M51 69 C48 82 42 91 32 97 M61 69 C64 82 72 91 82 97 M75 66 C84 72 92 75 101 73' stroke='%23fff4ef' stroke-width='3' opacity='.68'/%3E%3C/g%3E%3C/svg%3E");
}
.sea-life-crab {
  width: 74px;
  height: 48px;
  bottom: 16px;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg width='112' height='74' viewBox='0 0 112 74' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 42 C38 28 74 28 77 42 C79 55 68 63 56 63 C44 63 33 55 35 42Z' fill='%23ff6b4a' stroke='%23fff4ef' stroke-width='4'/%3E%3Cpath d='M36 43 L18 34 M76 43 L94 34 M42 58 L31 67 M52 61 L48 70 M70 58 L81 67 M60 61 L64 70' stroke='%23ff6b4a' stroke-width='6'/%3E%3Cpath d='M23 32 C10 25 14 12 28 18 M89 32 C102 25 98 12 84 18' stroke='%23ff6b4a' stroke-width='8'/%3E%3Ccircle cx='48' cy='39' r='3' fill='%23041a33'/%3E%3Ccircle cx='64' cy='39' r='3' fill='%23041a33'/%3E%3C/g%3E%3C/svg%3E");
}
.sea-life-crab-one {
  right: 12%;
  transform: rotate(4deg);
}
.sea-life-crab-two {
  left: 54%;
  width: 54px;
  opacity: 0.68;
  transform: scaleX(-1) rotate(-7deg);
}
.sea-life-shell {
  width: 48px;
  height: 42px;
  bottom: 13px;
  opacity: 0.86;
  background-image: url("data:image/svg+xml,%3Csvg width='82' height='70' viewBox='0 0 82 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fff4ef' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 56 C12 31 27 12 41 12 C55 12 70 31 70 56 Z' fill='%23ffc857'/%3E%3Cpath d='M41 13 V56 M27 21 L36 56 M55 21 L46 56 M17 39 L31 56 M65 39 L51 56' fill='none' opacity='.75'/%3E%3Cpath d='M12 56 H70'/%3E%3C/g%3E%3C/svg%3E");
}
.sea-life-shell-one {
  left: 31%;
  transform: rotate(-10deg);
}
.sea-life-shell-two {
  right: 30%;
  width: 38px;
  opacity: 0.72;
  transform: rotate(12deg);
}
@keyframes footerWave {
  from { transform: translateX(0); }
  to { transform: translateX(-720px); }
}
@keyframes footerWaveReverse {
  from { transform: translateX(-720px); }
  to { transform: translateX(0); }
}
@keyframes marlinLeap {
  0%, 6%, 26%, 100% { transform: translate3d(-130px, 82px, 0) rotate(-16deg); opacity: 0; }
  9% { transform: translate3d(-72px, 45px, 0) rotate(-19deg); opacity: 0; }
  11% { transform: translate3d(-34px, 20px, 0) rotate(-17deg); opacity: 0.48; }
  14% { transform: translate3d(26px, -12px, 0) rotate(-5deg); opacity: 0.72; }
  18% { transform: translate3d(86px, 18px, 0) rotate(10deg); opacity: 0.45; }
  22% { transform: translate3d(158px, 76px, 0) rotate(19deg); opacity: 0; }
}
@keyframes marlinLeapSmall {
  0%, 7%, 24%, 100% { transform: translate3d(130px, 72px, 0) scaleX(-1) rotate(-10deg); opacity: 0; }
  10% { transform: translate3d(72px, 36px, 0) scaleX(-1) rotate(-14deg); opacity: 0; }
  12% { transform: translate3d(34px, 12px, 0) scaleX(-1) rotate(-12deg); opacity: 0.34; }
  15% { transform: translate3d(-20px, -8px, 0) scaleX(-1) rotate(0deg); opacity: 0.48; }
  19% { transform: translate3d(-82px, 24px, 0) scaleX(-1) rotate(12deg); opacity: 0.24; }
  22% { transform: translate3d(-138px, 66px, 0) scaleX(-1) rotate(18deg); opacity: 0; }
}
@keyframes seaLifeBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}
.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px clamp(18px, 4vw, 56px) 42px;
  color: rgba(255,255,255,0.82);
  background:
    linear-gradient(90deg, rgba(255,200,87,0.12), transparent 35%, rgba(0,167,200,0.14)),
    linear-gradient(180deg, #062748 0%, #041a33 100%);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.site-footer strong {
  display: block;
  color: white;
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.site-footer p { margin: 0; }
.site-footer a { color: white; }
.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.footer-links a {
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
}
.footer-links a:hover {
  background: rgba(255,255,255,0.16);
}

.admin-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.3), transparent 35%), linear-gradient(180deg, var(--admin-bg), #e8f2ef);
}
.admin-card, .admin-section {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 18px 46px rgba(16, 35, 38, 0.08);
}
.admin-card { width: min(420px, 100%); display: grid; gap: 14px; }
.alert { color: #a62118; }
.success { padding: 10px 14px; border-radius: 8px; color: #087f5b; background: #dff8ec; font-weight: 800; }
.admin-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: var(--admin-bg); }
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px;
  background: linear-gradient(160deg, rgba(255, 200, 87, 0.18), transparent 28%), linear-gradient(180deg, var(--deep), #052d38);
  color: white;
}
.admin-sidebar nav { display: grid; gap: 10px; margin-top: 34px; }
.admin-sidebar nav a { padding: 11px 12px; border-radius: 8px; color: rgba(255,255,255,0.86); }
.admin-sidebar nav a:hover { background: rgba(255,255,255,0.12); color: white; }
.admin-main { display: grid; gap: 22px; padding: clamp(18px, 4vw, 42px); }
.admin-top { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.admin-top h1 { font-size: clamp(2.1rem, 4vw, 4.3rem); }
.admin-top p { margin: 8px 0 0; color: var(--muted); }
.admin-quickstart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.admin-quickstart article, .admin-metrics div, .cms-block {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 16px 42px rgba(16, 35, 38, 0.07);
}
.admin-quickstart span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mist); color: var(--sea); font-weight: 900; }
.admin-quickstart h2 { margin-top: 12px; font-size: 1.06rem; line-height: 1.15; }
.admin-quickstart p, .field-tip, .type-help, .block-heading p { color: var(--muted); line-height: 1.5; font-size: 0.94rem; }
.admin-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.admin-metrics strong { display: block; font-size: 2rem; }
.admin-metrics span { color: var(--muted); }
.setup-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.setup-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(180deg, white, #f6fbfa);
}
.setup-list strong { display: block; margin-bottom: 8px; }
.setup-list p { margin: 0; color: var(--muted); line-height: 1.5; }
.editor-panel { padding: 0; background: transparent; border: 0; box-shadow: none; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.65fr); gap: 18px; align-items: start; }
.editor-primary, .editor-side { display: grid; gap: 18px; }
.editor-side { position: sticky; top: 86px; }
.cms-block { display: grid; gap: 14px; }
.block-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.block-heading span { font-size: 1.22rem; font-weight: 900; }
.block-heading p { margin: 0; max-width: 330px; }
.cms-form label, .upload-form label, .admin-card label { display: grid; gap: 7px; color: var(--muted); font-weight: 750; }
.form-row { align-items: stretch; }
.form-row > label { flex: 1 1 210px; }
.form-row.tight > label { flex-basis: 120px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.toolbar button { min-height: 34px; padding: 8px 10px; background: var(--sea); }
.seo-preview { display: grid; gap: 5px; padding: 16px; border: 1px solid #d5e3ff; border-radius: 8px; background: #f8fbff; }
.seo-preview strong { color: #1a0dab; font-size: 1.1rem; line-height: 1.25; }
.seo-preview span { color: #006621; font-size: 0.9rem; }
.seo-preview p { margin: 0; color: #545454; line-height: 1.45; }
.save-button { position: sticky; bottom: 18px; min-height: 52px; font-size: 1.05rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.media-grid button { color: var(--ink); background: var(--mist); padding: 8px; }
.media-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.media-grid small { display: block; overflow-wrap: anywhere; margin-top: 6px; }
.copied { outline: 3px solid var(--gold); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

@media (max-width: 800px) {
  .site-header {
    align-items: center;
    padding: 8px 14px;
  }
  .brand {
    gap: 8px;
  }
  .brand-mark {
    width: 34px;
    height: 34px;
  }
  .brand-mark svg {
    width: 32px;
    height: 32px;
  }
  .nav-toggle { display: grid; }
  .site-nav {
    display: none;
    position: absolute;
    top: 52px;
    left: 18px;
    right: 18px;
    padding: 14px;
    border-radius: 8px;
    color: white;
    background: rgba(4, 26, 51, 0.96);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 24px 70px rgba(2, 14, 31, 0.38);
  }
  .site-nav.open { display: grid; }
  .hero {
    min-height: min(520px, 54vh);
    padding: 16px 18px;
    align-items: end;
  }
  .hero::after {
    bottom: 12px;
  }
  .hero-content {
    padding-bottom: 16px;
  }
  .hero-content::before {
    width: 74px;
    height: 6px;
    margin-bottom: 10px;
  }
  .hero .eyebrow {
    margin-bottom: 7px;
    font-size: 0.66rem;
  }
  .hero h1 {
    font-size: clamp(2.85rem, 19vw, 4.6rem);
  }
  .hero-content p:not(.eyebrow) {
    max-width: 32rem;
    margin: 8px 0 0;
    font-size: 0.88rem;
    line-height: 1.38;
  }
  .hero-actions {
    gap: 8px;
    margin-top: 12px;
  }
  .hero-actions .button {
    min-height: 40px;
    padding: 10px 12px;
  }
  .intro-grid, .card-grid, .article-hero, .reviews-panel, .newsletter-band, .admin-shell, .split, .admin-quickstart, .admin-metrics, .editor-layout, .swell-note, .tool-teaser, .tool-hero, .rankings-strip > div, .surf-insights, .quiver-tool, .quiver-form, .performance-grid div, .spot-grid div, .marine-data-panel > div, .setup-list, .product-buy-panel, .conditions-header, .conditions-score, .spot-map-panel, .spot-ranking-grid, .conditions-metrics, .spot-location-panel, .conditions-reading, .model-panel, .webcam-player, .webcam-links, .webcam-link-list { grid-template-columns: 1fr; }
  .conditions-page {
    width: min(520px, calc(100% - 20px));
    padding-top: 18px;
  }
  .conditions-tool {
    padding: 14px;
    gap: 14px;
  }
  .conditions-header {
    gap: 12px;
  }
  .forecast-visual {
    min-height: 440px;
  }
  .forecast-visual-overlay {
    background:
      linear-gradient(0deg, rgba(2, 14, 31, 0.6), rgba(2, 14, 31, 0.14)),
      linear-gradient(90deg, rgba(2, 14, 31, 0.28), transparent);
  }
  .forecast-visual-content {
    padding: 20px;
  }
  .forecast-visual-content > div {
    grid-template-columns: 1fr;
  }
  .forecast-visual-content span {
    min-height: 58px;
  }
  .forecast-visual-credit {
    right: 8px;
    bottom: 8px;
    font-size: 0.66rem;
  }
  .conditions-header h1 {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }
  .conditions-header p {
    font-size: 0.94rem;
  }
  .conditions-controls {
    padding: 12px;
  }
  .conditions-score {
    gap: 10px;
    padding: 16px;
  }
  .conditions-score strong {
    font-size: 1.9rem;
  }
  .spot-map-panel {
    padding: 14px;
  }
  .spot-map-canvas,
  .spot-map {
    min-height: 300px;
  }
  .spot-map-marker {
    width: 18px;
    height: 18px;
  }
  .spot-map-marker.top {
    width: 22px;
    height: 22px;
  }
  .spot-map-marker span {
    max-width: 118px;
    white-space: normal;
    font-size: 0.7rem;
  }
  .spot-ranking {
    padding: 14px;
  }
  .spot-ranking-head {
    display: grid;
    align-items: start;
  }
  .spot-ranking-head span {
    text-align: left;
  }
  .spot-ranking-grid {
    gap: 8px;
  }
  .ranking-card {
    min-height: 132px;
  }
  .ranking-table {
    max-height: 420px;
  }
  .ranking-table a {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 4px 10px;
    align-items: start;
    min-height: 92px;
    padding: 12px 10px;
  }
  .ranking-table span {
    grid-row: 1 / span 3;
    margin-top: 2px;
  }
  .ranking-table strong {
    display: grid;
    gap: 2px;
    align-items: start;
    min-width: 0;
    font-size: 0.98rem;
  }
  .ranking-table strong small {
    display: block;
    font-size: 0.76rem;
    line-height: 1.2;
  }
  .ranking-table em,
  .ranking-table > a > small {
    grid-column: 2;
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.25;
  }
  .source-status-row,
  .model-now > div,
  .forecast-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .webcam-player,
  .webcam-links {
    padding: 14px;
  }
  .webcam-frame {
    min-height: 210px;
  }
  .webcam-more-list {
    grid-template-columns: 1fr;
  }
  .webcam-more-list a {
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .webcam-more-list img,
  .webcam-more-placeholder {
    width: 92px;
  }
  .conditions-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .conditions-metrics article {
    min-height: 118px;
    padding: 12px;
  }
  .conditions-metrics strong {
    font-size: 1.45rem;
  }
  .spot-location-panel {
    padding: 14px;
  }
  .spot-location-facts {
    grid-template-columns: 1fr;
  }
  .spot-location-map,
  .spot-location-map iframe {
    min-height: 300px;
  }
  .review-auth, .reviews-panel .review-form { grid-column: auto; }
  .intro-grid {
    transform: none;
    width: min(520px, calc(100% - 20px));
    gap: 8px;
    margin-top: 10px;
  }
  .intro-grid a {
    min-height: 0;
    transform: none;
    padding: 13px;
  }
  .intro-grid strong {
    font-size: 1rem;
  }
  .intro-grid span {
    margin-top: 5px;
    font-size: 0.84rem;
    line-height: 1.35;
  }
  .swell-note,
  .tool-teaser {
    width: min(520px, calc(100% - 20px));
    padding: 18px;
  }
  .swell-note h2,
  .tool-teaser h2 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }
  .swell-note p,
  .tool-teaser p {
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .tool-teaser .button {
    width: 100%;
    min-height: 44px;
  }
  .card-grid { width: min(520px, calc(100% - 28px)); }
  .article-hero { padding-top: 22px; }
  .product-article-hero {
    gap: 16px;
    padding-top: 10px;
  }
  .product-media {
    gap: 10px;
  }
  .product-media img {
    max-height: 52vh;
    padding: 10px;
  }
  .product-hero-buy {
    align-items: stretch;
    display: grid;
    gap: 10px;
    padding: 12px;
  }
  .article-hero.product-article-hero h1 {
    font-size: clamp(1.7rem, 8.2vw, 2.25rem);
  }
  .article-hero.product-article-hero p {
    font-size: 0.94rem;
    line-height: 1.48;
  }
  .product-article-hero + .facts {
    margin-top: 6px;
  }
  .site-footer {
    display: grid;
    justify-items: start;
  }
  .footer-links {
    justify-content: flex-start;
  }
  .admin-sidebar { position: relative; height: auto; }
  .admin-sidebar nav { grid-template-columns: repeat(2, 1fr); }
  .editor-side { position: static; }
  .quiver-page {
    width: min(1180px, calc(100% - 20px));
    padding-top: 6px;
  }
  .tool-hero {
    gap: 10px;
    margin-bottom: 10px;
  }
  .quiver-page .page-hero.compact::before {
    display: none;
  }
  .tool-hero > div:first-child::before {
    width: 76px;
    height: 6px;
    margin-bottom: 10px;
  }
  .tool-hero h1 {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
  }
  .tool-hero p {
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .tool-hero-card {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
  }
  .tool-hero-card span {
    font-size: 1.9rem;
  }
  .tool-hero-card small {
    margin-top: 0;
  }
  .quiver-result {
    position: static;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "market"
      "controls";
    gap: 6px;
    padding: 8px;
  }
  .result-main {
    padding-bottom: 0;
  }
  .result-main .eyebrow {
    display: none;
  }
  .quiver-result h2 {
    font-size: clamp(1.25rem, 6vw, 1.55rem);
    line-height: 1.03;
  }
  .quiver-result p {
    margin: 4px 0 0;
    font-size: 0.82rem;
    line-height: 1.28;
  }
  .score-strip,
  .quiver-result .result-grid,
  .quiver-result .button {
    display: none;
  }
  .quiver-result .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiver-result .result-grid span {
    padding: 8px 9px;
    font-size: 0.88rem;
  }
  .quiver-result .result-grid span:nth-child(n+5) {
    display: none;
  }
  .quiver-result > .recommendation-block:nth-of-type(5),
  .quiver-result > .recommendation-block:nth-of-type(6),
  .quiver-result > .recommendation-block:nth-of-type(7) {
    display: none;
  }
  .quiver-result > .recommendation-block:nth-of-type(4) {
    display: grid;
    padding: 7px;
  }
  .quiver-result > .recommendation-block:nth-of-type(4) h3 {
    display: none;
  }
  .quiver-controls {
    padding: 0;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.1);
    box-shadow: none;
  }
  .quiver-controls summary {
    display: none;
  }
  .quiver-controls summary::after {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
  }
  .quiver-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    border-radius: 8px;
    background: rgba(255,255,255,0.96);
  }
  .quiver-form .mobile-extra {
    display: none;
  }
  .quiver-control {
    padding: 5px;
  }
  .quiver-control legend,
  .quiver-form label {
    gap: 3px;
    font-size: 0.72rem;
  }
  .quiver-control legend {
    margin-bottom: 4px;
  }
  .quiver-control.wide,
  .quiver-current {
    grid-column: 1 / -1;
  }
  .segmented-options,
  .segmented-options.two,
  .segmented-options.four,
  .segmented-options.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .segmented-options.five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .quiver-control:last-child .segmented-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .segmented-options.five label {
    min-width: 0;
  }
  .segmented-options span {
    min-height: 32px;
    padding: 5px 4px;
    font-size: 0.7rem;
  }
  .segmented-options input:checked + span {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42), 0 6px 14px rgba(7, 59, 76, 0.12);
  }
  .quiver-slider strong {
    font-size: 0.9rem;
  }
  .quiver-slider input[type="range"] {
    min-height: 30px;
  }
  .market-list a:nth-child(n+4) {
    display: none;
  }
  .market-list a {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 7px;
    min-height: 44px;
    padding: 6px;
  }
  .market-list img {
    width: 36px;
    max-height: 42px;
  }
  .market-list strong,
  .market-list small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
  .market-list strong {
    -webkit-line-clamp: 1;
    font-size: 0.8rem;
    line-height: 1.15;
  }
  .market-list small {
    -webkit-line-clamp: 1;
    font-size: 0.72rem;
    line-height: 1.15;
  }
  .score-strip span {
    padding: 8px 10px;
  }
  .form-section-title {
    display: none;
  }
  .form-section-title strong {
    font-size: 1rem;
  }
  .form-section-title span {
    max-width: none;
    font-size: 0.82rem;
  }
  .tool-explainer {
    display: none;
  }
  .buy-button { width: 100%; }
  .marlin { width: 112px; }
  .marlin-one { left: 4%; }
  .marlin-two { right: -2%; width: 92px; }
  .block-heading { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/* ===== forecast enhancements CSS ===== */

/* 4: verdict */
.spot-verdict {
  margin: 0 0 14px;
  padding: 14px 18px;
  border-radius: 8px;
  border-left: 4px solid #ffc857;
  background: linear-gradient(135deg, #10344a, #0a2436);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.45;
  box-shadow: 0 6px 18px rgba(2, 14, 31, 0.25);
}

/* 5: gauge */
.go-gauge {
  width: 96px;
  height: auto;
  display: block;
  margin: 8px 0 0 auto;
}

/* 6: compass */
.model-now > div:not(.wave-size-card) > span[data-compass-cell] {
  grid-template-columns: minmax(0, 1fr) 30px;
  grid-template-rows: auto auto;
  column-gap: 6px;
}
.model-now > div:not(.wave-size-card) > span[data-compass-cell] > strong {
  grid-column: 1;
  grid-row: 1;
}
.model-now > div:not(.wave-size-card) > span[data-compass-cell] > small {
  grid-column: 1;
  grid-row: 2;
}
.model-now > div:not(.wave-size-card) > span[data-compass-cell] > .compass-mount-inline {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
}
.compass-mount-inline {
  display: block;
  width: 30px;
  max-width: 30px;
}
.compass-mount-inline svg.compass-rose {
  width: 30px;
  height: 30px;
  display: block;
}
.model-now > div:not(.wave-size-card) > span {
  align-items: center;
}
.compass-mount-inline .compass-legend {
  display: none;
}
.compass-legend {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.compass-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.75);
  font-size: 0.75rem;
  font-weight: 700;
}
.compass-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.compass-legend i.swell { background: #7fd8e8; }
.compass-legend i.wind { background: #ffd770; }

/* 7: tide */
.tide-curve {
  width: 100%;
  height: auto;
  display: block;
}

/* 8: daylight strip */
.daylight-strip {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 8px;
  border: 1px solid rgba(255,255,255,0.14);
}
.daylight-night { background: rgba(4, 16, 28, 0.85); }
.daylight-day { background: rgba(255, 200, 87, 0.4); }

/* 2: ranking hero */
.rank-hero-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.time-machine {
  display: inline-flex;
  gap: 0;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.22);
}
.time-machine button {
  border: 0;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 8px 16px;
  cursor: pointer;
}
.time-machine button + button { border-left: 1px solid rgba(255,255,255,0.12); }
.time-machine button.is-active {
  background: var(--gold, #ffc857);
  color: #06283d;
}
.rank-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 700px) {
  .rank-hero-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .rank-hero-grid { grid-template-columns: repeat(3, 1fr); }
  .rank-card.rank-1 { grid-column: span 1; }
}
.rank-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.16);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.rank-card:hover { transform: translateY(-2px); border-color: rgba(255,200,87,0.5); }
.rank-card img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: #06283d;
}
.rank-pos {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(6, 40, 61, 0.85);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  z-index: 1;
}
.rank-card.rank-1 .rank-pos { background: var(--gold, #ffc857); color: #06283d; }
.rank-meta { display: grid; gap: 2px; color: #fff; min-width: 0; }
.rank-meta strong { font-size: 1rem; }
.rank-meta small { color: rgba(255,255,255,0.6); font-size: 0.75rem; }
.rank-nums { display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.rank-nums em {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 800;
  color: #7fd8e8;
  background: rgba(127, 216, 232, 0.12);
  padding: 2px 7px;
  border-radius: 999px;
}
.rank-score {
  font-size: 1.5rem;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 10px;
  color: #fff;
}
.rank-score.score-3 { background: rgba(76, 196, 122, 0.25); color: #4cc47a; }
.rank-score.score-2 { background: rgba(155, 201, 94, 0.2); color: #b8e07a; }
.rank-score.score-1 { background: rgba(224, 165, 93, 0.2); color: #e0a55d; }
.rank-score.score-0 { background: rgba(224, 93, 93, 0.18); color: #e08a8a; }

/* ===== index legibility & polish (rank cards + panels) ===== */
.rank-card {
  background: linear-gradient(135deg, #0f4a63, #0a3549);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 24px rgba(2, 14, 31, 0.35);
}
.rank-meta strong {
  color: #ffffff;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.rank-meta small {
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  font-weight: 600;
}
.rank-nums em {
  background: rgba(6, 40, 61, 0.75);
  color: #aee6f2;
  border: 1px solid rgba(127,216,232,0.25);
  font-size: 0.85rem;
  padding: 3px 9px;
}
.rank-score {
  background: rgba(6, 40, 61, 0.85);
  border: 1px solid rgba(255,255,255,0.2);
}
.rank-hero-head h2 { color: #0b3c5c; }
.rank-hero-head .eyebrow { color: #0b6a8a; }
.rank-hero-head, .rank-hero-head div { color: #0b3c5c; }
.time-machine button { background: rgba(11, 60, 92, 0.08); color: #0b3c5c; font-weight: 800; }
.time-machine button + button { border-left: 1px solid rgba(11, 60, 92, 0.18); }
.time-machine button.is-active { background: #ffc857; color: #06283d; }

/* prompt card when no spot selected on index */
.conditions-score { color: #fff; }

/* general panel headings contrast */
.spot-map-panel h2 { color: #fff; }
.forecast-detail-page .conditions-header h1 { color: #fff; }

/* ===== slim conditions header + styled dropdown ===== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.conditions-header--slim {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-bottom: 14px;
}
.conditions-header--slim .spot-select-label {
  display: block;
  position: relative;
  min-width: 260px;
}
.conditions-header--slim select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 11px 42px 11px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.28);
  background:
    linear-gradient(135deg, #0f4a63, #0a3549);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(2, 14, 31, 0.25);
  transition: border-color 0.15s ease;
}
.conditions-header--slim select:hover,
.conditions-header--slim select:focus {
  border-color: #ffc857;
  outline: none;
}
.conditions-header--slim select option {
  background: #0a3549;
  color: #fff;
  font-weight: 600;
}
.spot-select-label::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid #ffc857;
  border-bottom: 2.5px solid #ffc857;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.conditions-header--slim .spots-count {
  color: rgba(255,255,255,0.75);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.conditions-header--slim .conditions-refresh {
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.conditions-header--slim .conditions-refresh:hover {
  background: rgba(255,255,255,0.2);
}
@media (max-width: 700px) {
  .conditions-header--slim {
    justify-content: stretch;
  }
  .conditions-header--slim .spot-select-label { min-width: 0; flex: 1; }
}

/* ===== compress vertical spacing on forecast pages ===== */
.forecast-detail-page {
  padding-top: 8px !important;
}
.forecast-detail-page .conditions-tool {
  padding-top: 0 !important;
}
.forecast-detail-page .conditions-header--slim {
  margin-bottom: 10px;
}
.forecast-detail-page .forecast-visual {
  margin-top: 0;
}
.forecast-detail-page .model-panel {
  margin-top: 12px;
}
/* tighten hero image block so it doesn't add huge empty bands */
.forecast-detail-page .forecast-visual img,
.forecast-detail-page .forecast-visual .forecast-visual-overlay {
  max-height: 380px;
  object-fit: cover;
}

/* hero visual: cap height on detail pages — was clamp up to 560px, too tall */
.forecast-detail-page .forecast-visual {
  min-height: 0;
  height: auto;
  max-height: none;
}
.forecast-detail-page .forecast-visual .forecast-visual-content h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
}
.forecast-detail-page .forecast-visual img {
  height: 100%;
  object-fit: cover;
}
/* gap between dropdown bar and hero was padding on the tool/visual wrapper */
.forecast-detail-page .conditions-page-gap,
.forecast-detail-page .conditions-tool > * + * {
  margin-top: 10px;
}

/* the tool panel itself wraps everything in a light card with big internal padding:
   forecast-detail pages don't need the card chrome or the 18px row gaps */
.forecast-detail-page .conditions-tool {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: 8px;
}

/* controls bar: kill the old card wrapper styles on detail pages */
.forecast-detail-page .conditions-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  flex-wrap: wrap;
}
.forecast-detail-page .conditions-controls .spots-count {
  margin-left: auto;
}

.forecast-strip > span > em,
.forecast-strip > span > small {
  justify-self: start;
}
.forecast-strip > span > em { margin-right: 6px; }

.conditions-page:not(.forecast-detail-page) .conditions-header h1 {
  color: #0b3c5c;
}
.conditions-page:not(.forecast-detail-page) .conditions-header p {
  color: #4a6572;
}
.conditions-page:not(.forecast-detail-page) .conditions-header .eyebrow {
  color: #0b6a8a;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(7, 59, 76, 0.12);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 16px 42px rgba(7, 59, 76, 0.08);
}

/* ===== INDEX PAGE PROFESSIONAL REDESIGN ===== */
/* Scope: overview mode only (index), not spot detail pages */

/* --- 1. Header: give it a real card presence so the dropdown is findable --- */
.conditions-page:not(.forecast-detail-page) .conditions-header {
  background: linear-gradient(135deg, #0f4a63, #0a3549);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 14px 34px rgba(2, 14, 31, 0.35);
  border: 1px solid rgba(255,255,255,0.14);
}
.conditions-page:not(.forecast-detail-page) .conditions-header h1 {
  color: #ffffff;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 4px 0 6px;
}
.conditions-page:not(.forecast-detail-page) .conditions-header .eyebrow {
  color: #ffc857;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.conditions-page:not(.forecast-detail-page) .conditions-header p {
  color: rgba(255,255,255,0.85);
  font-size: 0.98rem;
}

/* dropdown: prominent, labeled look, dark on dark card */
.conditions-page:not(.forecast-detail-page) .conditions-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls label {
  display: block;
  position: relative;
  min-width: 300px;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 13px 46px 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(6, 40, 61, 0.9);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls select:hover,
.conditions-page:not(.forecast-detail-page) .conditions-controls select:focus {
  border-color: #ffc857;
  outline: none;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls select option {
  background: #0a3549;
  color: #fff;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls label::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #ffc857;
  border-bottom: 2.5px solid #ffc857;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls span {
  color: rgba(255,255,255,0.7);
  font-size: 0.82rem;
  font-weight: 700;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls .conditions-refresh {
  align-self: flex-start;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls .conditions-refresh:hover {
  background: rgba(255,255,255,0.2);
}

/* --- 2. Ranking section: dark panel for readable hero cards --- */
.spot-ranking {
  background: linear-gradient(145deg, #0f4a63, #082c3f) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 18px 46px rgba(2, 14, 31, 0.3) !important;
}
.spot-ranking-head h2 { color: #fff !important; }
.spot-ranking-head span { color: rgba(255,255,255,0.7) !important; }

/* ranking empty state readable */
.ranking-empty { color: rgba(255,255,255,0.85); }

/* --- 3. Map panel: dark to match, readable legend --- */
.spot-map-panel {
  background: linear-gradient(145deg, #0f4a63, #082c3f) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 18px 46px rgba(2, 14, 31, 0.3) !important;
}
.spot-map-panel h2 { color: #fff !important; }
.spot-map-panel p { color: rgba(255,255,255,0.8) !important; }
.spot-map-legend span { color: #fff !important; font-weight: 700; }
.spot-map-legend {
  background: rgba(6, 40, 61, 0.85);
  border-radius: 8px;
  padding: 6px 12px;
}

/* --- 4. 'Elige un spot' score prompt readable --- */
.conditions-score { color: #fff !important; }
.conditions-score strong { color: #ffc857; }

/* --- 5. tighten section spacing on index --- */
.conditions-page:not(.forecast-detail-page) .conditions-tool {
  gap: 14px;
}

/* index: visible page title above controls */
.conditions-page:not(.forecast-detail-page) .conditions-header-title {
  color: #fff;
}
.conditions-page:not(.forecast-detail-page) .conditions-header-title h1 {
  color: #fff;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  margin: 6px 0;
}
.conditions-page:not(.forecast-detail-page) .conditions-header-title p {
  color: rgba(255,255,255,0.8);
  margin: 0;
}
.conditions-page:not(.forecast-detail-page) .conditions-header-title .eyebrow {
  color: #ffc857;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
}

/* rank hero injected container: dark panel regardless of parent */
[data-conditions-ranking] {
  background: linear-gradient(145deg, #0f4a63, #082c3f);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 18px 46px rgba(2, 14, 31, 0.3);
}
[data-conditions-ranking] .rank-hero-head h2 {
  color: #fff !important;
}
[data-conditions-ranking] .rank-hero-head .eyebrow {
  color: #ffc857 !important;
}

/* index: no score prompt panel at all */
.conditions-page:not(.forecast-detail-page) [data-conditions-score] {
  display: none !important;
}

/* ===== FINAL index header: light card, dark text (overrides all earlier index rules) ===== */
.conditions-page:not(.forecast-detail-page) .conditions-header {
  background: linear-gradient(135deg, #ffffff, #eef7fa) !important;
  border: 1px solid rgba(7, 59, 76, 0.12) !important;
  box-shadow: 0 14px 34px rgba(2, 14, 31, 0.18) !important;
}
.conditions-page:not(.forecast-detail-page) .conditions-header h1,
.conditions-page:not(.forecast-detail-page) .conditions-header-title h1 {
  color: #0b3c5c !important;
}
.conditions-page:not(.forecast-detail-page) .conditions-header p,
.conditions-page:not(.forecast-detail-page) .conditions-header-title p {
  color: #44626f !important;
}
.conditions-page:not(.forecast-detail-page) .conditions-header .eyebrow,
.conditions-page:not(.forecast-detail-page) .conditions-header-title .eyebrow {
  color: #0b6a8a !important;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls span {
  color: #44626f !important;
}

/* index header: Actualizar button readable + controls compact */
.conditions-page:not(.forecast-detail-page) .conditions-controls .conditions-refresh {
  background: #ffc857 !important;
  color: #06283d !important;
  border: 0 !important;
  font-weight: 900 !important;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls .conditions-refresh:hover {
  background: #ffd97e !important;
}
/* 2) kill the white box: flatten header on index, dropdown floats top-right */
.conditions-page:not(.forecast-detail-page) .conditions-header {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.conditions-page:not(.forecast-detail-page) .conditions-header-title {
  max-width: 560px;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  align-items: flex-end;
}
.conditions-page:not(.forecast-detail-page) .conditions-controls .spots-count {
  display: none;
}

/* dropdown caption label */
.conditions-page:not(.forecast-detail-page) .spot-select-caption {
  display: block;
  color: rgba(255,255,255,0.9);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.conditions-page:not(.forecast-detail-page) .conditions-header--slim,
.conditions-page:not(.forecast-detail-page) .conditions-header {
  margin-bottom: 12px;
}

/* ===== index: dropdown pinned top-right of header row ===== */
@media (min-width: 861px) {
  .conditions-page:not(.forecast-detail-page) .conditions-header {
    flex-direction: row;
    align-items: flex-start;
  }
  .conditions-page:not(.forecast-detail-page) .conditions-header-title {
    flex: 1;
  }
  .conditions-page:not(.forecast-detail-page) .conditions-controls {
    flex: 0 0 300px;
    margin-top: 4px;
  }
}
@media (max-width: 860px) {
  .conditions-page:not(.forecast-detail-page) .conditions-header {
    flex-direction: column;
    gap: 12px;
  }
  .conditions-page:not(.forecast-detail-page) .conditions-controls {
    width: 100%;
  }
  .conditions-page:not(.forecast-detail-page) .conditions-controls label {
    min-width: 0;
    width: 100%;
  }
  .conditions-page:not(.forecast-detail-page) .conditions-controls .conditions-refresh {
    width: 100%;
  }
}

/* spot metric boxes: light pastel for readability */
.conditions-page .conditions-metrics article {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(7, 59, 76, 0.14) !important;
}
.conditions-page .conditions-metrics article span { color: #0b6a8a !important; }
.conditions-page .conditions-metrics article strong { color: #0b3c5c !important; font-size: 1.25rem; }
.conditions-page .conditions-metrics article small { color: #5a7482 !important; }

/* ===== swell alert widget ===== */
.alert-widget {
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,200,87,0.22), rgba(255,200,87,0.08));
  border: 1px solid rgba(7,59,76,0.2);
  display: grid;
  gap: 12px;
}
.alert-widget h3 {
  margin: 0;
  color: #0b3c5c;
  font-size: 1.15rem;
}
.alert-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.alert-field {
  display: grid;
  gap: 4px;
  min-width: 150px;
}
.alert-field-grow { flex: 1; min-width: 200px; }
.alert-field span {
  color: #44626f;
  font-size: 0.78rem;
  font-weight: 700;
}
.alert-field select,
.alert-field input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(7,59,76,0.25);
  background: #ffffff;
  color: #0b3c5c;
  font: inherit;
  font-weight: 600;
}
.alert-btn {
  padding: 11px 22px;
  border-radius: 8px;
  border: 0;
  background: #ffc857;
  color: #06283d;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  height: 43px;
}
.alert-btn:hover { background: #ffd97e; }
.alert-note {
  margin: 0;
  color: #5a7482;
  font-size: 0.8rem;
}
.alert-note-ok { color: #4cc47a; font-weight: 700; }

/* spot pages: white content card around everything, like the index */
.forecast-detail-page .conditions-tool {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(239, 249, 250, 0.94)),
    linear-gradient(135deg, rgba(255, 200, 87, 0.14), transparent 42%) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: 0 30px 80px rgba(2, 14, 31, 0.24) !important;
  border-radius: 8px !important;
  padding: clamp(14px, 2.5vw, 24px) !important;
}
/* panels inside keep their own dark styling where intended (model-panel, visual) */

/* detail pages: compact dropdown, right-aligned */
.forecast-detail-page .conditions-header--slim .spot-select-label {
  min-width: 0;
  width: 300px;
  max-width: 300px;
  margin-left: auto;
  flex: 0 0 300px;
}
.forecast-detail-page .conditions-header--slim .conditions-controls {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.forecast-detail-page .conditions-header--slim select {
  width: 100%;
  text-overflow: ellipsis;
}

/* detail pages: dropdown rightmost (btn & count to its left) */
.forecast-detail-page .conditions-header--slim .conditions-controls {
  flex-direction: row-reverse;
}
.forecast-detail-page .conditions-header--slim .spot-select-label {
  margin-left: 0;
}

/* time-machine inside dark ranking panel: light buttons */
[data-conditions-ranking] .time-machine button {
  background: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
}
[data-conditions-ranking] .time-machine button.is-active {
  background: #ffc857 !important;
  color: #06283d !important;
}
[data-conditions-ranking] .rank-hero-head .eyebrow {
  color: #ffc857 !important;
}

/* image logo in header */
/* old 40px brand-mark-img rule removed Sep 6 - superseded by 80px rule below */

/* header: deep-sea (right) to light blue (left) gradient + subtle wave texture */
.site-header {
  background:
    /* wave-line texture layers */
    repeating-radial-gradient(ellipse 140% 90% at 85% 120%,
      transparent 0 26px, rgba(255,255,255,0.045) 26px 27px, transparent 27px 54px),
    repeating-radial-gradient(ellipse 120% 70% at 70% 150%,
      transparent 0 18px, rgba(0, 167, 200, 0.05) 18px 19px, transparent 19px 38px),
    /* light sweep diagonal */
    linear-gradient(115deg, rgba(255,255,255,0.05) 0%, transparent 30%, transparent 70%, rgba(2,14,31,0.25) 100%),
    /* main gradient: light sky-blue left -> deep sea navy right */
    linear-gradient(to right, #1e7fae 0%, #135e8f 28%, #0a3d6e 55%, #062a52 78%, #041a33 100%);
  border-bottom: 1px solid rgba(120, 200, 255, 0.25);
  box-shadow: 0 6px 24px rgba(2, 14, 31, 0.35);
}
/* soften the old translucent overlay rules that fight the gradient */
.site-header .brand > span:last-child {
  text-shadow: 0 2px 10px rgba(2, 14, 31, 0.5);
}
.brand-mark-img {
  width: 80px;
  height: 80px;
  display: block;
}
@media (max-width: 800px) {
  .brand-mark-img { width: 56px; height: 56px; }
}

/* detail pages: mobile — stack header like index (undo 300px nowrap dropdown) */
@media (max-width: 860px) {
  .forecast-detail-page .conditions-header--slim {
    flex-direction: column;
    align-items: stretch;
  }
  .forecast-detail-page .conditions-header--slim .conditions-controls {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: stretch;
    width: 100%;
  }
  .forecast-detail-page .conditions-header--slim .spot-select-label {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .forecast-detail-page .conditions-header--slim .conditions-controls .conditions-refresh {
    flex: 1 1 100%;
    width: 100%;
  }
  .forecast-detail-page .conditions-header--slim .spots-count {
    display: none;
  }
}

/* detail pages mobile: refresh button sits on white card -> dark style like dropdown */
@media (max-width: 860px) {
  .forecast-detail-page .conditions-header--slim .conditions-controls .conditions-refresh {
    background: linear-gradient(135deg, #0f4a63, #0a3549);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(2, 14, 31, 0.25);
  }
  .forecast-detail-page .conditions-header--slim .conditions-controls .conditions-refresh:hover {
    background: linear-gradient(135deg, #12587a, #0c4160);
  }
}

/* ===== AEMET official maritime panel ===== */
.aemet-panel {
  position: relative;
  margin: 14px 0 26px;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(255,255,255,0.96), rgba(240,250,255,0.94));
  border: 1px solid rgba(7,59,76,0.14);
  box-shadow: 0 8px 24px rgba(7,59,76,0.08);
  color: #06283d;
  overflow: hidden;
}
.aemet-panel::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #00a7c8, #0f4a63);
}
.aemet-panel.aemet-warn::before { background: linear-gradient(180deg, #ff9a3d, #e23b3b); }
.aemet-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.aemet-brand {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #0b5a80;
}
.aemet-dates { font-size: .78rem; color: #5a7482; font-weight: 700; }
.aemet-zone { padding: 8px 0 2px; border-top: 1px dashed rgba(7,59,76,0.14); }
.aemet-zone-name {
  display: block; font-size: .78rem; font-weight: 800;
  color: #0b3c5c; text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 2px;
}
.aemet-zone p { margin: 0; font-size: .88rem; line-height: 1.5; color: #3d5a6b; }
.aemet-alertbar {
  padding: 10px 14px; border-radius: 10px; font-size: .88rem;
  margin-bottom: 10px; line-height: 1.45;
}
.aemet-alert-amarillo { background: #fdf3d7; color: #7a5200; border: 1px solid #e8c95e; }
.aemet-alert-naranja { background: #ffe3d0; color: #8a3d10; border: 1px solid #ff9a3d; }
.aemet-alert-rojo { background: #fde0e0; color: #a62118; border: 1px solid #e23b3b; }
.aemet-sit, .aemet-trend, .aemet-credit {
  margin: 8px 0 0; font-size: .8rem; color: #5a7482; line-height: 1.45;
}
.aemet-trend { color: #a06a00; font-weight: 600; }
.aemet-credit { opacity: .75; font-size: .72rem; }
[data-conditions-sources] p:first-child { margin-top: 0; }
[data-conditions-sources] { margin-bottom: 26px; }

/* ===== Spot location map (Google embed) ===== */
.spot-map-section { margin: 26px 0 30px; }
.spot-map-card {
  background: linear-gradient(165deg, rgba(255,255,255,0.97), rgba(240,250,255,0.95));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(2,14,31,0.16);
  border: 1px solid rgba(7,59,76,0.12);
}
.spot-map-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 18px 12px;
}
.spot-map-eyebrow {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #0b5a80;
}
.spot-map-name { font-size: .9rem; font-weight: 800; color: #06283d; }
.spot-map-frame { line-height: 0; }
.spot-map-frame iframe { width: 100%; height: 300px; display: block; }
.spot-map-links {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px 14px;
}
.spot-map-links a {
  padding: 8px 14px; border-radius: 999px;
  background: rgba(0,167,200,0.1); color: #0b5a80;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(0,167,200,0.25);
  transition: background .15s ease;
}
.spot-map-links a:hover { background: rgba(0,167,200,0.2); }
@media (max-width:560px){ .spot-map-frame iframe { height: 240px; } }

.spot-map-btn {
  padding: 8px 14px; border-radius: 999px;
  background: rgba(0,167,200,0.1); color: #0b5a80;
  font-size: .82rem; font-weight: 700; border: 1px solid rgba(0,167,200,0.25);
  cursor: pointer; transition: background .15s ease; font-family: inherit;
}
.spot-map-btn:hover { background: rgba(0,167,200,0.2); }
.spot-map-btn.is-active {
  background: linear-gradient(135deg, #00a7c8, #0f4a63);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(2,14,31,0.2);
}