/* =========================================================
   FYPIQ — Main Stylesheet
   Modern · Responsive · Light/Dark Mode
   ========================================================= */

/* ─── CSS Variables — Light Mode (default) ───────────────── */
:root,
[data-theme="light"] {
    /* Core palette */
    --navy:         #0b0c10;
    --navy-mid:     #12141b;
    --navy-light:   #1b1f2a;
    --gold:         #8A2BE2;
    --gold-light:   #b772ff;
    --gold-dark:    #6b1fbd;
    --coral:        #00E5FF;
    --purple:       #8A2BE2;
    --teal:         #00E5FF;

    /* Surface & text */
    --bg:           #f6f8fb;
    --bg-card:      #ffffff;
    --bg-alt:       #eef2f7;
    --cream:        #f6f8fb;
    --cream-dark:   #e9edf4;
    --text-dark:    #121520;
    --text-mid:     #3e475b;
    --text-light:   #7a8296;
    --gray:         #6c757d;
    --gray-light:   #e9ecef;
    --white:        #ffffff;
    --border:       rgba(0,0,0,0.08);
    --border-mid:   rgba(0,0,0,0.14);

    /* Accent aliases for theming */
    --accent-gold:   #8A2BE2;
    --accent-purple: #8A2BE2;
    --accent-coral:  #00E5FF;
    --accent-teal:   #00E5FF;
    --surface-glass: rgba(255, 255, 255, 0.05);

    /* Fonts */
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Radii */
    --radius-sm:    6px;
    --radius-md:    12px;
    --radius-lg:    20px;
    --radius-xl:    32px;

    /* Shadows */
    --shadow-sm:    0 1px 4px rgba(0,0,0,0.08);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.14);
    --shadow-card:  0 2px 12px rgba(26,26,46,0.08), 0 1px 3px rgba(26,26,46,0.05);

    --transition:   all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Fixed floating buttons (theme, bookmarks, back-to-top) — shared alignment */
    --fab-size:     48px;
    --fab-gap:      16px;
    --fab-inset:    16px; /* distance from right & bottom edge of viewport */
    --fab-stack-2:  calc(var(--fab-inset) + var(--fab-size) + var(--fab-gap));
    --fab-stack-3:  calc(var(--fab-stack-2) + var(--fab-size) + var(--fab-gap));
    --fab-stack-4:  calc(var(--fab-stack-3) + var(--fab-size) + var(--fab-gap));

    --xp-bar-bg:       rgba(109,140,232,0.15);
    --xp-bar-fill:     var(--gold);
    --xp-bar-text:     var(--gold-dark);
    --badge-glow:      rgba(109,140,232,0.3);
    --streak-fire:     #ef4444;
    --toast-bg:        var(--bg-card);
    --toast-shadow:    0 8px 32px rgba(0,0,0,0.15);
    --reveal-blur:     8px;

    /* Gamification overlays — fully opaque panels (never rely on glassy --bg-card) */
    --gm-layer-surface:     #ffffff;
    --gm-layer-surface-alt: #f4f2fa;
    --gm-layer-scrim:       rgba(10, 12, 22, 0.78);
    --gm-layer-border:      rgba(0, 0, 0, 0.12);
    --gm-layer-shadow:      0 24px 60px rgba(0, 0, 0, 0.28);

    /* Footer — light mode: white bg, dark text */
    --footer-bg:             #ffffff;
    --footer-body-bg:        #ffffff;
    --footer-text:           var(--navy);
    --footer-desc:           rgba(26,26,46,0.65);
    --footer-heading-color:  rgba(26,26,46,0.45);
    --footer-link-color:     rgba(26,26,46,0.72);
    --footer-link-hover:     var(--gold-dark);
    --footer-social-bg:      rgba(26,26,46,0.08);
    --footer-social-color:   var(--navy);
    --footer-coming-soon:    rgba(26,26,46,0.5);
    --footer-disclaimer-bg:  #f2f0ec;
    --footer-disclaimer-text:rgba(26,26,46,0.65);
    --footer-disclaimer-str: rgba(26,26,46,0.9);
    --footer-bottom-bg:      #e8e4dd;
    --footer-copy-color:     rgba(26,26,46,0.65);
    --footer-legal-color:    rgba(26,26,46,0.55);
    --footer-border:         rgba(26,26,46,0.1);
    --footer-wave-fill:      #ffffff;

    /* Hero gradient colors — light mode: soft, airy */
    --hero-grad-1: #f0eeff;
    --hero-grad-2: #fff5e6;
    --hero-grad-3: #e6f7f5;

    /* Hero text & overlay adapt to theme */
    --hero-text:    var(--navy);
    --hero-subtext: rgba(26,26,46,0.72);
    --hero-overlay: rgba(255,255,255,0.0);
    --hero-scroll:  rgba(26,26,46,0.35);

    /* Skeleton shimmer */
    --shimmer-1: #f0ede8;
    --shimmer-2: #e8e4de;
}

/* ─── CSS Variables — Dark Mode ──────────────────────────── */
html:is([data-theme="dark"], [data-bs-theme="dark"]) {
    --bg:           #050505;
    --bg-card:      rgba(255, 255, 255, 0.05);
    --bg-alt:       #0a0a0d;
    --cream:        #050505;
    --cream-dark:   #0d0d12;
    --text-dark:    #e8e6e3;
    --text-mid:     #b0adb8;
    --text-light:   #7a788a;
    --gray:         #8e8ea0;
    --gray-light:   #2a2a3e;
    --white:        #e8e6e3;
    --border:       rgba(255,255,255,0.08);
    --border-mid:   rgba(255,255,255,0.14);

    --accent-gold:   #8A2BE2;
    --accent-purple: #8A2BE2;
    --accent-coral:  #00E5FF;
    --accent-teal:   #00E5FF;
    --gold:          #8A2BE2;
    --gold-light:    #c88cff;
    --gold-dark:     #6f2ac0;
    --coral:         #00E5FF;
    --purple:        #8A2BE2;
    --teal:          #00E5FF;
    --surface-glass: rgba(255, 255, 255, 0.05);

    --shadow-sm:    0 1px 4px rgba(0,0,0,0.4);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
    --shadow-card:  0 2px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);

    --xp-bar-bg:     rgba(134,166,255,0.12);
    --xp-bar-text:   var(--gold-light);
    --badge-glow:    rgba(134,166,255,0.25);
    --streak-fire:   #f87171;
    --toast-shadow:  0 8px 32px rgba(0,0,0,0.5);

    /* Footer — dark mode: navy bg, light text */
    --footer-bg:             var(--navy);
    --footer-body-bg:        var(--navy);
    --footer-text:           rgba(255,255,255,0.85);
    --footer-desc:           rgba(255,255,255,0.55);
    --footer-heading-color:  rgba(255,255,255,0.5);
    --footer-link-color:     rgba(255,255,255,0.7);
    --footer-link-hover:     var(--gold-light);
    --footer-social-bg:      rgba(255,255,255,0.08);
    --footer-social-color:   rgba(255,255,255,0.75);
    --footer-coming-soon:    rgba(255,255,255,0.45);
    --footer-disclaimer-bg:  #0d0d1f;
    --footer-disclaimer-text:rgba(255,255,255,0.62);
    --footer-disclaimer-str: rgba(255,255,255,0.9);
    --footer-bottom-bg:      #080813;
    --footer-copy-color:     rgba(255,255,255,0.75);
    --footer-legal-color:    rgba(255,255,255,0.7);
    --footer-border:         rgba(255,255,255,0.08);
    --footer-wave-fill:      #1a1a2e;

    --hero-grad-1: #050505;
    --hero-grad-2: #11081f;
    --hero-grad-3: #051924;

    --hero-text:    #ffffff;
    --hero-subtext: rgba(255,255,255,0.75);
    --hero-overlay: rgba(0,0,0,0.45);
    --hero-scroll:  rgba(255,255,255,0.4);

    --shimmer-1: #1e1e30;
    --shimmer-2: #252538;

    /* Gamification panels: clearly lighter than --bg (#050505) — solid, not “glassy” */
    --gm-layer-surface:     #4a4a5e;
    --gm-layer-surface-alt: #3f3f52;
    /* Compact popups (badge unlock, toasts) */
    --gm-pop-surface:       #525266;
    --gm-pop-surface-deep:  #454558;
    --gm-layer-scrim:       rgba(0, 0, 0, 0.92);
    --gm-layer-border:      rgba(255, 255, 255, 0.18);
    --gm-layer-shadow:      0 28px 70px rgba(0, 0, 0, 0.75);
}

/* Bootstrap 5 utilities use data-bs-theme; we sync it in header — this covers any mismatch */
html:is([data-theme="dark"], [data-bs-theme="dark"]) .text-muted,
html:is([data-theme="dark"], [data-bs-theme="dark"]) .small.text-muted {
    color: var(--text-mid) !important;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .section-subtext {
    color: var(--text-mid);
}

/* ─── System dark mode fallback (when no data-theme set) ─── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:           #050505;
        --bg-card:      rgba(255, 255, 255, 0.05);
        --bg-alt:       #0a0a0d;
        --cream:        #050505;
        --cream-dark:   #0d0d12;
        --text-dark:    #e8e6e3;
        --text-mid:     #b0adb8;
        --text-light:   #7a788a;
        --gray:         #8e8ea0;
        --gray-light:   #2a2a3e;
        --white:        #e8e6e3;
        --border:       rgba(255,255,255,0.08);
        --border-mid:   rgba(255,255,255,0.14);
        --accent-gold:   #8A2BE2;
        --accent-purple: #8A2BE2;
        --accent-coral:  #00E5FF;
        --accent-teal:   #00E5FF;
        --gold:          #8A2BE2;
        --gold-light:    #c88cff;
        --gold-dark:     #6f2ac0;
        --coral:         #00E5FF;
        --purple:        #8A2BE2;
        --teal:          #00E5FF;
        --surface-glass: rgba(255, 255, 255, 0.05);
        --shadow-sm:    0 1px 4px rgba(0,0,0,0.4);
        --shadow-md:    0 4px 16px rgba(0,0,0,0.45);
        --shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
        --shadow-card:  0 2px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
        --footer-bg:             #1a1a2e;
        --footer-body-bg:        #1a1a2e;
        --footer-text:           rgba(255,255,255,0.85);
        --footer-desc:           rgba(255,255,255,0.55);
        --footer-heading-color:  rgba(255,255,255,0.5);
        --footer-link-color:     rgba(255,255,255,0.7);
        --footer-link-hover:     #9fb7ff;
        --footer-social-bg:      rgba(255,255,255,0.08);
        --footer-social-color:   rgba(255,255,255,0.75);
        --footer-coming-soon:    rgba(255,255,255,0.45);
        --footer-disclaimer-bg:  #0d0d1f;
        --footer-disclaimer-text:rgba(255,255,255,0.62);
        --footer-disclaimer-str: rgba(255,255,255,0.9);
        --footer-bottom-bg:      #080813;
        --footer-copy-color:     rgba(255,255,255,0.75);
        --footer-legal-color:    rgba(255,255,255,0.7);
        --footer-border:         rgba(255,255,255,0.08);
        --footer-wave-fill:      #1a1a2e;
        --hero-grad-1: #050505;
        --hero-grad-2: #11081f;
        --hero-grad-3: #051924;
        --hero-text:    #ffffff;
        --hero-subtext: rgba(255,255,255,0.75);
        --hero-overlay: rgba(0,0,0,0.45);
        --hero-scroll:  rgba(255,255,255,0.4);
        --shimmer-1: #1e1e30;
        --shimmer-2: #252538;

        --gm-layer-surface:     #4a4a5e;
        --gm-layer-surface-alt: #3f3f52;
        --gm-pop-surface:       #525266;
        --gm-pop-surface-deep:  #454558;
        --gm-layer-scrim:       rgba(0, 0, 0, 0.92);
        --gm-layer-border:      rgba(255, 255, 255, 0.18);
        --gm-layer-shadow:      0 28px 70px rgba(0, 0, 0, 0.75);
    }
}

/* ─── Base Reset & Typography ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text-dark);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.3;
    color: var(--text-dark);
}

a {
    color: var(--gold-dark);
    text-decoration: none;
    transition: var(--transition);
}
a:hover { color: var(--gold); }

img { max-width: 100%; height: auto; }

/* ─── Utility: Gold Button ────────────────────────────────── */
.btn-gold {
    background: linear-gradient(135deg, var(--gold) 0%, #5e1fb0 100%);
    border: none;
    color: var(--white) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    box-shadow: 0 0 0 1px rgba(138, 43, 226, 0.35), 0 8px 24px rgba(138, 43, 226, 0.45);
}
.btn-gold:hover {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.3), 0 10px 30px rgba(138, 43, 226, 0.55);
    transform: translateY(-1px);
}

/* ─── Back to top button ──────────────────────────────────── */
#back-to-top {
    position: fixed;
    bottom: var(--fab-stack-4);
    right: var(--fab-inset);
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    border: 1px solid rgba(109,140,232,0.35);
    background: var(--navy);
    color: var(--gold-light);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9988;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s, box-shadow 0.2s;
}
#back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#back-to-top:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 22px rgba(0,0,0,0.35), 0 0 0 4px rgba(109,140,232,0.12);
    color: var(--gold);
}
[data-theme="dark"] #back-to-top { background: var(--bg-card); }

/* ─── Anchor scroll offset (accounts for sticky navbar ~73px + 12px breathing room) ── */
:target,
h1[id], h2[id], h3[id], h4[id] {
    scroll-margin-top: 85px;
}

/* ─── Navbar ─────────────────────────────────────────────── */
.site-navbar {
    /* Above in-page sticky sidebars/columns (Bootstrap sticky-* utilities use z-index 1020). */
    z-index: 1030;
    background: rgba(5, 5, 5, 0.86);
    backdrop-filter: blur(14px);
    padding: 0.5rem 0;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
    border-bottom: 1px solid rgba(138, 43, 226, 0.28);
}

.navbar-logo {
    max-height: 55px;
    width: auto;
    filter: brightness(1.05);
    transition: var(--transition);
}
.navbar-logo:hover { filter: brightness(1.15); }

.site-navbar .nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.8rem !important;
    transition: var(--transition);
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
    color: var(--coral) !important;
    background: rgba(0,229,255,0.1);
}

/* Search page: inline search field matches active nav (desktop + wide tablet) */
.site-navbar .nav-search-item--current .nav-search-wrap {
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 2px rgba(226, 201, 126, 0.45);
    min-width: 0;
    max-width: 100%;
}

/* Collapsed navbar (mobile / tablet): full-width items, comfortable tap targets, aligned CTAs */
@media (max-width: 991.98px) {
    /* Always show text labels in mobile/collapsed menu */
    .site-navbar .nav-label {
        display: inline;
    }
    /* Restore icon margin in mobile menu */
    .site-navbar .navbar-nav .nav-link .bi {
        margin-right: 0.35rem !important;
    }
    .site-navbar .navbar-collapse {
        margin-top: 0.65rem;
        padding-top: 0.5rem;
        padding-bottom: 0.35rem;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
    .site-navbar .navbar-nav {
        width: 100%;
        gap: 0.3rem;
        padding: 0.2rem 0 0.25rem;
    }
    .site-navbar .navbar-nav > .nav-item {
        width: 100%;
    }
    .site-navbar .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 48px;
        padding: 0.7rem 0.9rem !important;
        font-size: 0.95rem;
        border-radius: var(--radius-md);
        color: rgba(255, 255, 255, 0.92) !important;
    }
    .site-navbar .navbar-nav .nav-link .bi {
        font-size: 1.05rem;
        width: 1.35rem;
        text-align: center;
        flex-shrink: 0;
        opacity: 0.95;
    }
    .site-navbar .navbar-nav .nav-item > a.btn.btn-gold {
        width: 100%;
        min-height: 48px;
        padding: 0.7rem 1rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        font-size: 0.92rem;
        font-weight: 600;
        border-radius: var(--radius-md);
    }
    .site-navbar .navbar-nav .nav-item > a.btn.btn-gold.btn-sm {
        --bs-btn-padding-y: 0.7rem;
        --bs-btn-padding-x: 1rem;
        font-size: 0.92rem;
    }
    #gmLevelNav {
        margin-top: 0.1rem;
    }
    #gmLevelNav .gm-level-wrap {
        display: block;
        width: 100%;
    }
    .site-navbar #gmLevelNav .gm-level-badge {
        width: 100%;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.5rem 0.9rem;
        font-size: 0.88rem;
        border-radius: var(--radius-md);
        box-sizing: border-box;
    }
    #gmTrophyNav {
        margin-top: 0.15rem;
    }
    #gmTrophyNav .nav-link {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.07) !important;
        color: rgba(255, 255, 255, 0.94) !important;
    }
    #gmTrophyNav .nav-link:hover,
    #gmTrophyNav .nav-link:focus {
        background: rgba(255, 255, 255, 0.12) !important;
        color: var(--gold-light) !important;
    }
    #gmTrophyNav #gmNavTrophy {
        font-size: 1.15rem;
    }
    .site-navbar .navbar-toggler {
        padding: 0.5rem 0.65rem;
        border-radius: var(--radius-sm);
    }
    .site-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(109, 140, 232, 0.4);
    }
    .site-navbar .navbar-toggler-icon {
        width: 1.4rem;
        height: 1.4rem;
    }

    /* Current page in menu — strong affordance on touch (full-width row) */
    .site-navbar .navbar-nav .nav-link.active {
        color: var(--gold-light) !important;
        background: rgba(109, 140, 232, 0.16) !important;
        box-shadow: inset 3px 0 0 var(--gold);
        font-weight: 600;
    }
    .site-navbar .navbar-nav .nav-link.active .bi {
        color: var(--gold-light);
        opacity: 1;
    }
}

