:root {
  --sand: #FBF3E4; --sand-2: #F3E7D0; --card: #FFFFFF; --ink: #1F3540; --muted: #5C7480; --muted-2: #7F949E; --faint: #A6B6BD;
  --line: #EEDFC6; --line-2: #F6EEDF; --sea: #1FA3A8; --sea-deep: #157F84; --sea-soft: #DDF3F2; --sun: #FFD166; --coral: #F26B5B; --coral-soft: #FDE4DF;
  --good: #23996B; --mid: #E09B2D; --bad: #E2604F;
  --shadow: 0 2px 0 rgba(31,53,64,.03), 0 14px 36px rgba(31,53,64,.10);
  --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, sans-serif;
  --r: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--sand); background-image: radial-gradient(1200px 380px at 50% -120px, #FFE9B8 0%, rgba(255,233,184,0) 70%); color: var(--ink); font: 15px/1.45 var(--body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Header */
.top { padding: 26px 0 14px; padding-top: max(26px, env(safe-area-inset-top)); }
.top__inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand__mark { width: 40px; height: 40px; }
.brand__text { display: flex; flex-direction: column; }
.brand__title { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -.01em; line-height: 1; color: var(--sea-deep); }
.brand__sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn--primary { background: var(--coral); color: #fff; box-shadow: 0 6px 16px rgba(242,107,91,.28); }
.btn--primary:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .6; cursor: default; }
.field { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.field:focus-within { border-color: var(--sea); box-shadow: 0 0 0 4px var(--sea-soft); }
.field input, .field select { border: 0; background: transparent; outline: none; color: var(--ink); font-size: 14px; }
.field--select select { appearance: none; -webkit-appearance: none; padding-right: 20px; cursor: pointer; }
.field--select select:disabled { color: var(--muted-2); cursor: default; }
.field--select .ico { position: absolute; right: 14px; pointer-events: none; width: 14px; height: 14px; }
.field--search { width: 260px; }
.field--search input { width: 100%; }
.field input::placeholder { color: var(--muted-2); }

/* Main */
.main { max-width: 1200px; margin: 0 auto; padding: 0 16px 48px; }
.statusbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 12px; padding: 0 2px; }
.status { margin: 0; color: var(--muted); font-size: 14px; }
.status--hint { font-size: 13px; color: var(--muted-2); white-space: nowrap; }
.status--error { color: var(--bad); }
.table-wrap { background: var(--card); border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 880px; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); text-align: left; white-space: nowrap; }
.table th:first-child, .table td:first-child { padding-left: 24px; }
.table th:last-child, .table td:last-child { padding-right: 24px; }
.table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); position: sticky; top: 0; background: var(--card); z-index: 1; border-bottom: 1px solid var(--line); }
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--sea); }
.table th.sorted { color: var(--ink); }
.table th.sorted::after { content: " ▾"; }
.table th.sorted.asc::after { content: " ▴"; }
.table .num { text-align: right; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: #FFFAF0; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td { font-size: 15px; }
.unit { color: var(--muted-2); font-size: 12px; margin-left: 3px; }
.rank { color: var(--faint); font-size: 14px; }
.beach { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.beach__name { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: 0; }
.beach__place { color: var(--muted-2); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.beach__chips { display: none; }
.score { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 30px; padding: 0 10px; border-radius: 999px; font-weight: 700; font-size: 15px; color: #fff; }
.score--good { background: var(--good); } .score--mid { background: var(--mid); } .score--bad { background: var(--bad); } .score--none { background: var(--faint); }
.cam-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--sea-soft); color: var(--sea); font-size: 12px; font-weight: 600; }
.cam-badge .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.dash { color: var(--faint); }
.footnote { color: var(--muted-2); font-size: 12px; margin: 14px 2px 0; }
.footnote a { color: inherit; }

/* Phone: rows become cards */
@media (max-width: 720px) {
  .top { padding-top: max(20px, env(safe-area-inset-top)); }
  .top__inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__title { font-size: 26px; }
  .brand__sub { display: none; }
  .controls { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
  .btn--primary { grid-column: 1 / -1; justify-content: center; height: 46px; font-size: 15px; }
  .field { height: 42px; padding: 0 14px; font-size: 13px; }
  .field--search { width: auto; }
  .statusbar { flex-direction: column; gap: 2px; margin-bottom: 10px; }
  .status--hint { white-space: normal; }
  .table-wrap { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .table { min-width: 0; border-collapse: separate; border-spacing: 0 8px; margin-top: -8px; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hide-sm, .hide-xs { display: none; }
  .table tbody tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 8px; align-items: center; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
  .table tbody tr:hover { background: var(--card); }
  .table td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .table td.hide-sm, .table td.hide-xs { display: none; }
  .table td:first-child, .table td:last-child { padding: 0; }
  .table td.rank { font-size: 13px; }
  .table td.cell-dist { font-size: 13px; color: var(--muted); }
  .table td.cell-dist .unit { display: none; }
  .beach__name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .beach__place { font-size: 11px; }
  .beach__chips { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ink); }
  .table tbody tr .beach__chips { display: flex; }
  .chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 8px; background: var(--sand); white-space: nowrap; }
  .chip .ico { width: 12px; height: 12px; stroke-width: 2.2; }
  .chip .unit { margin-left: 1px; color: inherit; font-size: inherit; }
  .chip--cam { background: var(--sea-soft); color: var(--sea); font-weight: 600; }
  .chip--sea .ico { color: var(--sea); } .chip--sun .ico { color: var(--mid); } .chip--wind .ico { color: var(--muted); } .chip--tide { color: var(--muted); }
  .score { min-width: 46px; height: 28px; font-size: 14px; }
}
/* the chips row is a td too; on phones it lives after the name cell */
.beach__chips-cell { display: none; }
@media (max-width: 720px) {
  .beach__chips-cell { display: block; grid-column: 2 / -1; }
  .beach__chips-cell .beach__chips { display: flex; grid-column: auto; }
}

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(22,35,46,.55); }
.modal__panel { position: relative; background: var(--card); width: 100%; max-width: 760px; max-height: 92vh; overflow: auto; border-radius: var(--r) var(--r) 0 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); box-shadow: var(--shadow); }
@media (min-width: 760px) { .modal { align-items: center; padding: 24px; } .modal__panel { border-radius: var(--r); padding: 24px; } }
.modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--sand); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.detail { display: flex; flex-direction: column; gap: 14px; }
.detail__head { display: flex; flex-direction: column; gap: 4px; padding-right: 48px; }
.detail__kicker { font-size: 11px; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase; }
.detail h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; }
@media (min-width: 760px) { .detail h2 { font-size: 32px; } }
.hero { position: relative; height: 200px; border-radius: 16px; background: var(--sea); overflow: hidden; color: #F4EEE2; }
@media (min-width: 760px) { .hero { height: 280px; } }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(22,35,46,.72) 0%, rgba(22,35,46,.1) 55%, rgba(22,35,46,0) 100%); }
.hero__bar { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hero__label { font-size: 12px; opacity: .85; }
.hero__score { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -.03em; }
.hero__cams { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(244,238,226,.18); backdrop-filter: blur(6px); font-size: 12px; font-weight: 600; }
.hero__cams .ico { width: 13px; height: 13px; }
.factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 760px) { .factors { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.factor { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--sand); }
.factor__label { font-size: 12px; color: var(--muted); }
.factor__value { display: flex; flex-direction: column; gap: 2px; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -.02em; }
.factor__value small { font-family: var(--body); font-weight: 500; font-size: 12px; color: var(--muted-2); letter-spacing: 0; margin-left: 0; }
.factor__bar { display: flex; align-items: center; gap: 8px; }
.factor__track { flex-grow: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.factor__fill { height: 4px; border-radius: 2px; }
.factor__part { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.extra { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); min-width: 0; }
.extra__label { font-size: 11px; color: var(--muted-2); }
.extra__value { font-weight: 600; font-size: 15px; }
.section { display: flex; flex-direction: column; gap: 8px; }
.section__title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin: 0; }
.hourly { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.hourly th, .hourly td { padding: 7px 4px; border-bottom: 1px solid var(--line-2); text-align: right; white-space: nowrap; }
.hourly th { color: var(--muted-2); font-weight: 500; border-bottom-color: var(--line); }
.hourly th:first-child, .hourly td:first-child { text-align: left; }
.hourly tr.now td { background: var(--sea-soft); font-weight: 700; }
.cams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 760px) { .cams { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cam { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.cam:hover { border-color: var(--sea); }
.cam__media { position: relative; height: 92px; background: var(--ink); color: #F4EEE2; display: flex; align-items: center; justify-content: center; }
@media (min-width: 760px) { .cam__media { height: 120px; } }
.cam__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam__media .ico { position: relative; width: 28px; height: 28px; stroke-width: 1.8; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.cam__body { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; }
.cam__name { font-weight: 600; font-size: 13px; }
.cam__meta { font-size: 11px; color: var(--muted-2); }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 600; }
.links a:hover { border-color: var(--sea); color: var(--sea); }
.small { color: var(--muted-2); font-size: 12px; margin: 0; }

/* ---- Leitura rápida: veredicto em palavras, números opcionais ---- */
.pick { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin: 4px 0 16px; padding: 20px 24px; background: linear-gradient(120deg, #157F84 0%, #1FA3A8 60%, #35B8B0 100%); color: #fff; border-radius: var(--r); cursor: pointer; box-shadow: 0 14px 36px rgba(21,127,132,.28); position: relative; overflow: hidden; }
.pick::after { content: ""; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,209,102,.22); pointer-events: none; }
.pick__kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.pick__name { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -.01em; line-height: 1.1; margin: 4px 0 6px; }
.pick__summary { margin: 0; font-size: 15px; opacity: .9; line-height: 1.4; }
.pick__summary strong { font-weight: 600; opacity: 1; }
.pick__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pick__meta { font-size: 12px; opacity: .7; white-space: nowrap; }
.verdict { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; }
.verdict::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.85); }
.verdict--great { background: var(--good); } .verdict--good { background: #3FAF85; } .verdict--ok { background: var(--mid); } .verdict--poor { background: #EA8A62; } .verdict--bad { background: var(--bad); }
.verdict__num { font-weight: 500; font-size: 12px; opacity: .85; }
.pick .verdict { height: 34px; font-size: 15px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--line); transition: background .15s; flex-shrink: 0; }
.toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.toggle input:checked + .toggle__track { background: var(--sea); }
.toggle input:checked + .toggle__track::after { left: 16px; }
.toggle input:focus-visible + .toggle__track { box-shadow: 0 0 0 3px var(--sea-soft); }
/* célula de factor: palavra em primeiro, número pequeno; invertido com números ligados */
.fx { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; row-gap: 1px; align-items: center; white-space: nowrap; line-height: 1.2; }
.fx .ico { grid-row: 1 / 3; width: 14px; height: 14px; stroke-width: 2.2; color: var(--muted-2); }
.fx--noicon { grid-template-columns: auto; }
.cam-badge--inline { height: 18px; padding: 0 6px; font-size: 11px; margin-left: 6px; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.cam-badge--inline .ico { width: 11px; height: 11px; }
.table td.cell-beach { white-space: normal; min-width: 230px; }
@media (max-width: 720px) { .cam-badge--inline { display: none; } }
.fx--good .ico { color: var(--good); } .fx--bad .ico { color: var(--bad); }
.fx__word { font-weight: 600; font-size: 14px; }
.fx__num { color: var(--muted-2); font-size: 12px; }
body.show-numbers .fx__word { font-weight: 400; font-size: 12px; color: var(--muted-2); order: 2; }
body.show-numbers .fx__num { font-weight: 600; font-size: 15px; color: var(--ink); order: 1; }
.table td .fx { vertical-align: middle; }
.table th.sorted.asc::after, .table th.sorted::after { color: var(--muted-2); }
.chip--good { background: #E4F3EC; } .chip--bad { background: #F7E6E3; }
.chip .fx__num { display: none; }
body.show-numbers .chip .fx__word { display: none; }
body.show-numbers .chip .fx__num { display: inline; color: var(--ink); font-weight: 600; font-size: 12px; }
.detail__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.detail__summary { margin: 0; font-size: 15px; color: var(--muted); }
@media (max-width: 720px) {
  .pick { grid-template-columns: 1fr; padding: 16px; border-radius: 16px; }
  .pick__side { flex-direction: row; align-items: center; justify-content: space-between; }
  .pick__name { font-size: 22px; }
  .pick__name .pick__meta { display: block; font-family: var(--body); font-weight: 400; font-size: 12px; margin-top: 2px; }
  .beach__name { white-space: normal; overflow: visible; }
  body:not(.has-location) .table td.cell-dist { display: none; }
  .table tbody tr { grid-template-columns: 22px minmax(0, 1fr) auto; }
  body.has-location .table tbody tr { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
  .chip { height: auto; min-height: 24px; padding: 3px 8px; white-space: normal; }
  .statusbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .status { font-size: 13px; }
}

/* Distância: botões, não dropdown */
.seg { display: inline-flex; align-items: stretch; height: 44px; padding: 3px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.seg__btn { display: inline-flex; align-items: center; gap: 4px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-on { background: var(--sea); color: #fff; font-weight: 700; }
.seg__custom input { width: 42px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: center; outline: none; -moz-appearance: textfield; }
.seg__custom input::-webkit-outer-spin-button, .seg__custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.seg__custom input::placeholder { color: var(--muted-2); }
.seg__custom.is-on input::placeholder { color: #fff; opacity: .7; }
@media (max-width: 720px) {
  .controls { grid-template-columns: 1fr; }
  .seg { height: 42px; width: 100%; }
  .seg__btn { flex: 1; justify-content: center; padding: 0 8px; font-size: 13px; }
  .seg__custom input { width: 34px; }
}

/* Botão de câmara: um clique, ao vivo */
.cam-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; background: var(--coral); color: #fff; font: 600 13px var(--body); cursor: pointer; white-space: nowrap; text-decoration: none; }
.cam-btn:hover { filter: brightness(1.1); }
.cam-btn .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.cam-btn--link { background: var(--sea-soft); color: var(--sea); }
.cam-btn--light { background: #fff; color: var(--coral); }
.cell-verdict { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.best-time { font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.chip--time { color: var(--muted); }
.pick__main { cursor: pointer; }
.pick__side .cam-btn { height: 34px; }
/* Janelas de 2h */
.daytabs { display: flex; flex-wrap: wrap; gap: 6px; }
.daytab { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font: 500 13px var(--body); cursor: pointer; }
.daytab.is-on { background: var(--sea); color: #fff; border-color: var(--sea); font-weight: 700; }
.windows { display: flex; flex-direction: column; gap: 6px; }
.win { display: grid; grid-template-columns: 82px 1fr 120px auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--sand); font-size: 13px; }
.win--best { outline: 2px solid var(--c); outline-offset: -2px; background: color-mix(in srgb, var(--c) 10%, var(--sand)); }
.win__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.win__bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.win__fill { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.win__label { font-weight: 600; white-space: nowrap; }
.win__label small { font-weight: 400; color: var(--muted-2); }
.win__tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cam { cursor: pointer; text-align: left; padding: 0; font: inherit; }
/* Leitor */
.player { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.player[hidden] { display: none; }
.player__backdrop { position: absolute; inset: 0; background: rgba(8,14,20,.85); }
.player__panel { position: relative; width: 100%; max-width: 1100px; background: var(--ink); color: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); margin: 12px; }
.player__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14px; }
.player__close { width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(244,238,226,.14); color: var(--sand); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.player__video { position: relative; background: #000; aspect-ratio: 16 / 9; }
.player__video video { width: 100%; height: 100%; display: block; }
.player__msg { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; font-size: 14px; color: var(--sand); pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.player__msg:empty { display: none; }
.player__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 14px; flex-wrap: wrap; }
.player__foot .daytab { background: transparent; color: var(--sand); border-color: rgba(244,238,226,.3); }
.player__foot .daytab.is-on { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.player__foot a { color: var(--sand); opacity: .8; }
@media (max-width: 720px) {
  .cell-cam { grid-column: 1 / -1; }
  .cell-cam:empty { display: none; }
  .cell-cam .cam-btn { width: 100%; justify-content: center; height: 40px; font-size: 14px; }
  .cell-verdict { align-items: flex-end; }
  .cell-verdict-td { display: block; }
  .best-time { display: none; }
  .win { grid-template-columns: 76px 1fr auto; }
  .win__label small { display: none; }
  .win__tag { grid-column: 1 / -1; }
  .player__panel { margin: 0; border-radius: 0; height: auto; }
  .player { align-items: center; }
  .pick__side { flex-wrap: wrap; }
}

/* Selector de dia */
.days { display: flex; gap: 6px; margin: 2px 0 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.days::-webkit-scrollbar { display: none; }
.day { flex: 1 0 auto; min-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--muted); cursor: pointer; font: inherit; }
.day__name { font-weight: 600; font-size: 14px; color: var(--ink); }
.day__date { font-size: 11px; color: var(--muted-2); }
.day.is-on { background: var(--sea); border-color: var(--sea); }
.day.is-on .day__name { color: #fff; }
.day.is-on .day__date { color: #fff; opacity: .75; }
.daytab__score { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; }
.verdict--inline { height: 24px; font-size: 12px; vertical-align: middle; }
@media (max-width: 720px) { .day { min-width: 64px; padding: 7px 8px; } .day__name { font-size: 13px; } }

/* ===== Leitura instantânea: nota A–E, medidores com pontos, letra maior ===== */
body { font-size: 17px; }
.table td { font-size: 17px; }
.table th { font-size: 12px; }
.ths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ths__btn { border: 0; background: transparent; padding: 0; text-align: left; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.ths__btn:hover { color: var(--sea); }
.ths__btn.sorted { color: var(--ink); }
.ths__btn.sorted::after { content: " ▾"; color: var(--muted-2); }
.ths__btn.sorted.asc::after { content: " ▴"; }
.cell-grade { width: 190px; }
.grade { display: inline-grid; grid-template-columns: 52px auto; align-items: center; gap: 0 10px; padding: 6px 12px 6px 6px; border-radius: 16px; background: var(--tint); border: 2px solid var(--c); min-width: 168px; }
.grade__letter { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: var(--c); color: #fff; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; }
.grade__text { display: flex; flex-direction: column; gap: 1px; }
.grade__word { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); line-height: 1.1; }
.grade__num { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
body.show-numbers .grade__num { font-size: 14px; color: var(--ink); font-weight: 700; }
.beach__name { font-size: 20px; }
.beach__place { font-size: 13px; }
.beach__time { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 14px; color: var(--muted); }
.beach__time .ico { width: 14px; height: 14px; color: var(--sea); }
.beach__cam { margin-top: 8px; }
.beach__cam:empty { display: none; }
.cell-meters { width: 46%; }
.meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.meter { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meter__head { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); }
.meter__head .ico { width: 14px; height: 14px; color: var(--c); stroke-width: 2.2; }
.meter__word { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.15; color: var(--ink); white-space: normal; }
.meter__pips { display: inline-flex; gap: 3px; margin-top: 2px; }
.pip { display: block; width: 18px; height: 7px; border-radius: 4px; background: var(--line); }
.pip--on { background: var(--c); }
.meter__num { font-size: 13px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
body.show-numbers .meter__num { color: var(--ink); font-weight: 700; font-size: 15px; }
body:not(.show-numbers) .meter__num { display: none; }
.cell-tide .fx__word { font-size: 15px; }
.cell-dist { font-size: 17px; }
.table tbody tr:hover .grade { filter: saturate(1.1); }
.verdict { height: 34px; font-size: 16px; }
.pick__summary { font-size: 17px; }
.status { font-size: 15px; }
.chip { font-size: 14px; height: 28px; }
.chip .ico { width: 14px; height: 14px; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .table td { font-size: 16px; }
  .table tbody tr { grid-template-columns: 22px auto minmax(0, 1fr); align-items: start; }
  body.has-location .table tbody tr { grid-template-columns: 22px auto minmax(0, 1fr) auto; }
  .cell-grade { width: auto; }
  .grade { grid-template-columns: 46px; grid-template-rows: auto auto; justify-items: center; gap: 4px; padding: 6px; min-width: 0; border-radius: 14px; }
  .grade__letter { width: 46px; height: 46px; font-size: 26px; }
  .grade__text { align-items: center; text-align: center; }
  .grade__word { font-size: 12px; }
  .grade__num { display: none; }
  body.show-numbers .grade__num { display: block; font-size: 11px; }
  .beach__name { font-size: 19px; }
  .beach__time { font-size: 13px; }
  .cell-meters { grid-column: 1 / -1; width: auto; margin-top: 6px; }
  .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .meter { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; border-radius: 12px; background: var(--sand); }
  .meter__head { width: 100%; }
  .meter__word { font-size: 16px; }
  .meter__pips { margin: 0; }
  .pip { width: 14px; height: 6px; }
  .cell-tide { display: none; }
  .cell-dist { grid-column: 4; font-size: 14px; }
  .beach__cam .cam-btn { height: 40px; font-size: 15px; padding: 0 16px 0 12px; }
}

/* Ponto de cor no dia = melhor praia desse dia */
.day { position: relative; padding-bottom: 10px; }
.day__dot { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.day.is-on .day__dot { box-shadow: 0 0 0 2px var(--sea); }
.day__grade { position: absolute; top: 6px; right: 8px; font-size: 11px; font-weight: 700; color: var(--muted-2); }
.day.is-on .day__grade { color: #fff; opacity: .85; }
/* Colunas mais compactas para caber sem scroll horizontal */
.table { min-width: 0; }
.cell-grade { width: 168px; }
.grade { min-width: 0; gap: 0 8px; padding: 5px 10px 5px 5px; }
.grade__letter { width: 46px; height: 46px; font-size: 27px; }
.grade__word { font-size: 16px; }
.table td.cell-beach { min-width: 190px; }
.cell-meters { width: 42%; }
.meters { gap: 8px; }
.meter__word { font-size: 16px; }
.pip { width: 15px; height: 6px; }
.table th, .table td { padding: 11px 8px; }
.table th:first-child, .table td:first-child { padding-left: 16px; }
.table th:last-child, .table td:last-child { padding-right: 16px; }
.cell-tide { width: 96px; }
.cell-dist { width: 58px; }
.cam-btn { height: 30px; font-size: 13px; }
@media (max-width: 1100px) { .cell-tide, th.hide-sm { display: none; } .meter__word { font-size: 15px; } .grade__word { font-size: 15px; } }
@media (max-width: 720px) {
  .cell-grade { width: auto; }
  .grade { grid-template-columns: 46px; gap: 4px; padding: 6px; }
  .table td.cell-beach { min-width: 0; }
  .day__grade { display: none; }
  .day { padding-bottom: 12px; }
}
@media (max-width: 720px) {
  .cell-meters { width: auto; grid-column: 1 / -1; }
  .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cell-tide { display: none; }
}
@media (max-width: 720px) {
  .grade { grid-template-columns: 62px; width: 74px; box-sizing: border-box; }
  .grade__letter { width: 44px; height: 44px; font-size: 25px; }
  .grade__text { width: 100%; min-width: 0; }
  .grade__word { font-size: 11px; letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Instalar como app (PWA) */
.install { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 12px 12px 16px; background: var(--ink); color: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(31,53,64,.35); }
.install[hidden] { display: none; }
.install__text { display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.3; }
.install__text span { opacity: .8; font-size: 13px; }
.install .btn { height: 40px; padding: 0 14px; font-size: 14px; }
.install__dismiss { width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
@media (min-width: 721px) { .install { left: auto; right: 24px; bottom: 24px; max-width: 460px; } }
.ioshelp h2 { margin: 0 0 12px; font-family: var(--display); font-size: 22px; }
.ioshelp ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.ico--inline { width: 16px; height: 16px; vertical-align: -3px; color: var(--sea); }
@media (max-width: 720px) {
  .install { grid-template-columns: 1fr auto; }
  .install__text { grid-column: 1 / -1; }
  .install .btn { grid-column: 1; justify-content: center; }
  .install__dismiss { grid-column: 2; width: 40px; height: 40px; }
}

/* Telemóvel: nota como pílula compacta ao lado do nome; cartão mais leve */
@media (max-width: 720px) {
  .table tbody tr { grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px; padding: 12px 12px 10px; }
  body.has-location .table tbody tr { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .table td.rank { order: 1; padding-top: 4px; }
  .table td.cell-beach { order: 2; }
  .table td.cell-grade { order: 3; width: auto; align-self: start; }
  .table td.cell-dist { order: 4; grid-column: 2 / -1; justify-self: end; font-size: 13px; color: var(--muted); margin-top: -4px; }
  .table td.cell-meters { order: 5; grid-column: 1 / -1; margin-top: 2px; }
  .grade { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 3px 10px 3px 3px; border-radius: 999px; border-width: 2px; }
  .grade__letter { width: 30px; height: 30px; border-radius: 999px; font-size: 17px; }
  .grade__text { width: auto; align-items: flex-start; text-align: left; }
  .grade__word { font-size: 13px; max-width: 78px; }
  .grade__num { display: none; }
  body.show-numbers .grade__num { display: none; }
  body.show-numbers .grade__word::after { content: attr(data-num); }
  .beach__name { font-size: 18px; line-height: 1.15; }
  .beach__place { font-size: 12px; }
  .beach__time { margin-top: 2px; font-size: 13px; }
  .beach__cam { margin-top: 6px; }
  .beach__cam .cam-btn { height: 36px; font-size: 14px; width: auto; }
  .meters { gap: 6px; }
  .meter { padding: 6px 8px; gap: 2px 6px; border-radius: 10px; }
  .meter__head { font-size: 11px; }
  .meter__word { font-size: 15px; }
  .pip { width: 12px; height: 5px; }
}

/* Indicador de carregamento: sol a nascer sobre ondas + esqueleto da lista */
.loading { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 8px 0 20px; }
.loading[hidden] { display: none; }
.loading__scene { position: relative; width: 240px; height: 120px; border-radius: 20px; overflow: hidden; background: linear-gradient(#FFE9B8, #FBF3E4 70%); box-shadow: var(--shadow); }
.loading__sun { position: absolute; left: 50%; top: 58px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 14px rgba(255,209,102,.45), 0 0 0 28px rgba(255,209,102,.18); animation: sunrise 2.6s ease-in-out infinite alternate; }
.loading__wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 46px; }
.loading__wave--back { fill: #5CC1C4; opacity: .7; animation: drift 5s linear infinite; bottom: 8px; }
.loading__wave--front { fill: var(--sea); animation: drift 3.2s linear infinite reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sunrise { from { transform: translateY(14px) scale(.96); } to { transform: translateY(-4px) scale(1); } }
.loading__text { margin: 0; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--sea-deep); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.skeleton { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.skeleton__row { height: 84px; border-radius: 16px; background: linear-gradient(90deg, var(--card) 0%, var(--sand-2) 45%, var(--card) 90%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border: 1px solid var(--line); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .loading__sun, .loading__wave, .loading__text, .skeleton__row { animation: none; } }
body.is-loading .statusbar, body.is-loading .table-wrap, body.is-loading #hero, body.is-loading #days { display: none; }

/* ===== Cabeçalho: pesquisa → distância → botão redondo de localização ===== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.top__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 24px; }
.controls { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.field--search { width: 320px; }
.locate { width: 46px; height: 46px; border-radius: 999px; border: 0; background: var(--coral); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(242,107,91,.28); }
.locate .ico { width: 20px; height: 20px; }
.locate.is-set { background: var(--sea); box-shadow: 0 6px 16px rgba(31,163,168,.28); }
.locate.is-busy .ico { animation: spin 1s linear infinite; }
.locate:disabled { opacity: .7; cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn--ghost { background: #fff; color: var(--sea-deep); border: 1px solid var(--line); height: 34px; padding: 0 14px; font-size: 14px; }

/* ===== Miniaturas nos cartões ===== */
.beach { flex-direction: row; align-items: flex-start; gap: 12px; }
.beach__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.beach__thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--sand-2); }
.beach__thumb--empty { display: block; background: linear-gradient(#FFE9B8, var(--sea-soft)); }
.cell-dist { white-space: nowrap; }
.cell-dist .ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; color: var(--sea); }

/* ===== Cartão da melhor praia ===== */
.pick { display: block; padding: 0; background: var(--card); color: var(--ink); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); }
.pick::after { display: none; }
.pick__photo { position: relative; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 22px; color: #fff; background: linear-gradient(120deg, #157F84, #35B8B0); cursor: pointer; }
.pick__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,40,50,.82) 0%, rgba(20,40,50,.25) 55%, rgba(20,40,50,.05) 100%); }
.pick__photo > *:not(img):not(.pick__shade):not(.pick__grade) { position: relative; }
.pick__kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; margin-bottom: 6px; }
.pick__title { display: flex; flex-direction: column; gap: 2px; padding-right: 200px; }
.pick__name { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.05; letter-spacing: -.01em; }
.pick__place { font-size: 14px; opacity: .9; }
.pick__photo .pick__grade { position: absolute; right: 18px; bottom: 18px; }
.pick__grade .grade { background: #fff; }
.pick__body { padding: 14px 22px 16px; display: flex; flex-direction: column; gap: 12px; }
.ptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ptile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--sand); border-left: 4px solid var(--c); min-width: 0; }
.ptile__head { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); }
.ptile__head .ico { width: 14px; height: 14px; color: var(--c); stroke-width: 2.2; }
.ptile__word { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.15; }
.ptile__num { font-size: 13px; color: var(--muted-2); }
.ptile__num .unit { font-size: 13px; margin-left: 2px; }
.pick__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pick__time { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--muted); }
.pick__time .ico { width: 15px; height: 15px; color: var(--sea); }
.pick__tide { color: var(--muted-2); }
.pick__actions { display: inline-flex; gap: 8px; }
.pick__actions .cam-btn { height: 34px; font-size: 14px; }

@media (max-width: 720px) {
  .top__inner { grid-template-columns: 1fr auto; gap: 10px; }
  .brand { grid-column: 1; grid-row: 1; }
  .locate { grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
  .controls { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .field--search { width: 100%; }
  .pick__photo { min-height: 190px; padding: 14px 16px; }
  .pick__title { padding-right: 0; }
  .pick__name { font-size: 26px; }
  .pick__photo .pick__grade { position: relative; margin-top: 10px; align-self: flex-start; }
  .pick__grade .grade { padding: 3px 10px 3px 3px; }
  .pick__body { padding: 12px 14px 14px; gap: 10px; }
  .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ptile { padding: 8px 10px; }
  .ptile__word { font-size: 16px; }
  .pick__foot { flex-direction: column; align-items: stretch; }
  .pick__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .pick__actions .cam-btn, .pick__actions .btn { height: 42px; justify-content: center; font-size: 15px; }
  /* cartão de praia: miniatura + nome + nota; medidores numa fila; rodapé com hora, ao vivo e distância */
  .table tbody tr { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; padding: 12px; }
  body.has-location .table tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  .table td.rank { display: none; }
  .table td.cell-beach { order: 1; }
  .table td.cell-grade { order: 2; }
  .table td.cell-meters { order: 3; grid-column: 1 / -1; margin: 0; }
  .table td.cell-dist { order: 4; grid-column: 1 / -1; justify-self: start; margin: 0; font-size: 14px; }
  .beach { gap: 10px; }
  .beach__thumb { width: 56px; height: 56px; border-radius: 12px; }
  .beach__name { font-size: 17px; }
  .beach__time { font-size: 13px; }
  .beach__cam { margin-top: 6px; }
  .meters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .meter { flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 8px; }
  .meter__head { width: auto; font-size: 10px; letter-spacing: .04em; }
  .meter__head .ico { width: 12px; height: 12px; }
  .meter__word { font-size: 13px; line-height: 1.1; min-height: 2.2em; display: flex; align-items: center; }
  .pip { width: 9px; height: 5px; }
  .meter__pips { gap: 2px; }
}
.pick__photo .grade { background: #fff; }
@media (max-width: 720px) { .pick__photo .pick__grade { display: flex; margin-top: 14px; line-height: 1; } }

/* ===== Um só indicador: número colorido; linha e factores com a sua cor ===== */
.nota { display: inline-flex; align-items: baseline; justify-content: center; gap: 2px; min-width: 88px; height: 56px; padding: 0 14px; border-radius: 16px; background: var(--c); color: #fff; font-family: var(--display); font-weight: 700; line-height: 1; box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 30%, transparent); }
.nota__num { font-size: 30px; }
.nota__den { font-size: 13px; font-weight: 600; opacity: .8; }
.nota--sm { height: 36px; min-width: 64px; padding: 0 10px; border-radius: 12px; box-shadow: none; }
.nota--sm .nota__num { font-size: 20px; } .nota--sm .nota__den { font-size: 11px; }
.grade { display: none; }
.cell-grade { width: 130px; }
.table tbody tr td { background: var(--tint); }
.table tbody tr td:first-child { box-shadow: inset 5px 0 0 var(--c); }
.table tbody tr:hover td { background: color-mix(in srgb, var(--c) 18%, #fff); }
.meter { padding: 8px 10px; border-radius: 12px; background: var(--tint); border-left: 3px solid var(--c); }
.meter__word { color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
.meter__head { color: color-mix(in srgb, var(--c) 60%, var(--muted)); }
.tide { display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 12px; font-size: 15px; line-height: 1.15; }
.tide__word { font-weight: 700; }
.tide__num { font-size: 12px; opacity: .8; }
.tide--high { background: #DDEFF8; color: #1E5F8A; border-left: 3px solid #2E86C1; }
.tide--low { background: #F6E9D2; color: #7A5A12; border-left: 3px solid #C9931E; }
.cell-dist { color: var(--muted); }
.pick__grade .nota { background: var(--c); }
.detail__verdict { gap: 12px; }
@media (max-width: 720px) {
  .table tbody tr { padding: 12px 12px 12px 14px; box-shadow: inset 5px 0 0 var(--c); background: var(--tint); }
  .table tbody tr td { background: transparent; }
  .table tbody tr td:first-child { box-shadow: none; }
  .nota { height: 44px; min-width: 72px; padding: 0 10px; border-radius: 12px; }
  .nota__num { font-size: 22px; } .nota__den { font-size: 11px; }
  .meter { border-left-width: 3px; }
  .cell-grade { width: auto; }
}
.day__grade { display: none; }

/* ===== Miniatura clicável = livecam ===== */
.table tbody tr td:first-child { box-shadow: inset 5px 0 0 var(--c); padding-left: 18px; }
.beach__thumb { position: relative; display: block; flex-shrink: 0; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--sand-2); font: inherit; }
.beach__thumb img, .beach__thumb-empty { display: block; width: 100%; height: 100%; object-fit: cover; }
.beach__thumb-empty { background: linear-gradient(#FFE9B8, var(--sea-soft)); }
.beach__thumb--live { cursor: pointer; box-shadow: 0 0 0 3px var(--coral); }
.beach__thumb--live:hover img { transform: scale(1.06); }
.beach__thumb img { transition: transform .2s ease; }
.live-tag { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 0; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.live-tag .ico { width: 12px; height: 12px; stroke-width: 2.4; }
.live-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.beach__cam { display: none; }
@media (max-width: 720px) {
  .table tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  .table tbody tr td:first-child { box-shadow: none; padding-left: 0; }
  .beach__thumb { width: 72px; height: 72px; border-radius: 14px; }
  .live-tag { font-size: 10px; padding: 3px 0; }
  .beach__thumb--live { box-shadow: 0 0 0 2px var(--coral); }
}
@media (prefers-reduced-motion: reduce) { .live-tag::before { animation: none; } }

/* Marca animada: ondas a rolar devagar, sol a respirar */
.mark__wave { animation: roll 9s linear infinite; }
.mark__wave--back { animation-duration: 14s; animation-direction: reverse; }
.mark__sun { transform-origin: 20px 17px; animation: breathe 6s ease-in-out infinite; }
.mark__glow { transform-origin: 20px 17px; animation: breathe 6s ease-in-out infinite reverse; }
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(30px); } }
@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-0.8px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .mark__wave, .mark__sun, .mark__glow { animation: none; } }
/* etiqueta AO VIVO numa linha */
.live-tag { white-space: nowrap; letter-spacing: .04em; }
@media (max-width: 720px) { .live-tag { font-size: 9px; gap: 3px; } .live-tag .ico { width: 10px; height: 10px; } .live-tag::before { width: 5px; height: 5px; } }