:root {--fa-primary: #1877f2;--fa-primary-light: #e7f0fd;--fa-primary-dark: #0f4c81;--fa-accent-cyan: #06b6d4;--fa-accent-violet: #7c3aed;--fa-accent-rose: #f43f5e;--fa-accent-gold: #d97706;--fa-accent-gold-mid: #fde68a;--fa-spring: #f472b6;--fa-spring-light: #fdf2f8;--fa-summer: #0ea5e9;--fa-summer-light: #e0f2fe;--fa-autumn: #ea580c;--fa-autumn-light: #fff7ed;--fa-winter: #64748b;--fa-winter-light: #f1f5f9;--fa-sunrise-from: #fb923c;--fa-sunrise-to: #fbbf24;--fa-sunset-from: #e11d48;--fa-sunset-to: #9333ea;--fa-text: #1c1e21;--fa-text-secondary: #475569;--fa-text-muted: #94a3b8;--fa-border: #e2e8f0;--fa-bg: #f8fafc;--fa-bg-card: #ffffff;--fa-radius: 12px;--fa-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);--fa-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);--fa-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);--fa-shadow-gold: 0 4px 16px rgba(217, 119, 6, 0.20);--fa-transition: 0.2s ease;--fa-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1)}
.fa-page-wrapper {max-width: 720px;margin: 0 auto;padding: 0 0 80px;background: var(--fa-bg)}
.fa-page-header {background: linear-gradient(135deg, #0a2e58 0%, #0f4c81 35%, #1877f2 70%, #06b6d4 100%);color: #fff;padding: 32px 20px 28px;position: relative;overflow: hidden}
.fa-page-header::before {content: "";position: absolute;inset: 0;background:
radial-gradient(ellipse at 75% 45%, rgba(6, 182, 212, 0.32) 0%, transparent 55%),
radial-gradient(ellipse at 15% 80%, rgba(99, 102, 241, 0.20) 0%, transparent 40%),
radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 30%);pointer-events: none}
.fa-page-header::after {content: "";position: absolute;inset: 0;background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);background-size: 24px 24px;pointer-events: none;mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 40%, transparent 100%);-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 40%, transparent 100%)}
.fa-header-decoration {position: absolute;right: 20px;top: 50%;transform: translateY(-50%);pointer-events: none}
.fa-header-compass {width: 80px;height: 80px;opacity: 0.15;color: #fff}
.fa-header-inner {position: relative;z-index: 1}
.fa-header-back {display: inline-flex;align-items: center;gap: 4px;color: rgba(255, 255, 255, 0.8);text-decoration: none;font-size: 12px;margin-bottom: 12px;transition: color var(--fa-transition)}
.fa-header-back:hover {color: #fff}
.fa-header-label {font-size: 11px;font-weight: 600;letter-spacing: 0.08em;text-transform: uppercase;opacity: 0.75;margin-bottom: 4px}
.fa-header-title {font-size: 22px;font-weight: 700;margin-bottom: 8px}
.fa-filter-bar {background: var(--fa-bg-card);border-bottom: 1px solid var(--fa-border);padding: 12px 20px;display: flex;gap: 8px;flex-wrap: wrap;align-items: center;position: sticky;top: 0;z-index: 40}
.fa-filter-group {display: flex;gap: 4px;flex-wrap: nowrap;overflow-x: auto;scrollbar-width: none;-webkit-overflow-scrolling: touch}
.fa-filter-group::-webkit-scrollbar {display: none}
.fa-filter-chip {display: inline-flex;align-items: center;padding: 5px 12px;border-radius: 20px;border: 1px solid var(--fa-border);background: var(--fa-bg-card);color: var(--fa-text-secondary);font-size: 12px;font-weight: 500;white-space: nowrap;cursor: pointer;transition: background var(--fa-transition), border-color var(--fa-transition), color var(--fa-transition);min-height: 32px;user-select: none;text-decoration: none}
.fa-filter-chip.is-active {background: var(--fa-primary-light);border-color: var(--fa-primary);color: var(--fa-primary)}
@media (hover: hover) {.fa-filter-chip:hover:not(.is-active) {background: var(--fa-bg);border-color: #c8d4e8}}
.fa-filter-sep {width: 1px;height: 24px;background: var(--fa-border);flex-shrink: 0;align-self: center}
.fa-filter-more {display: inline-flex;align-items: center;padding: 5px 10px;border-radius: 20px;border: 1px solid var(--fa-border);background: var(--fa-bg-card);color: var(--fa-text-muted);font-size: 11px;cursor: pointer;white-space: nowrap}
.fa-filter-dropdown {display: none;flex-wrap: wrap;gap: 4px;width: 100%;padding-top: 4px}
.fa-filter-dropdown.is-open {display: flex}
.fa-story-section {padding: 0 20px}
.fa-story-chapter {margin-top: 40px;opacity: 0;transform: translateY(20px);transition: opacity 0.5s ease, transform 0.5s ease}
.fa-story-chapter.is-visible {opacity: 1;transform: translateY(0)}
.fa-hero-chapter {background: linear-gradient(160deg, #0a1628 0%, #0f2744 30%, #0f4c81 70%, #1254a8 100%);border-radius: var(--fa-radius);padding: 28px 24px 24px;color: #fff;text-align: center;position: relative;overflow: hidden;margin-top: 20px}
.fa-hero-chapter::before {content: "";position: absolute;inset: 0;background:
radial-gradient(ellipse at 18% 85%, rgba(6, 182, 212, 0.28) 0%, transparent 50%),
radial-gradient(ellipse at 82% 18%, rgba(24, 119, 242, 0.38) 0%, transparent 50%),
radial-gradient(ellipse at 50% 120%, rgba(99, 102, 241, 0.15) 0%, transparent 50%);pointer-events: none}
.fa-hero-chapter::after {content: "";position: absolute;inset: 0;background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);background-size: 20px 20px;pointer-events: none}
.fa-hero-inner {position: relative;z-index: 1}
.fa-hero-count-label {font-size: 12px;font-weight: 600;letter-spacing: 0.1em;text-transform: uppercase;opacity: 0.6;margin-bottom: 8px}
.fa-hero-count {font-size: 64px;font-weight: 800;line-height: 1;letter-spacing: -3px;background: linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 2px}
.fa-hero-count-unit {font-size: 15px;font-weight: 600;opacity: 0.8;margin-bottom: 20px;letter-spacing: 0.05em}
.fa-hero-stats {display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px;max-width: 480px;margin: 0 auto}
.fa-hero-stat-item {display: flex;flex-direction: column;align-items: center;gap: 2px;padding: 10px 6px;border-radius: 8px;background: rgba(255, 255, 255, 0.06);border: 1px solid rgba(255, 255, 255, 0.10)}
.fa-hero-stat-value {font-size: 20px;font-weight: 700;color: #fff;line-height: 1.1}
.fa-hero-stat-label {font-size: 10px;font-weight: 500;opacity: 0.55;letter-spacing: 0.04em;text-align: center}
.fa-chapter-eyebrow {display: inline-flex;align-items: center;gap: 5px;font-size: 11px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: var(--fa-primary);margin-bottom: 6px}
.fa-chapter-headline {font-size: 22px;font-weight: 700;color: var(--fa-text);margin-bottom: 4px;line-height: 1.3}
.fa-chapter-sub {font-size: 13px;color: var(--fa-text-secondary);margin-bottom: 20px;line-height: 1.6}
.fa-chapter-sub .fa-sub-num {font-weight: 800;color: var(--fa-text);font-size: 14px}
.fa-chapter-sub .fa-sub-fish {font-weight: 700;color: var(--fa-primary)}
.fa-chapter-sub .fa-sub-label {font-weight: 600;color: #475569}
.fa-card {background: var(--fa-bg-card);border-radius: var(--fa-radius);box-shadow: var(--fa-shadow);padding: 20px;border: 1px solid rgba(226, 232, 240, 0.7);transition: box-shadow var(--fa-transition-slow), transform var(--fa-transition-slow)}
.fa-card + .fa-card {margin-top: 12px}
@media (hover: hover) {.fa-card:hover {box-shadow: var(--fa-shadow-hover);transform: translateY(-2px)}}
.fa-angler-type-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 16px;align-items: start}
.fa-angler-scatter-wrap {position: relative;width: 100%;max-width: 320px}
.fa-angler-scatter-wrap canvas {width: 100% !important;height: auto !important}
.fa-angler-scores {display: flex;flex-direction: column;gap: 12px}
.fa-score-label {display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px}
.fa-score-name {font-size: 12px;font-weight: 600;color: var(--fa-text-secondary)}
.fa-score-value {font-size: 12px;font-weight: 700;color: var(--fa-primary)}
.fa-score-bar-track {height: 6px;background: var(--fa-bg);border-radius: 3px;overflow: hidden}
.fa-score-bar-fill {height: 100%;border-radius: 3px;background: linear-gradient(90deg, var(--fa-primary), var(--fa-accent-cyan));width: 0;transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1)}
.fa-fish-ranking-list {display: flex;flex-direction: column;gap: 10px}
.fa-fish-rank-item {display: grid;grid-template-columns: 24px 1fr auto;gap: 10px;align-items: center}
.fa-fish-rank-num {font-size: 13px;font-weight: 700;color: var(--fa-text-muted);text-align: center}
.fa-fish-rank-num.is-top {color: var(--fa-primary);font-size: 15px}
.fa-fish-rank-bar-wrap {display: flex;flex-direction: column;gap: 4px;min-width: 0}
.fa-fish-rank-name {font-size: 13px;font-weight: 600;color: var(--fa-text);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.fa-fish-rank-track {height: 5px;background: var(--fa-bg);border-radius: 3px;overflow: hidden}
.fa-fish-rank-fill {height: 100%;border-radius: 3px;background: linear-gradient(90deg, var(--fa-primary), var(--fa-accent-cyan));width: 0;transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1)}
.fa-fish-rank-fill.rank-2 {background: linear-gradient(90deg, var(--fa-accent-cyan), var(--fa-accent-violet))}
.fa-fish-rank-fill.rank-3 {background: linear-gradient(90deg, var(--fa-accent-violet), var(--fa-accent-rose))}
.fa-fish-rank-fill.rank-other {background: var(--fa-border)}
.fa-fish-rank-count {font-size: 13px;font-weight: 700;color: var(--fa-text-secondary);white-space: nowrap}
.fa-season-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px}
.fa-season-card {background: var(--fa-bg-card);border-radius: 10px;box-shadow: var(--fa-shadow);padding: 14px 12px;text-align: center;border: 1px solid var(--fa-border);border-top-width: 3px;border-top-color: var(--fa-border);position: relative;overflow: hidden;transition: box-shadow var(--fa-transition-slow), transform var(--fa-transition-slow)}
.fa-season-card[data-season="spring"] { border-top-color: var(--fa-spring); }
.fa-season-card[data-season="summer"] { border-top-color: var(--fa-summer); }
.fa-season-card[data-season="autumn"] { border-top-color: var(--fa-autumn); }
.fa-season-card[data-season="winter"] { border-top-color: var(--fa-winter); }
.fa-season-card[data-season="spring"].is-best {background: var(--fa-spring-light);border-color: var(--fa-spring);border-top-color: var(--fa-spring);box-shadow: 0 4px 16px rgba(244, 114, 182, 0.18)}
.fa-season-card[data-season="summer"].is-best {background: var(--fa-summer-light);border-color: var(--fa-summer);border-top-color: var(--fa-summer);box-shadow: 0 4px 16px rgba(14, 165, 233, 0.18)}
.fa-season-card[data-season="autumn"].is-best {background: var(--fa-autumn-light);border-color: var(--fa-autumn);border-top-color: var(--fa-autumn);box-shadow: 0 4px 16px rgba(234, 88, 12, 0.18)}
.fa-season-card[data-season="winter"].is-best {background: var(--fa-winter-light);border-color: var(--fa-winter);border-top-color: var(--fa-winter);box-shadow: var(--fa-shadow-md)}
.fa-season-card.is-best {border-top-color: var(--fa-primary);box-shadow: var(--fa-shadow-md)}
@media (hover: hover) {.fa-season-card:hover {box-shadow: var(--fa-shadow-md);transform: translateY(-2px)}}
.fa-season-icon {width: 32px;height: 32px;margin: 0 auto 8px;color: var(--fa-text-muted)}
.fa-season-card[data-season="spring"] .fa-season-icon { color: var(--fa-spring); }
.fa-season-card[data-season="summer"] .fa-season-icon { color: var(--fa-summer); }
.fa-season-card[data-season="autumn"] .fa-season-icon { color: var(--fa-autumn); }
.fa-season-card[data-season="winter"] .fa-season-icon { color: var(--fa-winter); }
.fa-season-card.is-best .fa-season-icon { color: var(--fa-primary); }
.fa-season-card[data-season="spring"].is-best .fa-season-icon { color: var(--fa-spring); }
.fa-season-card[data-season="summer"].is-best .fa-season-icon { color: var(--fa-summer); }
.fa-season-card[data-season="autumn"].is-best .fa-season-icon { color: var(--fa-autumn); }
.fa-season-card[data-season="winter"].is-best .fa-season-icon { color: var(--fa-winter); }
.fa-season-name {font-size: 11px;font-weight: 700;color: var(--fa-text-muted);letter-spacing: 0.05em;margin-bottom: 6px}
.fa-season-card.is-best .fa-season-name {color: var(--fa-text-secondary)}
.fa-season-count {font-size: 24px;font-weight: 800;color: var(--fa-text);line-height: 1;margin-bottom: 2px}
.fa-season-card.is-best .fa-season-count { color: var(--fa-primary); }
.fa-season-card[data-season="spring"].is-best .fa-season-count { color: var(--fa-spring); }
.fa-season-card[data-season="summer"].is-best .fa-season-count { color: var(--fa-summer); }
.fa-season-card[data-season="autumn"].is-best .fa-season-count { color: var(--fa-autumn); }
.fa-season-card[data-season="winter"].is-best .fa-season-count { color: var(--fa-winter); }
.fa-season-unit {font-size: 10px;color: var(--fa-text-muted);margin-bottom: 8px}
.fa-season-fish {font-size: 11px;font-weight: 600;color: var(--fa-text-secondary);margin-bottom: 2px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fa-season-avg {font-size: 10px;color: var(--fa-text-muted)}
.fa-golden-time-header {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;margin-bottom: 16px}
.fa-time-zone-card {background: var(--fa-bg);border-radius: 10px;padding: 14px 12px;text-align: center;border: 1px solid var(--fa-border);transition: box-shadow var(--fa-transition), transform var(--fa-transition);position: relative;overflow: hidden}
@media (hover: hover) {.fa-time-zone-card:hover {box-shadow: var(--fa-shadow-md);transform: translateY(-1px)}}
.fa-time-zone-card[data-time-zone="morning"].is-best {background: linear-gradient(160deg, #fff7ed 0%, #ffedd5 100%);border-color: var(--fa-sunrise-from)}
.fa-time-zone-card[data-time-zone="morning"].is-best .fa-time-zone-icon { color: var(--fa-sunrise-from); }
.fa-time-zone-card[data-time-zone="morning"].is-best .fa-time-zone-name { color: #c2410c; }
.fa-time-zone-card[data-time-zone="morning"].is-best .fa-time-zone-count {background: linear-gradient(135deg, var(--fa-sunrise-from), var(--fa-sunrise-to));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fa-time-zone-card[data-time-zone="evening"].is-best {background: linear-gradient(160deg, #fdf4ff 0%, #fce7f3 100%);border-color: var(--fa-sunset-from)}
.fa-time-zone-card[data-time-zone="evening"].is-best .fa-time-zone-icon { color: var(--fa-sunset-from); }
.fa-time-zone-card[data-time-zone="evening"].is-best .fa-time-zone-name { color: #9f1239; }
.fa-time-zone-card[data-time-zone="evening"].is-best .fa-time-zone-count {background: linear-gradient(135deg, var(--fa-sunset-from), var(--fa-sunset-to));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fa-time-zone-card[data-time-zone="daytime"].is-best {background: var(--fa-primary-light);border-color: var(--fa-primary)}
.fa-time-zone-card[data-time-zone="daytime"].is-best .fa-time-zone-icon { color: var(--fa-primary); }
.fa-time-zone-card[data-time-zone="daytime"].is-best .fa-time-zone-name { color: var(--fa-primary); }
.fa-time-zone-card[data-time-zone="daytime"].is-best .fa-time-zone-count { color: var(--fa-primary); }
.fa-time-zone-card.is-best {background: var(--fa-primary-light);border-color: var(--fa-primary)}
.fa-time-zone-card.is-best .fa-time-zone-icon { color: var(--fa-primary); }
.fa-time-zone-card.is-best .fa-time-zone-name { color: var(--fa-primary); }
.fa-time-zone-icon {width: 26px;height: 26px;margin: 0 auto 7px;color: var(--fa-text-muted)}
.fa-time-zone-name {font-size: 10px;font-weight: 700;color: var(--fa-text-muted);margin-bottom: 4px;letter-spacing: 0.03em}
.fa-time-zone-count {font-size: 20px;font-weight: 800;color: var(--fa-text);line-height: 1}
.fa-time-zone-range {font-size: 10px;color: var(--fa-text-muted);margin-top: 3px}
.fa-time-chart-wrap {height: 100px;position: relative}
.fa-golden-highlight-text {margin-top: 12px;font-size: 12px;color: var(--fa-text-secondary);text-align: center;padding: 10px 14px;background: linear-gradient(135deg, var(--fa-primary-light) 0%, #e0f2fe 100%);border-radius: 8px;border: 1px solid #bfdbfe;line-height: 1.5}
.fa-golden-highlight-strong {font-weight: 700;color: var(--fa-primary)}
.fa-field-charts {display: grid;grid-template-columns: 1fr 1fr;gap: 16px}
.fa-donut-wrap {display: flex;flex-direction: column;align-items: center;gap: 8px}
.fa-donut-canvas-wrap {width: 100%;max-width: 140px;aspect-ratio: 1;position: relative}
.fa-donut-legend {width: 100%;display: flex;flex-direction: column;gap: 4px}
.fa-legend-item {display: flex;align-items: center;gap: 6px;font-size: 11px;color: var(--fa-text-secondary);min-width: 0}
.fa-legend-dot {width: 8px;height: 8px;border-radius: 2px;flex-shrink: 0}
.fa-legend-name {flex: 1;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fa-legend-pct {font-weight: 600;color: var(--fa-text);flex-shrink: 0}
.fa-record-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 12px}
.fa-record-card {background: linear-gradient(160deg, #fffbf0 0%, #fef9e7 100%);border-radius: 10px;padding: 16px 12px;text-align: center;border: 1px solid var(--fa-accent-gold-mid);box-shadow: var(--fa-shadow-gold);transition: box-shadow var(--fa-transition-slow), transform var(--fa-transition-slow);position: relative;overflow: hidden}
.fa-record-card::before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 3px;background: linear-gradient(90deg, var(--fa-accent-gold), #fbbf24, var(--fa-accent-gold))}
@media (hover: hover) {.fa-record-card:hover {box-shadow: 0 8px 24px rgba(217, 119, 6, 0.22), 0 2px 8px rgba(217, 119, 6, 0.10);transform: translateY(-2px)}}
.fa-record-icon {width: 28px;height: 28px;margin: 0 auto 8px;color: var(--fa-accent-gold)}
.fa-record-label {font-size: 10px;font-weight: 700;color: #92400e;letter-spacing: 0.05em;margin-bottom: 6px;text-transform: uppercase;opacity: 0.7}
.fa-record-value {font-size: 22px;font-weight: 800;color: var(--fa-text);line-height: 1;margin-bottom: 2px}
.fa-record-unit {font-size: 11px;color: var(--fa-text-muted);margin-bottom: 6px}
.fa-record-fish {font-size: 11px;font-weight: 700;color: var(--fa-accent-gold);margin-bottom: 2px}
.fa-record-date {font-size: 10px;color: var(--fa-text-muted)}
.fa-record-main,
.fa-record-meta {display: contents}
.fa-weather-grid {display: grid;grid-template-columns: 160px 1fr;gap: 20px;align-items: start}
.fa-weather-donut-section {display: flex;flex-direction: column;gap: 10px;align-items: center}
.fa-weather-donut-wrap {width: 140px;aspect-ratio: 1;position: relative}
.fa-weather-donut-section .fa-legend {width: 100%}
.fa-weather-stats {display: flex;flex-direction: column;gap: 10px}
.fa-weather-stat-row {display: flex;align-items: center;gap: 10px;padding: 10px 12px;background: var(--fa-bg);border-radius: 8px;border-left: 3px solid transparent;transition: border-color var(--fa-transition), background var(--fa-transition)}
.fa-weather-stat-row--tide {border-left-color: #3b82f6;background: linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0%, var(--fa-bg) 100%)}
.fa-weather-stat-row--wind {border-left-color: #10b981;background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, var(--fa-bg) 100%)}
.fa-weather-stat-row--temp {border-left-color: #f59e0b;background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, var(--fa-bg) 100%)}
@media (hover: hover) {.fa-weather-stat-row:hover {background: var(--fa-primary-light);border-left-color: var(--fa-primary)}}
.fa-weather-stat-icon {width: 20px;height: 20px;color: var(--fa-text-muted);flex-shrink: 0}
.fa-weather-stat-name {font-size: 11px;color: var(--fa-text-muted);margin-bottom: 1px}
.fa-weather-stat-value {font-size: 14px;font-weight: 700;color: var(--fa-text)}
.fa-growth-chart-wrap {height: 160px;position: relative}
.fa-detail-divider {margin: 48px 20px 0;scroll-margin-top: 60px;display: flex;align-items: center;gap: 16px}
.fa-detail-divider-title {font-size: 17px;font-weight: 800;color: var(--fa-text);white-space: nowrap;letter-spacing: -0.2px}
.fa-detail-divider-line {flex: 1;height: 1px;background: linear-gradient(to right, var(--fa-border), transparent)}
.fa-tab-nav {background: var(--fa-bg-card);border-bottom: 1px solid var(--fa-border);padding: 0 20px;display: flex;position: sticky;top: 56px;z-index: 30;overflow-x: auto;scrollbar-width: none;-webkit-overflow-scrolling: touch}
.fa-tab-nav::-webkit-scrollbar {display: none}
.fa-tab-btn {padding: 12px 16px;border: none;background: transparent;color: var(--fa-text-muted);font-size: 13px;font-weight: 600;cursor: pointer;white-space: nowrap;border-bottom: 2px solid transparent;margin-bottom: -1px;transition: color var(--fa-transition), border-color var(--fa-transition);min-height: 44px;display: flex;align-items: center}
@media (hover: hover) {.fa-tab-btn:hover {color: var(--fa-text-secondary)}}
.fa-tab-btn.is-active {color: var(--fa-primary);border-bottom-color: var(--fa-primary)}
.fa-tab-panels {padding: 24px 20px 0}
.fa-tab-panel {display: none}
.fa-tab-panel.is-active {display: block}
.fa-detail-section {margin-bottom: 24px}
.fa-detail-section-title {display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: 700;color: var(--fa-text-secondary);margin-bottom: 12px;padding-bottom: 8px;border-bottom: 1px solid var(--fa-border)}
.fa-cross-table-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;border-radius: var(--fa-radius)}
.fa-cross-table {min-width: 480px;width: 100%;border-collapse: collapse;font-size: 12px}
.fa-cross-table th {background: var(--fa-bg);color: var(--fa-text-secondary);font-weight: 600;padding: 8px 10px;text-align: center;border: 1px solid var(--fa-border);white-space: nowrap}
.fa-cross-table td {padding: 7px 10px;border: 1px solid var(--fa-border);text-align: center;color: var(--fa-text)}
.fa-cross-table td.row-head {text-align: left;font-weight: 600;background: var(--fa-bg);color: var(--fa-text-secondary);white-space: nowrap}
.fa-cross-cell-high {background: #dbeafe}
.fa-cross-cell-mid {background: #eff6ff}
.fa-stat-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;margin-bottom: 12px}
.fa-stat-box {background: var(--fa-bg);border-radius: 8px;padding: 12px 10px;text-align: center}
.fa-stat-box-label {font-size: 10px;font-weight: 600;color: var(--fa-text-muted);text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: 4px}
.fa-stat-box-value {font-size: 18px;font-weight: 800;color: var(--fa-text);line-height: 1}
.fa-stat-box-unit {font-size: 10px;color: var(--fa-text-muted);margin-top: 2px}
.fa-chart-wrap-sm {height: 130px;position: relative}
.fa-chart-wrap-floating-bar {position: relative}
.fa-chart-wrap-md {height: 320px;position: relative}
.fa-best-conditions {display: flex;flex-direction: column;gap: 8px}
.fa-best-cond-item {display: flex;align-items: center;gap: 12px;padding: 12px 14px;background: var(--fa-bg);border-radius: 8px;border-left: 3px solid var(--fa-primary);transition: background var(--fa-transition);min-width: 0}
@media (hover: hover) {.fa-best-cond-item:hover {background: var(--fa-primary-light)}}
.fa-best-cond-body {min-width: 0;flex: 1}
.fa-best-cond-tags {display: flex;gap: 4px;flex-wrap: wrap;margin-bottom: 3px}
.fa-best-cond-tag {padding: 2px 8px;border-radius: 4px;font-size: 11px;font-weight: 600;background: var(--fa-primary-light);color: var(--fa-primary)}
.fa-best-cond-count {font-size: 12px;color: var(--fa-text-muted)}
.fa-best-cond-count strong {color: var(--fa-text);font-weight: 700}
.fa-best-cond-detail {font-size: 11px;color: var(--fa-text-muted);margin-left: 4px}
.fa-condition-perf-note {font-size: 12px;color: var(--fa-text-muted);margin: 4px 0 12px;line-height: 1.6}
.fa-condition-perf-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 16px}
.fa-condition-perf-category {background: var(--fa-surface);border-radius: var(--fa-radius);padding: 14px;border: 1px solid var(--fa-border)}
.fa-condition-perf-category-title {display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: 700;color: var(--fa-text);margin-bottom: 10px}
.fa-condition-perf-icon {width: 16px;height: 16px;display: flex;align-items: center;color: var(--fa-primary)}
.fa-condition-perf-icon svg {width: 100%;height: 100%}
.fa-condition-perf-bars {display: flex;flex-direction: column;gap: 6px}
.fa-condition-perf-bar-row {display: flex;align-items: center;gap: 8px}
.fa-condition-perf-label {font-size: 12px;color: var(--fa-text);min-width: 64px;flex-shrink: 0}
.fa-condition-perf-bar-track {flex: 1;height: 8px;background: var(--fa-border);border-radius: 4px;overflow: hidden}
.fa-condition-perf-bar-fill {height: 100%;background: linear-gradient(90deg, var(--fa-primary), #06b6d4);border-radius: 4px;transition: width 0.4s ease}
.fa-condition-perf-value {font-size: 12px;font-weight: 700;color: var(--fa-primary);min-width: 40px;text-align: right;flex-shrink: 0}
.fa-chapter-cta {display: inline-flex;align-items: center;gap: 4px;margin-top: 14px;font-size: 13px;font-weight: 700;color: var(--fa-primary);cursor: pointer;padding: 6px 0;background: none;border: none;text-decoration: none;transition: opacity var(--fa-transition);min-height: 44px}
@media (hover: hover) {.fa-chapter-cta:hover {opacity: 0.75}
.fa-chapter-cta:hover svg {transform: translateX(3px)}}
.fa-chapter-cta svg {width: 14px;height: 14px;transition: transform var(--fa-transition)}
.fa-big-fish-bars {display: flex;flex-direction: column;gap: 10px}
.fa-big-fish-row {display: grid;grid-template-columns: 100px 1fr 50px;gap: 10px;align-items: center}
.fa-big-fish-label {font-size: 12px;color: var(--fa-text-secondary);font-weight: 500}
.fa-big-fish-track {height: 8px;background: var(--fa-bg);border-radius: 4px;overflow: hidden}
.fa-big-fish-fill {height: 100%;border-radius: 4px;background: linear-gradient(90deg, var(--fa-primary), var(--fa-accent-cyan));width: 0;transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1)}
.fa-big-fish-pct {font-size: 12px;font-weight: 700;color: var(--fa-primary);text-align: right}
.fa-weekday-chart-wrap {height: 120px;position: relative}
.fa-heatmap-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch}
.fa-heatmap-hover {cursor: pointer;transition: filter 0.2s ease}
.fa-heatmap-hover:hover {filter: brightness(1.04) saturate(1.1)}
.fa-heatmap-canvas-wrap {min-width: 480px;height: 160px;position: relative}
.fa-no-data {text-align: center;padding: 60px 20px 48px;color: var(--fa-text-muted)}
.fa-no-data-icon {width: 64px;height: 64px;margin: 0 auto 16px;color: var(--fa-border)}
.fa-no-data-title {font-size: 15px;font-weight: 600;color: var(--fa-text-secondary);margin-bottom: 6px}
.fa-no-data-sub {font-size: 13px;color: var(--fa-text-muted)}
.fa-hero-decoration {position: absolute;inset: 0;pointer-events: none;overflow: hidden}
.fa-hero-wave {position: absolute;bottom: 0;left: 0;width: 100%;height: 60px}
.fa-hero-wave--1 {animation: fa-wave-drift 8s ease-in-out infinite alternate}
.fa-hero-wave--2 {animation: fa-wave-drift 6s ease-in-out infinite alternate-reverse;bottom: -4px}
@keyframes fa-wave-drift {from { transform: translateX(-20px); }
to { transform: translateX(20px); }}
.fa-hero-icon {width: 36px;height: 36px;margin: 0 auto 12px;opacity: 0.4;color: #93c5fd}
.fa-eyebrow-icon {width: 14px;height: 14px;flex-shrink: 0;opacity: 0.7}
.fa-section-title-icon {width: 16px;height: 16px;flex-shrink: 0;color: var(--fa-primary);opacity: 0.7}
.fa-best-cond-rank-badge {width: 36px;height: 36px;border-radius: 50%;display: flex;flex-direction: column;align-items: center;justify-content: center;flex-shrink: 0;color: #fff}
.fa-best-cond-rank-num {font-size: 14px;font-weight: 800;line-height: 1}
.fa-best-cond-rank-label {font-size: 7px;font-weight: 600;text-transform: uppercase;letter-spacing: 0.05em;line-height: 1;margin-top: 1px}
.fa-tide-section {margin-top: 4px}
.fa-tide-list-body {display: flex;flex-direction: column;gap: 12px}
.fa-tide-card {background: var(--fa-bg-card);border-radius: var(--fa-radius);border: 1px solid var(--fa-border);box-shadow: var(--fa-shadow);overflow: hidden;transition: box-shadow var(--fa-transition-slow), transform var(--fa-transition-slow);box-sizing: border-box;max-width: 100%}
@media (hover: hover) {.fa-tide-card:hover {box-shadow: var(--fa-shadow-hover);transform: translateY(-2px)}}
.fa-tide-card-hidden {display: none}
.fa-tide-card-date {display: flex;align-items: center;gap: 7px;padding: 10px 16px;background: linear-gradient(90deg, var(--fa-primary-light) 0%, #f0f7ff 100%);border-bottom: 1px solid #dbeafe;font-size: 12px;font-weight: 700;color: var(--fa-primary-dark);min-height: 40px;box-sizing: border-box}
.fa-tide-card-date-icon {width: 14px;height: 14px;color: var(--fa-primary);flex-shrink: 0}
.fa-tide-card .tide-info-block {padding: 0;border-radius: 0;border: none;box-shadow: none;margin: 0}
.fa-tide-card .tide-graph-section {border-radius: 0}
.fa-tide-card-loading {display: flex;align-items: center;gap: 8px;padding: 20px 16px;color: var(--fa-text-muted);font-size: 12px}
.fa-tide-card-spinner {display: inline-block;width: 16px;height: 16px;border: 2px solid var(--fa-border);border-top-color: var(--fa-primary);border-radius: 50%;animation: fa-tide-spin 0.8s linear infinite;flex-shrink: 0}
@keyframes fa-tide-spin {to { transform: rotate(360deg); }}
.fa-tide-more-btn {display: flex;align-items: center;justify-content: center;gap: 6px;width: 100%;max-width: 100%;box-sizing: border-box;padding: 12px 16px;border: 2px dashed var(--fa-border);border-radius: var(--fa-radius);background: transparent;color: var(--fa-text-secondary);font-size: 13px;font-weight: 600;cursor: pointer;transition:
border-color var(--fa-transition),
color var(--fa-transition),
background var(--fa-transition);min-height: 48px}
@media (hover: hover) {.fa-tide-more-btn:hover {border-color: var(--fa-primary);color: var(--fa-primary);background: var(--fa-primary-light)}}
.fa-tide-more-btn:active {border-color: var(--fa-primary);color: var(--fa-primary);background: var(--fa-primary-light)}
.fa-tide-more-icon {width: 16px;height: 16px;flex-shrink: 0;transition: transform var(--fa-transition)}
.tide-info-static {display: flex;align-items: center;gap: 6px}
.tide-info-static svg {width: 18px;height: 18px;flex-shrink: 0}
@media (max-width: 600px) {.fa-hero-stats {grid-template-columns: repeat(2, 1fr);max-width: 320px}
.fa-hero-count {font-size: 56px;letter-spacing: -2px}
.fa-hero-count-unit {margin-bottom: 16px}
.fa-hero-stat-item {padding: 8px 4px}
.fa-angler-type-grid {grid-template-columns: 1fr}
.fa-angler-scatter-wrap {max-width: 280px;margin: 0 auto}
.fa-season-grid {grid-template-columns: repeat(2, 1fr)}
.fa-season-card {padding: 10px 8px}
.fa-golden-time-header {gap: 6px}
.fa-time-zone-card {padding: 10px 8px}
.fa-time-zone-count {font-size: 16px}
.fa-time-zone-name {font-size: 9px}
.fa-time-zone-range {font-size: 9px}
.fa-field-charts {grid-template-columns: 1fr}
.fa-donut-canvas-wrap {max-width: 120px}
.fa-record-grid {grid-template-columns: 1fr;gap: 8px}
.fa-record-card {display: flex;align-items: baseline;gap: 10px;text-align: left;padding: 10px 12px}
.fa-record-card::before {top: 0;left: 0;right: auto;bottom: 0;width: 3px;height: auto}
.fa-record-icon {width: 22px;height: 22px;margin: 0 0 0 4px;flex-shrink: 0;align-self: center}
.fa-record-label {width: 56px;flex-shrink: 0;margin-bottom: 0;line-height: 1.3}
.fa-record-main {display: flex;align-items: baseline;gap: 2px;flex-shrink: 0}
.fa-record-value {font-size: 18px;margin-bottom: 0}
.fa-record-meta {display: flex;align-items: baseline;gap: 6px;margin-left: auto;flex-shrink: 0}
.fa-record-unit,
.fa-record-fish,
.fa-record-date {margin-bottom: 0}
.fa-weather-grid {grid-template-columns: 1fr}
.fa-weather-donut-section {flex-direction: row;gap: 16px;align-items: flex-start}
.fa-weather-donut-wrap {width: 110px;flex-shrink: 0}
.fa-weather-donut-section .fa-legend {flex: 1;min-width: 0}
.fa-card {padding: 16px}
.fa-detail-section-title {margin-bottom: 8px;padding-bottom: 6px}
.fa-stat-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 0;background: var(--fa-bg);border-radius: 8px;overflow: hidden}
.fa-stat-box {padding: 8px 6px;background: transparent;border-radius: 0;position: relative}
.fa-stat-box:not(:last-child)::after {content: "";position: absolute;right: 0;top: 20%;bottom: 20%;width: 1px;background: #e2e8f0}
.fa-stat-box-value {font-size: 14px}
.fa-stat-box-label {font-size: 9px;margin-bottom: 2px}
.fa-stat-box-unit {font-size: 9px;margin-top: 1px}
.fa-big-fish-row {grid-template-columns: 80px 1fr 40px}
.fa-cross-table {min-width: 380px}
.fa-heatmap-canvas-wrap {min-width: 380px}
.fa-chapter-headline {font-size: 19px}
.fa-tide-card-date {font-size: 11px;padding: 9px 12px}
.fa-chart-wrap-sm {height: 110px}
.fa-chart-wrap-md {height: 280px}
.fa-growth-chart-wrap {height: 140px}
.fa-condition-perf-grid {grid-template-columns: 1fr}}
@media (max-width: 390px) {.fa-story-section {padding: 0 14px}
.fa-hero-chapter {padding: 24px 16px 20px}
.fa-hero-count {font-size: 48px}
.fa-season-grid {gap: 6px}
.fa-season-count {font-size: 20px}}