/* ─── Navbar: lg-only squeeze (992px–1199px) ─────────────────────────────────
   Bootstrap expands at 992px but the navbar is too wide until ~1200px.
   Shrink logo, tighten links, hide search bar, compact badges.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Logo: smaller so it doesn't eat space */
    .navbar-logo {
        max-height: 40px;
    }

    /* Nav links: tighter padding + smaller font */
    .site-navbar .nav-link {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.5rem !important;
        letter-spacing: 0;
    }

    /* Hide text labels — icons only — to save horizontal space */
    .site-navbar .nav-label {
        display: none;
    }
    .site-navbar .navbar-nav .nav-link .bi {
        margin-right: 0 !important;
        font-size: 1rem;
    }

    /* Hide the inline search bar — too wide at this range; mobile search link hidden by d-lg-none anyway */
    .nav-search-form {
        display: none !important;
    }

    /* On /search, show a compact search field so “active” is visible (otherwise both search UIs hidden here) */
    .site-navbar .nav-search-item--current .nav-search-form {
        display: flex !important;
        align-items: center;
        max-width: min(200px, 28vw);
        flex: 0 1 auto;
    }
    .site-navbar .nav-search-item--current .nav-search-wrap {
        box-shadow: 0 0 0 2px rgba(226, 201, 126, 0.45);
        width: 100%;
        min-width: 0;
    }
    .site-navbar .nav-search-item--current .nav-search-input {
        font-size: 0.78rem !important;
        min-height: 34px;
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }

    /* Icon-only nav: make active item obvious without labels */
    .site-navbar .navbar-nav .nav-link.active {
        background: rgba(109, 140, 232, 0.18) !important;
        box-shadow: inset 0 0 0 1px rgba(226, 201, 126, 0.45);
    }

    /* Reduce gap between items */
    .navbar-nav.gap-lg-1 {
        gap: 0.1rem !important;
    }

    /* Discover button: compact */
    .site-navbar .btn-gold.btn-sm {
        font-size: 0.78rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    /* Level badge: hide text label, show icon only */
    .site-navbar .gm-level-name {
        display: none;
    }
    .site-navbar .gm-level-badge {
        padding: 0.3rem 0.5rem;
        font-size: 0.72rem;
    }

    /* Trophy button: tighter */
    #gmTrophyNav .nav-link {
        padding: 0.35rem 0.4rem !important;
    }

    /* Ensure container doesn't overflow */
    .site-navbar .container {
        flex-wrap: nowrap;
    }
}

/* ─── Navbar: xl range (1200px–1399px): restore search, tighten slightly ───── */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .nav-search-input {
        width: 120px;
    }
    .nav-search-input:focus {
        width: 170px;
    }
    .site-navbar .nav-link {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem !important;
    }
}

/* ─── Hero Section ───────────────────────────────────────── */
.hero-section {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--hero-grad-1);
    --spotlight-x: 50%;
    --spotlight-y: 40%;
}

@keyframes heroGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Larger and subtler grid texture */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 90px 90px;
    opacity: 0.25;
    z-index: 0;
}

/* Spotlight follows pointer */
.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle 460px at var(--spotlight-x) var(--spotlight-y),
            rgba(0, 229, 255, 0.18) 0%,
            rgba(138, 43, 226, 0.14) 34%,
            rgba(0, 0, 0, 0) 72%
        ),
        radial-gradient(
            circle 700px at 76% 10%,
            rgba(138, 43, 226, 0.13) 0%,
            rgba(0, 0, 0, 0) 65%
        ),
        var(--hero-overlay);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 1rem;
}

.hero-logo {
    display: block;
    margin: 0 auto;
    width: 300px;
    max-width: 80vw;
    filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.28)) drop-shadow(0 10px 28px rgba(138, 43, 226, 0.35));
    animation: heroFadeIn 1s ease both;
}

/* Default: hide inverted logo */
.hero-logo-dark { display: none; }

/* Dark mode: swap */
[data-theme="dark"] .hero-logo-light { display: none; }
[data-theme="dark"] .hero-logo-dark  { display: block; margin: 0 auto; }

.hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: var(--hero-text);
    margin-top: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-shadow: none;
    animation: heroFadeIn 1s ease 0.2s both;
}

.hero-tagline-focus {
    color: var(--coral);
}

.hero-tagline-gradient {
    background: linear-gradient(90deg, #00E5FF 0%, #8A2BE2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-subtext {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: var(--hero-subtext);
    max-width: 640px;
    margin: 1rem auto 0;
    line-height: 1.7;
    animation: heroFadeIn 1s ease 0.4s both;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.95) 0%, rgba(0, 229, 255, 0.92) 100%);
    color: var(--white);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    margin-top: 1.75rem;
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.3), 0 10px 34px rgba(138, 43, 226, 0.42);
    animation: heroPulse 2.5s ease-in-out infinite, heroFadeIn 1s ease 0.6s both;
}

.hero-scroll-cue {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--hero-scroll);
    animation: bounce 2s ease-in-out infinite;
    font-size: 1.4rem;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.26), 0 8px 24px rgba(138, 43, 226, 0.42); }
    50%       { box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.5), 0 14px 40px rgba(138, 43, 226, 0.62); }
}
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}

/* ─── Trending Strip ─────────────────────────────────────── */
.trending-section {
    background: var(--bg-card);
    border-top: 3px solid var(--gold);
    border-bottom: 1px solid var(--gray-light);
    padding: 1.5rem 0;
    transition: background-color 0.3s ease;
    overflow-x: hidden;
}
@supports (overflow: clip) {
    .trending-section { overflow-x: clip; }
}

.trending-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dark);
    white-space: nowrap;
    padding-right: 1.5rem;
    border-right: 2px solid var(--gray-light);
}

.trending-label .fire-icon {
    color: var(--coral);
    font-size: 1rem;
    text-shadow: 0 0 12px rgba(0,229,255,0.5);
}

.trending-marquee {
    flex: 1;
    min-width: 0;
}

/* ─── Trending ticker (motion via assets/js/trending-ticker.js, not CSS animation) ─── */
.trending-ticker {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    padding-left: 1.5rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
}
.trending-ticker-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    will-change: transform;
}
.trending-ticker-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
    .trending-ticker {
        mask-image: none;
        -webkit-mask-image: none;
    }
}

.trending-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    background: var(--bg-alt);
    border: 1.5px solid var(--border-mid);
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.trending-pill:hover {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.5);
    color: #d9fbff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 229, 255, 0.18);
}

/* Colorful pill variants (cycle via nth-child) */
.trending-pill:nth-child(3n+1):hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.trending-pill:nth-child(3n+2):hover { background: var(--purple); border-color: var(--purple); color: #fff; }
.trending-pill:nth-child(3n+3):hover { background: var(--teal); border-color: var(--teal); color: #fff; }

.trending-pill .rank {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--white);
    flex-shrink: 0;
}

/* Long labels: ellipsis inside pill bounds */
.trending-pill-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trending-pill-meta {
    opacity: 0.6;
    font-size: 0.7rem;
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Search grid & similar: stacked title + meta, full-width cell */
.trending-pill--stack {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    gap: 0.2rem;
    padding: 0.5rem 0.65rem;
}
.trending-pill--stack .trending-pill-text {
    text-align: center;
    width: 100%;
}
.trending-pill--stack .trending-pill-meta {
    display: block;
    text-align: center;
}

/* Let grid cells shrink so pill ellipsis can engage (Bootstrap row flex) */
.row > .col:has(.trending-pill--stack) {
    min-width: 0;
}

/* Horizontal ticker: cap width so long queries don’t break the strip */
.trending-pill--ticker {
    max-width: min(240px, 42vw);
    min-width: 0;
}
.trending-pill--ticker .trending-pill-text {
    flex: 1 1 auto;
}

.trending-pill--featured {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18);
}
.trending-pill-star {
    color: var(--gold-dark);
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* ─── Trending hub — single strip + metric pills + legend ─── */
.trending-strip-section {
    background: var(--bg-alt);
}
.trending-strip-heading {
    font-family: var(--font-heading);
    color: var(--text-dark);
}
.trending-strip-intro {
    max-width: 36rem;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
.trending-strip-viewport {
    overflow: hidden;
    width: 100%;
    padding: 1rem 0 1.25rem;
    background: var(--cream-dark);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    cursor: grab;
    touch-action: none;
    user-select: none;
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.trending-strip-viewport.is-dragging {
    cursor: grabbing;
}
.trending-strip-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    will-change: transform;
    align-items: stretch;
    gap: 1rem;
    touch-action: none;
}
.trending-strip-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1rem;
    flex-shrink: 0;
    touch-action: none;
}
.trending-strip-tile {
    flex-shrink: 0;
    --strip-tile-w: 252px;
    --strip-media-h: 196px;
    width: var(--strip-tile-w);
    position: relative;
    z-index: 0;
    touch-action: none;
}
.trending-strip-tile--featured .trending-strip-tile__link {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: var(--shadow-card), 0 0 0 1px rgba(212, 175, 55, 0.22);
}
@media (max-width: 767.98px) {
    .trending-strip-tile {
        --strip-tile-w: min(86vw, 320px);
        --strip-media-h: clamp(178px, 46vw, 228px);
    }
    .trending-strip-track,
    .trending-strip-group {
        gap: 0.85rem;
    }
}
.trending-strip-tile__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    border-radius: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(109, 140, 232, 0.25);
    touch-action: none;
    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease,
        box-shadow 0.38s ease;
    will-change: transform;
}
.trending-strip-tile:has(.trending-strip-tile__link:focus-visible) {
    z-index: 6;
}
.trending-strip-tile__link:focus-visible {
    border-color: var(--gold);
    outline: none;
    transform: translateY(-10px) scale(1.05);
    box-shadow:
        0 0 0 3px var(--bg-card),
        0 0 0 5px var(--gold),
        0 22px 48px rgba(109, 140, 232, 0.42);
}
@media (hover: hover) and (pointer: fine) {
    .trending-strip-tile:has(.trending-strip-tile__link:hover) {
        z-index: 5;
    }
    .trending-strip-tile__link:hover {
        border-color: var(--gold);
        transform: translateY(-10px) scale(1.05);
        box-shadow:
            0 0 0 2px rgba(109, 140, 232, 0.35),
            0 20px 44px rgba(109, 140, 232, 0.38),
            0 8px 24px rgba(26, 26, 46, 0.12);
    }
}
.trending-strip-tile:has(.trending-strip-tile__link:active) {
    z-index: 4;
}
.trending-strip-tile__link:active {
    transform: translateY(-6px) scale(1.03);
    transition-duration: 0.12s;
}
.trending-strip-tile__media {
    width: 100%;
    height: var(--strip-media-h, 196px);
    background: var(--cream-dark);
    overflow: hidden;
}
.trending-strip-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    touch-action: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
    .trending-strip-tile__link:hover .trending-strip-tile__img {
        transform: scale(1.09);
    }
}
.trending-strip-tile__link:focus-visible .trending-strip-tile__img {
    transform: scale(1.09);
}
.trending-strip-tile__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    font-size: 2rem;
    background: linear-gradient(160deg, var(--bg-alt), var(--cream-dark));
}
.trending-strip-tile__title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    padding: 0.55rem 0.65rem 0.35rem;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.trending-strip-tile__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
    padding: 0.35rem 0.5rem 0.65rem;
    min-height: 2.4rem;
}
.trending-strip-metric {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.38rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.trending-strip-metric--focus {
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--gold);
}
.trending-strip-metric--views { background: #ea580c; }
.trending-strip-metric--shares { background: #0d9488; }
.trending-strip-metric--reactions { background: #9333ea; }
.trending-strip-metric--votes { background: #ca8a04; }
.trending-strip-metric--polls { background: #0284c7; }

.trending-strip-legend-wrap {
    padding: 0.75rem 0 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}
.trending-strip-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.1rem;
    align-items: center;
    justify-content: center;
}
.trending-strip-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-dark);
}
.trending-strip-legend__item--focus {
    font-weight: 700;
}
.trending-strip-legend__swatch {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.trending-strip-legend__swatch.trending-strip-metric--views { background: #ea580c; }
.trending-strip-legend__swatch.trending-strip-metric--shares { background: #0d9488; }
.trending-strip-legend__swatch.trending-strip-metric--reactions { background: #9333ea; }
.trending-strip-legend__swatch.trending-strip-metric--votes { background: #ca8a04; }
.trending-strip-legend__swatch.trending-strip-metric--polls { background: #0284c7; }

/* Trending hub — comparative guides (below legend) */
.trending-compare-guides {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}
.trending-compare-guides__title {
    font-family: var(--font-heading);
    color: var(--text-dark);
    text-align: center;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}
.trending-compare-guides__lead {
    text-align: center;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    line-height: 1.5;
}
.trending-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.5rem) clamp(0.75rem, 2vw, 1.25rem);
    max-width: 640px;
    margin: 0 auto;
}
@media (min-width: 576px) {
    .trending-compare-grid {
        gap: 1.35rem 1.5rem;
    }
}
.trending-compare-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--text-dark);
    min-width: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}
.trending-compare-card:hover {
    color: var(--gold-dark);
    transform: translateY(-2px);
}
.trending-compare-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: 0.5rem;
}
.trending-compare-card__thumb {
    width: clamp(5.25rem, 26vw, 7.75rem);
    height: clamp(5.25rem, 26vw, 7.75rem);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 0.55rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--bg-card);
    background: var(--cream);
}
.trending-compare-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trending-compare-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    background: linear-gradient(145deg, var(--cream-dark), var(--cream));
}
.trending-compare-card__label {
    display: -webkit-box;
    font-size: clamp(0.78rem, 2.4vw, 0.88rem);
    font-weight: 600;
    line-height: 1.35;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    hyphens: auto;
    word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
    .trending-strip-viewport {
        mask-image: none;
        -webkit-mask-image: none;
    }
    .trending-strip-tile__link,
    .trending-strip-tile__img {
        transition-duration: 0.01ms;
    }
    .trending-strip-tile__link:hover,
    .trending-strip-tile__link:focus-visible {
        transform: translateY(-4px);
    }
    .trending-strip-tile__link:hover .trending-strip-tile__img,
    .trending-strip-tile__link:focus-visible .trending-strip-tile__img {
        transform: none;
    }
}

/* ─── Section Layout ─────────────────────────────────────── */
.section-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.section-subtext {
    color: var(--gray);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

/* ─── Page title strip (unified with /discoveries) ───────── */
.page-title-area {
    padding: 1.5rem 0 0;
    background: linear-gradient(180deg, var(--cream-dark) 0%, transparent 100%);
    text-align: left;
}
.page-title-area .container {
    position: relative;
    z-index: 1;
}
/* IAB leaderboard width — use inside full .container so outer edge matches nav */
.site-ad-slot-728 {
    max-width: 728px;
    margin-left: auto;
    margin-right: auto;
}
.page-title-crumb {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.page-title-crumb a {
    color: var(--gold-dark);
    text-decoration: none;
}
.page-title-crumb a:hover {
    text-decoration: underline;
}
.page-title-area .reading-time {
    color: var(--text-mid);
}

/* Watch hub + theatre: flat page bg — avoids gradient seam reading as a line under the hero */
.videos-page .page-title-area.videos-hero,
.full-videos-page .page-title-area.videos-hero {
    background: var(--bg);
}

/* ─── Search Cards ───────────────────────────────────────── */
.search-card {
    background: var(--surface-glass);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    padding: 1.4rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* Editorial “featured” topics — stronger frame + gold top accent (always visible) */
.search-card.search-card--featured {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(212, 175, 55, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.search-card.search-card--featured::before {
    opacity: 1;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-dark));
}
.search-card.search-card--featured:hover {
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(212, 175, 55, 0.35);
}

/* Featured video clips — gold frame + pill; ordering follows fetched_at with other approved clips */
.search-card.video-card.video-card--featured {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(212, 175, 55, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.search-card.video-card.video-card--featured::before {
    opacity: 1;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-dark));
}
.search-card.video-card.video-card--featured:hover {
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(212, 175, 55, 0.35);
}

.search-card.has-thumb {
    padding: 0;
}

.card-thumb-wrap {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    line-height: 0;
}

.card-thumb {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: transform .35s ease;
}
@media (min-width: 576px) {
    .card-thumb {
        height: 248px;
    }
}

.search-card:hover .card-thumb {
    transform: scale(1.04);
}

.card-body-inner {
    padding: 1.1rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.search-card:not(.has-thumb) .card-body-inner {
    padding: 0;
}

.search-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
    opacity: 0;
    transition: var(--transition);
}

/* Colorful top border accent per card (cycles through 4 colors) */
.search-card:nth-child(4n+1)::before { background: linear-gradient(90deg, var(--coral), #e11d48); }
.search-card:nth-child(4n+2)::before { background: linear-gradient(90deg, var(--purple), #6d28d9); }
.search-card:nth-child(4n+3)::before { background: linear-gradient(90deg, var(--teal), #4f5eb4); }
.search-card:nth-child(4n+4)::before { background: linear-gradient(90deg, var(--gold), var(--gold-dark)); }

.search-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(138, 43, 226, 0.35);
    border-color: rgba(138, 43, 226, 0.45);
}
.search-card:hover::before { opacity: 1; }

/* Hover glow matching accent color */
.search-card:nth-child(4n+1):hover { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(244,63,94,0.25); }
.search-card:nth-child(4n+2):hover { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(139,92,246,0.25); }
.search-card:nth-child(4n+3):hover { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(13,148,136,0.25); }
.search-card:nth-child(4n+4):hover { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(109,140,232,0.25); }

.card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.card-stat-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    justify-content: flex-end;
    max-width: 100%;
}

.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: var(--bg-alt);
    color: var(--gray);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 0.14rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}
[data-theme="dark"] .stat-chip {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 400px) {
    .card-stat-group {
        margin-left: 0;
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

.visit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-alt);
    color: var(--gray);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 0.18rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.dot-active   { background: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,0.2); }
.dot-pending  { background: #ffc107; box-shadow: 0 0 0 3px rgba(255,193,7,0.2); }
.dot-featured { background: #17a2b8; box-shadow: 0 0 0 3px rgba(23,162,184,0.2); }

.card-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    flex: 1;
}
a.card-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
a.card-title-link:hover {
    color: var(--gold-dark);
}
[data-theme="dark"] a.card-title-link:hover {
    color: var(--gold-light);
}
a.card-title-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Discovery cards: meta blurb for published (active/featured) topics */
.card-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-mid);
    margin: 0 0 0.65rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-theme="dark"] .card-desc {
    color: rgba(255, 255, 255, 0.72);
}

.card-date {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.btn-explore {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--gold-dark);
    font-weight: 600;
    font-size: 0.85rem;
    border: 1.5px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.8rem;
    transition: var(--transition);
    margin-top: auto;
    align-self: flex-start;
}
.btn-explore:hover {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}

/* Status badge */
.status-badge {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 50px;
    padding: 0.2rem 0.55rem;
}
.status-badge.status-badge--featured {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--navy) !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ─── Pagination ─────────────────────────────────────────── */
.p2m-pagination .page-link {
    color: var(--text-dark);
    background: var(--bg-card);
    border-color: var(--border-mid);
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: var(--transition);
}
.p2m-pagination .page-link:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--gold-light);
}
.p2m-pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    border-color: var(--gold-dark);
    color: #fff;
    box-shadow: 0 2px 8px rgba(109,140,232,0.4);
}
.p2m-pagination .page-item.disabled .page-link {
    color: var(--text-light);
    background: var(--bg-alt);
    border-color: var(--border);
}

/* ─── Videos Hub + Cards ─────────────────────────────────── */
.videos-page .videos-crumb {
    font-size: 0.88rem;
}
.videos-page .videos-crumb a {
    color: var(--gold-dark);
}
.videos-page .videos-heading {
    letter-spacing: -0.02em;
}
.videos-page .videos-subtext {
    max-width: 760px;
    color: var(--text-mid);
}
.videos-page .videos-filter-panel {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(18, 22, 40, 0.84), rgba(22, 27, 52, 0.65));
    backdrop-filter: blur(8px);
}
.videos-page .videos-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}
.videos-page .videos-tag-filter-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.videos-page .videos-filter-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
}
.videos-page .videos-filter-select {
    min-width: 180px;
}
.videos-page .videos-filter-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.65rem;
}
.videos-filter-active-text {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.82);
}
.videos-filter-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(231, 238, 255, 0.95);
    text-decoration: none;
    padding: 0.28rem 0.65rem;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: var(--transition);
}
.videos-filter-chip:nth-child(6n+1) { border-color: rgba(244, 114, 182, 0.45); background: rgba(131, 24, 67, 0.42); }
.videos-filter-chip:nth-child(6n+2) { border-color: rgba(251, 146, 60, 0.45); background: rgba(122, 41, 7, 0.42); }
.videos-filter-chip:nth-child(6n+3) { border-color: rgba(250, 204, 21, 0.45); background: rgba(98, 76, 8, 0.42); }
.videos-filter-chip:nth-child(6n+4) { border-color: rgba(74, 222, 128, 0.45); background: rgba(18, 92, 41, 0.42); }
.videos-filter-chip:nth-child(6n+5) { border-color: rgba(56, 189, 248, 0.45); background: rgba(8, 70, 98, 0.42); }
.videos-filter-chip:nth-child(6n+6) { border-color: rgba(167, 139, 250, 0.45); background: rgba(65, 33, 118, 0.42); }
.videos-filter-chip:hover {
    transform: translateY(-1px);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}
