/* Shared visual foundation. Theme selection, component visibility and behavior
   stay with their existing templates/handlers. No light/dark user modes. */
body {
    --club-bg: #080e12;
    --club-surface: #10191e;
    --club-surface-raised: #17232b;
    --club-ink: #f3f6f7;
    --club-muted: #c2cdd3;
    --club-gold: #e0bf81;
    --club-accent: var(--club-gold);
    --club-accent-soft: rgba(224, 191, 129, .12);
    --club-border: rgba(209, 224, 232, .22);
    --club-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    --club-radius: 18px;
    --text: var(--club-ink);
    --muted: var(--club-muted);
    --muted-strong: #dee7eb;
    --card: var(--club-surface);
    --card-strong: var(--club-surface-raised);
    --primary: var(--club-accent);
    --primary-dark: #b18e51;
    --accent: var(--club-accent);
    --accent-soft: var(--club-accent-soft);
    --border: var(--club-border);
    --line: var(--club-border);
    --line-strong: rgba(224, 191, 129, .35);
    --luxury-surface: var(--club-surface);
    --luxury-surface-strong: var(--club-surface-raised);
    --luxury-line: var(--club-border);
    --luxury-line-strong: rgba(224, 191, 129, .32);
    --luxury-shadow-soft: var(--club-shadow);
    --luxury-shadow-deep: 0 18px 44px rgba(0, 0, 0, .24);
    font: 400 16px/1.6 Manrope, system-ui, sans-serif;
    color: var(--club-ink);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
/* Existing seasonal/atomic themes own their accent and their background layers. */
body[class*="event-theme-"] {
    --club-accent: color-mix(in srgb, rgb(var(--calendar-event-accent)) 65%, #f1dfb5);
    --club-accent-soft: rgba(var(--calendar-event-accent), .16);
    --club-border: color-mix(in srgb, rgb(var(--calendar-event-accent)) 23%, #3d4545);
}
body:not([class*="event-theme-"]) {
    background: radial-gradient(ellipse at 85% 0, rgba(224, 191, 129, .07), transparent 50%), var(--club-bg);
}
body .app-content-stack { min-width: 0; }
body .app-content-stack > * { animation: none; }
body :is(h1, h2, h3, h4, h5, h6) { color: var(--club-ink); text-wrap: balance; }
body :is(h2, h3, h4, h5, h6) { font-family: Manrope, system-ui, sans-serif; letter-spacing: -.025em; }
body h2 { font-size: 27px; line-height: 1.3; font-weight: 650; }
body h3 { font-size: 22px; line-height: 1.35; font-weight: 650; }
body h4 { font-size: 19px; line-height: 1.4; font-weight: 650; }
body p { line-height: 1.65; }
body :is(button, input, select, textarea) { font-family: inherit; }
body :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--club-accent);
    outline-offset: 3px;
}
body :is(.help-text, .form-text, .form-label, .stat-label) { font-size: 14px; line-height: 1.5; }
body .text-muted { color: var(--club-muted) !important; }
body .small, body small { font-size: 13px; }
/* Restore a clear boundary to panels that older transparent overrides erased. */
body .app-content-stack > :is(.card, .premium-card),
body .app-content-stack > div > .card:not(.fish-card-surface),
body .premium-card:not(.fish-card-surface) {
    border: 1px solid var(--club-border) !important;
    border-radius: var(--club-radius);
    background: var(--club-surface) !important;
    box-shadow: var(--club-shadow) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body .premium-card > .card-header,
body .app-content-stack > .card > .card-header {
    border-bottom: 1px solid var(--club-border);
    padding: 20px 24px;
    background-color: transparent;
}
body .premium-card > .card-body { padding: 24px; }
body .card-header :is(h2, h3, h4) { margin: 0; }
body :is(.page-hero, .daily-task-hero, .water-research-hero) {
    border-radius: 22px;
    border-color: var(--club-border);
    box-shadow: var(--club-shadow);
}
body .page-hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(34px, 3.6vw, 54px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.025em;
}
body .page-hero-subtitle { font-size: 16px; line-height: 1.65; }
body :is(.eyebrow, .section-kicker, .app-section-label) {
    color: var(--club-accent);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .12em;
}
/* Navigation: one quiet panel with a visible current location. */
body .navbar-blue {
    border: 1px solid var(--club-border);
    background: linear-gradient(155deg, #202629, #141a1d);
    border-radius: 22px;
    box-shadow: var(--club-shadow);
    backdrop-filter: none;
}
body .navbar-brand { gap: 10px; padding-bottom: 18px; }
body .navbar-brand-text { color: #f5ead5; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; font-weight: 600; }
body .app-sidebar-link {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #dce0dc;
    box-shadow: none;
    font-size: 14px;
    font-weight: 550;
    text-shadow: none;
}
body .app-sidebar-link:hover { background: rgba(255, 255, 255, .045); border-color: var(--club-border); color: #fff5df; }
body .app-sidebar-link.active { background: var(--club-accent-soft); border-color: color-mix(in srgb, var(--club-accent) 45%, transparent); color: #fff2d6; box-shadow: inset 3px 0 var(--club-accent); }
body .app-sidebar-link-icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .04); box-shadow: none; }
body :is(.app-sidebar-group, .sidebar-status-card) { border-color: var(--club-border); box-shadow: none; }
body .app-sidebar-group-toggle { min-height: 42px; background: transparent; color: #cad0cb; font-size: 13px; font-weight: 600; box-shadow: none; }
body .app-sidebar-footer { border-top-color: var(--club-border); gap: 10px; }
body .app-sidebar-theme-select { min-width: 0; }
body .app-sidebar-action-btn { font-size: 13px; }
/* Keep semantic action colors and the disabled state; only unify geometry. */
body .btn {
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0;
    text-shadow: none;
    box-shadow: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
body :is(.btn-fish, .btn-primary) {
    border: 1px solid var(--club-accent);
    background: var(--club-accent);
    color: #172024;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}
body :is(.btn-fish, .btn-primary):hover { background: color-mix(in srgb, var(--club-accent) 85%, white); border-color: var(--club-accent); color: #101719; }
body :is(.btn-outline-primary, .btn-outline-secondary, .btn-secondary) { color: var(--club-ink); border: 1px solid var(--club-border); background: var(--club-surface-raised); }
body :is(.btn-outline-primary, .btn-outline-secondary, .btn-secondary):hover { border-color: var(--club-accent); background: var(--club-accent-soft); color: var(--club-ink); }
body .btn:disabled, body .btn.disabled { opacity: .5; cursor: not-allowed; }
body :is(.form-control, .form-select, .input-group-text) {
    min-height: 44px;
    border: 1px solid var(--club-border);
    border-radius: 10px;
    background-color: var(--club-bg);
    color: var(--club-ink);
    font-size: 16px;
    box-shadow: none;
}
body :is(.form-control, .form-select):focus { border-color: var(--club-accent); background-color: var(--club-bg); color: var(--club-ink); box-shadow: 0 0 0 3px var(--club-accent-soft); }
body .form-control::placeholder { color: #8e9b9b; opacity: 1; }
body .form-control:disabled, body .form-select:disabled { opacity: .6; }
body .form-select { color-scheme: dark; }
body .input-group > :is(.form-control, .form-select) { min-width: 0; }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--club-accent); }
body .table-responsive { border: 1px solid var(--club-border); border-radius: 14px; box-shadow: none; }
body .table { --bs-table-bg: transparent; --bs-table-color: var(--club-ink); --bs-table-border-color: var(--club-border); --bs-table-striped-bg: rgba(255, 255, 255, .025); --bs-table-striped-color: var(--club-ink); --bs-table-hover-bg: var(--club-accent-soft); --bs-table-hover-color: var(--club-ink); margin-bottom: 0; color: var(--club-ink); font-size: 15px; }
body .table > thead > tr > th { padding: 13px 15px; background: var(--club-surface-raised) !important; color: #d9d8ce !important; border-color: var(--club-border); font-size: 13px; font-weight: 650; line-height: 1.5; letter-spacing: .025em; text-transform: none; }
body .table > tbody > tr > td { padding: 13px 15px; border-color: var(--club-border); line-height: 1.55; vertical-align: middle; }
body .table-hover > tbody > tr:hover > * { background-color: var(--club-accent-soft); }
body :is(.premium-mini-card, .water-card-stat, .profile-lux-stat-card, .admin-summary-item) { border: 1px solid var(--club-border); border-radius: 12px; background: var(--club-surface-raised); box-shadow: none; }
body .premium-mini-card strong { color: var(--club-muted); font-size: 14px; font-weight: 500; line-height: 1.45; }
body .premium-mini-card span { color: var(--club-ink); font-size: 24px; font-weight: 650; line-height: 1.25; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
body .alert { border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.65; box-shadow: none; }
body .alert-info { color: #cde3ee; background: #1b2e37; border-color: #365866; }
body .alert-warning { color: #f1d9a5; background: #332d21; border-color: #6f5b35; }
body .alert-success { color: #c4e4d0; background: #1b3027; border-color: #385e49; }
body .alert-danger { color: #f0c3c3; background: #382427; border-color: #74484d; }
body :is(.badge, .page-hero-pill) { font-size: 12px; line-height: 1.4; font-weight: 600; text-shadow: none; }
/* Match secondary panels to the same material without touching fish art. */
body :is(.dashboard-game-panel-tabs, .dashboard-time-panel-track, .profile-favorite-card, .home-feed-card, .scout-mission-card, .daily-task-water-group, .daily-task-card, .weekly-task-card, .widget-builder, .admin-panel-card) { border-color: var(--club-border); border-radius: 16px; box-shadow: var(--club-shadow); }
body :is(.home-feed-card h3, .water-card-heading h3, .scout-mission-card h3) { font-size: 21px; }
body :is(.home-feed-card p, .water-card-heading p, .daily-task-card p) { font-size: 15px; }
body :is(.dashboard-game-panel-tabs, .dashboard-game-panel-tab) { box-shadow: none; }
body .dashboard-game-panel-tab { border-radius: 10px; font-size: 12px; min-height: 42px; }
body .dashboard-game-panel-tab.active { border-color: var(--club-accent); background: var(--club-accent-soft); color: var(--club-accent); }
body .app-stage-actions { gap: 8px; }
body :is(.home-help-button, .stage-feedback-button) { min-height: 38px; padding: 8px 12px; border: 1px solid var(--club-border); border-radius: 10px; background: var(--club-surface-raised); color: var(--club-ink); font-size: 13px; box-shadow: none; }
body :is(.home-help-button-icon, .stage-feedback-button-icon) { width: 24px; height: 24px; background: none; color: var(--club-accent); box-shadow: none; }
/* The recommendations page inherits the selected site theme. */
body .recommend-workspace {
    --rec-ink: var(--club-ink);
    --rec-muted: var(--club-muted);
    --rec-paper: var(--club-bg);
    --rec-surface: var(--club-surface);
    --rec-soft: var(--club-surface-raised);
    --rec-line: var(--club-border);
    --rec-gold: var(--club-accent);
    --rec-gold-soft: var(--club-accent-soft);
    --rec-green: var(--club-accent);
}
body .recommend-workspace .recommend-main-fish-card,
body .recommend-workspace .recommend-guide-hero {
    background: radial-gradient(ellipse at 95% 5%, var(--club-accent-soft), transparent 60%), linear-gradient(120deg, #171f22, #252c2d);
    border-color: var(--club-border);
}
body .recommend-workspace .recommend-main-fish-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: #fbf1db; }
body .recommend-workspace .recommend-main-fish-kicker { color: var(--club-accent); }
body .recommend-workspace .recommend-share-hero-btn { border-color: var(--club-accent); background: var(--club-accent); color: #172024; }
body .recommend-workspace .stats-card .recommend-share-hero-btn > span { color: #172024; }
body .recommend-workspace .recommend-mode-plan { background: var(--club-surface-raised); }
body .recommend-workspace .recommend-mode-plan-card.wide { background: var(--club-accent-soft); }
body .recommend-workspace .recommend-main-fish-text { max-width: 100%; }
body .recommend-workspace .recommend-metrics { gap: 12px; }
body .recommend-workspace .recommend-mode-plan-head h3 { font-size: 26px; }
body .recommend-workspace .recommend-section-title { font-size: 22px; }
body .recommend-workspace .premium-mini-card { min-height: 106px; }
body .recommend-workspace .recommend-metrics-secondary .premium-mini-card { min-height: 96px; }
body .recommend-workspace .recommend-fish-story-subtitle { font-size: 20px; }
body .recommend-workspace .statistics-coverage-header h3 { font-size: 24px; }
body .recommend-workspace .recommend-profile-details[open] > summary,
body .recommend-workspace .recommend-extra-metrics[open] > summary { border-bottom: 1px solid var(--club-border); margin-bottom: 16px; }
body .recommend-workspace .recommend-profile-content { padding-top: 0; }
/* Mobile uses the same content and theme; only its layout becomes denser. */
@media (max-width: 1100px) {
    body .app-content-wrap { padding-inline: 16px; }
    body .premium-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    body { font-size: 16px; }
    body .app-content-wrap { padding-inline: 12px; }
    body :is(.premium-card, .page-hero) { border-radius: 16px; }
    body .premium-card > .card-header { padding: 16px; }
    body .premium-card > .card-body { padding: 16px; }
    body :is(.page-hero, .page-hero.compact, .page-hero.tall) { padding: 22px 18px; }
    body .page-hero-title { font-size: 36px; }
    body .page-hero-subtitle { font-size: 16px; }
    body .mobile-app-topbar { border-color: var(--club-border); background: #151c20; box-shadow: 0 3px 18px rgba(0, 0, 0, .18); backdrop-filter: none; }
    body .mobile-bottom-nav { background: #151c20; border-top: 1px solid var(--club-border); backdrop-filter: none; }
    body .mobile-bottom-nav-link.active { color: var(--club-accent); }
    body .mobile-bottom-nav-link.active .mobile-bottom-nav-icon { background: var(--club-accent-soft); color: var(--club-accent); box-shadow: none; }
    body .home-feed-tabs { overflow-x: auto; flex-wrap: nowrap; gap: 6px; padding-bottom: 4px; }
    body .home-feed-tabs button { flex-shrink: 0; }
    body .recommend-guide-card .help-text { display: block; }
    body .recommend-mode-option small { display: block; font-size: 14px; }
    body .recommend-guide-live { font-size: 12px; }
    body :is(.water-card-stat, .profile-lux-stat-card) { padding: 12px; }
    body .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body .table > thead > tr > th { white-space: nowrap; }
    body .table > tbody > tr > td { padding: 11px 12px; }
    body .recommend-workspace .recommend-main-fish-card { padding-bottom: 145px; }
    body .recommend-workspace .recommend-mode-plan-head h3 { font-size: 24px; }
    body .recommend-workspace .recommend-main-fish-title { font-size: 39px; }
    body .app-content-stack > .guide-section,
    body .app-content-stack > .login-section { margin-block: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    body { scroll-behavior: auto; }
    body .btn, body .app-sidebar-link { transition: none; }
}
/* Grid tracks must shrink to the viewport instead of clipping restored content. */
body .app-content-stack { grid-template-columns: minmax(0, 1fr); }
body .app-content-stack > * { min-width: 0; max-width: 100%; }
body :is(.mobile-home-summary, .mobile-home-now-card, .mobile-home-action-grid, .mobile-home-stats, .profile-lux-hero, .profile-lux-hero-main, .profile-lux-hero-stats) { min-width: 0; }
body .daily-task-hero-rewards > div { display: flex; flex-wrap: wrap; gap: 10px; }
body .daily-task-hero-reward { max-width: 100%; }
@media (max-width: 700px) {
    body .mobile-home-summary { grid-template-columns: minmax(0, 1fr); }
    body .hero-key-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .hero-key-action { min-width: 0; width: auto; }
    body .hero-key-action strong { font-size: 16px; overflow-wrap: anywhere; }
    body .hero-key-action > span { font-size: 13px; }
    body .profile-lux-hero { grid-template-columns: minmax(0, 1fr); }
    body .profile-lux-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .profile-lux-hero-main { flex-wrap: wrap; }
}
@media (max-width: 700px) {
    body .dashboard-hero-showcase .hero-key-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.water-map-workspace .water-map-toolbar { width: 100%; max-width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
    body.water-map-workspace .water-map-select-wrap { width: 100%; max-width: 100%; min-width: 0; }
    body.water-map-workspace .water-map-quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
    body.water-map-workspace .water-map-tool-button { min-width: 0; width: 100%; padding: 8px 5px; font-size: 12px; white-space: normal; }
}
/* Beat legacy palette selectors on the report itself, so seasonal accents also
   reach nested metrics and buttons instead of leaving a fixed green palette. */
body .recommend-workspace.recommend-report,
body .recommend-workspace.recommend-picker {
    --rec-ink: var(--club-ink);
    --rec-muted: var(--club-muted);
    --rec-paper: var(--club-bg);
    --rec-surface: var(--club-surface);
    --rec-soft: var(--club-surface-raised);
    --rec-line: var(--club-border);
    --rec-gold: var(--club-accent);
    --rec-gold-soft: var(--club-accent-soft);
    --rec-green: var(--club-accent);
}
body .recommend-workspace .btn-fish { background: var(--club-accent); border-color: var(--club-accent); color: #172024; }
body .recommend-workspace .btn-fish:hover { background: color-mix(in srgb, var(--club-accent) 85%, white); color: #101719; }
@media (max-width: 700px) {
    body .dashboard-hero-showcase .hero-key-action { padding: 12px; }
    body .dashboard-hero-showcase .hero-key-action strong { font-size: 15px; overflow-wrap: normal; word-break: normal; }
}
body :is(.profile-lux-panel, .profile-lux-account-list) { min-width: 0; }
@media (max-width: 700px) {
    body .profile-lux-grid { grid-template-columns: minmax(0, 1fr); }
    body .profile-lux-account-list > div { min-width: 0; flex-wrap: wrap; }
    body .profile-lux-account-list :is(span, strong) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    body.water-map-workspace :is(.water-map-toolbar, .water-map-frame-topbar, .water-map-sidecard-overlay) {
        left: auto;
        right: auto;
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        margin-inline: 10px;
    }
}
@media (max-width: 400px) {
    body .profile-lux-account-list > div { flex-direction: column; gap: 4px; }
    body .profile-lux-account-list strong { text-align: left; }
}
body .tackle-build-card { border-color: var(--club-border); background: var(--club-surface); box-shadow: var(--club-shadow); }
body .tackle-build-line-item { background: var(--club-surface-raised); color: var(--club-ink); }
body .tackle-build-line-name { color: var(--club-ink); }
@media (max-width: 700px) {
    body .game-calendar-section-head { flex-wrap: wrap; gap: 14px; }
    body .game-calendar-theme-preview { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    body .game-calendar-theme-preview .form-select { min-width: 0; flex: 1 1 160px; }
    body .game-calendar-year-layout { min-width: 0; grid-template-columns: minmax(0, 1fr); }
    body .game-calendar-year-grid { min-width: 0; grid-template-columns: minmax(0, 1fr); }
    body .game-calendar-month-card { min-width: 0; }
    body .store-hero { grid-template-columns: minmax(0, 1fr); }
    body .store-hero .page-hero-copy { min-width: 0; width: 100%; max-width: 100%; }
    body .store-hero-actions { flex-wrap: wrap; }
    body .store-control-panel { min-width: 0; }
    body .store-reset-button { min-width: 0; max-width: 100%; flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 700px) {
    body .profile-lux-form { min-width: 0; grid-template-columns: minmax(0, 1fr); }
    body .profile-lux-form > div { min-width: 0; max-width: 100%; }
    body .profile-lux-form :is(.form-label, .form-control, .voice-inline-note) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    body .game-calendar-section-head > div { min-width: 0; max-width: 100%; }
    body .game-calendar-level-filter { display: flex; flex-wrap: wrap; min-width: 0; max-width: 100%; }
    body .game-calendar-level-filter .form-select { min-width: 0; width: auto; max-width: 100%; flex: 1 1 160px; }
    body .game-calendar-dlc-toggle { min-width: 0; max-width: 100%; white-space: normal; }
    body .store-filter-side { min-width: 0; flex-wrap: wrap; }
    body .store-toggle { min-width: 0; max-width: 100%; }
    body.water-map-workspace .water-map-underpanel { left: auto; right: auto; width: calc(100% - 20px); max-width: calc(100% - 20px); margin-inline: 10px; }
}
@media (max-width: 700px) {
    body .profile-lux-toggle { min-width: 0; }
    body .profile-lux-toggle strong { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}

/* The header and footer never share the navigation's scroll area. Status belongs
   to the scrollable content, so even short windows retain usable navigation. */
body .navbar-blue { padding: 0; }
body .navbar-blue > .container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
    align-content: stretch;
    height: 100%;
    min-height: 0;
    gap: 8px;
    padding: 12px 10px;
    overflow: hidden;
}
body .navbar-blue .navbar-brand { min-height: 30px; margin: 0; padding: 0 4px; gap: 8px; }
body .navbar-blue .navbar-brand-text { font-size: 24px; line-height: 1.15; }
body .navbar-blue .navbar-brand-icon { font-size: 23px; }
body .navbar-blue .app-sidebar-scroll {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    align-items: stretch;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    gap: 6px;
    padding: 0 4px 4px 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-padding-block: 8px;
}
body .navbar-blue .app-sidebar-scroll > * { flex: 0 0 auto; min-width: 0; }
body .navbar-blue .app-sidebar-status { margin: 0 0 2px; padding: 0; }
body .navbar-blue .sidebar-status-card { gap: 6px; padding: 8px; border-radius: 12px; }
body .navbar-blue .sidebar-task-switcher { gap: 5px; }
body .navbar-blue .sidebar-task-switcher-link { min-height: 30px; padding: 5px 6px; border-radius: 7px; font-size: 12px; }
body .navbar-blue .sidebar-status-card-grid { gap: 5px; }
body .navbar-blue .sidebar-status-card-metric { min-height: 46px; padding: 7px 8px; }
body .navbar-blue .sidebar-status-card-value { font-size: 20px; line-height: 1.1; }
body .navbar-blue .sidebar-status-activity-row { gap: 5px; }
body .navbar-blue :is(.sidebar-status-activity, .sidebar-status-hq-link) { min-height: 35px; padding: 6px 8px; }
body .navbar-blue .sidebar-status-actions { gap: 5px; }
body .navbar-blue .global-search-trigger { min-height: 34px; margin: 0; padding: 5px 7px; animation: none; border-radius: 8px; }
body .navbar-blue .global-search-trigger-icon { width: 23px; height: 23px; animation: none; box-shadow: none; }
body .navbar-blue .app-sidebar-language-switch select { min-height: 34px; padding-block: 4px; font-size: 12px; border-radius: 8px; }
body .navbar-blue .app-sidebar-section { display: block; padding: 5px; border-radius: 10px; overflow: visible; }
body .navbar-blue .app-sidebar-group-toggle { width: 100%; min-height: 30px; padding: 5px 8px; border-radius: 7px; font-size: 12px; }
body .navbar-blue .app-sidebar-group-menu { gap: 3px; margin-top: 4px; padding: 0; overflow: visible; }
body .navbar-blue .app-sidebar-link { min-height: 34px; padding: 5px 8px; gap: 8px; font-size: 13px; line-height: 1.3; border-radius: 7px; }
body .navbar-blue .app-sidebar-link-icon { width: 24px; height: 24px; min-width: 24px; font-size: 16px; border-radius: 6px; }
body .navbar-blue .app-sidebar-link-text { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
body .navbar-blue .app-sidebar-footer {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    gap: 6px;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--club-border);
    background: var(--club-bg);
    z-index: 2;
}
body .navbar-blue .app-sidebar-theme-select { min-width: 0; margin: 0; }
body .navbar-blue .app-sidebar-footer .form-select { min-width: 0; width: 100%; min-height: 34px; padding-block: 5px; padding-right: 23px; font-size: 12px; border-radius: 8px; }
body .navbar-blue .app-sidebar-footer .app-sidebar-action-btn { min-height: 34px; padding: 6px 9px; font-size: 12px; border-radius: 8px; }
body .site-menu-toggle, body .site-menu-close, body .site-menu-backdrop { display: none; }
@media (min-width: 992px) {
    body .app-shell-sidebar { position: sticky; top: var(--app-rail-gap); height: calc(100dvh - var(--app-rail-gap) * 2); min-height: 0; max-height: calc(100dvh - var(--app-rail-gap) * 2); }
    body .app-shell-sidebar > .navbar-blue { height: 100%; max-height: 100%; }
}
@media (max-width: 991px) {
    body .mobile-app-topbar { display: grid; grid-template-columns: 36px 36px minmax(60px, 1fr) repeat(3, 36px); gap: 6px; min-height: 58px; }
    body .mobile-app-topbar > .mobile-app-icon-btn, body .mobile-app-brand { width: 36px; min-width: 0; height: 38px; min-height: 38px; }
    body .mobile-app-brand-text { display: none; }
    body .site-menu-toggle { display: inline-flex; }
    body .app-shell-sidebar { display: none; }
    html.site-menu-open { overflow: hidden; }
    html.site-menu-open body { overflow: hidden; }
    html.site-menu-open body .app-shell-sidebar {
        display: block !important;
        position: fixed;
        inset: 10px auto 10px 10px;
        z-index: 1210;
        width: min(304px, calc(100vw - 28px));
        height: calc(100dvh - 20px);
        min-height: 0;
        max-height: calc(100dvh - 20px);
    }
    html.site-menu-open body .app-shell-sidebar > .navbar-blue { width: 100%; height: 100%; border-radius: 16px; }
    html.site-menu-open body .site-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 1205; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(0, 0, 0, .64); }
    body .site-menu-close { display: inline-flex; position: absolute; right: 10px; top: 10px; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--club-border); border-radius: 8px; background: var(--club-surface-raised); color: var(--club-ink); z-index: 3; }
    body .navbar-blue .navbar-brand { padding-right: 35px; }
    body .navbar-blue .app-sidebar-group-toggle { min-height: 36px; }
    body .navbar-blue .app-sidebar-link { min-height: 40px; font-size: 14px; }
    body .navbar-blue .app-sidebar-footer .form-select, body .navbar-blue .app-sidebar-footer .app-sidebar-action-btn { min-height: 40px; }
}
@media (max-width: 991px) {
    body .mobile-app-topbar { position: sticky; top: 0; z-index: 1100; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--club-border); background: var(--club-bg); }
    body .mobile-app-topbar .mobile-app-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--club-border); border-radius: 9px; background: var(--club-surface-raised); color: var(--club-ink); font-size: 14px; }
    body .mobile-app-brand { display: inline-flex; align-items: center; justify-content: center; color: var(--club-accent); text-decoration: none; }
    body .mobile-app-time { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 4px 9px; border: 1px solid var(--club-border); border-radius: 9px; background: var(--club-bg); color: var(--club-ink); text-decoration: none; line-height: 1.25; }
    body .mobile-app-time > span { color: var(--club-muted); font-size: 11px; }
    body .mobile-app-time > strong { font-size: 18px; }
}
@media (max-width: 991px) {
    /* Raise the shell's stacking context so the bottom bar, utility widgets
       and adblock notices cannot intercept the modal menu's buttons. */
    html.site-menu-open body .app-shell { z-index: 10000; }
    body.water-map-workspace .leaflet-top.leaflet-left { left: 10px; top: 10px; }
}
/* These grids live in the central column, which can be narrow even on a wide
   screen with two sidebars. Size tracks to the container, not the viewport. */
body .store-control-panel { min-width: 0; grid-template-columns: minmax(0, 1fr); }
body .store-filter-main { min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
body .store-filter-field-wide { grid-column: 1 / -1; }
body .store-filter-side { min-width: 0; max-width: 100%; flex-wrap: wrap; }
body .collection-add-fields { min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
body .collection-add-field { min-width: 0; }
body .collection-add-field-compact { grid-column: auto; }
body .collection-add-field-wide { grid-column: 1 / -1; }
body .table-responsive.collection-table-wrap { max-width: 100%; overflow-x: auto; }
body .smart-plan-timeline { min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
body .smart-plan-timeline-item { min-width: 0; }
body .trophy-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
body .trophy-toolbar > *, body .trophy-summary { min-width: 0; max-width: 100%; }
@media (max-width: 767px) {
    body #floatingWidgetGroup {
        right: 12px;
        bottom: calc(var(--mobile-bottom-nav-height, 68px) + env(safe-area-inset-bottom) + 12px);
    }
}

/* Darker reading surfaces; seasonal art and movement stay behind the text. */
body { --bg: var(--club-bg); --bg-deep: #050a0d; --primary-soft: var(--club-accent-soft); }
body[class*="event-theme-"] .event-theme-animation-layer { z-index: 0; }
body[class*="event-theme-"] .app-shell { position: relative; }
body .app-main-stage { background-color: rgba(8,14,18,.96); background-blend-mode: multiply; }
body .navbar-blue,
body .right-rail-card { background: linear-gradient(155deg,var(--club-surface-raised),var(--club-bg)) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
body :is(.sidebar-status-card,.sidebar-status-card-metric,.app-sidebar-section,.chat-message) { background-color: var(--club-surface); }
body :is(.page-hero,.daily-task-hero,.water-research-hero) { background-color: var(--club-bg); background-blend-mode: multiply; }
body :is(.dropdown-menu,.modal-content,.offcanvas) { background-color: var(--club-surface); color: var(--club-ink); border-color: var(--club-border); }
body .dropdown-item { color: var(--club-ink); }
body .dropdown-item:is(:hover,:focus) { background-color: var(--club-surface-raised); color: var(--club-ink); }
body :is(.help-text,.form-text,.stat-label) { color: var(--club-muted); }
body .form-control::placeholder { color: #aebfc9; }
body .recommend-workspace .recommend-main-fish-card,
body .recommend-workspace .recommend-guide-hero { background: radial-gradient(ellipse at 95% 5%,var(--club-accent-soft),transparent 60%),linear-gradient(120deg,#0b1318,#142027); }
body .recommend-report :is(.recommend-build-picture,.recommend-plan-bait-picture) { opacity: .2; }