:root {--fa-text-primary: #e2e8f0;--fa-text-secondary: #94a3b8;--fa-text-muted: #64748b;--fa-text-accent: #38bdf8;--fa-gold: #fbbf24;--fa-silver: #cbd5e1;--fa-bronze: #d97706;--fa-bar-default: #334155;--fa-bar-highlight: #fbbf24;--fa-bar-normal: #3b82f6;--fa-card-bg: rgba(255, 255, 255, 0.04);--fa-card-border: rgba(255, 255, 255, 0.08);--fa-card-bg-hover: rgba(255, 255, 255, 0.07);--fa-section-padding-x: 24px;--fa-section-max-width: 1100px;--fa-font-main: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif}
.fish-analysis-page {background: #020818;color: var(--fa-text-primary);font-family: var(--fa-font-main);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
.fish-analysis-page .main-content {overflow-x: hidden}
.fa-section-inner {max-width: var(--fa-section-max-width);width: 100%;margin: 0 auto;padding: 0 var(--fa-section-padding-x);box-sizing: border-box}
.fa-section-title {font-size: clamp(2rem, 6vw, 3.5rem);font-weight: 800;letter-spacing: -0.02em;line-height: 1.2;margin-bottom: 12px}
.fa-section-subtitle {font-size: clamp(0.9rem, 2.5vw, 1.1rem);color: var(--fa-text-secondary);margin-bottom: 48px;line-height: 1.6}
.fa-big-number {font-size: clamp(2.5rem, 8vw, 5rem);font-weight: 800;font-variant-numeric: tabular-nums;letter-spacing: -0.03em;line-height: 1}
.fa-medium-number {font-size: clamp(1.8rem, 5vw, 3rem);font-weight: 700;font-variant-numeric: tabular-nums;letter-spacing: -0.02em;line-height: 1}
.fa-reveal {opacity: 0;transform: translateY(40px);transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)}
.fa-reveal.visible {opacity: 1;transform: translateY(0)}
.fa-reveal-delay-1 { transition-delay: 0.1s; }
.fa-reveal-delay-2 { transition-delay: 0.2s; }
.fa-reveal-delay-3 { transition-delay: 0.3s; }
.fa-reveal-delay-4 { transition-delay: 0.4s; }
.fa-reveal-delay-5 { transition-delay: 0.5s; }
.fa-reveal-delay-6 { transition-delay: 0.6s; }
.fa-reveal-delay-7 { transition-delay: 0.7s; }
.fa-reveal-delay-8 { transition-delay: 0.8s; }
.fa-reveal-delay-9 { transition-delay: 0.9s; }
.fa-reveal-delay-10 { transition-delay: 1.0s; }
.fa-reveal-delay-11 { transition-delay: 1.1s; }
.fa-hero-section {min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;background: linear-gradient(180deg, #020818 0%, #0a1628 100%);position: relative;text-align: center;padding: 60px var(--fa-section-padding-x) 80px}
.fa-hero-fish-name {font-size: clamp(3.5rem, 14vw, 10rem);font-weight: 900;letter-spacing: -0.04em;line-height: 1;background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 12px}
.fa-hero-fish-name.fa-name-long {font-size: clamp(2.5rem, 10vw, 8rem)}
.fa-hero-fish-name.fa-name-xlong {font-size: clamp(2rem, 8vw, 6rem)}
.fa-hero-category {font-size: clamp(0.9rem, 2vw, 1.2rem);color: var(--fa-text-muted);letter-spacing: 0.05em;margin-bottom: 4px}
.fa-hero-description {font-size: clamp(0.8rem, 1.8vw, 1rem);color: var(--fa-text-muted);margin-bottom: 32px;max-width: 600px;line-height: 1.6;overflow-wrap: anywhere}
.fa-hero-image-wrapper {width: clamp(200px, 50vw, 400px);height: clamp(140px, 35vw, 280px);border-radius: 20px;overflow: hidden;margin-bottom: 40px;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4)}
.fa-hero-image-wrapper img {width: 100%;height: 100%;object-fit: cover;display: block}
.fa-hero-image-placeholder {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #0a1628, #1e293b)}
.fa-hero-image-placeholder svg {width: 60%;height: 60%;opacity: 0.3}
.fa-hero-stats {display: flex;gap: 24px;flex-wrap: wrap;justify-content: center;margin-bottom: 40px}
.fa-hero-stat-card {background: var(--fa-card-bg);border: 1px solid var(--fa-card-border);border-radius: 16px;padding: 20px 24px;min-width: 140px;backdrop-filter: blur(8px)}
.fa-hero-stat-label {font-size: 0.75rem;color: var(--fa-text-muted);text-transform: uppercase;letter-spacing: 0.1em;margin-bottom: 8px}
.fa-hero-stat-value {font-size: 1.1rem;font-weight: 600;color: var(--fa-text-primary)}
.fa-hero-report-count {margin-bottom: 48px}
.fa-hero-report-number {font-size: clamp(3rem, 10vw, 6rem);font-weight: 900;font-variant-numeric: tabular-nums;background: linear-gradient(135deg, var(--fa-text-accent) 0%, #818cf8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;line-height: 1;letter-spacing: -0.03em}
.fa-hero-report-label-en {font-size: clamp(0.9rem, 2vw, 1.2rem);color: var(--fa-text-secondary);letter-spacing: 0.15em;text-transform: uppercase;margin-top: 4px}
.fa-hero-report-label-ja {font-size: clamp(0.75rem, 1.5vw, 0.9rem);color: var(--fa-text-muted);margin-top: 4px}
.fa-scroll-chevron {position: absolute;bottom: 32px;left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;gap: 4px;animation: faChevronBounce 2s ease-in-out infinite}
.fa-scroll-chevron-arrow {width: 24px;height: 24px;border-right: 2px solid var(--fa-text-muted);border-bottom: 2px solid var(--fa-text-muted);transform: rotate(45deg);opacity: 0.5}
.fa-scroll-chevron-arrow:first-child {opacity: 0.3}
@keyframes faChevronBounce {0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(10px); }}
.fa-monthly-section {min-height: 90vh;display: flex;align-items: center;background: linear-gradient(180deg, #0a1628 0%, #0c1a2e 50%, #0c1a2e 100%);padding: 80px 0}
.fa-monthly-layer-nav {display: flex;align-items: center;justify-content: center;gap: 16px;margin-bottom: 20px;outline: none;user-select: none}
.fa-monthly-layer-nav:focus-visible .fa-monthly-layer-label {outline: 2px solid rgba(96, 165, 250, 0.5);outline-offset: 4px;border-radius: 6px}
.fa-monthly-nav-arrow {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;border: 1px solid rgba(255, 255, 255, 0.12);background: rgba(255, 255, 255, 0.05);border-radius: 50%;color: var(--fa-text-secondary);cursor: pointer;transition: all 0.2s ease;flex-shrink: 0}
.fa-monthly-nav-arrow:hover {background: rgba(255, 255, 255, 0.1);color: var(--fa-text-primary);border-color: rgba(255, 255, 255, 0.2)}
.fa-monthly-nav-arrow:active {transform: scale(0.92)}
.fa-monthly-nav-arrow svg {width: 18px;height: 18px}
.fa-monthly-layer-label {font-size: 1.1rem;font-weight: 700;color: #60a5fa;min-width: 80px;text-align: center;letter-spacing: 0.02em;transition: opacity 0.2s ease}
.fa-monthly-chart {display: flex;align-items: flex-end;gap: clamp(4px, 1.5vw, 12px);height: 280px;width: 100%;padding-top: 20px;margin-bottom: 32px}
.fa-monthly-bar-group {flex: 1;display: flex;flex-direction: column;align-items: center;height: 100%;justify-content: flex-end;min-width: 0}
.fa-monthly-bar-wrapper {width: 100%;max-width: 48px;display: flex;flex-direction: column;align-items: center;justify-content: flex-end;flex: 1;position: relative}
.fa-monthly-bar {width: 100%;border-radius: 6px 6px 2px 2px;background: var(--fa-bar-normal);min-height: 4px;transition: height 1s cubic-bezier(0.16, 1, 0.3, 1);position: relative}
.fa-monthly-bar.highlight {background: linear-gradient(180deg, var(--fa-bar-highlight) 0%, #f59e0b 100%);box-shadow: 0 0 20px rgba(251, 191, 36, 0.3)}
.fa-monthly-bar-count {font-size: clamp(0.6rem, 1.2vw, 0.8rem);font-weight: 600;font-variant-numeric: tabular-nums;color: var(--fa-text-secondary);margin-bottom: 6px;opacity: 0;transform: translateY(8px);transition: opacity 0.4s ease, transform 0.4s ease}
.fa-monthly-bar-group.animated .fa-monthly-bar-count {opacity: 1;transform: translateY(0)}
.fa-monthly-bar-label {font-size: clamp(0.6rem, 1.2vw, 0.75rem);color: var(--fa-text-muted);margin-top: 10px;white-space: nowrap}
.fa-monthly-legend {display: flex;gap: 24px;flex-wrap: wrap;justify-content: center;margin-top: 16px}
.fa-monthly-legend-item {display: flex;align-items: center;gap: 8px;font-size: 0.85rem;color: var(--fa-text-secondary)}
.fa-monthly-legend-dot {width: 12px;height: 12px;border-radius: 3px}
.fa-monthly-best-season {margin-top: 32px;padding: 20px 24px;background: rgba(251, 191, 36, 0.08);border: 1px solid rgba(251, 191, 36, 0.15);border-radius: 12px;text-align: center}
.fa-monthly-best-season-label {font-size: 0.8rem;color: var(--fa-gold);letter-spacing: 0.1em;text-transform: uppercase;margin-bottom: 6px}
.fa-monthly-best-season-value {font-size: 1.3rem;font-weight: 700;color: var(--fa-gold)}
.fa-monthly-season-bar {width: 100%;height: 6px;margin-top: 6px;background: rgba(255, 255, 255, 0.06);border-radius: 3px;flex-shrink: 0;position: relative}
.fa-monthly-season-bar.active {background: #10b981;border-radius: 0;box-shadow: 0 0 8px rgba(16, 185, 129, 0.3)}
.fa-monthly-season-bar.season-start {border-radius: 3px 0 0 3px;margin-left: 4px}
.fa-monthly-season-bar.season-end {border-radius: 0 3px 3px 0;margin-right: 4px}
.fa-monthly-season-bar.season-solo {border-radius: 3px;margin-left: 4px;margin-right: 4px}
.fa-monthly-bar-group.in-season + .fa-monthly-bar-group.in-season .fa-monthly-season-bar.active {margin-left: calc(-1 * clamp(4px, 1.5vw, 12px));padding-left: calc(clamp(4px, 1.5vw, 12px))}
.fa-monthly-legend-dot--season {width: 20px;height: 8px;border-radius: 3px;background: #10b981;box-shadow: 0 0 8px rgba(16, 185, 129, 0.3)}
.fa-location-section {min-height: 90vh;display: flex;align-items: center;background: linear-gradient(180deg, #0c1a2e 0%, #081a1e 50%, #081a1e 100%);padding: 80px 0}
.fa-location-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 48px}
.fa-location-subsection-title {font-size: 0.8rem;letter-spacing: 0.15em;text-transform: uppercase;color: var(--fa-text-muted);margin-bottom: 24px}
.fa-pref-item {display: flex;align-items: center;gap: 16px;margin-bottom: 20px}
.fa-pref-rank {font-size: clamp(1.5rem, 3vw, 2rem);font-weight: 800;font-variant-numeric: tabular-nums;color: var(--fa-text-muted);min-width: 40px;text-align: right}
.fa-pref-rank.rank-1 { color: var(--fa-gold); }
.fa-pref-rank.rank-2 { color: var(--fa-silver); }
.fa-pref-rank.rank-3 { color: var(--fa-bronze); }
.fa-pref-info {flex: 1;min-width: 0}
.fa-pref-name-row {display: flex;justify-content: space-between;align-items: baseline;margin-bottom: 6px;gap: 8px}
.fa-pref-name {font-size: 1rem;font-weight: 600;overflow-wrap: anywhere}
.fa-pref-count {font-size: 0.85rem;font-variant-numeric: tabular-nums;color: var(--fa-text-secondary);white-space: nowrap}
.fa-pref-bar-track {height: 6px;background: var(--fa-bar-default);border-radius: 3px;overflow: hidden}
.fa-pref-bar-fill {height: 100%;border-radius: 3px;background: linear-gradient(90deg, #a855f7, #c084fc);transition: width 1s cubic-bezier(0.16, 1, 0.3, 1)}
.fa-spot-item {margin-bottom: 28px}
.fa-spot-header {display: flex;justify-content: space-between;align-items: baseline;margin-bottom: 4px;gap: 8px}
.fa-spot-name {font-size: 1rem;font-weight: 500}
.fa-spot-percentage {font-size: clamp(1.5rem, 4vw, 2.2rem);font-weight: 800;font-variant-numeric: tabular-nums;color: #22c55e;line-height: 1}
.fa-spot-count {font-size: 0.8rem;color: var(--fa-text-muted);margin-bottom: 8px;font-variant-numeric: tabular-nums}
.fa-spot-bar-track {height: 4px;background: var(--fa-bar-default);border-radius: 2px;overflow: hidden}
.fa-spot-bar-fill {height: 100%;border-radius: 2px;background: linear-gradient(90deg, #22c55e, #4ade80);transition: width 1s cubic-bezier(0.16, 1, 0.3, 1)}
.fa-method-section {min-height: 90vh;display: flex;align-items: center;background: linear-gradient(180deg, #081a1e 0%, #120a1e 50%, #120a1e 100%);padding: 80px 0}
.fa-method-top {text-align: center;margin-bottom: 48px}
.fa-method-top-label {font-size: 0.8rem;letter-spacing: 0.15em;text-transform: uppercase;color: var(--fa-text-muted);margin-bottom: 8px}
.fa-method-top-name {font-size: clamp(2rem, 6vw, 3.5rem);font-weight: 800;color: #ec4899;margin-bottom: 8px}
.fa-method-top-percentage {font-size: clamp(3rem, 10vw, 6rem);font-weight: 900;font-variant-numeric: tabular-nums;background: linear-gradient(135deg, #ec4899, #f472b6);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;line-height: 1}
.fa-method-top-count {font-size: 1rem;color: var(--fa-text-secondary);margin-top: 8px;font-variant-numeric: tabular-nums}
.fa-method-list {display: flex;flex-direction: column;gap: 16px;max-width: 600px;margin: 0 auto}
.fa-method-item {display: flex;align-items: center;gap: 16px}
.fa-method-rank-num {font-size: 1.2rem;font-weight: 700;font-variant-numeric: tabular-nums;color: var(--fa-text-muted);min-width: 28px;text-align: right}
.fa-method-info {flex: 1;min-width: 0}
.fa-method-name-row {display: flex;justify-content: space-between;align-items: baseline;margin-bottom: 6px;gap: 8px}
.fa-method-name {font-size: 0.95rem;font-weight: 500;overflow-wrap: anywhere}
.fa-method-count {font-size: 0.85rem;font-variant-numeric: tabular-nums;color: var(--fa-text-secondary);white-space: nowrap}
.fa-method-bar-track {height: 6px;background: var(--fa-bar-default);border-radius: 3px;overflow: hidden}
.fa-method-bar-fill {height: 100%;border-radius: 3px;background: linear-gradient(90deg, #ec4899, #f472b6);transition: width 1s cubic-bezier(0.16, 1, 0.3, 1)}
.fa-angler-section {min-height: 90vh;display: flex;align-items: center;background: linear-gradient(180deg, #120a1e 0%, #1a1418 50%, #1a1418 100%);padding: 80px 0}
.fa-angler-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 48px}
.fa-angler-subsection-title {font-size: 0.8rem;letter-spacing: 0.15em;text-transform: uppercase;color: var(--fa-text-muted);margin-bottom: 24px}
.fa-top-anglers {display: flex;flex-direction: column;gap: 16px}
.fa-top-angler-card {display: flex;align-items: center;gap: 16px;padding: 16px 20px;background: var(--fa-card-bg);border: 1px solid var(--fa-card-border);border-radius: 14px;transition: background 0.3s ease;text-decoration: none;color: inherit}
.fa-top-angler-card:hover {background: var(--fa-card-bg-hover)}
.fa-top-angler-card.gold   { border-color: rgba(251, 191, 36, 0.3); }
.fa-top-angler-card.silver { border-color: rgba(203, 213, 225, 0.2); }
.fa-top-angler-card.bronze { border-color: rgba(217, 119, 6, 0.2); }
.fa-angler-medal {font-size: 1.5rem;font-weight: 800;min-width: 32px;text-align: center}
.fa-angler-medal.gold   { color: var(--fa-gold); }
.fa-angler-medal.silver { color: var(--fa-silver); }
.fa-angler-medal.bronze { color: var(--fa-bronze); }
.fa-angler-avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;flex-shrink: 0}
.fa-angler-avatar img {width: 100%;height: 100%;object-fit: cover;display: block}
.fa-angler-avatar-placeholder {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: #1e293b;color: var(--fa-text-muted);font-size: 1.2rem;font-weight: 700}
.fa-angler-details {flex: 1;min-width: 0}
.fa-angler-name {font-size: 1rem;font-weight: 600;overflow-wrap: anywhere}
.fa-angler-name a {color: inherit;text-decoration: none}
.fa-angler-name a:hover {color: var(--fa-text-accent)}
.fa-angler-catch-count {font-size: 0.85rem;color: var(--fa-text-secondary);font-variant-numeric: tabular-nums}
.fa-recent-timeline {display: flex;flex-direction: column;gap: 0;position: relative}
.fa-timeline-item {display: flex;gap: 16px;padding-bottom: 24px;position: relative}
.fa-timeline-line {width: 2px;background: var(--fa-card-border);position: absolute;top: 12px;bottom: 0;left: 5px}
.fa-timeline-item:last-child .fa-timeline-line {display: none}
.fa-timeline-dot {width: 12px;height: 12px;border-radius: 50%;background: var(--fa-text-accent);flex-shrink: 0;margin-top: 4px;position: relative;z-index: 1}
.fa-timeline-content {flex: 1;min-width: 0}
.fa-timeline-angler-name {font-size: 1rem;font-weight: 600;margin-bottom: 4px;overflow-wrap: anywhere}
.fa-timeline-angler-name a {color: inherit;text-decoration: none}
.fa-timeline-angler-name a:hover {color: var(--fa-text-accent)}
.fa-timeline-meta {font-size: 0.85rem;color: var(--fa-text-secondary);display: flex;gap: 12px;flex-wrap: wrap}
.fa-cuisine-section {min-height: 90vh;display: flex;align-items: center;background: linear-gradient(180deg, #161216 0%, #0a1a12 50%, #0a1a12 100%);padding: 80px 0}
.fa-cuisine-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 20px}
.fa-cuisine-card {display: block;background: var(--fa-card-bg);border: 1px solid var(--fa-card-border);border-radius: 16px;overflow: hidden;transition: transform 0.3s ease, background 0.3s ease;text-decoration: none;color: inherit}
.fa-cuisine-card:hover {transform: translateY(-4px);background: var(--fa-card-bg-hover)}
.fa-cuisine-image {width: 100%;height: 160px;overflow: hidden}
.fa-cuisine-image img {width: 100%;height: 100%;object-fit: cover;display: block}
.fa-cuisine-image-placeholder {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #0a1a12, #1e293b);color: var(--fa-text-muted);font-size: 0.85rem}
.fa-cuisine-body {padding: 20px}
.fa-cuisine-name-row {display: flex;justify-content: space-between;align-items: baseline;margin-bottom: 12px;gap: 8px}
.fa-cuisine-name {font-size: 1.15rem;font-weight: 700;overflow-wrap: anywhere}
.fa-cuisine-count {font-size: 0.8rem;color: var(--fa-text-muted);white-space: nowrap;font-variant-numeric: tabular-nums}
.fa-cuisine-popularity-bar-track {height: 4px;background: var(--fa-bar-default);border-radius: 2px;overflow: hidden;margin-bottom: 8px}
.fa-cuisine-popularity-bar-fill {height: 100%;border-radius: 2px;background: linear-gradient(90deg, #22c55e, #86efac);transition: width 1s cubic-bezier(0.16, 1, 0.3, 1)}
.fa-cuisine-stars {display: flex;align-items: center;gap: 2px}
.fa-cuisine-stars-label {font-size: 11px;color: var(--fa-text-muted);margin-right: 4px}
.fa-cuisine-star {width: 16px;height: 16px;position: relative}
.fa-cuisine-star svg {width: 16px;height: 16px;fill: var(--fa-bar-default)}
.fa-cuisine-star.filled svg {fill: var(--fa-gold)}
.fa-cuisine-star.half {position: relative;overflow: hidden}
.fa-cuisine-star.half svg {fill: var(--fa-gold);clip-path: inset(0 50% 0 0)}
.fa-appraisal-section {min-height: 90vh;display: flex;align-items: center;background: linear-gradient(180deg, #1a1418 0%, #161216 50%, #161216 100%);padding: 80px var(--fa-section-padding-x)}
.fa-appraisal-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px;max-width: 800px;margin: 0 auto}
.fa-appraisal-card {position: relative;display: flex;flex-direction: column;background: rgba(255, 255, 255, 0.04);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 12px;overflow: hidden;text-decoration: none;color: inherit;transition: transform 0.2s, border-color 0.2s}
.fa-appraisal-card:hover {transform: translateY(-3px);border-color: rgba(255, 255, 255, 0.15)}
.fa-appraisal-rank {position: absolute;top: 8px;left: 8px;width: 28px;height: 28px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 0.75rem;font-weight: 700;z-index: 1;color: #fff}
.fa-appraisal-rank.gold {background: linear-gradient(135deg, #f59e0b, #d97706);box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4)}
.fa-appraisal-rank.silver {background: linear-gradient(135deg, #94a3b8, #64748b);box-shadow: 0 2px 8px rgba(148, 163, 184, 0.3)}
.fa-appraisal-rank.bronze {background: linear-gradient(135deg, #d97706, #92400e);box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3)}
.fa-appraisal-image {width: 100%;aspect-ratio: 4 / 3;overflow: hidden;background: rgba(255, 255, 255, 0.02)}
.fa-appraisal-image img {width: 100%;height: 100%;object-fit: cover}
.fa-appraisal-image-placeholder {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;color: var(--fa-text-muted)}
.fa-appraisal-image-placeholder svg {width: 32px;height: 32px;opacity: 0.3}
.fa-appraisal-body {padding: 12px}
.fa-appraisal-price-row {display: flex;align-items: center;gap: 8px}
.fa-appraisal-price {font-size: 1.1rem;font-weight: 700;color: #fff;letter-spacing: 0.02em}
.fa-appraisal-angler {margin-top: 4px;font-size: 0.75rem;color: var(--fa-text-muted);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0}
.fa-appraisal-grade {display: inline-flex;align-items: center;justify-content: center;width: 22px;height: 22px;border-radius: 4px;font-size: 0.7rem;font-weight: 700;color: #fff;flex-shrink: 0}
.fa-appraisal-grade.grade-s { background: linear-gradient(135deg, #f59e0b, #d97706); }
.fa-appraisal-grade.grade-a { background: linear-gradient(135deg, #ef4444, #dc2626); }
.fa-appraisal-grade.grade-b { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.fa-appraisal-grade.grade-c { background: linear-gradient(135deg, #22c55e, #16a34a); }
.fa-appraisal-grade.grade-d { background: linear-gradient(135deg, #6b7280, #4b5563); }
@media (max-width: 600px) {.fa-appraisal-grid {grid-template-columns: 1fr;max-width: 320px}
.fa-appraisal-card {flex-direction: row}
.fa-appraisal-image {width: 100px;aspect-ratio: 1;flex-shrink: 0}
.fa-appraisal-body {display: flex;flex-direction: column;justify-content: center;min-width: 0}
.fa-appraisal-rank {top: 6px;left: 6px;width: 24px;height: 24px;font-size: 0.65rem}}
.fa-no-data {text-align: center;color: var(--fa-text-muted);font-size: 1rem;padding: 40px 20px}
@media (max-width: 700px) {.fa-location-grid {grid-template-columns: 1fr;gap: 40px}
.fa-angler-grid {grid-template-columns: 1fr;gap: 40px}}
@media (max-width: 600px) {.fa-cuisine-grid {grid-template-columns: 1fr}}
@media (max-width: 480px) {.fa-hero-stats {gap: 12px}
.fa-hero-stat-card {padding: 14px 16px;min-width: 100px}
.fa-monthly-chart {height: 200px}}
.fa-index-container {min-height: 100dvh;padding-bottom: 60px}
.fa-index-hero {padding: 60px 0 40px;text-align: center}
.fa-index-title {font-size: 2.2em;font-weight: 800;color: var(--fa-text-primary);letter-spacing: 2px;margin: 0 0 8px}
.fa-index-subtitle {color: var(--fa-text-secondary);font-size: 1em;margin: 0 0 28px}
.fa-index-stats-row {display: flex;justify-content: center;gap: 32px}
.fa-index-stat {display: flex;flex-direction: column;align-items: center}
.fa-index-stat-value {font-size: 2em;font-weight: 700;color: var(--fa-text-accent);line-height: 1.2}
.fa-index-stat-label {font-size: 0.8em;color: var(--fa-text-muted);margin-top: 2px}
.fa-index-category-section {padding: 24px 0}
.fa-index-category-title {font-size: 1.1em;font-weight: 700;color: var(--fa-text-secondary);margin: 0 0 12px;padding-bottom: 8px;border-bottom: 1px solid var(--fa-card-border)}
.fa-index-fish-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));gap: 8px}
.fa-index-fish-card {display: flex;align-items: center;justify-content: space-between;gap: 6px;padding: 10px 12px;background: var(--fa-card-bg);border: 1px solid var(--fa-card-border);border-radius: 8px;text-decoration: none;color: var(--fa-text-primary);transition: background 0.15s, border-color 0.15s;min-width: 0}
.fa-index-fish-card:hover {background: var(--fa-card-bg-hover);border-color: var(--fa-text-accent)}
.fa-index-fish-name {font-size: 0.9em;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;min-width: 0}
.fa-index-fish-count {font-size: 0.75em;color: var(--fa-text-accent);white-space: nowrap;flex-shrink: 0}
.fa-index-no-data {color: var(--fa-text-muted)}
.fa-footer-nav-section {padding: 40px 0 60px;text-align: center}
.fa-footer-nav-link {display: inline-flex;align-items: center;gap: 6px;padding: 14px 28px;background: var(--fa-card-bg);border: 1px solid var(--fa-card-border);border-radius: 10px;color: var(--fa-text-accent);text-decoration: none;font-size: 0.95em;font-weight: 600;transition: background 0.15s, border-color 0.15s}
.fa-footer-nav-link:hover {background: var(--fa-card-bg-hover);border-color: var(--fa-text-accent)}
.fa-footer-nav-link svg {stroke: var(--fa-text-accent)}
@media (max-width: 480px) {.fa-index-hero {padding: 40px 0 28px}
.fa-index-title {font-size: 1.6em}
.fa-index-stats-row {gap: 24px}
.fa-index-stat-value {font-size: 1.5em}
.fa-index-fish-grid {grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 6px}
.fa-index-fish-card {padding: 8px 10px}
.fa-index-fish-name {font-size: 0.85em}}