.videos-filter-chip.is-active {
    border-color: rgba(255, 255, 255, 0.95);
    background: linear-gradient(135deg, rgba(109, 140, 232, 1), rgba(139, 92, 246, 0.96));
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.36), 0 10px 24px rgba(58, 63, 132, 0.45);
}

.video-card {
    padding: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.video-card-media {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #040409;
}
a.video-thumb-wrap.video-card-media {
    display: block;
    text-decoration: none;
    color: inherit;
}
.video-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.video-card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(4, 6, 16, 0.16), rgba(4, 6, 16, 0.5));
    transition: background 0.25s ease;
}
.video-card-play-btn {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(235, 236, 255, 0.92));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0d0f1e;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s ease;
}
.video-card-play-btn .bi {
    font-size: 1.65rem;
    margin-left: 2px;
}
.video-card-top {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    right: 0.55rem;
    display: flex;
    justify-content: flex-start;
    z-index: 3;
    pointer-events: none;
}
.video-featured-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy, #0d0f1e);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-radius: 50px;
    padding: 0.14rem 0.48rem 0.14rem 0.38rem;
    line-height: 1.2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.video-featured-pill .bi {
    font-size: 0.58rem;
    opacity: 0.95;
}
.video-featured-pill--corner {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    z-index: 3;
    pointer-events: none;
}
.video-featured-pill--inline {
    font-size: 0.58rem;
    padding: 0.1rem 0.42rem 0.1rem 0.36rem;
}
a.video-thumb-wrap.video-card-media--featured {
    box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.55);
}
.video-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(7, 9, 19, 0.58);
    backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.67rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    text-transform: uppercase;
}
.video-source-chip .bi {
    font-size: 0.72rem;
}
.video-source-chip--youtube {
    border-color: rgba(255, 87, 87, 0.55);
    background: rgba(96, 12, 17, 0.62);
}
.video-source-chip--reddit {
    border-color: rgba(255, 135, 88, 0.55);
    background: rgba(84, 34, 10, 0.62);
}
.video-source-chip--pexels {
    border-color: rgba(87, 255, 207, 0.5);
    background: rgba(8, 55, 48, 0.62);
}
.video-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
    padding: 0.95rem 0.95rem 1rem;
}
.video-card-title {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.96rem;
    line-height: 1.38;
    font-weight: 600;
}
.video-card-link {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-card-link:hover {
    color: var(--gold-light);
}
.video-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.video-source-link {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    width: fit-content;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
    color: rgba(220, 231, 255, 0.92);
    opacity: 0.95;
}
.video-source-link:hover {
    color: #fff;
}
.video-card-actions-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.video-share-btn {
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: rgba(230,238,255,0.9);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}
.video-share-btn:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.42);
}
.video-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-weight: 600;
}
.video-stat-chip .bi {
    font-size: 0.66rem;
}
.video-card-tags {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.video-tag-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(109, 140, 232, 0.12);
    color: rgba(226, 234, 255, 0.94);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.19rem 0.58rem;
    transition: var(--transition);
}
.video-tag-pill:hover {
    border-color: rgba(138, 43, 226, 0.48);
    color: #fff;
    transform: translateY(-1px);
}

.video-card:hover .video-card-thumb {
    transform: scale(1.05);
}
.video-card:hover .video-card-play {
    background: linear-gradient(180deg, rgba(4, 6, 16, 0.07), rgba(4, 6, 16, 0.38));
}
.video-card:hover .video-card-play-btn {
    transform: scale(1.08);
}

.topic-videos-block {
    padding: 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(17, 21, 38, 0.62);
}
.topic-videos-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}
.topic-videos-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
}
.topic-videos-link {
    font-size: 0.8rem;
    color: var(--gold-light);
    text-decoration: none;
}
.topic-videos-link:hover {
    color: #fff;
}
.video-card--compact .video-card-title {
    font-size: 0.9rem;
}
[data-theme="light"] .videos-page .videos-filter-panel,
:root:not([data-theme="dark"]) .videos-page .videos-filter-panel {
    border-color: rgba(26, 35, 79, 0.12);
    background: linear-gradient(135deg, rgba(241, 245, 255, 0.94), rgba(236, 240, 255, 0.96));
}
[data-theme="light"] .videos-page .videos-filter-label,
:root:not([data-theme="dark"]) .videos-page .videos-filter-label {
    color: rgba(48, 60, 104, 0.82);
}
[data-theme="light"] .videos-filter-active-text,
:root:not([data-theme="dark"]) .videos-filter-active-text {
    color: rgba(43, 59, 110, 0.9);
}
[data-theme="light"] .videos-filter-chip,
:root:not([data-theme="dark"]) .videos-filter-chip {
    color: #2d3a66;
    border-color: rgba(59, 78, 140, 0.24);
    background: rgba(255, 255, 255, 0.88);
}
[data-theme="light"] .videos-filter-chip:nth-child(6n+1),
:root:not([data-theme="dark"]) .videos-filter-chip:nth-child(6n+1) { background: rgba(255, 236, 244, 0.95); }
[data-theme="light"] .videos-filter-chip:nth-child(6n+2),
:root:not([data-theme="dark"]) .videos-filter-chip:nth-child(6n+2) { background: rgba(255, 242, 230, 0.95); }
[data-theme="light"] .videos-filter-chip:nth-child(6n+3),
:root:not([data-theme="dark"]) .videos-filter-chip:nth-child(6n+3) { background: rgba(255, 249, 224, 0.95); }
[data-theme="light"] .videos-filter-chip:nth-child(6n+4),
:root:not([data-theme="dark"]) .videos-filter-chip:nth-child(6n+4) { background: rgba(233, 251, 239, 0.95); }
[data-theme="light"] .videos-filter-chip:nth-child(6n+5),
:root:not([data-theme="dark"]) .videos-filter-chip:nth-child(6n+5) { background: rgba(232, 247, 255, 0.95); }
[data-theme="light"] .videos-filter-chip:nth-child(6n+6),
:root:not([data-theme="dark"]) .videos-filter-chip:nth-child(6n+6) { background: rgba(241, 236, 255, 0.95); }
[data-theme="light"] .videos-filter-chip:hover,
:root:not([data-theme="dark"]) .videos-filter-chip:hover {
    color: #1e2b56;
    border-color: rgba(53, 72, 132, 0.45);
}
[data-theme="light"] .videos-filter-chip.is-active,
:root:not([data-theme="dark"]) .videos-filter-chip.is-active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(86, 106, 171, 0.28), 0 8px 18px rgba(84, 104, 171, 0.28);
}
[data-theme="light"] .video-source-chip,
:root:not([data-theme="dark"]) .video-source-chip {
    color: #172039;
    border-color: rgba(28, 44, 89, 0.2);
    background: rgba(242, 245, 255, 0.95);
}
[data-theme="light"] .video-source-chip--youtube,
:root:not([data-theme="dark"]) .video-source-chip--youtube {
    background: rgba(255, 235, 235, 0.94);
    border-color: rgba(215, 68, 68, 0.32);
}
[data-theme="light"] .video-source-chip--reddit,
:root:not([data-theme="dark"]) .video-source-chip--reddit {
    background: rgba(255, 242, 232, 0.95);
    border-color: rgba(208, 107, 40, 0.35);
}
[data-theme="light"] .video-source-chip--pexels,
:root:not([data-theme="dark"]) .video-source-chip--pexels {
    background: rgba(231, 252, 247, 0.92);
    border-color: rgba(33, 141, 122, 0.35);
}
[data-theme="light"] .video-stat-chip,
:root:not([data-theme="dark"]) .video-stat-chip {
    color: #2f3f66;
    background: rgba(239, 243, 255, 0.92);
    border-color: rgba(42, 63, 122, 0.16);
}
[data-theme="light"] .video-source-link,
:root:not([data-theme="dark"]) .video-source-link {
    color: #2b3a68;
}
[data-theme="light"] .video-source-link:hover,
:root:not([data-theme="dark"]) .video-source-link:hover {
    color: #182750;
}
[data-theme="light"] .video-share-btn,
:root:not([data-theme="dark"]) .video-share-btn {
    background: rgba(233, 240, 255, 0.95);
    border-color: rgba(60,80,144,0.26);
    color: #2b3a68;
}
[data-theme="light"] .video-share-btn:hover,
:root:not([data-theme="dark"]) .video-share-btn:hover {
    color: #172850;
    border-color: rgba(60,80,144,0.46);
}
[data-theme="light"] .video-tag-pill,
:root:not([data-theme="dark"]) .video-tag-pill {
    color: #2b3661;
    border-color: rgba(66, 86, 149, 0.24);
    background: rgba(233, 238, 255, 0.72);
}
[data-theme="light"] .topic-videos-block,
:root:not([data-theme="dark"]) .topic-videos-block {
    border-color: rgba(37, 52, 101, 0.12);
    background: rgba(246, 248, 255, 0.94);
}
[data-theme="light"] .topic-videos-link,
:root:not([data-theme="dark"]) .topic-videos-link {
    color: #3d4d83;
}
[data-theme="light"] .topic-videos-link:hover,
:root:not([data-theme="dark"]) .topic-videos-link:hover {
    color: #1f2f61;
}

@media (max-width: 767px) {
    .videos-page .videos-filter-panel {
        padding: 0.75rem;
    }
    .videos-page .videos-filter-select {
        min-width: 100%;
    }
    .videos-page .videos-filter-actions {
        width: 100%;
    }
    .videos-page .videos-filter-actions .btn {
        flex: 1;
    }
    .video-card-body {
        padding: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-card,
    .video-card-thumb,
    .video-card-play-btn,
    .video-tag-pill {
        transition: none !important;
    }
    .video-card:hover .video-card-thumb,
    .video-card:hover .video-card-play-btn,
    .video-tag-pill:hover {
        transform: none;
    }
}

/* ─── Page (single search) layout ────────────────────────── */
.page-hero {
    background: var(--navy);
    padding: 3rem 0 2.75rem;
    border-bottom: 3px solid var(--gold);
    position: relative;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(109,140,232,0.08) 0%, transparent 65%);
    pointer-events: none;
}
[data-theme="dark"] .page-hero {
    background: #0f0f1e;
}

.page-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: #fff;
    margin-bottom: 1rem;
}

.breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0.75rem;
}
.breadcrumb-item a { color: var(--gold-light); }
.breadcrumb-item.active { color: rgba(255,255,255,0.7); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.4); }

/* ─── Skeleton Loader ────────────────────────────────────── */
.skeleton-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
}

.skeleton-img {
    width: 100%;
    height: 180px;
    background: linear-gradient(90deg, var(--shimmer-1) 25%, var(--shimmer-2) 50%, var(--shimmer-1) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
}

.skeleton-body { padding: 1.2rem; }

.skeleton-line {
    height: 12px;
    background: linear-gradient(90deg, var(--shimmer-1) 25%, var(--shimmer-2) 50%, var(--shimmer-1) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}
.skeleton-line.wide  { width: 90%; }
.skeleton-line.mid   { width: 65%; }
.skeleton-line.short { width: 40%; }
.skeleton-line.tall  { height: 16px; width: 75%; }

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.coming-soon-message {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    text-align: center;
    color: #fff;
    border: 1px solid rgba(109,140,232,0.2);
}
[data-theme="dark"] .coming-soon-message {
    background: linear-gradient(135deg, #12122a 0%, #1e1e3a 100%);
}

.coming-soon-message .cs-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    color: var(--gold-light);
}

.coming-soon-message h3 {
    font-family: var(--font-heading);
    color: #fff;
    margin-bottom: 0.75rem;
}

.coming-soon-message p {
    color: rgba(255,255,255,0.78);
    max-width: 480px;
    margin: 0 auto;
    font-size: 0.95rem;
}

/* ─── Sidebar widget headings (TOC, poll, related, category nav) ─ */
.sidebar-widget-heading {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--gold);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.35;
}
.sidebar-widget-heading .bi {
    color: var(--gold-dark);
    font-size: 1.05rem;
    flex-shrink: 0;
    opacity: 0.95;
}
[data-theme="dark"] .sidebar-widget-heading {
    color: rgba(255, 255, 255, 0.92);
}
[data-theme="dark"] .sidebar-widget-heading .bi {
    color: var(--gold-light);
}

/* ─── Related articles (sidebar) ─────────────────────────── */
.related-section {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    transition: background-color 0.3s ease;
}

.related-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-dark);
    transition: background 0.15s ease, color 0.15s ease, border-radius 0.15s ease;
}
.related-item:last-child { border-bottom: none; }
.related-item:hover {
    color: var(--gold-dark);
    background: rgba(109, 140, 232, 0.07);
    border-radius: var(--radius-sm, 8px);
    margin-left: -0.35rem;
    margin-right: -0.35rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.related-item .ri-thumb-wrap {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-alt);
    border: 1px solid rgba(0, 0, 0, 0.06);
    line-height: 0;
}
.related-item .ri-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    display: block;
}
.related-item .ri-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 1.15rem;
    border: none;
    background: linear-gradient(135deg, var(--bg-alt) 0%, rgba(109, 140, 232, 0.12) 100%);
}

