.dashboard-feed-modal {position: fixed;inset: 0 0 calc(60px + env(safe-area-inset-bottom, 0px)) 0;z-index: var(--z-index-modal, 1100);overflow: hidden}
@media (min-width: 769px) {.dashboard-feed-modal {inset: 60px 0 0 0}}
.dashboard-feed-modal.hidden {display: none}
.dashboard-modal {--color-bg: #f0f9ff;--color-surface: #ffffff;--color-border: #e2e8f0;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-muted: #94a3b8;--color-fishing: #0284c7;--color-fishing-light: #0ea5e9;--color-nice: #d97706;--color-nice-light: #f59e0b;--color-supporter: #7c3aed;--color-supporter-light: #8b5cf6;--color-cuisine: #dc2626;--color-cuisine-light: #ef4444;--color-location: #059669;--color-location-light: #10b981;--color-tackle: #4f46e5;--color-tackle-light: #818cf8;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--shadow-card: 0 2px 8px rgba(2, 132, 199, 0.08), 0 1px 3px rgba(2, 132, 199, 0.05);--shadow-card-hover: 0 8px 24px rgba(2, 132, 199, 0.16), 0 2px 6px rgba(2, 132, 199, 0.08)}
.dashboard-modal {display: flex;flex-direction: column;height: 100%;max-width: 100%;box-sizing: border-box;background:
radial-gradient(1200px 400px at 50% -100px, rgba(14, 165, 233, 0.07), transparent),
repeating-linear-gradient(
0deg,
transparent,
transparent 38px,
rgba(2, 132, 199, 0.02) 38px,
rgba(2, 132, 199, 0.02) 39px
),
#f0f9ff;overflow: hidden}
.dashboard-header {background: linear-gradient(120deg, #075985 0%, #0284c7 55%, #0ea5e9 100%);padding: 12px 16px 34px;flex-shrink: 0;position: relative;z-index: 5}
.dashboard-header::before {content: '';position: absolute;inset: 0;background:
radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.10) 0 14px, transparent 15px),
radial-gradient(circle at 90% 60%, rgba(255, 255, 255, 0.07) 0 8px, transparent 9px),
radial-gradient(circle at 70% 75%, rgba(255, 255, 255, 0.05) 0 20px, transparent 21px);pointer-events: none}
.header-inner {max-width: 1120px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;gap: 12px}
.header-title-block {display: flex;align-items: baseline;gap: 10px;min-width: 0;flex-wrap: wrap}
.header-title {font-size: 18px;font-weight: 800;color: #fff;letter-spacing: -0.02em;text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);display: flex;align-items: center;gap: 8px}
.header-title svg {width: 20px;height: 20px;flex-shrink: 0}
.header-period {font-size: 12px;color: rgba(255, 255, 255, 0.85);font-weight: 600;background: rgba(255, 255, 255, 0.14);border: 1px solid rgba(255, 255, 255, 0.22);border-radius: 999px;padding: 3px 10px;white-space: nowrap}
.header-close-btn {height: 36px;padding: 0 14px;border-radius: 999px;background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);border: 1px solid rgba(255, 255, 255, 0.3);cursor: pointer;display: flex;align-items: center;gap: 6px;color: #fff;font-size: 13px;font-weight: 600;transition: background 0.15s, transform 0.15s;flex-shrink: 0;min-width: 44px;min-height: 36px}
.header-close-btn:hover {background: rgba(255, 255, 255, 0.28)}
.header-close-btn:active {transform: scale(0.95)}
.header-close-btn .close-icon {width: 16px;height: 16px;flex-shrink: 0;transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)}
.header-close-btn:hover .close-icon {transform: rotate(90deg)}
.kpi-strip-wrap {max-width: 1120px;width: 100%;margin: -26px auto 0;padding: 0 16px;position: relative;z-index: 6;flex-shrink: 0;box-sizing: border-box}
.kpi-strip {background: rgba(255, 255, 255, 0.92);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.8);border-radius: var(--radius-lg);box-shadow: 0 10px 30px rgba(2, 132, 199, 0.16);display: grid;grid-template-columns: repeat(4, 1fr);overflow: hidden}
.kpi-cell {padding: 12px 8px 11px;text-align: center;position: relative;min-width: 0}
.kpi-cell + .kpi-cell::before {content: '';position: absolute;left: 0;top: 22%;bottom: 22%;width: 1px;background: var(--color-border)}
.kpi-num {font-size: 22px;font-weight: 800;letter-spacing: -0.03em;color: var(--color-fishing);font-variant-numeric: tabular-nums;line-height: 1.1}
.kpi-num .kpi-unit {font-size: 12px;font-weight: 700;margin-left: 1px;color: var(--color-text-muted)}
.kpi-label {font-size: 10.5px;font-weight: 600;color: var(--color-text-muted);margin-top: 3px;letter-spacing: 0.02em}
.dashboard-feed {flex: 1;overflow-y: auto;overflow-x: hidden;-webkit-overflow-scrolling: touch}
.dashboard-feed::-webkit-scrollbar {width: 3px}
.dashboard-feed::-webkit-scrollbar-track {background: transparent}
.dashboard-feed::-webkit-scrollbar-thumb {background: #bfdbfe;border-radius: 999px}
.section-nav {position: sticky;top: 0;z-index: 20;display: flex;gap: 6px;overflow-x: auto;padding: 10px 16px;scrollbar-width: none;-webkit-overflow-scrolling: touch;background: linear-gradient(#f0f9ff 75%, rgba(240, 249, 255, 0))}
.section-nav::-webkit-scrollbar {display: none}
.nav-chip {flex-shrink: 0;display: inline-flex;align-items: center;gap: 5px;padding: 7px 13px;border-radius: 999px;font-size: 12.5px;font-weight: 700;border: 1.5px solid var(--color-border);cursor: pointer;background: #fff;color: var(--color-text-secondary);transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s;white-space: nowrap;line-height: 1;position: relative;overflow: hidden}
.nav-chip svg {width: 13px;height: 13px;flex-shrink: 0}
.nav-chip .ripple,
.rail-btn .ripple {position: absolute;border-radius: 50%;background: rgba(2, 132, 199, 0.25);transform: scale(0);animation: ripple-anim 0.5s linear;pointer-events: none}
.nav-chip.active .ripple {background: rgba(255, 255, 255, 0.4)}
@keyframes ripple-anim {to {transform: scale(4);opacity: 0}}
.nav-chip:active {transform: scale(0.94)}
.nav-chip.active {color: #fff;border-color: transparent;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14)}
.nav-chip[data-section="fishing"].active   { background: var(--color-fishing); }
.nav-chip[data-section="nice"].active      { background: var(--color-nice); }
.nav-chip[data-section="cuisine"].active   { background: var(--color-cuisine); }
.nav-chip[data-section="location"].active  { background: var(--color-location); }
.nav-chip[data-section="tackle"].active    { background: var(--color-tackle); }
.nav-chip[data-section="supporter"].active { background: var(--color-supporter); }
.side-rail {display: none}
.feed-layout {max-width: 1120px;margin: 0 auto;padding: 6px 16px 56px;box-sizing: border-box}
.feed-grid {display: grid;grid-template-columns: 1fr;gap: 14px;min-width: 0}
.feed-grid > [id^="section-"] {scroll-margin-top: 56px}
.card {background: var(--color-surface);border-radius: var(--radius-lg);box-shadow: var(--shadow-card);border: 1px solid rgba(226, 232, 240, 0.8);overflow: hidden;position: relative;display: flex;flex-direction: column;min-width: 0;transition: box-shadow 0.25s, transform 0.25s}
.card:hover {box-shadow: var(--shadow-card-hover);transform: translateY(-2px)}
.card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 3px;background: var(--accent, var(--color-fishing))}
.card--fishing  { --accent: linear-gradient(90deg, #0284c7, #38bdf8); --accent-solid: var(--color-fishing); }
.card--nice     { --accent: linear-gradient(90deg, #d97706, #fbbf24); --accent-solid: var(--color-nice); }
.card--cuisine  { --accent: linear-gradient(90deg, #dc2626, #f87171); --accent-solid: var(--color-cuisine); }
.card--location { --accent: linear-gradient(90deg, #059669, #34d399); --accent-solid: var(--color-location); }
.card--tackle   { --accent: linear-gradient(90deg, #4f46e5, #818cf8); --accent-solid: var(--color-tackle); }
.card-header {display: flex;align-items: center;gap: 10px;padding: 14px 16px 10px}
.section-icon {width: 34px;height: 34px;border-radius: 10px;display: flex;align-items: center;justify-content: center;color: #fff;flex-shrink: 0;background: var(--accent-solid, var(--color-fishing));box-shadow: 0 3px 8px color-mix(in srgb, var(--accent-solid) 35%, transparent)}
.section-icon svg {width: 18px;height: 18px}
.card-header-text {min-width: 0;flex: 1}
.card-section-label {font-size: 10.5px;font-weight: 800;letter-spacing: 0.06em;color: var(--accent-solid)}
.card-title {font-size: 15px;font-weight: 700;color: var(--color-text-primary);letter-spacing: -0.01em}
.card-more {flex-shrink: 0;display: inline-flex;align-items: center;gap: 2px;font-size: 11.5px;font-weight: 700;color: var(--color-text-muted);background: #f1f5f9;border: none;border-radius: 999px;padding: 5px 10px;cursor: pointer;transition: background 0.15s, color 0.15s;text-decoration: none;white-space: nowrap}
.card-more:hover {background: #e2e8f0;color: var(--color-text-secondary)}
.card-more svg {width: 11px;height: 11px}
.card-body {padding: 2px 16px 16px;flex: 1;display: flex;flex-direction: column;min-width: 0}
.feed-empty-state {padding: 28px 16px}
.feed-empty-icon {width: 40px;height: 40px;margin: 0 auto 12px;display: block}
.feed-empty-text {color: var(--color-text-muted);text-align: center;font-size: 13px}
.fishing-ranking {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 4px}
.fish-rank-row {display: grid;grid-template-columns: 30px minmax(72px, auto) 1fr 44px;align-items: center;gap: 8px;padding: 7px 8px;border-radius: 10px;min-width: 0}
.fish-rank-row.rank-1st {background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.02));border: 1px solid rgba(251, 191, 36, 0.35)}
.fish-rank-num {width: 26px;height: 26px;display: flex;align-items: center;justify-content: center;font-size: 12.5px;font-weight: 800;border-radius: 50%;background: #f1f5f9;color: var(--color-text-muted)}
.fish-rank-num.gold   { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; }
.fish-rank-num.silver { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; }
.fish-rank-num.bronze { background: linear-gradient(135deg, #fdba74, #c2712a); color: #431407; }
.fish-rank-num .crown-icon {width: 15px;height: 15px}
.fish-rank-name {font-size: 13.5px;font-weight: 700;color: var(--color-text-primary);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0}
.fish-rank-bar-wrap {height: 18px;background: #f1f5f9;border-radius: 999px;overflow: hidden;min-width: 0}
.fish-rank-bar {height: 100%;border-radius: 999px;background: linear-gradient(90deg, #0284c7, #38bdf8);width: 0;transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1)}
.fish-rank-row:nth-child(n+2) .fish-rank-bar {background: linear-gradient(90deg, #7dd3fc, #bae6fd)}
.fish-rank-count {font-size: 12.5px;font-weight: 800;text-align: right;color: var(--color-fishing);font-variant-numeric: tabular-nums;white-space: nowrap}
.nice-top-card {display: block;position: relative;border-radius: var(--radius-md);overflow: hidden;aspect-ratio: 16 / 9;text-decoration: none;background: linear-gradient(135deg, #0c4a6e, #0369a1 60%, #0ea5e9)}
.nice-top-photo {position: absolute;inset: 0;display: flex;align-items: center;justify-content: center}
.nice-top-photo img {width: 100%;height: 100%;object-fit: cover}
.nice-top-photo .nice-fish-silhouette {width: 46%;max-width: 180px;opacity: 0.55}
.nice-top-overlay {position: absolute;inset: auto 0 0 0;padding: 34px 14px 12px;background: linear-gradient(transparent, rgba(2, 20, 35, 0.82));color: #fff}
.nice-crown {position: absolute;top: 10px;left: 10px;display: inline-flex;align-items: center;gap: 4px;background: linear-gradient(135deg, #fbbf24, #d97706);color: #431407;font-size: 11px;font-weight: 800;border-radius: 999px;padding: 4px 10px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);z-index: 1}
.nice-crown svg {width: 12px;height: 12px}
.nice-top-fish-name {font-size: 18px;font-weight: 800;letter-spacing: -0.01em;text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.nice-top-meta {display: flex;align-items: center;gap: 8px;margin-top: 5px;flex-wrap: wrap}
.nice-badge {display: inline-flex;align-items: center;gap: 4px;background: rgba(239, 68, 68, 0.9);font-size: 11px;font-weight: 800;border-radius: 999px;padding: 3px 9px}
.nice-badge svg {width: 11px;height: 11px;fill: #fff}
.nice-top-user {display: inline-flex;align-items: center;gap: 5px;font-size: 11.5px;font-weight: 600;opacity: 0.85;min-width: 0}
.nice-top-user .nice-user-name {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0}
.nice-runners {display: flex;flex-direction: column;gap: 6px;margin-top: 10px}
.nice-runner-row {display: grid;grid-template-columns: 24px 1fr auto;align-items: center;gap: 8px;padding: 7px 8px;border-radius: 10px;background: #f1f5f9;text-decoration: none;transition: background 0.15s;min-width: 0}
.nice-runner-row:hover {background: #e2e8f0}
.nice-runner-rank {font-size: 11.5px;font-weight: 800;color: var(--color-text-muted);text-align: center}
.nice-runner-info {min-width: 0}
.nice-runner-name {display: block;font-size: 12.5px;font-weight: 700;color: var(--color-text-primary);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.nice-runner-user {display: flex;align-items: center;gap: 4px;font-size: 10.5px;color: var(--color-text-muted);min-width: 0}
.nice-runner-user .nice-user-name {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0}
.nice-user-avatar {display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;border-radius: 50%;overflow: hidden;background: #cbd5e1;border: 1px solid rgba(148, 163, 184, 0.35)}
.nice-user-avatar-img {width: 100%;height: 100%;object-fit: cover;display: block}
.nice-user-avatar-fallback {font-size: 9px;font-weight: 800;line-height: 1;color: #fff;text-transform: uppercase}
.nice-runner-count {display: inline-flex;align-items: center;gap: 3px;font-size: 11.5px;font-weight: 800;color: #ef4444;white-space: nowrap}
.nice-runner-count svg {width: 11px;height: 11px;fill: currentColor}
.cuisine-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 8px;min-width: 0}
.cuisine-item {position: relative;aspect-ratio: 1;border-radius: var(--radius-md);overflow: hidden;cursor: pointer;border: none;padding: 0;background: none;min-width: 0}
.cuisine-item:focus-visible {outline: 2px solid var(--color-cuisine);outline-offset: 2px}
.cuisine-item img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover}
.cuisine-placeholder {position: absolute;inset: 0;display: flex;align-items: center;justify-content: center}
.cuisine-placeholder svg {width: 30px;height: 30px;fill: rgba(255, 255, 255, 0.7)}
.cuisine-ph-1 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.cuisine-ph-2 { background: linear-gradient(135deg, #f87171, #b91c1c); }
.cuisine-ph-3 { background: linear-gradient(135deg, #34d399, #047857); }
.cuisine-ph-4 { background: linear-gradient(135deg, #818cf8, #4338ca); }
.cuisine-ph-5 { background: linear-gradient(135deg, #f472b6, #be185d); }
.cuisine-ph-6 { background: linear-gradient(135deg, #38bdf8, #0369a1); }
.cuisine-label {position: absolute;inset: auto 0 0 0;padding: 18px 8px 6px;background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));color: #fff;font-size: 10.5px;font-weight: 700;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.cuisine-more-tile {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 4px;background: #f1f5f9;color: var(--color-text-muted);font-size: 12px;font-weight: 800;border: 1.5px dashed #cbd5e1;border-radius: var(--radius-md);aspect-ratio: 1;text-decoration: none;transition: background 0.15s, color 0.15s}
.cuisine-more-tile:hover {background: #e2e8f0;color: var(--color-text-secondary)}
.cuisine-more-tile svg {width: 18px;height: 18px}
.location-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 6px}
.location-row {display: grid;grid-template-columns: 38px 1fr 46px;align-items: center;gap: 10px;padding: 8px;border-radius: 10px;min-width: 0}
.location-row:first-child {background: linear-gradient(90deg, rgba(16, 185, 129, 0.10), transparent)}
.location-icon-wrap {width: 38px;height: 38px;border-radius: 11px;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #d1fae5, #a7f3d0);color: #059669}
.location-icon-wrap svg {width: 20px;height: 20px}
.location-info {min-width: 0}
.location-name {font-size: 13px;font-weight: 700;color: var(--color-text-primary);display: flex;align-items: baseline;gap: 6px;overflow: hidden;white-space: nowrap}
.location-species {font-size: 10.5px;font-weight: 600;color: var(--color-text-muted)}
.location-bar-wrap {height: 7px;margin-top: 5px;background: #f1f5f9;border-radius: 999px;overflow: hidden}
.location-bar {height: 100%;width: 0;border-radius: 999px;background: linear-gradient(90deg, #059669, #34d399);transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1)}
.location-count {font-size: 12.5px;font-weight: 800;color: var(--color-location);text-align: right;font-variant-numeric: tabular-nums;white-space: nowrap}
.tackle-top-area {display: flex;align-items: center;gap: 18px;padding: 4px 0 6px;min-width: 0}
.tackle-donut-center {position: relative;width: 108px;height: 108px;flex-shrink: 0}
.tackle-donut-center svg {width: 100%;height: 100%;transform: rotate(-90deg)}
.tackle-donut-center-text {position: absolute;inset: 0;display: flex;flex-direction: column;align-items: center;justify-content: center}
.tackle-donut-center-num {font-size: 21px;font-weight: 800;color: var(--color-tackle);line-height: 1;font-variant-numeric: tabular-nums}
.tackle-donut-center-label {font-size: 10px;font-weight: 700;color: var(--color-text-muted);margin-top: 2px}
.tackle-donut-legend {flex: 1;display: flex;flex-direction: column;gap: 7px;min-width: 0}
.tackle-legend-row {display: flex;align-items: center;gap: 7px;min-width: 0}
.tackle-legend-dot {width: 9px;height: 9px;border-radius: 3px;flex-shrink: 0}
.tackle-legend-name {font-size: 12px;font-weight: 700;color: var(--color-text-primary);flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0}
.tackle-legend-bar {flex-basis: 34%;height: 6px;background: #f1f5f9;border-radius: 999px;overflow: hidden;flex-shrink: 0}
.tackle-legend-bar .tackle-legend-bar-fill {display: block;height: 100%;width: 0;border-radius: 999px;transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1)}
.tackle-legend-pct {font-size: 11.5px;font-weight: 800;color: var(--color-text-secondary);width: 34px;text-align: right;font-variant-numeric: tabular-nums;flex-shrink: 0}
.archive-cta {display: flex;align-items: center;gap: 14px;padding: 16px 18px;border-radius: var(--radius-lg);text-decoration: none;color: #fff;background: linear-gradient(115deg, #0c4a6e 0%, #0369a1 55%, #0284c7 100%);box-shadow: 0 6px 18px rgba(3, 105, 161, 0.28);position: relative;overflow: hidden;min-width: 0;transition: transform 0.15s, box-shadow 0.15s}
.archive-cta::before {content: '';position: absolute;inset: 0;background:
radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.12) 0 32px, transparent 33px),
radial-gradient(circle at 78% 85%, rgba(255, 255, 255, 0.07) 0 20px, transparent 21px);pointer-events: none}
.archive-cta:hover {transform: translateY(-2px);box-shadow: 0 10px 26px rgba(3, 105, 161, 0.34)}
.archive-cta-icon {flex-shrink: 0;width: 44px;height: 44px;border-radius: 12px;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.18);border: 1px solid rgba(255, 255, 255, 0.28)}
.archive-cta-icon svg {width: 22px;height: 22px}
.archive-cta-text {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 2px}
.archive-cta-title {font-size: 15px;font-weight: 800;letter-spacing: -0.01em}
.archive-cta-desc {font-size: 12px;font-weight: 600;opacity: 0.86;overflow-wrap: anywhere}
.archive-cta-arrow {flex-shrink: 0;display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;border-radius: 50%;background: rgba(255, 255, 255, 0.16)}
.archive-cta-arrow svg {width: 15px;height: 15px}
.supporter-banner {border-radius: var(--radius-lg);overflow: hidden;position: relative;background: linear-gradient(115deg, #4c1d95 0%, #7c3aed 55%, #a78bfa 100%);color: #fff;padding: 22px 20px;display: flex;flex-wrap: wrap;align-items: center;gap: 18px;box-shadow: 0 8px 24px rgba(124, 58, 237, 0.28);min-width: 0}
.supporter-banner::before {content: '';position: absolute;inset: 0;background:
radial-gradient(circle at 88% 15%, rgba(255, 255, 255, 0.14) 0 40px, transparent 41px),
radial-gradient(circle at 75% 80%, rgba(255, 255, 255, 0.08) 0 26px, transparent 27px);pointer-events: none}
.supporter-text {flex: 1 1 260px;min-width: 0;position: relative}
.supporter-eyebrow {display: inline-flex;align-items: center;gap: 5px;font-size: 10.5px;font-weight: 800;letter-spacing: 0.08em;background: rgba(255, 255, 255, 0.16);border: 1px solid rgba(255, 255, 255, 0.3);border-radius: 999px;padding: 4px 10px;margin-bottom: 8px}
.supporter-eyebrow svg {width: 11px;height: 11px;fill: #fde68a}
.supporter-title {font-size: 18px;font-weight: 800;letter-spacing: -0.01em;line-height: 1.4;margin: 0}
.supporter-desc {font-size: 12.5px;opacity: 0.88;margin-top: 6px;line-height: 1.7;overflow-wrap: anywhere}
.supporter-action {position: relative;display: flex;flex-direction: column;align-items: center;gap: 8px;flex-shrink: 0;margin: 0 auto}
.supporter-avatars {display: flex;flex-wrap: wrap;justify-content: center;row-gap: 7px;max-width: 300px}
.supporter-avatar {width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: 800;color: #fff;border: 2px solid #7c3aed;margin-left: -7px;text-decoration: none}
.supporter-avatar:first-child {margin-left: 0}
.supporter-avatar-img {width: 100%;height: 100%;border-radius: 50%;object-fit: cover;display: block}
.supporter-avatar-more {background: rgba(255, 255, 255, 0.25);font-size: 10px}
.supporter-cta-btn {display: inline-block;background: #fff;color: #6d28d9;font-size: 14px;font-weight: 800;border-radius: 999px;padding: 11px 30px;text-decoration: none;box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);transition: transform 0.15s, box-shadow 0.15s;white-space: nowrap;border: none;cursor: pointer}
.supporter-cta-btn:hover {transform: translateY(-1px);box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3)}
.supporter-price-note {font-size: 10.5px;opacity: 0.8;margin: 0}
.card-animate {opacity: 0;transform: translateY(16px);transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)}
.card-animate.visible {opacity: 1;transform: none}
@media (prefers-reduced-motion: reduce) {.card-animate {opacity: 1;transform: none;transition: none}
.fish-rank-bar,
.location-bar,
.tackle-legend-bar .tackle-legend-bar-fill {transition: none}}
.lightbox-overlay {position: fixed;inset: 0;background: rgba(2, 10, 20, 0.92);z-index: calc(var(--z-index-modal, 1100) + 50);display: flex;align-items: center;justify-content: center;padding: 20px;opacity: 0;pointer-events: none;transition: opacity 0.22s}
.lightbox-overlay.open {opacity: 1;pointer-events: auto}
.lightbox-content-wrap {max-width: 480px;width: 100%;border-radius: var(--radius-lg);overflow: hidden;transform: scale(0.88);transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1)}
.lightbox-overlay.open .lightbox-content-wrap {transform: scale(1)}
.lightbox-inner {width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 14px}
.lightbox-label {color: #fff;font-size: 17px;font-weight: 700;text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);position: fixed;bottom: 28px;left: 0;right: 0;text-align: center}
.lightbox-close {position: fixed;top: 16px;right: 16px;height: 40px;padding: 0 16px;border-radius: 999px;background: rgba(255, 255, 255, 0.15);border: 1px solid rgba(255, 255, 255, 0.25);cursor: pointer;display: flex;align-items: center;gap: 7px;color: #fff;font-size: 13px;font-weight: 600;z-index: calc(var(--z-index-modal, 1100) + 51);min-width: 44px;min-height: 40px;transition: background 0.15s}
.lightbox-close:hover {background: rgba(255, 255, 255, 0.25)}
.lightbox-close .close-icon {width: 16px;height: 16px;transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)}
.lightbox-close:hover .close-icon {transform: rotate(90deg)}
@media (min-width: 700px) {.feed-grid {grid-template-columns: repeat(2, 1fr)}
.card--cuisine,
.archive-cta,
.supporter-banner {grid-column: 1 / -1}
.cuisine-grid {grid-template-columns: repeat(6, 1fr)}
.kpi-num {font-size: 26px}}
@media (min-width: 1024px) {.section-nav {display: none}
.feed-layout {display: grid;grid-template-columns: 64px 1fr;gap: 18px;padding-top: 18px}
.side-rail {display: flex;flex-direction: column;gap: 6px;position: sticky;top: 18px;align-self: start}
.rail-btn {width: 64px;display: flex;flex-direction: column;align-items: center;gap: 3px;padding: 9px 4px 8px;border-radius: 14px;border: 1.5px solid transparent;background: transparent;cursor: pointer;color: var(--color-text-muted);font-size: 10px;font-weight: 700;transition: background 0.18s, color 0.18s, border-color 0.18s;position: relative;overflow: hidden}
.rail-btn svg {width: 19px;height: 19px}
.rail-btn:hover {background: rgba(255, 255, 255, 0.8)}
.rail-btn.active {background: #fff;border-color: var(--rail-color, var(--color-fishing));color: var(--rail-color, var(--color-fishing));box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12)}
.rail-btn[data-section="fishing"]   { --rail-color: var(--color-fishing); }
.rail-btn[data-section="nice"]      { --rail-color: var(--color-nice); }
.rail-btn[data-section="cuisine"]   { --rail-color: var(--color-cuisine); }
.rail-btn[data-section="location"]  { --rail-color: var(--color-location); }
.rail-btn[data-section="tackle"]    { --rail-color: var(--color-tackle); }
.rail-btn[data-section="supporter"] { --rail-color: var(--color-supporter); }
.feed-grid {grid-template-columns: repeat(12, 1fr);gap: 16px}
.feed-grid > [id^="section-"] {scroll-margin-top: 12px}
.card--fishing  { grid-column: span 7; }
.card--nice     { grid-column: span 5; }
.card--cuisine  { grid-column: span 12; }
.card--location { grid-column: span 6; }
.card--tackle   { grid-column: span 6; }
.archive-cta {grid-column: 1 / -1;padding: 18px 24px}
.supporter-banner {grid-column: 1 / -1;padding: 26px 32px}
.supporter-title {font-size: 21px}
.nice-top-card {aspect-ratio: 16 / 10}}
@media (max-width: 400px) {.fish-rank-row {grid-template-columns: 28px minmax(60px, auto) 1fr 40px;gap: 6px}
.kpi-num {font-size: 19px}
.tackle-top-area {gap: 12px}
.tackle-donut-center {width: 92px;height: 92px}}