.reef-card {
  background: radial-gradient(circle at 92% 7%, rgba(111,200,190,.12), transparent 34%), linear-gradient(145deg, #edf8f5, #fffdf9 75%);
}
.reef-scene.lagoon-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  min-height: 230px;
  max-height: 340px;
  flex-shrink: 0;
  margin-top: 22px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(14,79,88,.15);
  border-radius: 16px;
  background: #126a82;
  box-shadow: 0 12px 28px rgba(13,71,83,.14);
}
.lagoon-picture, .lagoon-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.lagoon-art { display: block; }
.lagoon-picture::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3,45,57,.13), transparent 24% 75%, rgba(3,35,47,.28)); box-shadow: inset 0 1px rgba(237,255,244,.35); }
.lagoon-loading { position: absolute; inset: 0; display: grid; place-content: center; padding: 48px 20px; text-align: center; color: #e1f5eb; font: 500 12px/1.7 system-ui, sans-serif; pointer-events: none; }
.lagoon-loading[hidden] { display: none; }
.lagoon-caption { position: absolute; top: 14px; left: 14px; max-width: calc(100% - 74px); color: #effff4; font: 650 11px/1.45 system-ui, sans-serif; letter-spacing: .04em; text-shadow: 0 1px 6px rgba(2,34,46,.75); pointer-events: none; }
.lagoon-art-note { position: absolute; bottom: 13px; left: 14px; color: #ecf7e8; font: 500 10px/1.5 system-ui, sans-serif; letter-spacing: .06em; text-shadow: 0 1px 5px #123d46; pointer-events: none; }
.lagoon-toggle {
  width: 44px; height: 44px; position: absolute; top: 4px; right: 4px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #f0fae9;
}
.lagoon-toggle svg { width: 20px; height: 20px; padding: 5px; box-sizing: content-box; border: 1px solid rgba(231,254,240,.4); border-radius: 50%; background: rgba(8,46,60,.5); }
.lagoon-toggle path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.lagoon-toggle .lagoon-play-icon { display: none; stroke-width: 1.3; fill: currentColor; }
.lagoon-toggle[aria-pressed="true"] .lagoon-play-icon { display: block; }
.lagoon-toggle[aria-pressed="true"] .lagoon-pause-icon { display: none; }
.lagoon-toggle:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.lagoon-toggle:focus-visible { outline: 2px solid #ffedb9; outline-offset: -2px; }
.lagoon-toggle:disabled { opacity: .6; cursor: default; }
.reef-window-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.reef-window-button {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-width: 0; min-height: 56px; padding: 8px 10px; border: 1px solid #d7e5de; border-radius: 9px; color: #526e72; background: rgba(255,255,255,.65); text-align: start; transition: color .2s, border-color .2s, background .2s;
}
.reef-window-button span { font: 600 10px/1.4 system-ui, sans-serif; }
.reef-window-button time { font: 650 16px/1.15 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
/* 快捷入口仅展示日期和时间；光照说明在下方详情展示，并保留读屏名称。 */
.reef-window-light { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.reef-window-button.active { color: #f2faf2; border-color: #205b63; background: #205b63; }
.reef-window-button.active span { color: #c6e5da; }
.reef-window-button:hover:not(.active) { border-color: #80b4aa; background: #edf6ef; }
.reef-window-button:focus-visible { outline: 2px solid #338a84; outline-offset: 3px; }
.reef-timebar { min-width: 0; margin-top: 16px; padding: 14px 0 12px; border-block: 1px solid #dce7e0; }
.reef-time-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reef-time-controls > div { min-width: 0; }
.reef-time-controls label { display: block; color: #5f7879; font: 500 11px/1.5 system-ui, sans-serif; }
.reef-current-time { display: block; margin-top: 4px; color: #245c61; font: 700 14px/1.5 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.reef-time-best { flex-shrink: 0; max-width: 48%; min-height: 44px; padding: 8px 12px; border: 1px solid #d6e2db; border-radius: 10px; background: #fffdf8; color: #476c69; font: 650 12px/1.4 system-ui, sans-serif; cursor: pointer; }
.reef-time-best.is-selected { background: #faf2dc; border-color: #e6d7b2; color: #806935; }
.reef-time-best:hover { background: #f7efd9; border-color: #c8b780; }
.reef-time-best:focus-visible { outline: 2px solid #338a84; outline-offset: 3px; }
.reef-scrubber { position: relative; height: 50px; margin-top: 6px; direction: ltr; }
.reef-time-marks { position: absolute; inset: 7px 13px auto; height: 20px; pointer-events: none; }
.reef-time-tick { position: absolute; width: 2px; height: 5px; top: 8px; background: #aacbc4; transform: translateX(-50%); border-radius: 2px; }
.reef-time-tick.is-new-day { height: 12px; top: 1px; background: #688f8b; }
.reef-time-tick.is-best { width: 7px; height: 7px; top: 5px; background: #b0944e; border-radius: 50%; box-shadow: 0 0 0 3px #f5edda; }
.reef-scrubber input { position: absolute; inset: 6px 0 0; width: 100%; height: 44px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; border: 0; border-radius: 8px; background: transparent; box-shadow: none; cursor: ew-resize; touch-action: pan-y; direction: ltr; }
.reef-scrubber input::-webkit-slider-runnable-track { height: 4px; border-radius: 10px; background: linear-gradient(to right, #478f94 var(--scrub-progress, 0%), #bed5d4 var(--scrub-progress, 0%)); }
.reef-scrubber input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; border: 5px solid #fffef9; background: #277b82; box-shadow: 0 0 0 1px #7ba6a5, 0 3px 7px #164a522b; }
.reef-scrubber input::-moz-range-track { height: 4px; border-radius: 10px; background: linear-gradient(to right, #478f94 var(--scrub-progress, 0%), #bed5d4 var(--scrub-progress, 0%)); }
.reef-scrubber input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 5px solid #fffef9; background: #277b82; box-shadow: 0 0 0 1px #7ba6a5; }
.reef-scrubber input:focus-visible { outline: 2px solid #178994; outline-offset: 2px; }
.reef-scrubber input:disabled { opacity: .5; cursor: default; }
.is-time-scrubbing .reef-scrubber input::-webkit-slider-thumb { box-shadow: 0 0 0 1px #277b82, 0 0 0 7px #277b821c; }
.is-time-scrubbing .reef-scrubber input::-moz-range-thumb { box-shadow: 0 0 0 1px #277b82, 0 0 0 7px #277b821c; }
.reef-time-endpoints { display: flex; justify-content: space-between; gap: 12px; color: #688084; font: 500 10px/1.5 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.reef-timebar .reef-time-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 9px 0 0; color: #69817e; font: 400 10px/1.5 system-ui, sans-serif; }
.reef-time-note span { white-space: nowrap; }
.reef-active-window { margin-top: 20px; }
.reef-window-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.reef-window-heading > div > span { display: block; color: #59777b; font-size: 11px; line-height: 1.4; }
.reef-window-heading strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; margin-top: 5px; font: 500 34px/1.15 Georgia, serif; font-variant-numeric: tabular-nums; }
.reef-window-heading strong small { color: #627b7b; font: 600 11px/1.4 system-ui, sans-serif; }
.reef-condition-score { text-align: end; flex-shrink: 0; }
.reef-condition-score b { color: #206970; font: 500 30px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.reef-condition-score span { display: block; margin-top: 5px; color: #657e7f; font-size: 10px; }
.reef-condition-label { display: flex; align-items: center; gap: 7px; margin: 8px 0 16px; color: #2c6963; font: 650 12px/1.4 system-ui, sans-serif; }
.reef-condition-label i { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.reef-condition-label[data-tone="watch"] { color: #8a6b3b; }
.reef-condition-label[data-tone="alert"] { color: #a45246; }
.reef-light-comparison { margin: 0 0 15px; padding: 13px 14px; border-radius: 10px; border: 1px solid #d8e7dc; background: linear-gradient(130deg, #edf6ef, #fbfaf2); }
.reef-light-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.reef-light-summary strong { color: #275e5b; font: 650 13px/1.4 system-ui, sans-serif; }
.reef-solar-value { color: #215a5d; font: 600 20px/1.2 "Aptos", "Segoe UI", sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reef-solar-value small { font-size: 11px; color: #587775; font-weight: 500; }
.reef-light-comparison p { margin: 8px 0 5px; color: #466a68; font-size: 12px; line-height: 1.65; }
.reef-light-comparison > small { display: block; color: #627b77; font-size: 10px; line-height: 1.5; }
.reef-reading { display: grid; grid-template-columns: .8fr .8fr 1.15fr; gap: 10px; margin: 0; padding: 14px 0; border-block: 1px solid #dce7e0; }
.reef-reading > div { min-width: 0; }
.reef-reading dt { color: #678184; font-size: 10px; line-height: 1.5; }
.reef-reading dd { margin: 5px 0 0; font: 650 13px/1.4 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #294f57; }
.reef-location { margin-top: 15px; }
.reef-location > span { display: block; font-size: 10px; color: #668083; }
.reef-location > p { margin: 5px 0 0; font-size: 12px; font-weight: 650; line-height: 1.65; color: #315f64; }
.reef-guidance { margin: 5px 0 0; color: #647b7d; font-size: 11px; line-height: 1.65; }
.intelligence-card > .reef-data-note { margin: 13px 0 17px; color: #708481; font-size: 10px; line-height: 1.65; }
.reef-card > .intelligence-foot { font-size: 10px; }
.reef-empty { font-size: 12px; color: #627c80; }
@media (max-width: 700px) {
  .reef-window-button { padding-inline: 8px; }
  .reef-window-heading strong { font-size: 30px; }
  .reef-condition-score b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .lagoon-scene * { animation: none !important; transition: none !important; }
  .reef-window-button { transition: none; }
}

/* 看鱼安排：结论、差别和现场确认分层阅读；不再用总分暗示鱼群概率。 */
section.reef-visit-panel { background: linear-gradient(145deg,#eff7f3,#fffdf7); }
.reef-visit-panel .experience-panel-heading h3 { font-size: 14px; }
.reef-visit-panel h4 { margin: 0; font: 650 16px/1.55 system-ui,sans-serif; color: #285e59; text-wrap: balance; }
.reef-visit-decision { margin-top: 14px; }
section.reef-visit-panel p { margin: 7px 0 0; color: #4d6e68; font: 400 16px/1.7 system-ui,sans-serif; }
.reef-visit-panel[data-reef-decision="caution"] .reef-visit-decision h4,
.reef-visit-panel[data-reef-decision="missing"] .reef-visit-decision h4 { color: #886735; }
.reef-similar-range { border-inline-start: 2px solid #72a89a; padding-inline-start: 10px; margin-top: 14px; }
.reef-similar-range span { display: block; font-size: 12px; color: #607c73; }
.reef-similar-range strong { display: inline-block; margin-top: 3px; font: 650 15px/1.5 system-ui,sans-serif; color: #2d685e; }
.reef-visit-evidence { border-block: 1px solid #dce7df; padding-block: 12px; margin-top: 14px; }
.reef-compare-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 10px; font-size: 12px; color: #657e75; }
.reef-compare-heading time { font-variant-numeric: tabular-nums; }
.reef-visit-panel dl { margin: 6px 0; }
.reef-visit-panel dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 3px 8px; padding-block: 5px; }
.reef-visit-panel dt { color: #55776d; font-size: 14px; }
.reef-visit-panel dd { margin: 0; }
.reef-visit-panel dd b { font: 650 16px/1.5 system-ui,sans-serif; color: #285f59; font-variant-numeric: tabular-nums; }
.reef-visit-panel small { font: 400 12px/1.5 system-ui,sans-serif; color: #6b8278; }
.reef-visit-panel dd i { font: 400 12px/1.5 system-ui,sans-serif; color: #80988c; margin-inline: 8px; }
.reef-visit-panel .reef-visit-scope { font-size: 12px; color: #657e73; }
.reef-local-check { margin-top: 16px; }
.reef-visit-panel .reef-local-status { display: inline-block; margin: 0 0 10px; padding: 6px 9px; background: #f5eddc; border-radius: 6px; color: #806844; font-size: 12px; }
.reef-local-check h4 { font-size: 14px; }
.reef-local-check ul { list-style: none; padding: 0; margin: 8px 0 0; }
.reef-local-check li { position: relative; padding-inline-start: 14px; margin-top: 6px; color: #4b6d61; font: 400 14px/1.65 system-ui,sans-serif; }
.reef-local-check li::before { content: "·"; position: absolute; inset-inline-start: 2px; color: #669182; }
.reef-visit-methods { margin-top: 15px; border-top: 1px solid #dce7df; }
.reef-visit-methods summary { min-height: 44px; align-content: center; padding-block: 10px; box-sizing: border-box; cursor: pointer; font: 500 14px/1.5 system-ui,sans-serif; color: #436e63; }
.reef-visit-methods h4 { margin-top: 15px; font-size: 14px; }
.reef-visit-panel .reef-visit-methods p { font-size: 14px; }
.reef-method-sources a { color: #287c76; text-underline-offset: 3px; }
.reef-visit-jump { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; min-height: 44px; width: 100%; padding: 10px; margin-top: 12px; border: 1px solid #b4cdbf; border-radius: 8px; background: #e4f0e7; color: #2b665d; font: 600 14px/1.5 system-ui,sans-serif; cursor: pointer; }
.reef-visit-jump:hover { background: #d8eadd; }
.reef-visit-jump:focus-visible, .reef-visit-methods summary:focus-visible { outline: 2px solid #338a84; outline-offset: 3px; }
.reef-visit-panel { overflow-wrap: anywhere; }
.reef-visit-panel [dir="ltr"] { font-variant-numeric: tabular-nums; }