.related-item .ri-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.related-item .ri-text-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.related-item .ri-title {
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.35;
}

.related-item .ri-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-radius: 50px;
    padding: 0.12rem 0.45rem 0.12rem 0.35rem;
    line-height: 1.2;
}
.related-item .ri-featured-badge .bi {
    font-size: 0.55rem;
    opacity: 0.95;
}

.related-item.related-item--featured {
    border-left: 3px solid var(--gold);
    padding-left: 0.5rem;
    margin-left: -0.15rem;
}
.related-item .ri-visits {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-light);
    background: var(--bg-alt);
    border-radius: 50px;
    padding: 0.15rem 0.5rem;
}
[data-theme="dark"] .related-item .ri-thumb-wrap {
    border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Author roster (profile “More authors” + category sidebar) ─ */
.p2m-author-peers {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ece9e2;
}
.p2m-author-peers__heading {
    font-size: 1.05rem;
    margin: 0 0 14px;
    color: var(--navy, #1a1a2e);
}
.p2m-author-peers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 1.1rem 1rem;
    justify-items: center;
}
.p2m-author-peer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 120px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}
.p2m-author-peer:hover {
    transform: translateY(-2px);
}
.p2m-author-peer:hover .p2m-author-peer__name {
    color: var(--gold-dark);
}
.p2m-author-peer__img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}
.p2m-author-peer__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.25;
    text-align: center;
}
[data-theme="dark"] .p2m-author-peers__heading {
    color: rgba(255, 255, 255, 0.92);
}
[data-theme="dark"] .p2m-author-peer__name {
    color: rgba(255, 255, 255, 0.88);
}

/* Category sidebar: compact author chips below All categories */
.p2m-sidebar-authors {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}
.p2m-sidebar-authors .p2m-author-peers__grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.75rem 0.5rem;
}
.p2m-sidebar-authors .p2m-author-peer {
    max-width: 88px;
}
.p2m-sidebar-authors .p2m-author-peer__img {
    width: 56px;
    height: 56px;
    border-width: 2px;
}
.p2m-sidebar-authors .p2m-author-peer__name {
    font-size: 0.78rem;
}

/* ─── About / Static pages ───────────────────────────────── */
.about-section {
    padding: 4rem 0;
}

.about-card {
    padding: 0;
    max-width: none;
}

/* Contact page */
.contact-page-inner {
    max-width: 720px;
}
.contact-page-card {
    padding: 2rem 1.5rem;
    background: var(--cream, #faf8f5);
    border-radius: 12px;
    border: 1px solid var(--footer-border);
    box-shadow: 0 4px 24px rgba(26, 26, 46, 0.06);
}
:root[data-theme="dark"] .contact-page-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--footer-border);
    box-shadow: none;
}
.contact-page-intro p,
.contact-page-intro li {
    line-height: 1.75;
}
.contact-page-list {
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
}
.contact-page-list li {
    margin-bottom: 0.35rem;
}
.contact-page-form-title {
    color: var(--navy);
    font-weight: 600;
}
:root[data-theme="dark"] .contact-page-form-title {
    color: rgba(255, 255, 255, 0.92);
}
.contact-page-form .form-label {
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.35rem;
}
:root[data-theme="dark"] .contact-page-form .form-label {
    color: rgba(255, 255, 255, 0.88);
}

/* Footer — contact teaser */
.footer-contact-block {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--footer-border);
}
.footer-contact-text {
    color: var(--footer-desc);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 0;
}

/* ─── Footer ─────────────────────────────────────────────── */
.footer-wave-path {
    fill: var(--footer-wave-fill);
    transition: fill 0.3s ease;
}
.footer-wave svg {
    display: block;
    width: 100%;
    height: 50px;
    background: var(--bg);
}

.site-footer {
    margin-top: auto;
    background: var(--footer-bg);
    transition: background-color 0.3s ease;
}

.footer-body {
    background: var(--footer-body-bg);
    padding: 3.5rem 0 2rem;
}

.footer-logo {
    filter: brightness(1.05);
    opacity: 0.95;
}

/* Show correct logo variant based on theme */
.footer-logo-dark { display: none; }
:root[data-theme="dark"] .footer-logo-light { display: none; }
:root[data-theme="dark"] .footer-logo-dark  { display: inline; }

.footer-tagline .tagline-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    text-transform: uppercase;
}

.footer-desc {
    color: var(--footer-desc);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-top: 0.75rem;
}

.footer-heading {
    color: var(--footer-heading-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-family: var(--font-body);
}

.footer-links {
    list-style: none;
    padding: 0;
}
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
    color: var(--footer-link-color);
    font-size: 0.875rem;
    transition: var(--transition);
}
.footer-links a:hover {
    color: var(--footer-link-hover);
    padding-left: 4px;
}

.social-icons { flex-wrap: wrap; }

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--footer-social-bg);
    border: 1px solid var(--footer-border);
    border-radius: var(--radius-sm);
    color: var(--footer-social-color);
    font-size: 1rem;
    transition: var(--transition);
}
.social-icon:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(109,140,232,0.4);
}

.footer-coming-soon {
    color: var(--footer-coming-soon);
    font-size: 0.8rem;
    font-style: italic;
    margin: 0;
}

.footer-bottom {
    background: var(--footer-bottom-bg);
    padding: 1rem 0;
    border-top: 1px solid var(--footer-border);
}

.footer-copy { color: var(--footer-copy-color); font-size: 0.82rem; }
.footer-copy strong { color: var(--gold-dark); }

.footer-legal a {
    color: var(--footer-legal-color);
    font-size: 0.78rem;
    transition: var(--transition);
}
.footer-legal a:hover { color: var(--gold-dark); }

/* ─── Empty / no results ─────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray);
}
.empty-state .empty-icon {
    font-size: 3.5rem;
    opacity: 0.3;
    margin-bottom: 1rem;
    display: block;
}
.empty-state h4 { color: var(--navy); margin-bottom: 0.5rem; }
.empty-state p  { font-size: 0.9rem; }

/* ─── Content article styles (for active pages) ───────────── */
.featured-image-wrap {
    float: right;
    margin: 4px 0 20px 24px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    max-width: 420px;
    width: 48%;
}

.featured-image-wrap--zoom {
    cursor: zoom-in;
}

.featured-image {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 600px) {
    .featured-image-wrap {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }
}

/* Article + sidebar: Bootstrap’s flex .row can still wrap the sidebar below the
   main column when in-flow content (accordions, trays, ads) inflates min-content.
   At lg+, use CSS Grid with minmax(0, …) so the main column cannot push the
   sidebar to the next row. */
@media (min-width: 992px) {
    .article-with-sidebar.row {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        column-gap: 0;
        align-items: start;
    }
    /* Category pages: 9 + 3 columns */
    .article-with-sidebar.row:has(> .col-lg-9) {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }
    .article-with-sidebar.row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-width: 0;
    }
}

.article-with-sidebar > [class*="col-"] {
    min-width: 0;
}
/* Full-width responsive AdSense units can report a large min-width and break the grid */
.article-with-sidebar > .col-lg-8 {
    overflow-x: clip;
}
.article-ad-slot ins.adsbygoogle,
.sidebar-ad-slot ins.adsbygoogle {
    max-width: 100% !important;
}

.content-article {
    line-height: 1.85;
    max-width: 720px;
    font-size: 1rem;
    color: var(--text-dark);
    overflow-wrap: break-word;
    display: flow-root; /* contain floated featured image */
}
.content-article img,
.content-article video,
.content-article iframe {
    max-width: 100%;
    height: auto;
}
/* AI / article tables — markup limited to table, tr, td only (FYPIQ palette) */
.content-article .content-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.75rem 0;
    max-width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid rgba(26, 26, 46, 0.14);
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
}
.content-article .content-table-scroll table {
    margin-top: 0;
    margin-bottom: 0;
}
.content-article table {
    --p2m-table-border: rgba(26, 26, 46, 0.12);
    --p2m-table-header-bg: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    --p2m-table-header-fg: rgba(255, 255, 255, 0.95);
    --p2m-table-stripe: rgba(109, 140, 232, 0.09);
    width: 100%;
    max-width: 100%;
    margin: 1.75rem 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--bg-card);
    color: var(--text-mid);
    border-radius: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.65;
    box-shadow: none;
    border: none;
}
.content-article table td {
    vertical-align: top;
    padding: 0.75rem 1rem;
    border: 1px solid var(--p2m-table-border);
    background: var(--bg-card);
}
/* First row = column headers (only tr/td in pipeline) */
.content-article table tr:first-child td {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    color: var(--p2m-table-header-fg);
    text-align: left;
    vertical-align: middle;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--p2m-table-header-bg);
    box-shadow: inset 0 -2px 0 rgba(109, 140, 232, 0.45);
}
.content-article table tr:nth-child(even) td {
    background: linear-gradient(180deg, var(--p2m-table-stripe) 0%, rgba(255, 252, 247, 0.65) 100%);
}
.content-article table p {
    margin-bottom: 0.65rem;
}
.content-article table p:last-child {
    margin-bottom: 0;
}
.content-article table ul,
.content-article table ol {
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}
.content-article table li {
    margin-bottom: 0.35rem;
}
@media (max-width: 575.98px) {
    .content-article table {
        font-size: 0.92rem;
    }
    .content-article table td,
    .content-article table tr:first-child td {
        padding: 0.65rem 0.75rem;
    }
}
[data-theme="dark"] .content-article .content-table-scroll {
    border-color: var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .content-article table {
    --p2m-table-border: rgba(255, 255, 255, 0.1);
    --p2m-table-header-bg: linear-gradient(135deg, #1e1e36 0%, var(--navy-mid) 100%);
    --p2m-table-stripe: rgba(109, 140, 232, 0.08);
    color: rgba(255, 255, 255, 0.82);
}
[data-theme="dark"] .content-article table td {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--p2m-table-border);
}
[data-theme="dark"] .content-article table tr:nth-child(even) td {
    background: linear-gradient(180deg, var(--p2m-table-stripe) 0%, rgba(255, 255, 255, 0.04) 100%);
}
[data-theme="dark"] .content-article table tr:first-child td {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    background: var(--p2m-table-header-bg);
    box-shadow: inset 0 -2px 0 rgba(109, 140, 232, 0.35);
}
.content-article pre {
    max-width: 100%;
    overflow-x: auto;
}
.content-article h2,
.content-article h3,
.content-article h4 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}
.content-article p { margin-bottom: 1rem; }
.content-article ul, .content-article ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.content-article li { margin-bottom: 0.4rem; }
.content-article a { color: var(--gold-dark); text-decoration: underline; }
.content-article a:hover { color: var(--gold); }

/* ─── Responsive tweaks ──────────────────────────────────── */
/* ─── Navbar inline search ────────────────────────────────── */
.nav-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    transition: background 0.2s, border-color 0.2s;
}
.nav-search-wrap:focus-within {
    background: rgba(255,255,255,0.18);
    border-color: var(--gold);
}
.nav-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    width: 160px;
    transition: width 0.25s ease;
}
.nav-search-input::placeholder { color: rgba(255,255,255,0.5); }
.nav-search-input:focus { width: 210px; }
.nav-search-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.75);
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.15s;
}
.nav-search-btn:hover { color: var(--gold); }

@media (max-width: 991.98px) {
    .nav-search-form { display: none !important; }
}

/* ─── Responsive fixes ────────────────────────────────────── */
@media (max-width: 767.98px) {
    .hero-section {
        min-height: auto;
        padding: 5.5rem 0 4rem;
    }
    .hero-section::after {
        background:
            radial-gradient(
                circle 320px at var(--spotlight-x) var(--spotlight-y),
                rgba(0, 229, 255, 0.12) 0%,
                rgba(138, 43, 226, 0.1) 36%,
                rgba(0, 0, 0, 0) 74%
            ),
            radial-gradient(
                circle 460px at 78% 10%,
                rgba(138, 43, 226, 0.1) 0%,
                rgba(0, 0, 0, 0) 68%
            ),
            var(--hero-overlay);
    }
    .hero-content { padding: 2.5rem 1rem 2rem; }
    .hero-logo    { width: 220px; }
    .hero-tagline { font-size: clamp(1.85rem, 7vw, 2.35rem); line-height: 1.15; }
    .hero-subtext {
        font-size: 0.96rem;
        line-height: 1.55;
        max-width: 34ch;
        margin-top: 0.85rem;
    }
    .hero-badge {
        margin-top: 1.2rem;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }
    .hero-scroll-cue { display: none; }
    .hero-actions {
        width: min(460px, 100%);
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.65rem !important;
        margin-top: 1.25rem !important;
    }
    .hero-actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }
    .btn-hero-primary {
        min-width: 0;
        min-height: 52px;
        box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.34), 0 10px 24px rgba(138, 43, 226, 0.42);
    }
    .btn-hero-primary:hover {
        box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.45), 0 12px 28px rgba(138, 43, 226, 0.5);
    }

    .page-hero { padding: 2rem 0; }
    .page-title-area { padding-top: 1.25rem; }
    .trending-section .container > .d-flex { flex-wrap: wrap; gap: 0.75rem; }
    .trending-label { border-right: none; padding-right: 0; }
    .trending-marquee { padding-left: 0; }
    .trending-ticker { padding-left: 0; }
    /* Share buttons: slightly smaller on mobile */
    .share-btn { width: 38px; height: 38px; font-size: 1rem; }
    /* FAQ: tighter padding */
    .faq-btn  { padding: 0.85rem 1rem; font-size: 0.94rem; }
    .faq-answer { padding: 0.85rem 1rem 1rem; font-size: 0.93rem; }
    /* Engage tray wraps on mobile */
    .engage-row { gap: 0.75rem; padding: 0.85rem 1rem; }
    .engage-divider { display: none; }
    .helpful-btn { padding: 0.45rem 0.85rem; font-size: 0.9rem; }
    .reaction-btn { padding: 0.4rem 0.65rem; }
    /* Sidebar stacks below content naturally via Bootstrap col-lg-4 */
}

@media (max-width: 575.98px) {
    .hero-section {
        min-height: auto;
        padding: 4.75rem 0 3.2rem;
    }
    .hero-content { padding: 2rem 0.85rem 1.5rem; }
    .hero-logo    { width: 168px; }
    .hero-tagline { font-size: clamp(1.55rem, 8vw, 2rem); }
    .hero-subtext { font-size: 0.9rem; }
    .hero-badge {
        padding: 0.4rem 0.9rem;
        font-size: 0.68rem;
    }
    .hero-actions .btn {
        min-height: 46px;
        font-size: 0.92rem;
    }
    .btn-hero-primary { min-height: 50px; }
    /* Page hero: tighten up */
    .page-hero h1 { font-size: 1.5rem; }
    .page-title-area h1,
    .page-title-area .section-heading { font-size: 1.5rem; }
    /* Share bar wraps cleanly */
    .share-bar { gap: 0.4rem; }
    /* Footer: single column on xs */
    .footer-body .row > [class*="col-6"] { flex: 0 0 100%; max-width: 100%; }
}

/* ─── Hero button hierarchy ────────────────────────────────── */
.hero-actions {
    width: min(920px, 100%);
}

.hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 50px;
    white-space: nowrap;
}

.btn-hero-primary {
    min-height: 52px;
    min-width: 260px;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.4), 0 14px 34px rgba(138, 43, 226, 0.56);
}
.btn-hero-primary:hover {
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.6), 0 16px 38px rgba(138, 43, 226, 0.68);
}

.btn-hero-ghost,
.btn-hero-outline {
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: var(--hero-text) !important;
    background: rgba(255, 255, 255, 0.02);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    opacity: 0.95;
    backdrop-filter: blur(10px);
}
.btn-hero-ghost:hover,
.btn-hero-outline:hover {
    border-color: rgba(0, 229, 255, 0.8);
    background: rgba(0, 229, 255, 0.13);
    color: #e8fcff !important;
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.2);
    opacity: 1;
}

@media (min-width: 992px) {
    .hero-actions {
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center;
        gap: 0.75rem !important;
    }
    .hero-actions .btn {
        width: 210px;
        min-width: 210px;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .btn-hero-primary {
        min-width: 0;
    }
}

/* Categories hub (/categories) */
a.category-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border-color: rgba(212, 175, 55, 0.35) !important;
}

/* Light mode: hero gets a bottom border to separate from page */
[data-theme="light"] .hero-section,
:root:not([data-theme="dark"]) .hero-section {
    border-bottom: 1px solid rgba(139,92,246,0.15);
    box-shadow: 0 4px 24px rgba(139,92,246,0.07);
}

/* ─── Footer disclaimer bar ──────────────────────────────── */
.footer-disclaimer {
    background: var(--footer-disclaimer-bg);
    border-top: 1px solid var(--footer-border);
    padding: 1rem 0;
}
.disclaimer-text {
    font-size: 0.73rem;
    color: var(--footer-disclaimer-text);
    line-height: 1.7;
    margin: 0;
    text-align: center;
}
.disclaimer-text strong {
    color: var(--footer-disclaimer-str);
    font-weight: 600;
}

/* ─── Email subscribe widget (light by default; dark theme below) ─ */
.subscribe-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.35rem 1.45rem;
    text-align: center;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.subscribe-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(109, 140, 232, 0.55) 35%, var(--gold) 50%, rgba(109, 140, 232, 0.55) 65%, transparent);
    opacity: 0.9;
}
.subscribe-icon {
    width: 2.65rem;
    height: 2.65rem;
    margin: 0 auto 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.15rem;
    color: var(--gold-dark);
    background: rgba(109, 140, 232, 0.14);
    border: 1px solid rgba(109, 140, 232, 0.35);
    box-shadow: 0 1px 4px rgba(26, 26, 46, 0.06);
}
.subscribe-heading {
    font-family: var(--font-body);
    color: var(--navy);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}
.subscribe-desc {
    font-family: var(--font-body);
    color: var(--text-mid);
    font-size: 0.875rem;
    margin: 0 0 1.1rem;
    line-height: 1.55;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
}
.subscribe-desc strong {
    color: var(--text-dark);
    font-weight: 600;
}
.subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
}
.subscribe-form-inner {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-mid);
    background: var(--white);
    box-shadow: inset 0 1px 2px rgba(26, 26, 46, 0.04);
}
.subscribe-input {
    flex: 1;
    min-width: 0;
    background: var(--white);
    border: none;
    outline: none;
    color: var(--text-dark);
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    font-family: var(--font-body);
}
.subscribe-input::placeholder { color: var(--text-light); }
.subscribe-input:focus {
    background: #fffef9;
    box-shadow: inset 0 0 0 1px rgba(109, 140, 232, 0.45);
}
.subscribe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 3rem;
    background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
    border: none;
    border-left: 1px solid rgba(160, 131, 47, 0.25);
    color: var(--navy);
    padding: 0.65rem 0.95rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: filter 0.15s ease, transform 0.12s ease;
}
.subscribe-btn:hover {
    filter: brightness(1.04);
}
.subscribe-btn:active { transform: scale(0.98); }
.subscribe-btn i {
    display: block;
    margin-top: 1px;
}
.subscribe-turnstile {
    display: flex;
    justify-content: center;
}
.subscribe-msg {
    font-size: 0.82rem;
    margin-top: 0.65rem;
    color: var(--text-mid);
}
.subscribe-msg.is-error { color: #b91c1c; }
.subscribe-msg.is-success { color: #15803d; }

/* Subscribe + sidebar CTA — dark theme (richer panels) */
[data-theme="dark"] .subscribe-card {
    background: linear-gradient(145deg, #16182a 0%, var(--navy-mid) 48%, #12152a 100%);
    border-color: rgba(109, 140, 232, 0.28);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .subscribe-icon {
    color: var(--gold-light);
    background: rgba(109, 140, 232, 0.12);
    border-color: rgba(109, 140, 232, 0.28);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .subscribe-heading { color: #fff; }
[data-theme="dark"] .subscribe-desc { color: rgba(255, 255, 255, 0.78); }
[data-theme="dark"] .subscribe-desc strong { color: #fff; }
[data-theme="dark"] .subscribe-form-inner {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .subscribe-input {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
[data-theme="dark"] .subscribe-input::placeholder { color: rgba(255, 255, 255, 0.45); }
[data-theme="dark"] .subscribe-input:focus {
    background: rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 0 0 1px rgba(109, 140, 232, 0.35);
}
[data-theme="dark"] .subscribe-msg { color: rgba(255, 255, 255, 0.88); }
[data-theme="dark"] .subscribe-msg.is-error { color: #fecaca; }
[data-theme="dark"] .subscribe-msg.is-success { color: #bbf7d0; }

/* Sidebar “All Discoveries” block */
.sidebar-discover-cta {
    text-align: center;
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-sm);
}
.sidebar-discover-cta-text {
    color: var(--text-mid);
    font-size: 0.9rem;
    margin: 0 0 1rem;
    line-height: 1.45;
}
[data-theme="dark"] .sidebar-discover-cta {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    border: 1px solid rgba(109, 140, 232, 0.22);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .sidebar-discover-cta-text {
    color: rgba(255, 255, 255, 0.78);
}

/* ─── Sponsored bar ──────────────────────────────────────── */
.sponsored-bar {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    background: var(--cream);
}
[data-theme="dark"] .sponsored-bar {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
.sponsored-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 0.5rem;
}
.sponsored-list { display: flex; flex-direction: column; gap: 0.5rem; }
.sponsored-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-dark);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sponsored-item:hover {
    border-color: var(--gold);
    box-shadow: 0 2px 8px rgba(109,140,232,0.15);
    color: var(--text-dark);
}
[data-theme="dark"] .sponsored-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
}
.sponsored-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.sponsored-info { flex: 1; }
.sponsored-info strong { display: block; font-size: 0.85rem; font-weight: 700; }
.sponsored-info small  { display: block; font-size: 0.75rem; color: var(--gray); }
.sponsored-icon { font-size: 0.75rem; color: var(--gray); flex-shrink: 0; }

/* ─── Ad units ────────────────────────────────────────────── */
.ad-unit { margin: 1.5rem 0; min-height: 50px; }

/* ─── Page tag pills (hero) ───────────────────────────────── */
.page-tag-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(109,140,232,0.18);
    border: 1px solid rgba(109,140,232,0.35);
    color: var(--gold-light);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s;
    letter-spacing: 0.03em;
}
.page-tag-pill:hover {
    background: rgba(109,140,232,0.3);
    color: var(--gold-light);
}

/* ─── Category sidebar active item ────────────────────────── */
.related-item.active {
    background: rgba(109,140,232,0.12);
    border-left-color: var(--gold);
}
.related-item.active .ri-title { color: var(--gold-dark); font-weight: 700; }

/* ─── Sidebar AI photo widget (Pixazo) ────────────────────── */
.p2m-photo-widget {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: var(--white);
    margin-bottom: 1.25rem;
}
/* Image area — cover + higher-res source fills box; composition prompt keeps subject centered */
.p2m-photo-img-wrap {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    line-height: 0;
    cursor: zoom-in;
    min-height: 260px;
    height: 260px;
}
.p2m-photo-img-wrap:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.p2m-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bias toward top of frame so portrait subjects keep head/hair in the crop (sidebar is short vs. lightbox contain) */
    object-position: center top;
    transition: opacity 0.3s ease;
}
/* Title gradient overlay */
.p2m-photo-widget-title {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 10px 9px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
    line-height: 1.3;
    pointer-events: none;
}
/* Spinner overlay + loader graphic */
.p2m-photo-loading {
    position: absolute;
    inset: 0;
    background: rgba(245,243,238,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
[data-theme="dark"] .p2m-photo-loading {
    background: rgba(28,28,32,0.92);
}
.p2m-photo-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    text-align: center;
}
.p2m-photo-loader-img {
    display: block;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    opacity: 0.95;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12));
}
[data-theme="dark"] .p2m-photo-loader-img {
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4)) brightness(1.15);
}
.p2m-photo-loader-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #6c757d);
    letter-spacing: 0.02em;
    max-width: 11rem;
    line-height: 1.35;
}
[data-theme="dark"] .p2m-photo-loader-text {
    color: rgba(255,255,255,0.55);
}
.p2m-spinner-icon {
    width: 28px; height: 28px;
    border: 3px solid rgba(109,140,232,0.35);
    border-top-color: var(--gold, #6d8ce8);
    border-radius: 50%;
    animation: p2mPhotoSpin 0.7s linear infinite;
}
[data-theme="dark"] .p2m-spinner-icon {
    border-color: rgba(255,255,255,0.2);
    border-top-color: var(--gold, #6d8ce8);
}
/* Share toast */
.p2m-photo-toast {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(0,0,0,0.82);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 4;
    white-space: nowrap;
}
.p2m-photo-toast.p2m-photo-toast--show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
/* Particle stage */
.p2m-photo-particle-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}
.p2m-photo-particle {
    position: absolute;
    animation: p2mPhotoParticleFloat linear forwards;
    will-change: transform, opacity;
    user-select: none;
    line-height: 1;
}
@keyframes p2mPhotoParticleFloat {
    0%   { transform: translateY(0) scale(0.85);   opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(-130px) scale(1.65); opacity: 0; }
}
/* Shake animation */
.p2m-photo-shake {
    animation: p2mPhotoShake 0.45s ease;
}
@keyframes p2mPhotoShake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px) rotate(-1deg); }
    40%     { transform: translateX(6px)  rotate(1deg); }
    60%     { transform: translateX(-4px); }
    80%     { transform: translateX(4px); }
}
/* Prompt line */
.p2m-photo-prompt {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-body);
    padding: 9px 10px 3px;
    min-height: 30px;
    transition: color 0.3s;
}
.p2m-photo-prompt--love     { color: #c0392b; }
.p2m-photo-prompt--obsessed { color: #8e44ad; }
.p2m-photo-prompt--meh      { color: var(--text-light); }
.p2m-photo-prompt--hate     { color: #e67e22; }
.p2m-photo-prompt--surprise {
    color: var(--gold-dark);
    font-weight: 700;
    letter-spacing: 0.02em;
}
/* Next photo — subtle, aligned with secondary actions (not a loud CTA) */
.p2m-photo-next-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 16px);
    margin: 2px auto 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    background: var(--cream);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-body);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    box-shadow: none;
}
.p2m-photo-next-btn:hover {
    background: #fff;
    border-color: rgba(109, 140, 232, 0.45);
    color: var(--navy);
}
.p2m-photo-next-btn:active {
    background: var(--cream-dark, #ebe8e0);
}
.p2m-photo-next-btn__icon { font-size: 1.08rem; line-height: 1; opacity: 0.88; }
.p2m-photo-next-btn__label { letter-spacing: 0.02em; }
/* Click feedback: obvious scale + gold ring + sweep (no full-button spin) */
.p2m-photo-next-btn--feedback {
    animation: p2mPhotoNextFeedback 0.58s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}
.p2m-photo-next-btn--feedback .p2m-photo-next-btn__icon {
    animation: p2mPhotoNextIconPop 0.58s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}
.p2m-photo-next-btn--feedback::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--gold), var(--gold-dark), transparent);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    animation: p2mPhotoNextBarSweep 0.52s ease-out forwards;
    pointer-events: none;
}
@keyframes p2mPhotoNextFeedback {
    0%   { transform: scale(1); border-color: var(--border-mid); box-shadow: none; }
    18%  { transform: scale(0.97); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(109, 140, 232, 0.28); }
    42%  { transform: scale(1.035); border-color: rgba(109, 140, 232, 0.75); box-shadow: 0 0 0 2px rgba(109, 140, 232, 0.2); }
    100% { transform: scale(1); border-color: var(--border-mid); box-shadow: none; }
}
@keyframes p2mPhotoNextIconPop {
    0%, 100% { transform: scale(1); }
    22%      { transform: scale(1.35); }
    50%      { transform: scale(1.12); }
}
@keyframes p2mPhotoNextBarSweep {
    0%   { transform: scaleX(0); opacity: 0.9; }
    50%  { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}
[data-theme="dark"] .p2m-photo-next-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.82);
}
[data-theme="dark"] .p2m-photo-next-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(109, 140, 232, 0.4);
    color: #fff;
}
/* Reaction strip */
.p2m-photo-reactions {
    display: flex;
    gap: 4px;
    padding: 4px 8px 2px;
}
.p2m-photo-react-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 1px solid var(--border-mid);
    border-radius: 10px;
    padding: 7px 2px 6px;
    background: var(--cream);
    cursor: pointer;
    font-size: 1.32rem;
    line-height: 1;
    transition: background 0.18s, transform 0.13s, border-color 0.18s;
}
.p2m-photo-react-btn span {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.p2m-photo-react-btn:hover:not(:disabled) { background: #fff; border-color: var(--gold); transform: translateY(-2px); }
.p2m-photo-react-btn:active              { transform: scale(0.92); }
.p2m-photo-react-btn:disabled            { opacity: 0.45; cursor: default; }
.p2m-photo-react-btn.p2m-photo-react-btn--active {
    background: var(--gold-light, #f9f0d6);
    border-color: var(--gold);
    transform: scale(1.07);
}
.p2m-photo-react-btn.p2m-photo-react-btn--active span { color: var(--gold-dark); }
/* Secondary action row */
.p2m-photo-actions {
    display: flex;
    gap: 5px;
    padding: 8px 8px 4px;
}
.p2m-photo-action-btn {
    flex: 1;
    text-align: center;
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-body);
    background: var(--cream);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.12s;
    display: inline-block;
}
.p2m-photo-action-btn:hover { background: #fff; border-color: var(--gold); }
.p2m-photo-action-btn:active { transform: scale(0.94); }
.p2m-photo-action-btn--surprise {
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.08) 0%, var(--cream) 100%);
    border-color: rgba(142, 68, 173, 0.35);
}
.p2m-photo-action-btn--surprise:hover {
    border-color: #8e44ad;
    background: #fff;
}
[data-theme="dark"] .p2m-photo-action-btn--surprise {
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.2) 0%, rgba(255,255,255,0.06) 100%);
    border-color: rgba(186, 104, 200, 0.4);
    color: rgba(255,255,255,0.88);
}
.p2m-photo-dice-roll { animation: p2mPhotoDiceRoll 0.55s ease; }
@keyframes p2mPhotoDiceRoll {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-14deg) scale(1.05); }
    50%      { transform: rotate(12deg) scale(0.96); }
    75%      { transform: rotate(-8deg) scale(1.03); }
}
/* Loader ring rotation (sidebar overlay + lightbox; not for Next button) */
@keyframes p2mPhotoSpin {
    to { transform: rotate(360deg); }
}
/* Share modal (sidebar Pixazo) */
.p2m-photo-share-modal {
    position: fixed;
    inset: 0;
    z-index: 10045;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.p2m-photo-share-modal[hidden] {
    display: none !important;
}
.p2m-photo-share-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
}
.p2m-photo-share-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    max-height: min(88vh, 560px);
    overflow-y: auto;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
    padding: 20px 18px 18px;
    border: 1px solid var(--border-mid);
}
[data-theme="dark"] .p2m-photo-share-modal__dialog {
    background: #1e1e22;
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.92);
}
.p2m-photo-share-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--cream);
    color: var(--text-body);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.p2m-photo-share-modal__close:hover { background: var(--grey-200); }
[data-theme="dark"] .p2m-photo-share-modal__close {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
}
.p2m-photo-share-modal__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 36px 6px 0;
    line-height: 1.25;
}
[data-theme="dark"] .p2m-photo-share-modal__title { color: #fff; }
.p2m-photo-share-modal__lead {
    font-size: 0.78rem;
    color: var(--text-light);
    margin: 0 0 14px;
    line-height: 1.45;
}
.p2m-photo-share-modal__body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.p2m-photo-share-modal__thumb-wrap {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-mid);
    background: var(--cream);
}
.p2m-photo-share-modal__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.p2m-photo-share-modal__copyblock {
    flex: 1;
    min-width: 0;
    max-height: 140px;
    overflow: auto;
    border-radius: 8px;
    border: 1px solid var(--border-mid);
    background: var(--cream);
}
.p2m-photo-share-modal__pre {
    margin: 0;
    padding: 8px 10px;
    font-size: 0.68rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-body);
    font-family: ui-sans-serif, system-ui, sans-serif;
}
[data-theme="dark"] .p2m-photo-share-modal__copyblock {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .p2m-photo-share-modal__pre {
    color: rgba(255,255,255,0.82);
}
.p2m-photo-share-modal__chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.p2m-photo-share-chip {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-mid);
    background: var(--cream);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-body);
    transition: border-color 0.15s, background 0.15s;
}
.p2m-photo-share-chip:hover {
    border-color: var(--gold);
    background: #fff;
}
.p2m-photo-share-chip--primary {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}
.p2m-photo-share-chip--primary:hover {
    background: #0f3460;
    border-color: #0f3460;
    color: #fff;
}
[data-theme="dark"] .p2m-photo-share-chip {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
}
[data-theme="dark"] .p2m-photo-share-chip--primary {
    background: var(--gold-dark);
    color: var(--navy);
    border-color: var(--gold-dark);
}
.p2m-photo-share-modal__social-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    margin: 0 0 8px;
}
.p2m-photo-share-modal__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.p2m-photo-share-social {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--border-mid);
    background: var(--white);
    color: var(--navy);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.p2m-photo-share-social:hover {
    border-color: var(--gold);
    background: var(--cream);
    color: var(--gold-dark);
}
[data-theme="dark"] .p2m-photo-share-social {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.88);
}

/* Community vibe stats (AJAX — not in full-page cache payload) */
.p2m-photo-vibe-stats-btn {
    display: block;
    width: calc(100% - 16px);
    margin: 2px 8px 0;
    text-align: center;
    border: 1px dashed var(--border-mid);
    border-radius: 8px;
    padding: 8px 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-body);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.p2m-photo-vibe-stats-btn:hover {
    background: var(--cream);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.p2m-photo-vibe-panel {
    margin: 6px 8px 4px;
    padding: 10px 10px 8px;
    border-radius: 10px;
    background: var(--cream);
    border: 1px solid var(--border-mid);
    font-size: 0.72rem;
    line-height: 1.45;
}
.p2m-photo-vibe-panel-intro {
    margin: 0 0 8px;
    color: var(--text-body);
    font-weight: 600;
}
.p2m-photo-vibe-totals {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
.p2m-photo-vibe-totals li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .p2m-photo-vibe-totals li {
    border-bottom-color: rgba(255,255,255,0.08);
}
.p2m-photo-vibe-e { font-size: 1rem; width: 1.4rem; text-align: center; flex-shrink: 0; }
.p2m-photo-vibe-l { flex: 1; min-width: 0; color: var(--text-body); }
.p2m-photo-vibe-n { font-weight: 700; color: var(--gold-dark); min-width: 1.5rem; text-align: right; }
.p2m-photo-vibe-insights p {
    margin: 0 0 6px;
    color: var(--text-body);
}
.p2m-photo-vibe-insights p:last-child { margin-bottom: 0; }
.p2m-photo-vibe-muted { color: var(--text-light); font-weight: 500; }
.p2m-photo-vibe-lead strong,
.p2m-photo-vibe-photo strong { color: var(--text-body); }
.p2m-photo-vibe-photo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.p2m-photo-vibe-photo-text { flex: 1; min-width: 0; }
.p2m-photo-vibe-slot-thumb {
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-mid);
    flex-shrink: 0;
    background: var(--surface);
}
[data-theme="dark"] .p2m-photo-vibe-slot-thumb {
    border-color: rgba(255, 255, 255, 0.12);
}
/* Credit */
.p2m-photo-credit {
    margin: 0;
    padding: 5px 10px 7px;
    font-size: 0.64rem;
    color: var(--text-light);
    text-align: right;
    border-top: 1px solid var(--border-mid);
}
.p2m-photo-credit a { color: var(--gold-dark); text-decoration: none; }
/* Placeholder when image fails to load */
.p2m-photo-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 180px; gap: 0.5rem;
    background: var(--surface); color: var(--text-light);
}
.p2m-photo-placeholder span { font-size: 2rem; opacity: 0.4; }
.p2m-photo-placeholder p    { font-size: 0.8rem; margin: 0; opacity: 0.6; }
/* Dark mode */
[data-theme="dark"] .p2m-photo-widget       { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .p2m-photo-react-btn    { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .p2m-photo-react-btn span { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .p2m-photo-action-btn   { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }

/* ─── Sidebar photo lightbox ──────────────────────────────── */
.p2m-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10050; /* above .theme-toggle (9999) and FABs */
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.p2m-lightbox.p2m-lightbox--open {
    visibility: visible;
    opacity: 1;
}
.p2m-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: zoom-out;
}
.p2m-lightbox__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(92vw, 1100px);
    max-height: 92vh;
    box-sizing: border-box;
    padding: 0 clamp(8px, 2.5vw, 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: scale(0.94);
    transition: transform 0.25s ease;
}
.p2m-lightbox.p2m-lightbox--open .p2m-lightbox__content { transform: scale(1); }
.p2m-lightbox__close {
    position: absolute;
    top: -44px; right: -4px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 1.4rem;
    width: 36px; height: 36px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}
.p2m-lightbox__close:hover { background: rgba(255,255,255,0.22); }
.p2m-lightbox__img-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    /* Match modal backdrop — no bright pillarboxing beside the photo */
    background: #000;
    line-height: 0;
    max-width: 100%;
    width: fit-content;
    margin: 0 auto;
    align-self: center;
}
.p2m-lightbox__img {
    display: block;
    max-width: min(86vw, 1000px);
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: top;
    border-radius: 10px;
    transition: opacity 0.3s ease;
}
.p2m-lightbox__spinner {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
}
.p2m-lightbox__caption {
    color: rgba(255,255,255,0.92);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.p2m-lightbox__credit {
    color: rgba(255,255,255,0.45);
    font-size: 0.7rem;
    margin: 0;
    text-align: center;
}
.p2m-lightbox__credit a { color: rgba(255,255,255,0.65); }

/* ─── Video lightbox ───────────────────────────────────────── */
.video-lightbox .p2m-lightbox__content {
    max-width: min(99vw, 1560px);
}
.video-lightbox__media-wrap {
    position: relative;
    width: min(98vw, 1480px);
    aspect-ratio: 16 / 9;
    max-height: min(92vh, calc(98vw * 9 / 16));
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 80px rgba(0,0,0,0.58);
}
.video-lightbox.video-lightbox--portrait .video-lightbox__media-wrap {
    width: min(96vw, calc(88vh * 9 / 16));
    max-width: min(720px, 96vw);
    aspect-ratio: 9 / 16;
    height: min(88vh, calc(96vw * 16 / 9));
    max-height: 88vh;
}
.video-lightbox__player {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    border: 0;
    background: #000;
}
.video-lightbox__nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
}
.video-lightbox__nav-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.5);
}
.video-lightbox__nav-btn--prev { left: 8px; }
.video-lightbox__nav-btn--next { right: 8px; }
.video-lightbox__nav-btn:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
@media (max-width: 768px) {
    .video-lightbox__media-wrap {
        width: 96vw;
        max-height: min(82vh, 92vw * 9 / 16);
    }
    .video-lightbox.video-lightbox--portrait .video-lightbox__media-wrap {
        width: min(96vw, calc(88vh * 9 / 16));
        max-width: 96vw;
        height: min(88vh, calc(96vw * 16 / 9));
        max-height: 88vh;
        aspect-ratio: 9 / 16;
    }
    .video-lightbox__nav-btn {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
    }
}
.video-lightbox__actions {
    margin: 0;
}
.video-lightbox__note {
    margin: 0;
    min-height: 1.2em;
    color: rgba(255,255,255,0.72);
    font-size: 0.78rem;
    text-align: center;
}
.video-lightbox__loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.45rem;
    background: rgba(0,0,0,0.42);
}
.video-lightbox__loader[hidden] {
    display: none;
}
.video-lightbox__loader-text {
    color: rgba(255,255,255,0.86);
    font-size: 0.8rem;
    font-weight: 600;
}
.video-lightbox__source-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    padding: 0.36rem 0.82rem;
    font-size: 0.78rem;
    font-weight: 700;
}
.video-lightbox__source-link:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.52);
    background: rgba(255,255,255,0.16);
}

/* ─── Full videos theatre (/full-videos) ─ */
.full-videos-page .article-with-sidebar > [class*="col-"] {
    min-width: 0;
}
.full-videos-page .fv-hero {
    position: relative;
    isolation: isolate;
}
/* Keep the iframe layer strictly below nav buttons; otherwise taps can hit the iframe (raw MP4 → “download”) instead of prev/next. */
.full-videos-page .fv-embed-wrap {
    position: relative;
    z-index: 0;
    max-width: 100%;
}
/* Portrait phones: taller stage than 16:9 so vertical / Shorts-style embeds use space and read larger. */
@media (max-width: 767.98px) and (orientation: portrait) {
    .full-videos-page .fv-embed-wrap.ratio.ratio-16x9 {
        --bs-aspect-ratio: 100%;
    }
}
@media (max-width: 767.98px) and (orientation: landscape) {
    .full-videos-page .fv-embed-wrap.ratio.ratio-16x9 {
        --bs-aspect-ratio: 56.25%;
    }
}
@media (max-width: 575.98px) {
    .full-videos-page .fv-hero-meta .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .full-videos-page .fv-hero-meta .ms-auto {
        margin-left: 0 !important;
        margin-top: 0.35rem;
    }
}
.full-videos-page .fv-nav-btn {
    z-index: 5;
}
.full-videos-page .fv-nav-btn i {
    pointer-events: none;
}
.full-videos-page .fv-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.full-videos-page .fv-native-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle;
    background: #000;
}
.full-videos-page .fv-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0 0.35rem;
    /* proximity: first tap reaches the strip button; mandatory often eats the first tap for scroll-snap */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.full-videos-page .fv-strip-item {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    background: #0b0b12;
    width: 112px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-drag: none;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.full-videos-page .fv-strip-item:hover {
    transform: translateY(-1px);
}
.full-videos-page .fv-strip-item.is-active {
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.35);
}
.full-videos-page .fv-strip-item.fv-strip-item--featured:not(.is-active) {
    box-shadow: inset 0 0 0 2px rgba(23, 162, 184, 0.45);
}
.full-videos-page .fv-strip-featured-mark {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    color: var(--navy, #0d0f1e);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    line-height: 1;
}
.full-videos-page .fv-strip-thumb {
    width: 100%;
    height: 62px;
    object-fit: cover;
    display: block;
    vertical-align: middle;
    -webkit-user-drag: none;
}
.full-videos-page .fv-strip-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 62px;
    color: rgba(255,255,255,0.55);
    font-size: 1.5rem;
}
.full-videos-page .fv-sidebar-links a {
    display: inline-block;
    padding: 0.2rem 0;
}
.full-videos-page .fv-sidebar-list li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.full-videos-page .fv-sidebar-list li:last-child {
    border-bottom: 0;
}
.full-videos-page .fv-sidebar-list a {
    font-weight: 600;
    text-decoration: none;
    color: var(--text-dark, #e8eaef);
}
.full-videos-page .fv-sidebar-list a:hover {
    text-decoration: underline;
}
.full-videos-page .fv-poll-widget .poll-card {
    margin-bottom: 0;
}
.full-videos-page .fv-video-engage {
    border-top-color: rgba(148, 163, 184, 0.2) !important;
}
/* Video React/Helpful tray: compact everywhere it appears (watch, search, trending, topic page, category, theatre). */
.video-engage-tray.engage-row--video {
    --engage-compact: 1;
    margin-top: 0.35rem !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0.45rem !important;
    flex-wrap: wrap;
    align-items: center;
}
.video-engage-tray.engage-row--video.engage-row {
    padding: 0.25rem 0 !important;
}
.video-engage-tray.engage-row--video .engage-section {
    gap: 0.28rem !important;
}
.video-engage-tray.engage-row--video .engage-divider {
    height: 22px !important;
    align-self: center;
}
.video-engage-tray.engage-row--video .engage-reactions {
    gap: 0.22rem !important;
}
.video-engage-tray.engage-row--video .engage-helpful {
    gap: 0.28rem !important;
}
.video-engage-tray.engage-row--video .engage-section-label {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
}
.video-engage-tray.engage-row--video .reaction-btn,
.video-engage-tray.engage-row--video .helpful-btn {
    padding: 0.05rem 0.22rem !important;
    font-size: 0.68rem !important;
    min-height: 0;
    line-height: 1.1;
}
.video-engage-tray.engage-row--video .reaction-emoji {
    font-size: 0.95rem !important;
}
.video-engage-tray.engage-row--video .reaction-count {
    font-size: 0.65rem !important;
}
.video-engage-tray.engage-row--video .helpful-btn i {
    font-size: 0.85rem !important;
}

/* ─── FAQ Section (readability: contrast + body sans-serif) ─ */
.faq-section { margin-top: 2.75rem; }
.faq-heading {
    font-size: 1.28rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--navy);
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.faq-heading .bi {
    color: var(--gold-dark);
    opacity: 0.95;
    vertical-align: -0.06em;
}
.faq-section .accordion-header {
    margin-bottom: 0;
}
.faq-item {
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md) !important;
    margin-bottom: 0.65rem;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
/* Full-width panel behind answer (max-width on body was leaving white .faq-item showing on the right) */
.faq-section .faq-item .accordion-collapse {
    background: var(--cream);
    border-top: 1px solid rgba(26, 26, 46, 0.08);
}
/* Questions: sans-serif for UI clarity; open state = dark text + gold accent bar (not low-contrast gold type) */
.faq-btn {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--bg-card);
    padding: 1rem 1.25rem;
    line-height: 1.45;
    box-shadow: none !important;
    text-align: left;
}
.faq-btn:hover {
    background: var(--cream-dark);
    color: var(--navy);
}
.faq-btn:not(.collapsed) {
    color: var(--navy);
    background: var(--cream);
    border-left: 3px solid var(--gold-dark);
    padding-left: calc(1.25rem - 3px);
}
.faq-btn.collapsed {
    color: var(--text-mid);
}
.faq-btn::after {
    filter: none;
    opacity: 0.55;
    flex-shrink: 0;
    margin-left: 0.75rem;
}
.faq-btn:not(.collapsed)::after {
    opacity: 0.75;
}
/* Answers: line-length cap without exposing a second “column” of white */
.faq-answer {
    font-family: var(--font-body);
    font-size: 0.97rem;
    font-weight: 400;
    color: var(--text-mid);
    line-height: 1.75;
    padding: 0.15rem 1.25rem 1.2rem 1.35rem;
    background: transparent;
    border-top: none;
    width: 100%;
    max-width: 65ch;
    box-sizing: border-box;
}
[data-theme="dark"] .faq-heading { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .faq-heading .bi { color: var(--gold-light); }
[data-theme="dark"] .faq-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
    box-shadow: none;
}
[data-theme="dark"] .faq-btn {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.88);
}
[data-theme="dark"] .faq-btn:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
}
[data-theme="dark"] .faq-btn.collapsed {
    color: rgba(255,255,255,0.78);
}
[data-theme="dark"] .faq-btn:not(.collapsed) {
    color: rgba(255,255,255,0.95);
    background: rgba(109, 140, 232, 0.1);
    border-left-color: var(--gold);
}
[data-theme="dark"] .faq-section .faq-item .accordion-collapse {
    background: rgba(0, 0, 0, 0.22);
    border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .faq-answer {
    color: rgba(255, 255, 255, 0.78);
}

/* ─── Static Page Body ────────────────────────────────────── */
.static-page-body h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
}
.static-page-body p, .static-page-body li {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-light);
}
[data-theme="dark"] .static-page-body h2 { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .static-page-body p,
[data-theme="dark"] .static-page-body li { color: rgba(255,255,255,0.65); }

/* ─── Unified Engagement Tray ─────────────────────────────── */
.engage-tray {
    margin-top: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    overflow: hidden;
}
.engage-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
}
.engage-row-top  { border-bottom: 1px solid var(--border); }
.engage-row-share { gap: 0.75rem; }
.engage-section  { display: flex; align-items: center; gap: 0.75rem; }
.engage-divider  { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; }
.engage-section-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-light); white-space: nowrap;
}
.engage-reactions { display: flex; gap: 0.4rem; }
.engage-helpful   { display: flex; gap: 0.5rem; }
[data-theme="dark"] .engage-tray { background: var(--bg-card); }

/* Share buttons — larger, more prominent */
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    font-size: 1.1rem;
    color: #fff;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.share-btn:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(0,0,0,0.25); color: #fff; }
.share-fb  { background: #1877f2; }
.share-x   { background: #111; }
.share-wa  { background: #25d366; }
.share-pin { background: #e60023; }
.share-copy { background: var(--navy); color: rgba(255,255,255,0.85); }
.share-copy-ok { background: #22c55e !important; }
.engage-share-btns { display: flex; gap: 0.5rem; align-items: center; }

/* Helpful buttons — larger, icon-focused */
.helpful-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0.5rem 1.1rem;
    border: 1.5px solid var(--border-mid);
    border-radius: 999px;
    background: var(--white);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-mid);
    transition: var(--transition);
    line-height: 1;
}
.helpful-btn i { font-size: 1.1rem; }
.helpful-btn:hover { border-color: #22c55e; color: #15803d; background: #f0fdf4; }
.helpful-btn-no:hover { border-color: #ef4444; color: #b91c1c; background: #fef2f2; }
.helpful-btn.voted-yes { background: #dcfce7; border-color: #22c55e; color: #15803d; }
.helpful-btn.voted-no  { background: #fee2e2; border-color: #f87171; color: #b91c1c; }
.helpful-score { font-size: 0.82rem; color: var(--text-light); }
[data-theme="dark"] .helpful-btn { background: rgba(255,255,255,0.06); }

/* Bookmark button — in tray */
.bookmark-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--border-mid);
    border-radius: 999px;
    background: var(--white);
    cursor: pointer;
    font-size: 0.85rem; font-weight: 600;
    color: var(--text-mid);
    transition: var(--transition);
    white-space: nowrap;
}
.bookmark-btn i { font-size: 1rem; }
.bookmark-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.bookmark-btn.saved { background: rgba(109,140,232,0.1); border-color: var(--gold); color: var(--gold-dark); }
[data-theme="dark"] .bookmark-btn { background: rgba(255,255,255,0.06); }

/* Reaction buttons — bigger */
.reaction-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0.45rem 0.85rem;
    border: 1.5px solid var(--border-mid);
    border-radius: 999px;
    background: var(--white);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    color: var(--text-mid);
}
.reaction-btn:hover { transform: scale(1.08); border-color: var(--gold); }
.reaction-btn.reacted { background: rgba(109,140,232,0.12); border-color: var(--gold); font-weight: 600; }
.reaction-emoji { font-size: 1.2rem; line-height: 1; }
.reaction-count { font-size: 0.78rem; color: var(--text-light); font-weight: 600; }
[data-theme="dark"] .reaction-btn { background: rgba(255,255,255,0.05); }

/* Google AdSense — disclosure above unit; JS collapses whole slot when empty */
.article-ad-slot {
    margin-top: 2rem;
    border-radius: var(--radius-md);
    padding: 0.25rem;
    position: relative;
}
.sidebar-ad-slot {
    border-radius: var(--radius-md);
    padding: 0.25rem;
    position: relative;
}
.ad-disclosure {
    display: block;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
[data-theme="dark"] .ad-disclosure {
    color: rgba(255, 255, 255, 0.45);
}
.ad-unit {
    display: block;
    width: 100%;
}
.ad-unit .adsbygoogle {
    display: block;
    width: 100%;
}

/* ─── Dark Mode Toggle Button ─────────────────────────────── */
.theme-toggle {
    position: fixed;
    bottom: var(--fab-inset);
    right: var(--fab-inset);
    z-index: 9999;
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    border: 2px solid rgba(109,140,232,0.4);
    background: var(--navy);
    color: var(--gold-light);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 4px rgba(109,140,232,0.08);
    transition: var(--transition);
    line-height: 1;
}
.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);
    border-color: var(--gold);
    box-shadow: 0 6px 28px rgba(0,0,0,0.4), 0 0 0 6px rgba(109,140,232,0.15);
}
[data-theme="dark"] .theme-toggle {
    background: var(--bg-card);
    border-color: rgba(134,166,255,0.4);
}

/* ─── Card fade-in on scroll ──────────────────────────────── */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   ENGAGEMENT FEATURES
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. Reading progress bar ─────────────────────────────── */
#read-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    z-index: 9999;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ─── Reading time badge ──────────────────────────────────── */
.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.55);
    font-style: italic;
}

/* ─── 2. Prev / Next navigation (two bands on article pages) ─ */
.prevnext-bar {
    display: flex;
    gap: 1rem;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}
.prevnext-bar--after-article {
    margin-top: 1.5rem;
}
.prevnext-bar--after-related {
    margin-top: 2.25rem;
}
.prevnext-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-dark);
    transition: var(--transition);
    min-width: 0;
}
.prevnext-btn:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(109,140,232,0.12);
    color: var(--text-dark);
    text-decoration: none;
}
.prevnext-btn.next { flex-direction: row-reverse; text-align: right; }
.prevnext-arrow { font-size: 1.25rem; color: var(--gold); flex-shrink: 0; }
.prevnext-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); }
.prevnext-title { font-size: 0.88rem; font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
@media (max-width: 767.98px) {
    .prevnext-bar { flex-direction: column; }
    .prevnext-btn.prev,
    .prevnext-btn.next {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.45rem;
    }
    .prevnext-btn > span {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        min-width: 0;
    }
    .prevnext-label,
    .prevnext-title {
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
    .prevnext-title {
        -webkit-line-clamp: 2;
    }
}
[data-theme="dark"] .prevnext-btn { background: var(--bg-card); border-color: rgba(255,255,255,0.08); }

/* ─── 3. Was this helpful? ─────────────────────────────────── */
.helpful-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--cream);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    flex-wrap: wrap;
}
[data-theme="dark"] .helpful-bar { background: rgba(255,255,255,0.04); }
.helpful-label { font-size: 0.85rem; font-weight: 600; color: var(--text-mid); margin-right: auto; }
.helpful-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.4rem 1rem;
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    background: var(--white);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-mid);
    transition: var(--transition);
}
.helpful-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.helpful-btn.voted-yes { background: #dcfce7; border-color: #22c55e; color: #15803d; }
.helpful-btn.voted-no  { background: #fee2e2; border-color: #f87171; color: #b91c1c; }
.helpful-score { font-size: 0.75rem; color: var(--text-light); }
[data-theme="dark"] .helpful-btn { background: rgba(255,255,255,0.06); }

/* ─── 4. Table of contents ────────────────────────────────── */
.toc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin-bottom: 0.35rem; }
.toc-list a {
    font-size: 0.83rem; color: var(--text-mid); text-decoration: none;
    display: flex; align-items: flex-start; gap: 6px; line-height: 1.4;
    transition: color 0.15s;
}
.toc-list a:hover { color: var(--gold-dark); }
.toc-list a::before { content: '›'; color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.toc-list .toc-h3 a { padding-left: 1.1rem; font-size: 0.79rem; }
[data-theme="dark"] .toc-card { background: var(--bg-card); }

/* ─── 5. People also viewed ────────────────────────────────── */
.also-viewed {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.also-viewed-heading {
    font-size: 1rem; font-weight: 700; color: var(--text-dark);
    margin-bottom: 1.25rem;
    display: flex; align-items: center; gap: 8px;
}
.also-viewed-scroll {
    display: flex; gap: 1rem; overflow-x: auto;
    padding-bottom: 0.5rem; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
}
.also-viewed-scroll::-webkit-scrollbar { height: 4px; }
.also-viewed-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
.also-card {
    flex: 0 0 160px; scroll-snap-align: start;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
    text-decoration: none; color: var(--text-dark);
    transition: var(--transition); display: flex; flex-direction: column;
}
.also-card:hover { border-color: var(--gold); box-shadow: 0 4px 16px rgba(109,140,232,0.15); }
.also-card-img { width: 100%; height: 110px; object-fit: cover; object-position: center 18%; }
.also-card-img-placeholder { width: 100%; height: 110px; background: var(--cream-dark);
    display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 1.5rem; }
.also-card-body { padding: 0.6rem 0.75rem; flex: 1; }
.also-card-title { font-size: 0.78rem; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.also-card-views { font-size: 0.68rem; color: var(--text-light); margin-top: 4px; }
[data-theme="dark"] .also-card { background: var(--bg-card); }

/* ─── 6. Reader polls (topic-linked, donut + bars) ─────────── */
.poll-card {
    --poll-gold: #6d8ce8;
    --poll-teal: #0d9488;
    --poll-violet: #7c3aed;
    --poll-coral: #e11d48;
    background:
        linear-gradient(160deg, rgba(109, 140, 232, 0.11) 0%, transparent 42%),
        linear-gradient(330deg, rgba(13, 148, 136, 0.09) 0%, transparent 45%),
        var(--bg-card);
    border: 1px solid rgba(109, 140, 232, 0.28);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 6px 28px rgba(13, 148, 136, 0.07), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    position: relative;
    overflow: hidden;
}
.poll-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--poll-gold), var(--poll-teal), var(--poll-violet), var(--poll-coral));
    opacity: 0.95;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.poll-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.poll-card-head .sidebar-widget-heading {
    margin-bottom: 0;
    padding-bottom: 0.65rem;
    flex: 1;
    min-width: 0;
    border-bottom-color: rgba(109, 140, 232, 0.45) !important;
}
.poll-card-head .sidebar-widget-heading .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: 0.4rem;
    vertical-align: middle;
    font-size: 0.95rem;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--poll-gold) 0%, #d97706 45%, var(--poll-teal) 100%);
    box-shadow: 0 2px 10px rgba(109, 140, 232, 0.35);
}
.poll-total-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-light);
    background: var(--cream-dark);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.poll-visual { margin-bottom: 0.75rem !important; }
.poll-donut {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 11px var(--bg-card);
    flex-shrink: 0;
}
.poll-legend { font-size: 0.78rem; color: var(--text-mid); }
.poll-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.poll-question {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.08), rgba(13, 148, 136, 0.07));
    border-left: 4px solid var(--poll-teal);
}
.poll-options { display: flex; flex-direction: column; gap: 0.6rem; }
.poll-option {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.87rem; font-weight: 500;
    transition: border-color 0.2s, background 0.2s, transform 0.15s ease, box-shadow 0.2s;
    user-select: none;
}
.poll-options .poll-option:nth-child(4n+1) {
    border-left: 4px solid var(--poll-gold);
    background: linear-gradient(90deg, rgba(109, 140, 232, 0.14) 0%, var(--white) 40%);
    color: var(--navy);
}
.poll-options .poll-option:nth-child(4n+2) {
    border-left: 4px solid var(--poll-teal);
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.12) 0%, var(--white) 40%);
    color: var(--navy);
}
.poll-options .poll-option:nth-child(4n+3) {
    border-left: 4px solid var(--poll-violet);
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.1) 0%, var(--white) 40%);
    color: var(--navy);
}
.poll-options .poll-option:nth-child(4n+4) {
    border-left: 4px solid var(--poll-coral);
    background: linear-gradient(90deg, rgba(225, 29, 72, 0.09) 0%, var(--white) 40%);
    color: var(--navy);
}
.poll-option:hover:not(.voted) {
    border-color: rgba(109, 140, 232, 0.55);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.12);
    transform: translateY(-1px);
}
.poll-option.voted { cursor: default; }
.poll-option.winner { border-color: var(--gold); background: rgba(109,140,232,0.12) !important; }
.poll-options .poll-option:nth-child(4n+1) .poll-bar { background: rgba(109, 140, 232, 0.28); }
.poll-options .poll-option:nth-child(4n+2) .poll-bar { background: rgba(13, 148, 136, 0.26); }
.poll-options .poll-option:nth-child(4n+3) .poll-bar { background: rgba(124, 58, 237, 0.22); }
.poll-options .poll-option:nth-child(4n+4) .poll-bar { background: rgba(225, 29, 72, 0.2); }
.poll-bar {
    position: absolute; left: 0; top: 0; height: 100%;
    z-index: 0;
    transition: width 0.5s ease;
}
.poll-option-label { position: relative; z-index: 1; }
.poll-options .poll-option:nth-child(4n+1) .poll-option-pct { color: #a67c1a; }
.poll-options .poll-option:nth-child(4n+2) .poll-option-pct { color: #0f766e; }
.poll-options .poll-option:nth-child(4n+3) .poll-option-pct { color: #6d28d9; }
.poll-options .poll-option:nth-child(4n+4) .poll-option-pct { color: #be123c; }
.poll-option-pct   { position: relative; z-index: 1; font-size: 0.78rem; font-weight: 700; }
.poll-meta { font-size: 0.72rem; color: var(--text-light); margin-top: 0.75rem; }
.poll-results-sub { font-size: 0.82rem; color: var(--text-light); margin-bottom: 0.5rem; }
.poll-thanks { font-size: 0.85rem; color: var(--text-mid); margin-bottom: 0; }
.poll-toggle-results { font-size: 0.82rem; }
.btn-poll-toggle {
    font-weight: 600;
    color: var(--navy);
    border: 2px solid transparent;
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(90deg, var(--poll-gold), var(--poll-teal), var(--poll-violet)) border-box;
    border-radius: var(--radius-sm);
    transition: color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-poll-toggle:hover {
    color: var(--gold-dark);
    box-shadow: 0 4px 18px rgba(124, 58, 237, 0.18);
    transform: translateY(-1px);
}
/* Bars / % hidden for new visitors until they vote or click "Show results" */
.poll-card:not(.poll--results-visible) .poll-bar { width: 0 !important; }
.poll-card:not(.poll--results-visible) .poll-option-pct {
    opacity: 0; width: 0; overflow: hidden; padding: 0; margin: 0; font-size: 0; line-height: 0;
}
.poll-card:not(.poll--results-visible) .poll-option.winner {
    border-color: var(--border-mid);
}
.poll-card:not(.poll--results-visible) .poll-options .poll-option:nth-child(4n+1) {
    border-left-color: var(--poll-gold);
    background: linear-gradient(90deg, rgba(109, 140, 232, 0.14) 0%, var(--white) 40%);
}
.poll-card:not(.poll--results-visible) .poll-options .poll-option:nth-child(4n+2) {
    border-left-color: var(--poll-teal);
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.12) 0%, var(--white) 40%);
}
.poll-card:not(.poll--results-visible) .poll-options .poll-option:nth-child(4n+3) {
    border-left-color: var(--poll-violet);
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.1) 0%, var(--white) 40%);
}
.poll-card:not(.poll--results-visible) .poll-options .poll-option:nth-child(4n+4) {
    border-left-color: var(--poll-coral);
    background: linear-gradient(90deg, rgba(225, 29, 72, 0.09) 0%, var(--white) 40%);
}
[data-theme="dark"] .poll-card:not(.poll--results-visible) .poll-option.winner {
    background: rgba(255,255,255,0.04) !important;
}
/* "Your pick" indicator on the option this visitor voted for */
.poll-option.my-vote {
    box-shadow: 0 0 0 2px var(--gold) inset;
}
.poll-option.my-vote .poll-option-label::after {
    content: ' ✓';
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.75;
    margin-left: 0.25rem;
}
[data-theme="dark"] .poll-option.my-vote {
    box-shadow: 0 0 0 2px var(--gold-light) inset;
}
[data-theme="dark"] .poll-card {
    background:
        linear-gradient(160deg, rgba(109, 140, 232, 0.12) 0%, transparent 40%),
        linear-gradient(320deg, rgba(13, 148, 136, 0.1) 0%, transparent 42%),
        var(--bg-card);
    border-color: rgba(109, 140, 232, 0.22);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .poll-card::before { opacity: 1; }
[data-theme="dark"] .poll-question {
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.15), rgba(13, 148, 136, 0.12));
    border-left-color: var(--poll-teal);
}
[data-theme="dark"] .poll-options .poll-option:nth-child(4n+1) {
    background: linear-gradient(90deg, rgba(109, 140, 232, 0.16) 0%, rgba(255,255,255,0.05) 45%);
    color: rgba(255, 255, 255, 0.88);
}
[data-theme="dark"] .poll-options .poll-option:nth-child(4n+2) {
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.14) 0%, rgba(255,255,255,0.05) 45%);
    color: rgba(255, 255, 255, 0.88);
}
[data-theme="dark"] .poll-options .poll-option:nth-child(4n+3) {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.14) 0%, rgba(255,255,255,0.05) 45%);
    color: rgba(255, 255, 255, 0.88);
}
[data-theme="dark"] .poll-options .poll-option:nth-child(4n+4) {
    background: linear-gradient(90deg, rgba(225, 29, 72, 0.12) 0%, rgba(255,255,255,0.05) 45%);
    color: rgba(255, 255, 255, 0.88);
}
[data-theme="dark"] .btn-poll-toggle {
    color: rgba(255, 255, 255, 0.88);
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(90deg, var(--poll-gold), var(--poll-teal), var(--poll-violet)) border-box;
}
[data-theme="dark"] .btn-poll-toggle:hover {
    color: var(--gold-light);
}
[data-theme="dark"] .poll-option { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .poll-option.winner { background: rgba(109,140,232,0.15) !important; }

/* ─── 7. Bookmarks ────────────────────────────────────────── */
.bookmark-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    background: var(--white);
    cursor: pointer;
    font-size: 0.82rem; font-weight: 500;
    color: var(--text-mid);
    transition: var(--transition);
}
.bookmark-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.bookmark-btn.saved { background: rgba(109,140,232,0.12); border-color: var(--gold); color: var(--gold-dark); }
[data-theme="dark"] .bookmark-btn { background: rgba(255,255,255,0.06); }

/* Floating bookmarks drawer */
#bm-drawer {
    position: fixed;
    bottom: calc(var(--fab-stack-4) + var(--fab-size) + var(--fab-gap));
    right: var(--fab-inset);
    width: 280px; max-height: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    z-index: 10040; /* above .theme-toggle (9999) */
    display: none; flex-direction: column;
    overflow: hidden;
}
#bm-drawer.open { display: flex; }
#bm-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem; font-weight: 700; color: var(--text-dark);
}
#bm-drawer-close { background: none; border: none; cursor: pointer; color: var(--text-light); font-size: 1.1rem; }
#bm-drawer-list { overflow-y: auto; flex: 1; padding: 0.5rem 0; }
.bm-item {
    display: flex; align-items: center; gap: 8px;
    padding: 0.55rem 1rem;
    text-decoration: none; color: var(--text-dark);
    font-size: 0.82rem; border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.bm-item:hover { background: var(--cream); }
.bm-item:last-child { border-bottom: none; }
.bm-item-title { flex: 1; line-height: 1.35; }
.bm-item-remove { background: none; border: none; cursor: pointer; color: var(--text-light); font-size: 0.9rem; flex-shrink: 0; }
.bm-item-remove:hover { color: var(--coral); }
#bm-empty { padding: 1.5rem 1rem; text-align: center; color: var(--text-light); font-size: 0.82rem; }

#bm-fab {
    position: fixed;
    bottom: var(--fab-stack-2);
    right: var(--fab-inset);
    width: var(--fab-size);
    height: var(--fab-size);
    background: var(--navy);
    border: 1px solid rgba(109,140,232,0.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.15rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 10030; /* above .theme-toggle (9999); below lightbox */
    transition: var(--transition);
    color: var(--gold);
    padding: 0;
}
#bm-fab:hover { transform: scale(1.08); border-color: var(--gold); }
#bm-fab .bm-count {
    position: absolute; top: -4px; right: -4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--gold); color: var(--navy);
    font-size: 0.65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] #bm-fab { background: var(--bg-card); }

/* ─── 8. Emoji reactions ──────────────────────────────────── */
.reactions-bar {
    display: flex; align-items: center; gap: 0.6rem;
    margin-top: 1.5rem; flex-wrap: wrap;
}
.reactions-label { font-size: 0.78rem; color: var(--text-light); margin-right: 4px; }
.reaction-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    background: var(--white);
    cursor: pointer; font-size: 0.82rem;
    transition: var(--transition);
    color: var(--text-mid);
}
.reaction-btn:hover { transform: scale(1.06); border-color: var(--gold); }
.reaction-btn.reacted { background: rgba(109,140,232,0.12); border-color: var(--gold); font-weight: 600; }
.reaction-emoji { font-size: 1rem; line-height: 1; }
.reaction-count { font-size: 0.76rem; color: var(--text-light); }
[data-theme="dark"] .reaction-btn { background: rgba(255,255,255,0.05); }

/* ═══ Gamification (.gm-*) ═══════════════════════════════════ */
.gm-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(109,140,232,0.15);
    border: 1px solid rgba(109,140,232,0.35);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-dark);
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-level-badge {
    background: rgba(134,166,255,0.12);
    color: var(--gold-light);
}

/* Navbar: level pill must pop on dark blue + hover tip */
.site-navbar .gm-level-wrap {
    position: relative;
    outline: none;
}
.site-navbar .gm-level-badge {
    background: linear-gradient(145deg, rgba(232, 238, 255, 0.22) 0%, rgba(109, 140, 232, 0.38) 100%);
    border: 1px solid rgba(242, 220, 160, 0.95);
    color: #fff8e8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: default;
}
.site-navbar .gm-level-badge:hover,
.site-navbar .gm-level-wrap:hover .gm-level-badge,
.site-navbar .gm-level-wrap:focus-within .gm-level-badge {
    border-color: #f5e6b8;
    box-shadow:
        0 0 0 2px rgba(109, 140, 232, 0.45),
        0 4px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.site-navbar .gm-level-icon i {
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.site-navbar .gm-level-wrap:focus-visible .gm-level-badge {
    outline: 2px solid rgba(242, 220, 160, 0.95);
    outline-offset: 3px;
}
.gm-level-tip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    width: min(300px, calc(100vw - 24px));
    padding: 0.85rem 1rem;
    background: linear-gradient(165deg, #1e1e36 0%, #12122a 100%);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(109, 140, 232, 0.55);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    font-size: 0.8rem;
    line-height: 1.5;
    z-index: 1080;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
    text-align: left;
}
.gm-level-tip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 14px;
    border: 8px solid transparent;
    border-bottom-color: rgba(109, 140, 232, 0.55);
    margin-bottom: -1px;
}
.gm-level-tip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 15px;
    border: 7px solid transparent;
    border-bottom-color: #1e1e36;
}
.gm-level-tip-title {
    display: block;
    font-size: 0.82rem;
    color: #e8c96a;
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
}
.gm-level-tip-body {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 400;
}
.gm-level-tip-body .bi {
    color: #e8c96a;
}
.site-navbar .gm-level-wrap:hover .gm-level-tip,
.site-navbar .gm-level-wrap:focus-within .gm-level-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gm-level-icon i { font-size: 0.95rem; vertical-align: -0.1em; }

#gmTrophyFab {
    position: fixed;
    bottom: var(--fab-stack-3);
    right: var(--fab-inset);
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    border: 1px solid rgba(109,140,232,0.35);
    background: var(--navy);
    color: var(--gold);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10025;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transition: var(--transition);
    padding: 0;
}
#gmTrophyFab:hover { transform: scale(1.06); border-color: var(--gold); }
html:is([data-theme="dark"], [data-bs-theme="dark"]) #gmTrophyFab { background: var(--bg-card); }

/*
 * Floating action buttons: visible translucency on narrow viewports.
 * !important beats later html:is(...) #id { background: var(--bg-card) } rules.
 */
@media (max-width: 991.98px) {
    .theme-toggle,
    #bm-fab,
    #gmTrophyFab,
    #back-to-top {
        background: rgba(26, 26, 46, 0.68) !important;
        -webkit-backdrop-filter: saturate(160%) blur(12px);
        backdrop-filter: saturate(160%) blur(12px);
    }
    html:is([data-theme="dark"], [data-bs-theme="dark"]) .theme-toggle,
    html:is([data-theme="dark"], [data-bs-theme="dark"]) #bm-fab,
    html:is([data-theme="dark"], [data-bs-theme="dark"]) #gmTrophyFab,
    html:is([data-theme="dark"], [data-bs-theme="dark"]) #back-to-top {
        background: rgba(26, 26, 46, 0.62) !important;
    }
}

#gmTrophyDrawer {
    position: fixed;
    bottom: calc(var(--fab-stack-3) + var(--fab-size) + var(--fab-gap));
    right: var(--fab-inset);
    width: min(360px, calc(100vw - 32px));
    max-height: min(72vh, 520px);
    background-color: var(--gm-layer-surface);
    background-image: linear-gradient(180deg, var(--gm-layer-surface) 0%, var(--gm-layer-surface-alt) 100%);
    border: 1px solid var(--gm-layer-border);
    border-radius: var(--radius-md);
    box-shadow: var(--gm-layer-shadow), var(--toast-shadow);
    z-index: 10035;
    display: none;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    mix-blend-mode: normal;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) #gmTrophyDrawer {
    /* Solid fill — gradients read as translucent on some displays */
    background-color: var(--gm-layer-surface);
    background-image: none;
}
#gmTrophyDrawer.open { display: flex; }
#gmTrophyDrawerHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-dark);
}
#gmTrophyDrawerClose {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem;
}
#gmTrophyDrawerBody { overflow-y: auto; padding: 1rem; flex: 1; }

.gm-xp-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--xp-bar-bg);
    overflow: hidden;
    margin-top: 0.35rem;
}
.gm-xp-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    width: 0%;
    transition: width 0.45s ease;
}
.gm-xp-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--xp-bar-text);
    margin-top: 0.25rem;
}

.gm-streak-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.85rem;
    color: var(--text-mid);
}
.gm-streak-fire { color: var(--streak-fire); font-size: 1.1rem; }

.gm-badge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.gm-badge-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.35rem;
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-mid);
    background: var(--cream);
    transition: var(--transition);
}
/* Trophy drawer tiles — opaque chips (not glass) */
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-badge-card {
    background: #4f4f64;
    border-color: rgba(255, 255, 255, 0.24);
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-badge-card.gm-badge-earned {
    background: #5c5c72;
    border-color: rgba(200, 160, 255, 0.45);
}
.gm-badge-card i { font-size: 1.25rem; display: block; margin-bottom: 0.2rem; color: var(--gold-dark); }
.gm-badge-earned {
    box-shadow: 0 0 12px var(--badge-glow);
    border-color: var(--gold);
}
.gm-badge-locked {
    filter: grayscale(1);
    opacity: 0.4;
}

#gmBadgeOverlay {
    position: fixed;
    inset: 0;
    background: var(--gm-layer-scrim);
    z-index: 100500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#gmBadgeOverlay.show { display: flex; }
#gmBadgeOverlayCard {
    background-color: var(--gm-layer-surface);
    background-image: linear-gradient(180deg, var(--gm-layer-surface) 0%, var(--gm-layer-surface-alt) 100%);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    text-align: center;
    max-width: 320px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 40px var(--badge-glow);
    animation: gmBadgeUnlock 0.85s ease;
    isolation: isolate;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) #gmBadgeOverlayCard {
    background-color: var(--gm-pop-surface);
    background-image: none;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#gmBadgeOverlayCard i { font-size: 2.5rem; color: var(--gold); }
#gmBadgeOverlayCard h3 { font-size: 1.1rem; margin: 0.75rem 0 0.35rem; color: var(--text-dark); }
html:is([data-theme="dark"], [data-bs-theme="dark"]) #gmBadgeOverlayCard .text-muted {
    color: var(--text-mid) !important;
}

.gm-toast {
    position: fixed;
    bottom: var(--fab-inset);
    left: var(--fab-inset);
    right: auto;
    max-width: min(340px, calc(100vw - 32px));
    padding: 0.65rem 1rem;
    background: var(--gm-layer-surface);
    border: 1px solid var(--gm-layer-border);
    border-radius: var(--radius-md);
    box-shadow: var(--toast-shadow);
    z-index: 10020;
    font-size: 0.85rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-toast {
    background-color: var(--gm-pop-surface);
    background-image: none;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.gm-toast.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
#gmStreakToast {
    z-index: 10022;
    bottom: auto;
    top: 5.5rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-12px);
    max-width: min(360px, calc(100vw - 32px));
}
#gmStreakToast.show {
    transform: translateX(-50%) translateY(0);
}

.gm-proof-toast { animation: gmToastSlide 0.4s ease forwards; }

.gm-reveal-bonus { margin-top: 1.5rem; }
.gm-reveal-blur-wrap {
    position: relative;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-mid);
    padding: 1rem 1.25rem;
    overflow: hidden;
    transition: filter 0.55s ease, opacity 0.55s ease;
}
.gm-reveal-blur {
    filter: blur(var(--reveal-blur));
}
.gm-reveal-blur-wrap.gm-unlocked {
    filter: none;
}
.gm-reveal-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    color: var(--gold-dark);
    z-index: 2;
    padding: 1rem;
    background: rgba(250,248,245,0.65);
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-reveal-hint {
    background: rgba(26,26,46,0.75);
    color: var(--gold-light);
}
.gm-reveal-blur-wrap.gm-unlocked .gm-reveal-hint { display: none; }
.gm-reveal-blur-wrap.gm-unlocked .gm-reveal-info-wrap { display: none; }
.gm-reveal-content { position: relative; z-index: 1; }

/* “React to unlock” — info icon + hover/focus tooltip (above lock overlay) */
.gm-reveal-info-wrap {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 4;
    outline: none;
}
.gm-reveal-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    border: 1px solid rgba(109, 140, 232, 0.65);
    background: rgba(255, 255, 255, 0.92);
    color: var(--gold-dark);
    font-size: 1.05rem;
    cursor: help;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: var(--transition);
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-reveal-info-btn {
    background: rgba(30, 30, 48, 0.95);
    color: var(--gold-light);
    border-color: rgba(134, 166, 255, 0.55);
}
.gm-reveal-info-btn:hover,
.gm-reveal-info-wrap:hover .gm-reveal-info-btn,
.gm-reveal-info-wrap:focus-within .gm-reveal-info-btn {
    border-color: var(--gold);
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(109, 140, 232, 0.35);
}
.gm-reveal-info-wrap:focus-visible .gm-reveal-info-btn {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.gm-reveal-info-tip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(320px, calc(100vw - 2rem));
    padding: 0.75rem 0.9rem;
    background: var(--bg-card);
    color: var(--text-dark);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.78rem;
    line-height: 1.45;
    font-weight: 400;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}
.gm-reveal-info-tip strong { color: var(--gold-dark); font-weight: 600; }
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-reveal-info-tip strong { color: var(--gold-light); }
.gm-reveal-info-wrap:hover .gm-reveal-info-tip,
.gm-reveal-info-wrap:focus-within .gm-reveal-info-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gm-challenge-card {
    background: var(--gm-layer-surface);
    border: 1px solid var(--gm-layer-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
}
.gm-challenge-card h2 { font-size: 1.05rem; margin-bottom: 0.35rem; color: var(--text-dark); }
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-challenge-card {
    background-color: var(--gm-layer-surface);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.gm-leaderboard { list-style: none; padding: 0; margin: 0; }
.gm-lb-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.gm-lb-row:last-child { border-bottom: none; }
.gm-lb-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    background: var(--cream-dark);
    color: var(--text-mid);
    flex-shrink: 0;
}
.gm-lb-row.gm-lb-top1 .gm-lb-rank { background: linear-gradient(135deg, #d4af37, #f4e4a6); color: #1a1a2e; }
.gm-lb-row.gm-lb-top2 .gm-lb-rank { background: linear-gradient(135deg, #a8a8a8, #e8e8e8); color: #1a1a2e; }
.gm-lb-row.gm-lb-top3 .gm-lb-rank { background: linear-gradient(135deg, #cd7f32, #e8b88a); color: #1a1a2e; }
.gm-lb-featured-pill {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navy);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-radius: 50px;
    padding: 0.12rem 0.45rem 0.12rem 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    line-height: 1.2;
    flex-shrink: 0;
}
.gm-lb-featured-pill .bi { font-size: 0.55rem; }
.gm-lb-row--featured {
    border-left: 3px solid var(--gold);
    padding-left: 0.5rem;
    margin-left: -0.35rem;
}
.gm-lb-score {
    margin-left: auto;
    font-weight: 700;
    color: var(--streak-fire);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.gm-lb-score i { animation: gmStreakPulse 2s ease-in-out infinite; }

.gm-cat-map {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
}
.gm-cat-cell {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.5rem;
    background: var(--bg-card);
    font-size: 0.78rem;
}
.gm-cat-cell-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--xp-bar-bg);
    margin-top: 0.4rem;
    overflow: hidden;
}
.gm-cat-cell-fill {
    height: 100%;
    background: var(--xp-bar-fill);
    border-radius: inherit;
    width: 0%;
    transition: width 0.4s ease;
}
.gm-cat-cell.gm-cat-full .gm-cat-cell-fill {
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}

.gm-poll-predict {
    margin-bottom: 0.75rem;
    padding: 0.65rem;
    background: var(--cream);
    border-radius: var(--radius-sm);
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-poll-predict { background: rgba(255,255,255,0.05); }
.gm-poll-predict-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.gm-predict-btn {
    font-size: 0.72rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-mid);
    background: var(--bg-card);
    cursor: pointer;
    color: var(--text-mid);
}
.gm-predict-btn.selected { border-color: var(--gold); background: rgba(109,140,232,0.12); color: var(--gold-dark); }
.gm-poll-predict-result { margin-top: 0.5rem; }

#gmWheelOverlay {
    position: fixed;
    inset: 0;
    /* Strong dim only — backdrop-blur made the dialog feel “see-through” in some browsers */
    background: var(--gm-layer-scrim);
    z-index: 100600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#gmWheelOverlay.show { display: flex; }
.gm-wheel-modal {
    position: relative;
    z-index: 1;
    isolation: isolate;
    mix-blend-mode: normal;
    /* Solid fill — do not inherit glassy surfaces */
    background-color: var(--gm-layer-surface);
    background-image: linear-gradient(180deg, var(--gm-layer-surface) 0%, var(--gm-layer-surface-alt) 100%);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--gm-layer-border);
    box-shadow: var(--gm-layer-shadow);
    color: var(--text-dark);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html:is([data-theme="dark"], [data-bs-theme="dark"]) .gm-wheel-modal {
    background-color: var(--gm-layer-surface);
    background-image: none;
}
[data-theme="light"] .gm-wheel-modal {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, #ffffff 0%, #f3f0fb 100%);
}
.gm-wheel-modal .h5,
.gm-wheel-modal #gmWheelTitle {
    color: var(--text-dark);
}
.gm-wheel-modal .text-muted {
    color: var(--text-mid) !important;
}
.gm-wheel-modal .form-select {
    background-color: var(--gm-layer-surface-alt);
    color: var(--text-dark);
    border-color: var(--gm-layer-border);
}
[data-theme="light"] .gm-wheel-modal .form-select {
    background-color: #fff;
}
.gm-wheel-modal #gmWheelSpinBtn {
    margin-top: 0.25rem;
}
.gm-wheel-modal #gmWheelCloseBtn {
    margin-top: 0.85rem;
    margin-bottom: 0.25rem;
    display: inline-block;
}
.gm-wheel {
    width: 200px;
    height: 200px;
    margin: 1rem auto;
    border-radius: 50%;
    border: 8px solid var(--gold);
    background: conic-gradient(
        var(--gold) 0deg 72deg,
        var(--navy-light) 72deg 144deg,
        var(--teal) 144deg 216deg,
        var(--purple) 216deg 288deg,
        var(--coral) 288deg 360deg
    );
    transition: transform 3.5s cubic-bezier(0.2, 0.8, 0.15, 1);
}
.gm-wheel.spinning { animation: gmWheelSpin 3.5s cubic-bezier(0.2, 0.8, 0.15, 1) forwards; }

#gmTrophyNav { display: none; }
#gmTrophyNav.d-inline-flex { display: inline-flex !important; }

@media (max-width: 575.98px) {
    #gmTrophyDrawer {
        left: var(--fab-inset);
        right: var(--fab-inset);
        width: auto;
    }
    .gm-badge-grid { gap: 0.35rem; }
    .gm-badge-card { padding: 0.35rem 0.25rem; font-size: 0.6rem; }
    .gm-toast { left: var(--fab-inset); right: var(--fab-inset); max-width: none; }
}

@media (max-height: 600px) {
    #gmTrophyFab { display: none !important; }
    #gmTrophyNav { display: inline-flex !important; }
}

@keyframes gmBadgeUnlock {
    0% { transform: scale(0.6); opacity: 0; filter: blur(4px); }
    50% { transform: scale(1.06); box-shadow: 0 0 32px var(--badge-glow); }
    100% { transform: scale(1); opacity: 1; filter: none; }
}
@keyframes gmXpPop {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-28px); }
}
@keyframes gmStreakPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.85; }
}
@keyframes gmWheelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(2520deg); }
}
@keyframes gmReveal {
    from { filter: blur(var(--reveal-blur)); opacity: 0.7; }
    to { filter: none; opacity: 1; }
}
@keyframes gmToastSlide {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}