/* ============================================
           CSS RESET & BASE
           ============================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: var(--ink);
            background: #fafaf8;
            /* Subtle warm off-white - cards float on this surface */
            line-height: 1.6;
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        html {
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
        }

        /* ============================================
           CSS VARIABLES - Premium Design System
           ============================================ */
        :root {
            /* Brand Colors */
            --french-blue: #2563eb;
            --french-blue-hover: #1d4ed8;

            /* Neutrals */
            --ink: #0f172a;
            --ink-secondary: #1e293b;
            --ink-muted: #475569;
            --surface: #f8fafc;
            --surface-elevated: #ffffff;
            --border: rgba(0, 0, 0, 0.04);
            --border-hover: rgba(0, 0, 0, 0.08);

            /* Typography Scale */
            --text-xs: 0.75rem;
            --text-sm: 0.875rem;
            --text-base: 1rem;
            --text-lg: 1.125rem;
            --text-xl: 1.25rem;
            --text-2xl: 1.5rem;
            --text-3xl: 1.875rem;
            --text-4xl: 2.25rem;
            --text-5xl: 3rem;

            /* Spacing Scale */
            --space-1: 0.25rem;
            --space-2: 0.5rem;
            --space-3: 0.75rem;
            --space-4: 1rem;
            --space-5: 1.25rem;
            --space-6: 1.5rem;
            --space-8: 2rem;
            --space-10: 2.5rem;
            --space-12: 3rem;
            --space-16: 4rem;
            --space-20: 5rem;
            --space-24: 6rem;

            /* Effects - Apple-inspired corners */
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-xl: 28px;
            --radius-full: 9999px;

            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
            --shadow-md:
                0 1px 2px rgba(0, 0, 0, 0.02),
                0 4px 12px rgba(0, 0, 0, 0.06),
                0 12px 32px rgba(0, 0, 0, 0.05);
            --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.1);
            --shadow-xl:
                0 2px 4px rgba(0, 0, 0, 0.02),
                0 8px 24px rgba(0, 0, 0, 0.08),
                0 24px 48px rgba(0, 0, 0, 0.06);

            /* Transitions */
            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
            --duration-fast: 200ms;
            --duration-normal: 400ms;
            --duration-slow: 600ms;
        }

        /* ============================================
           NAVIGATION BAR
           ============================================ */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            /* Frosted glass effect - warm tint with blur */
            background: rgba(250, 250, 248, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            width: 100%;
            transition: all var(--duration-normal) var(--ease-out);
        }

        @media (max-width: 768px) {
            .navbar {
                /* Frosted glass on mobile too */
                background: rgba(250, 250, 248, 0.85);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                overflow: visible;
                /* Prevent clipping profile button on in-app browsers (Google app, etc.) */
            }
        }

        .nav-container {
            width: 100%;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            position: relative;
        }

        .nav-left {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
        }

        /* Override .logo's global order:1 / margin-right:auto (used on other pages)
           so badge sits tight to the RIGHT of logo, matching iOS. */
        .nav-left .logo {
            order: 0;
            margin-right: 0;
        }
        .nav-left .pro-badge-wrap {
            order: 1;
        }

        /* ── Pro Badge (navbar) ──────────────────── */
        .pro-badge-wrap {
            position: relative;
        }

        .pro-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            background: rgba(34, 197, 94, 0.12);
            border: 1px solid rgba(34, 197, 94, 0.35);
            border-radius: 999px;
            font-family: inherit;
            font-size: 12px;
            font-weight: 700;
            color: #16a34a;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            line-height: 1.4;
        }

        .pro-badge:hover {
            background: rgba(34, 197, 94, 0.18);
        }

        /* Lock icon (SVG) — only shown when badge is in "locked" state */
        .pro-badge-lock {
            display: none;
            flex-shrink: 0;
            margin-right: 1px;
        }

        .pro-badge.locked .pro-badge-lock {
            display: inline-block;
        }

        /* Locked state for Essential users (gray, subtle, with lock icon) */
        .pro-badge.locked {
            color: rgba(0, 0, 0, 0.38);
            background: rgba(0, 0, 0, 0.04);
            border-color: rgba(0, 0, 0, 0.12);
        }

        .pro-badge.locked:hover {
            color: rgba(0, 0, 0, 0.55);
            background: rgba(0, 0, 0, 0.06);
            border-color: rgba(0, 0, 0, 0.18);
        }

        .pro-badge-days {
            font-weight: 600;
            font-size: 11px;
            opacity: 0.85;
            letter-spacing: 0;
        }

        .pro-badge-days:empty {
            display: none;
        }

        /* Badge states */
        .pro-badge.urgency-warning {
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.4);
            background: rgba(245, 158, 11, 0.1);
        }

        .pro-badge.urgency-critical {
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.4);
            background: rgba(239, 68, 68, 0.1);
        }

        .pro-badge.paid-pro {
            color: #22c55e;
            border-color: rgba(34, 197, 94, 0.4);
            background: rgba(34, 197, 94, 0.1);
        }

        /* Nudge animation — triggered when a limit is hit */
        @keyframes pro-badge-shake {
            0%, 100% { transform: translateX(0); }
            15% { transform: translateX(-4px); }
            30% { transform: translateX(4px); }
            45% { transform: translateX(-3px); }
            60% { transform: translateX(3px); }
            75% { transform: translateX(-1.5px); }
            90% { transform: translateX(1.5px); }
        }

        @keyframes pro-badge-flash {
            0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
            50% { box-shadow: 0 0 12px 4px rgba(245, 158, 11, 0.3); }
            100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
        }

        .pro-badge.nudge {
            animation: pro-badge-shake 0.35s ease, pro-badge-flash 0.5s ease 0.15s;
        }

        /* Dropdown */
        .pro-badge-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 14px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
            padding: 16px;
            min-width: 230px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: scale(0.97) translateY(-4px);
            transform-origin: top left;
            transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
            z-index: 200;
        }

        .pro-badge-dropdown.visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: scale(1) translateY(0);
        }

        .pro-badge-dd-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .pro-badge-dd-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink, #1a1a1a);
        }

        .pro-badge-dd-days {
            font-size: 12px;
            font-weight: 600;
        }

        .pro-badge-dd-bar {
            height: 5px;
            background: rgba(0, 0, 0, 0.06);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .pro-badge-dd-bar-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.4s ease, background-color 0.4s ease;
        }

        .pro-badge-dd-copy {
            font-size: 12px;
            color: var(--ink-muted, #6b7280);
            line-height: 1.5;
            margin-bottom: 12px;
        }

        .pro-badge-dd-cta {
            display: block;
            text-align: center;
            padding: 8px 16px;
            background: var(--french-blue, #3b82f6);
            color: #fff;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
            margin-bottom: 6px;
        }

        .pro-badge-dd-cta:hover {
            background: var(--french-blue-dark, #2563eb);
            transform: translateY(-1px);
        }

        .pro-badge-dd-price {
            font-size: 11px;
            color: var(--ink-muted, #6b7280);
            text-align: center;
        }

        /* Dark mode */
        @media (prefers-color-scheme: dark) {
            .pro-badge-dropdown {
                background: rgba(28, 28, 30, 0.97);
                border-color: rgba(255, 255, 255, 0.1);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
            }

            .pro-badge-dd-title {
                color: #f0f0f0;
            }

            .pro-badge-dd-bar {
                background: rgba(255, 255, 255, 0.08);
            }

            .pro-badge-dd-copy {
                color: rgba(255, 255, 255, 0.5);
            }

            .pro-badge-dd-price {
                color: rgba(255, 255, 255, 0.4);
            }

            /* Locked badge (Essential users) in dark mode */
            .pro-badge.locked {
                color: rgba(255, 255, 255, 0.4);
                background: rgba(255, 255, 255, 0.05);
                border-color: rgba(255, 255, 255, 0.12);
            }

            .pro-badge.locked:hover {
                color: rgba(255, 255, 255, 0.6);
                background: rgba(255, 255, 255, 0.08);
                border-color: rgba(255, 255, 255, 0.2);
            }
        }

        /* Mobile: keep iOS sizing (12px) but hide days counter to save space */
        @media (max-width: 480px) {
            .pro-badge-days {
                display: none;
            }

            .pro-badge-dropdown {
                left: -8px;
                min-width: 210px;
            }
        }

        .nav-center {
            display: none;
            /* Hidden on mobile, shown on desktop via media query below */
        }

        /* ── App Availability Notice (nav center, desktop only) ── */
        @media (min-width: 769px) {
            .nav-center {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
        }

        .app-notice {
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }

        .app-notice-text {
            font-size: 11.5px;
            color: rgba(0, 0, 0, 0.38);
            font-weight: 450;
            letter-spacing: 0.1px;
        }

        .app-notice-link {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 11.5px;
            font-weight: 550;
            color: rgba(0, 0, 0, 0.55);
            text-decoration: none;
            transition: color 0.2s ease;
            cursor: pointer;
        }

        .app-notice-link:hover {
            color: rgba(0, 0, 0, 0.85);
        }

        .app-notice-icon {
            opacity: 0.7;
            transition: opacity 0.2s ease;
        }

        .app-notice-link:hover .app-notice-icon {
            opacity: 1;
        }

        .app-notice-android {
            cursor: default;
            color: rgba(0, 0, 0, 0.35);
        }

        .app-notice-android:hover {
            color: rgba(0, 0, 0, 0.35);
        }

        .app-notice-android .app-notice-icon {
            opacity: 0.45;
        }

        .app-notice-android:hover .app-notice-icon {
            opacity: 0.45;
        }

        .app-notice-soon {
            font-size: 9px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: rgba(0, 0, 0, 0.28);
            margin-left: 1px;
        }

        .app-notice-divider {
            width: 1px;
            height: 10px;
            background: rgba(0, 0, 0, 0.12);
            margin: 0 2px;
        }

        .app-notice-close {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border: none;
            background: transparent;
            color: rgba(0, 0, 0, 0.22);
            cursor: pointer;
            border-radius: 50%;
            padding: 0;
            margin-left: 4px;
            transition: all 0.2s ease;
        }

        .app-notice-close:hover {
            background: rgba(0, 0, 0, 0.06);
            color: rgba(0, 0, 0, 0.5);
        }

        /* Hide notice when dismissed */
        .nav-center.dismissed {
            display: none !important;
        }

        @media (prefers-color-scheme: dark) {
            .app-notice-text {
                color: rgba(255, 255, 255, 0.38);
            }

            .app-notice-link {
                color: rgba(255, 255, 255, 0.58);
            }

            .app-notice-link:hover {
                color: rgba(255, 255, 255, 0.88);
            }

            .app-notice-icon {
                fill: rgba(255, 255, 255, 0.6);
            }

            .app-notice-link:hover .app-notice-icon {
                fill: rgba(255, 255, 255, 0.9);
            }

            .app-notice-android {
                color: rgba(255, 255, 255, 0.32);
            }

            .app-notice-android:hover {
                color: rgba(255, 255, 255, 0.32);
            }

            .app-notice-android .app-notice-icon {
                fill: rgba(255, 255, 255, 0.3);
                opacity: 1;
            }

            .app-notice-android:hover .app-notice-icon {
                fill: rgba(255, 255, 255, 0.3);
                opacity: 1;
            }

            .app-notice-soon {
                color: rgba(255, 255, 255, 0.25);
            }

            .app-notice-divider {
                background: rgba(255, 255, 255, 0.15);
            }

            .app-notice-close {
                color: rgba(255, 255, 255, 0.25);
            }

            .app-notice-close:hover {
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.55);
            }
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 8px;
            /* Uniform spacing between all elements */
            flex: 1;
            justify-content: flex-end;
        }

        /* Streak counter in nav-right on desktop (same as mobile) */
        .nav-right .streak-counter {
            order: 1;
            margin: 0;
        }

        /* FR and EN buttons - direct children of nav-right on desktop (flattened structure) */
        .nav-right .mode-flag-btn {
            order: 2;
            /* FR button */
            margin: 0;
        }

        .nav-right .mode-flag-btn[data-mode="english"] {
            order: 3;
            /* EN button */
        }

        /* Hide the mode-toggle container on desktop (buttons are now direct children) */
        .nav-right .mode-toggle {
            display: none;
        }

        /* Search - fourth in nav-right on desktop */
        .nav-right .header-search-btn {
            order: 4;
            margin: 0;
        }

        /* Profile - fifth in nav-right on desktop */
        .nav-right .profile-menu-container {
            order: 5;
            margin: 0;
        }

        @media (max-width: 768px) {
            .nav-container {
                padding: 12px 16px;
                /* iOS safe area support for in-app browsers (Google app, etc.) */
                padding-left: max(16px, env(safe-area-inset-left));
                padding-right: max(16px, env(safe-area-inset-right));
                flex-wrap: nowrap;
                align-items: center;
                gap: 0;
                /* Remove gap, use individual margins for control */
                overflow: visible;
                /* Changed from hidden - was clipping profile button on iPhone */
            }

            .nav-center {
                display: none;
                /* Hide center positioning on mobile */
            }

            /* Show mobile streak counter, hide desktop one */
            .streak-counter-mobile {
                display: flex !important;
            }

            .nav-center .streak-counter {
                display: none !important;
                /* Hide desktop streak counter on mobile */
            }

            .nav-left {
                flex: 0 0 auto;
                margin-right: auto;
                /* Push everything else to right */
            }

            .nav-right {
                flex: 0 0 auto;
                gap: 4px;
                /* Reduced by 50% for mobile - tighter spacing */
                display: flex;
                align-items: center;
            }

            .logo {
                font-size: 1.125rem !important;
                /* Mobile: 18px - proportional to desktop (24px → 18px = 75%) */
            }


            /* Streak counter - first in nav-right on mobile */
            .nav-right .streak-counter-mobile {
                order: 1;
                margin: 0;
            }

            /* FR/EN hidden on mobile — duplicate of profile dropdown "Read" toggle.
               Freed space will be used for Pro badge next to logo.
               Uses .nav-right prefix for higher specificity to override base
               .mode-flag-btn { display: flex } rule defined later in file. */
            .nav-right .mode-flag-btn {
                display: none;
            }

            /* Hide the mode-toggle container on mobile (buttons are now direct children) */
            .mode-toggle {
                display: none;
            }

            /* Search - fourth in nav-right on mobile */
            .header-search-btn {
                order: 4;
                margin: 0;
                flex-shrink: 0;
            }

            /* Profile - fifth in nav-right on mobile */
            .profile-menu-container {
                order: 5;
                margin: 0;
                margin-right: 2px;
                /* Small buffer to prevent clipping on in-app browsers (Google app) */
                flex-shrink: 0;
                /* Prevent profile button from being squeezed/clipped */
            }
        }

        /* ============================================
           LOGO
           ============================================ */
        .logo {
            order: 1;
            margin-right: auto;
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-size: var(--text-2xl);
            font-weight: 700;
            letter-spacing: 0.02em;
            color: var(--ink);
            text-decoration: none;
            display: flex;
            gap: var(--space-2);
            flex-shrink: 0;
            transition: opacity var(--duration-fast) ease;
        }

        .logo:hover {
            opacity: 0.8;
        }

        .logo-b {
            position: relative;
            display: inline-block;
        }


        /* ============================================
           MODE TOGGLE (Modernized)
           ============================================ */
        .mode-toggle {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-left: auto;
            margin-right: -8px;
            /* Pull closer to search bar (reduces gap from 24px to ~16px) */
        }

        .mode-switcher-flags {
            display: flex;
            gap: 2px;
            align-items: center;
        }

        .mode-flag-btn {
            /* Minimalist - text only, no background or border-radius */
            background: transparent;
            border: none;
            border-radius: 0;
            /* No border radius */
            padding: 8px 12px;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
            color: rgba(0, 0, 0, 0.5);
            cursor: pointer;
            transition: color 0.2s ease;
            position: relative;
            min-width: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            /* Remove all focus rings */
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }

        /* Active state - dark blue text only, no background */
        .mode-flag-btn.active {
            color: var(--french-blue);
            /* #2563eb - solid blue text */
            background: transparent !important;
            /* No background */
        }

        /* Unselected state - muted text */
        .mode-flag-btn:not(.active) {
            color: rgba(0, 0, 0, 0.4);
        }

        /* Hover on unselected - slight text darkening */
        .mode-flag-btn:hover:not(.active) {
            color: rgba(0, 0, 0, 0.6);
            background: transparent;
            /* No background on hover */
        }

        /* Hover on active - keep blue text, no background */
        .mode-flag-btn.active:hover {
            color: var(--french-blue);
            /* Keep blue text */
            background: transparent !important;
            /* No background on hover */
        }

        /* ============================================
           PROFILE MENU
           ============================================ */
        .streak-counter {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            /* Match mobile padding */
            background: transparent !important;
            /* Transparent background (same as mobile) */
            border-radius: 0;
            /* No border radius (same as mobile) */
            border: none !important;
            font-size: 13px;
            /* Match mobile font size */
            font-weight: 700;
            color: #ffffff;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: none !important;
            /* No shadow (same as mobile) */
            position: relative;
            overflow: hidden;
            margin: 0;
            line-height: 1.4;
            /* Match mobile line-height */
        }

        .streak-counter::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }

        .streak-counter:hover::before {
            left: 100%;
        }

        .streak-counter:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 16px rgba(255, 107, 53, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
        }

        .streak-counter:active {
            transform: translateY(0) scale(1);
        }

        .streak-icon {
            font-size: 20px;
            animation: flamePulse 2s ease-in-out infinite;
        }

        @keyframes flamePulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }
        }

        .streak-text {
            white-space: nowrap;
            letter-spacing: -0.01em;
        }

        .streak-days {
            color: #ff6b35 !important;
            /* Orange color (same as mobile) - default active state */
            font-weight: 800;
            transition: color 0.3s ease, opacity 0.3s ease;
        }

        /* Streak visual states (Duolingo-style) */
        .streak-counter.streak-active .streak-days {
            color: #ff6b35 !important;
            /* Orange - completed today */
            opacity: 1;
        }

        .streak-counter.streak-inactive .streak-days {
            color: rgba(0, 0, 0, 0.4) !important;
            /* Grey - not completed today (at risk) */
            opacity: 0.6;
            /* Slightly faded to show it's at risk */
        }

        .streak-counter.streak-broken .streak-days {
            color: rgba(0, 0, 0, 0.4) !important;
            /* Grey - no streak */
            opacity: 0.5;
        }

        .streak-counter.streak-inactive .streak-icon,
        .streak-counter.streak-broken .streak-icon {
            opacity: 0.5;
            /* Fade flame icon when inactive/broken */
        }

        /* Desktop streak icon size */
        .streak-icon {
            font-size: 16px;
            /* Match mobile icon size */
            transition: opacity 0.3s ease;
        }

        @media (max-width: 768px) {
            .streak-counter {
                font-size: 13px;
                padding: 6px 10px;
                /* Match mode-flag-btn padding exactly */
                gap: 6px;
                border-radius: 0;
                /* Remove border radius - square corners */
                height: auto;
                /* Let content determine height */
                line-height: 1.4;
                /* Match mode-flag-btn line-height */
                background: transparent !important;
                /* Remove gradient background */
                border: none !important;
                /* Remove border */
                box-shadow: none !important;
                /* Remove shadow */
            }

            .streak-icon {
                font-size: 16px;
                /* Slightly smaller to match button proportions */
                transition: opacity 0.3s ease;
            }

            .streak-days {
                color: #ff6b35 !important;
                /* Orange color for number - default active state */
                transition: color 0.3s ease, opacity 0.3s ease;
            }

            /* Streak visual states (mobile) */
            .streak-counter.streak-active .streak-days {
                color: #ff6b35 !important;
                /* Orange - completed today */
                opacity: 1;
            }

            .streak-counter.streak-inactive .streak-days {
                color: rgba(0, 0, 0, 0.4) !important;
                /* Grey - not completed today (at risk) */
                opacity: 0.6;
            }

            .streak-counter.streak-broken .streak-days {
                color: rgba(0, 0, 0, 0.4) !important;
                /* Grey - no streak */
                opacity: 0.5;
            }

            .streak-counter.streak-inactive .streak-icon,
            .streak-counter.streak-broken .streak-icon {
                opacity: 0.5;
                /* Fade flame icon when inactive/broken */
            }
        }

        /* Streak Calendar Modal */
        .streak-calendar-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(8px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeIn 0.3s ease;
        }

        .streak-calendar-modal.open {
            display: flex;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .streak-calendar-content {
            background: #ffffff;
            border-radius: 20px;
            padding: 32px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .streak-calendar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .streak-calendar-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--ink);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .streak-calendar-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: rgba(0, 0, 0, 0.5);
            padding: 4px;
            line-height: 1;
            transition: color 0.2s;
        }

        .streak-calendar-close:hover {
            color: var(--ink);
        }

        .streak-calendar-stats {
            display: flex;
            gap: 24px;
            margin-bottom: 24px;
            padding: 20px;
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(247, 147, 30, 0.1) 100%);
            border-radius: 16px;
        }

        .streak-stat {
            flex: 1;
        }

        .streak-stat-label {
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            margin-bottom: 4px;
            font-weight: 500;
        }

        .streak-stat-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--ink);
        }

        .streak-calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
            margin-bottom: 16px;
        }

        .streak-calendar-day-label {
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.5);
            padding: 8px 4px;
        }

        .streak-calendar-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }

        .streak-calendar-day.empty {
            background: rgba(0, 0, 0, 0.03);
            color: rgba(0, 0, 0, 0.3);
        }

        .streak-calendar-day.completed {
            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
            color: #ffffff;
            font-weight: 600;
        }

        .streak-calendar-day.today {
            border: 2px solid #ff6b35;
        }

        .streak-calendar-day:hover:not(.empty) {
            transform: scale(1.1);
        }

        .streak-calendar-legend {
            display: flex;
            gap: 16px;
            justify-content: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .streak-legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.7);
        }

        .streak-legend-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
        }

        .streak-legend-color.completed {
            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        }

        .streak-legend-color.empty {
            background: rgba(0, 0, 0, 0.03);
        }

        .streak-calendar-help {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            text-align: center;
        }

        .streak-help-title {
            font-size: 13px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.5);
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .streak-help-items {
            display: flex;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .streak-help-item {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.6);
            background: rgba(0, 0, 0, 0.04);
            padding: 6px 12px;
            border-radius: 20px;
        }

        @media (max-width: 768px) {
            .streak-calendar-content {
                padding: 24px;
                max-width: 95%;
            }

            .streak-calendar-title {
                font-size: 20px;
            }

            .streak-calendar-stats {
                flex-direction: column;
                gap: 16px;
            }
        }

        /* Streak Celebration Toast - Centered on Screen */
        .streak-celebration {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            opacity: 0;
            z-index: 10000;
            pointer-events: none;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            width: 100%;
            max-width: 400px;
        }

        .streak-celebration.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            pointer-events: auto;
        }

        .streak-celebration-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(4px);
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .streak-celebration-backdrop.show {
            opacity: 1;
            pointer-events: auto;
        }

        .streak-celebration-content {
            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
            border-radius: 20px;
            padding: 24px 28px 26px 28px;
            /* Slightly more bottom padding for visual balance */
            display: flex;
            align-items: center;
            gap: 18px;
            box-shadow: 0 12px 32px rgba(255, 107, 53, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.3);
            position: relative;
        }

        .streak-celebration-close {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #ffffff;
            font-size: 18px;
            line-height: 1;
            transition: all 0.2s ease;
            opacity: 0.8;
        }

        .streak-celebration-close:hover {
            background: rgba(255, 255, 255, 0.3);
            opacity: 1;
            transform: scale(1.1);
        }

        .streak-celebration-close:active {
            transform: scale(0.95);
        }

        .streak-celebration-icon {
            font-size: 32px;
            animation: celebrationPulse 1s ease-in-out infinite;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ========================================
           Feature Complete Celebration
           Delightful animation for Quiz/VocaMatch
           ======================================== */

        .feature-celebration-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .feature-celebration-backdrop.show {
            opacity: 1;
            pointer-events: auto;
        }

        .feature-celebration {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            z-index: 10001;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
        }

        .feature-celebration.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            pointer-events: auto;
        }

        .feature-celebration-card {
            background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(255, 255, 255, 0.85) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 32px 48px;
            text-align: center;
            box-shadow:
                0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 1);
            position: relative;
            overflow: hidden;
            min-width: 280px;
        }

        /* Shimmer effect on card */
        .feature-celebration-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.4),
                transparent
            );
            animation: celebrationShimmer 1.5s ease-in-out;
        }

        @keyframes celebrationShimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .feature-celebration-icon {
            width: 72px;
            height: 72px;
            margin: 0 auto 16px;
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                0 10px 30px rgba(37, 99, 235, 0.4),
                0 0 0 4px rgba(37, 99, 235, 0.1);
            animation: celebrationIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
        }

        .feature-celebration-icon svg {
            width: 36px;
            height: 36px;
            stroke: white;
            stroke-width: 3;
            fill: none;
        }

        .feature-celebration-icon .checkmark-path {
            stroke-dasharray: 50;
            stroke-dashoffset: 50;
            animation: checkmarkDraw 0.4s ease-out 0.3s forwards;
        }

        @keyframes celebrationIconPop {
            0% { transform: scale(0) rotate(-180deg); }
            100% { transform: scale(1) rotate(0deg); }
        }

        @keyframes checkmarkDraw {
            to { stroke-dashoffset: 0; }
        }

        .feature-celebration-title {
            font-size: 22px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 6px;
            animation: celebrationSlideUp 0.4s ease-out 0.2s both;
        }

        .feature-celebration-score {
            font-size: 15px;
            color: #64748b;
            font-weight: 500;
            animation: celebrationSlideUp 0.4s ease-out 0.3s both;
        }

        .feature-celebration-score strong {
            color: #2563eb;
            font-weight: 700;
        }

        @keyframes celebrationSlideUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Confetti particles */
        .confetti-container {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 10002;
            overflow: hidden;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            top: -10px;
            animation: confettiFall linear forwards;
        }

        .confetti:nth-child(odd) {
            background: #2563eb;
        }

        .confetti:nth-child(even) {
            background: #f97316;
        }

        .confetti:nth-child(3n) {
            background: #fbbf24;
            border-radius: 50%;
        }

        .confetti:nth-child(4n) {
            background: #10b981;
            transform: rotate(45deg);
        }

        .confetti:nth-child(5n) {
            background: #ec4899;
            width: 8px;
            height: 8px;
        }

        @keyframes confettiFall {
            0% {
                transform: translateY(0) rotate(0deg) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(720deg) scale(0.5);
                opacity: 0;
            }
        }

        /* VocaMatch specific - orange accent */
        .feature-celebration.vocamatch .feature-celebration-icon {
            background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
            box-shadow:
                0 10px 30px rgba(249, 115, 22, 0.4),
                0 0 0 4px rgba(249, 115, 22, 0.1);
        }

        .feature-celebration.vocamatch .feature-celebration-score strong {
            color: #f97316;
        }

        /* Dark mode */
        @media (prefers-color-scheme: dark) {
            .feature-celebration-card {
                background: linear-gradient(135deg,
                    rgba(30, 41, 59, 0.95) 0%,
                    rgba(15, 23, 42, 0.9) 100%);
                box-shadow:
                    0 25px 50px -12px rgba(0, 0, 0, 0.5),
                    0 0 0 1px rgba(255, 255, 255, 0.1),
                    inset 0 1px 0 rgba(255, 255, 255, 0.05);
            }

            .feature-celebration-title {
                color: #f1f5f9;
            }

            .feature-celebration-score {
                color: #94a3b8;
            }

        }

        /* Mobile adjustments */
        @media (max-width: 480px) {
            .feature-celebration-card {
                padding: 24px 32px;
                min-width: 240px;
                border-radius: 20px;
            }

            .feature-celebration-icon {
                width: 60px;
                height: 60px;
            }

            .feature-celebration-icon svg {
                width: 28px;
                height: 28px;
            }

            .feature-celebration-title {
                font-size: 18px;
            }

            .feature-celebration-score {
                font-size: 14px;
            }
        }

        /* Reduce motion */
        @media (prefers-reduced-motion: reduce) {
            .feature-celebration,
            .feature-celebration-backdrop,
            .feature-celebration-icon,
            .feature-celebration-title,
            .feature-celebration-score,
            .confetti {
                animation: none;
                transition: opacity 0.2s ease;
            }

            .feature-celebration.show {
                transform: translate(-50%, -50%) scale(1);
            }

            .feature-celebration-card::before {
                display: none;
            }

            .feature-celebration-icon .checkmark-path {
                stroke-dashoffset: 0;
            }
        }

        @keyframes buttonGentlePulse {

            0%,
            92% {
                transform: scale(1);
                border-color: rgba(0, 0, 0, 0.2);
                /* Black border in default state */
                box-shadow:
                    0 4px 12px rgba(0, 0, 0, 0.04),
                    /* Black shadow in default state */
                    0 8px 24px rgba(15, 23, 42, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.7);
            }

            94%,
            98% {
                transform: scale(1.03);
                border-color: rgba(0, 0, 0, 0.3);
                /* Black border during pulse */
                box-shadow:
                    0 4px 12px rgba(0, 0, 0, 0.06),
                    /* Black shadow during pulse */
                    0 8px 24px rgba(15, 23, 42, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.7);
            }

            100% {
                transform: scale(1);
                border-color: rgba(0, 0, 0, 0.2);
                /* Black border in default state */
                box-shadow:
                    0 4px 12px rgba(0, 0, 0, 0.04),
                    /* Black shadow in default state */
                    0 8px 24px rgba(15, 23, 42, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.7);
            }
        }

        @keyframes celebrationPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2) rotate(5deg);
            }
        }

        .streak-celebration-text {
            flex: 1;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: 1.4;
        }

        .streak-celebration-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 6px;
            /* Increased from 4px for better spacing */
            line-height: 1.2;
        }

        .streak-celebration-subtitle {
            font-size: 14px;
            opacity: 0.95;
            line-height: 1.3;
        }

        .streak-celebration-subtitle strong {
            font-weight: 800;
            font-size: 16px;
        }

        .streak-celebration-trigger {
            font-size: 12px;
            opacity: 0.85;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Context Milestone Celebration - Blue/Purple gradient for learning */
        .streak-celebration.context-milestone .streak-celebration-content {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .streak-celebration.context-milestone .streak-celebration-icon {
            font-size: 44px;
        }

        /* Streak Counter Update Animation */
        .streak-counter.streak-update-animation {
            animation: streakCounterPulse 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes streakCounterPulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.3);
            }

            100% {
                transform: scale(1);
            }
        }

        @media (max-width: 768px) {
            .streak-celebration {
                max-width: 85%;
            }

            .streak-celebration-content {
                padding: 20px 24px 22px 24px;
                /* Proportional: slightly more bottom padding on mobile too */
            }

            .streak-celebration-icon {
                font-size: 28px;
            }

            .streak-celebration-title {
                font-size: 16px;
                margin-bottom: 5px;
                /* Proportional spacing on mobile */
            }

            .streak-celebration-subtitle {
                font-size: 13px;
            }
        }

        /* ============================================
           PARTNER GIFT CELEBRATION MODAL
           Premium, spacious, luxurious design
           ============================================ */
        .partner-gift-overlay {
            position: fixed;
            inset: 0;
            background: rgba(8, 12, 21, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        .partner-gift-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .partner-gift-modal {
            background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
            border-radius: 28px;
            width: 100%;
            max-width: 440px;
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.04),
                0 4px 6px -1px rgba(0, 0, 0, 0.05),
                0 40px 80px -20px rgba(0, 0, 0, 0.25);
            transform: scale(0.92) translateY(24px);
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
        }

        .partner-gift-overlay.active .partner-gift-modal {
            transform: scale(1) translateY(0);
        }

        .partner-gift-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.04);
            border: none;
            font-size: 16px;
            color: var(--ink-muted);
            cursor: pointer;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease;
            z-index: 1;
        }

        .partner-gift-close:hover {
            background: rgba(0, 0, 0, 0.08);
            color: var(--ink);
            transform: scale(1.05);
        }

        .partner-gift-content {
            padding: 56px 48px 48px;
            text-align: center;
        }

        /* Success icon - elegant, minimal */
        .partner-gift-success {
            width: 72px;
            height: 72px;
            margin: 0 auto 32px;
            border-radius: 50%;
            background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
            border: 1px solid rgba(34, 197, 94, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            animation: partnerGiftFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            animation-delay: 0.1s;
        }

        .partner-gift-success svg {
            width: 32px;
            height: 32px;
            color: #16a34a;
            stroke-width: 2.5;
        }

        /* Staggered animations */
        .partner-gift-header,
        .partner-gift-body,
        .partner-gift-card,
        .partner-gift-footer,
        .partner-gift-action {
            opacity: 0;
            animation: partnerGiftFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .partner-gift-header { animation-delay: 0.15s; }
        .partner-gift-body { animation-delay: 0.2s; }
        .partner-gift-card { animation-delay: 0.25s; }
        .partner-gift-footer { animation-delay: 0.3s; }
        .partner-gift-action { animation-delay: 0.35s; }

        @keyframes partnerGiftFadeIn {
            from {
                opacity: 0;
                transform: translateY(16px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .partner-gift-header {
            margin-bottom: 36px;
        }

        .partner-gift-title {
            font-size: 26px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 12px 0;
            letter-spacing: -0.03em;
            line-height: 1.2;
        }

        .partner-gift-subtitle {
            font-size: 16px;
            color: var(--ink-muted);
            margin: 0;
            font-weight: 400;
            line-height: 1.5;
        }

        .partner-gift-org {
            color: var(--ink);
            font-weight: 600;
        }

        .partner-gift-body {
            margin: 0 0 28px 0;
        }

        .partner-gift-description {
            font-size: 15px;
            color: var(--ink-muted);
            line-height: 1.6;
            margin: 0;
        }

        /* Gift Card - refined, sophisticated */
        .partner-gift-card {
            background: linear-gradient(145deg, #fefce8 0%, #fef9c3 100%);
            border: 1px solid rgba(202, 138, 4, 0.12);
            border-radius: 20px;
            padding: 28px 24px;
            margin: 0 0 28px 0;
        }

        .partner-gift-card-highlight {
            font-size: 36px;
            font-weight: 700;
            color: #854d0e;
            letter-spacing: -0.03em;
            margin: 0 0 8px 0;
            line-height: 1;
        }

        .partner-gift-card-label {
            font-size: 15px;
            color: #a16207;
            font-weight: 500;
            margin: 0 0 16px 0;
            letter-spacing: 0.01em;
        }

        .partner-gift-card-validity {
            font-size: 14px;
            color: #92400e;
            margin: 0;
            opacity: 0.75;
        }

        /* Footer info - subtle, clear */
        .partner-gift-footer {
            margin: 0 0 32px 0;
            padding: 0;
        }

        .partner-gift-footer-text {
            font-size: 14px;
            color: var(--ink-muted);
            line-height: 1.7;
            margin: 0;
        }

        .partner-gift-discount {
            color: #16a34a;
            font-weight: 600;
        }

        /* CTA Button - premium, confident */
        .partner-gift-action {
            margin-top: 0;
        }

        .partner-gift-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 18px 32px;
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
            border: none;
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.25s ease;
            letter-spacing: -0.01em;
        }

        .partner-gift-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
        }

        .partner-gift-btn:active {
            transform: translateY(0) scale(0.99);
        }

        .partner-gift-btn svg {
            width: 18px;
            height: 18px;
            transition: transform 0.2s ease;
        }

        .partner-gift-btn:hover svg {
            transform: translateX(3px);
        }

        /* Mobile adjustments - still spacious */
        @media (max-width: 768px) {
            .partner-gift-overlay {
                padding: 20px;
                align-items: flex-end;
            }

            .partner-gift-modal {
                border-radius: 24px 24px 0 0;
                max-width: 100%;
            }

            .partner-gift-content {
                padding: 48px 32px 40px;
            }

            .partner-gift-success {
                width: 64px;
                height: 64px;
                margin-bottom: 28px;
            }

            .partner-gift-success svg {
                width: 28px;
                height: 28px;
            }

            .partner-gift-header {
                margin-bottom: 28px;
            }

            .partner-gift-title {
                font-size: 24px;
            }

            .partner-gift-card {
                padding: 24px 20px;
                border-radius: 16px;
                margin-bottom: 24px;
            }

            .partner-gift-card-highlight {
                font-size: 32px;
            }

            .partner-gift-footer {
                margin-bottom: 28px;
            }

            .partner-gift-btn {
                padding: 16px 28px;
                font-size: 15px;
                border-radius: 14px;
            }
        }

        /* Info toast styles for "Already Pro" and error messages */
        .partner-gift-toast {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%) translateY(-100px);
            opacity: 0;
            z-index: 10000;
            pointer-events: none;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            width: calc(100% - 32px);
            max-width: 480px;
        }

        .partner-gift-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }

        .partner-gift-toast-content {
            background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
            border-radius: 16px;
            padding: 24px 28px;
            padding-right: 48px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .partner-gift-toast-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.8);
            font-size: 18px;
            line-height: 1;
            transition: all 0.2s ease;
        }

        .partner-gift-toast-close:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }

        .partner-gift-toast-text {
            color: #ffffff;
        }

        .partner-gift-toast-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .partner-gift-toast-title::before {
            content: '✓';
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: #10b981;
            border-radius: 50%;
            font-size: 14px;
            flex-shrink: 0;
        }

        .partner-gift-toast-subtitle {
            font-size: 15px;
            opacity: 0.9;
            margin-left: 32px;
            line-height: 1.4;
        }

        @media (max-width: 768px) {
            .partner-gift-toast {
                top: 70px;
                width: calc(100% - 24px);
                max-width: none;
            }

            .partner-gift-toast-content {
                padding: 20px 24px;
                padding-right: 44px;
            }

            .partner-gift-toast-title {
                font-size: 16px;
            }

            .partner-gift-toast-subtitle {
                font-size: 14px;
            }
        }

        /* ============================================
           FREE TRIAL CELEBRATION MODAL
           Uses amber palette (#FEF3C7, #F59E0B)
           Separate from partner gift modal
           ============================================ */
        .free-trial-overlay {
            position: fixed;
            inset: 0;
            background: rgba(8, 12, 21, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        .free-trial-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .free-trial-modal {
            background: #ffffff;
            border-radius: 28px;
            width: 100%;
            max-width: 420px;
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.04),
                0 4px 6px -1px rgba(0, 0, 0, 0.05),
                0 40px 80px -20px rgba(0, 0, 0, 0.25);
            transform: scale(0.92) translateY(24px);
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
        }

        .free-trial-overlay.active .free-trial-modal {
            transform: scale(1) translateY(0);
        }

        .free-trial-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.04);
            border: none;
            font-size: 16px;
            color: var(--ink-muted);
            cursor: pointer;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease;
            z-index: 1;
        }

        .free-trial-close:hover {
            background: rgba(0, 0, 0, 0.08);
            color: var(--ink);
            transform: scale(1.05);
        }

        .free-trial-content {
            padding: 48px 36px 40px;
            text-align: center;
        }

        /* Dark gradient checkmark circle (matching iOS) */
        .free-trial-success {
            width: 72px;
            height: 72px;
            margin: 0 auto 24px;
            border-radius: 50%;
            background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            animation: freeTrialFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            animation-delay: 0.1s;
        }

        .free-trial-success svg {
            width: 32px;
            height: 32px;
            color: #ffffff;
            stroke-width: 2.5;
        }

        .free-trial-header,
        .free-trial-pill,
        .free-trial-card,
        .free-trial-footer,
        .free-trial-action {
            opacity: 0;
            animation: freeTrialFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .free-trial-header { animation-delay: 0.3s; }
        .free-trial-pill { animation-delay: 0.5s; }
        .free-trial-card { animation-delay: 0.8s; }
        .free-trial-footer { animation-delay: 1.2s; }
        .free-trial-action { animation-delay: 1.4s; }

        @keyframes freeTrialFadeIn {
            from {
                opacity: 0;
                transform: translateY(16px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .free-trial-header {
            margin-bottom: 12px;
        }

        .free-trial-title {
            font-size: 26px;
            font-weight: 700;
            color: #1A1A1A;
            margin: 0;
            letter-spacing: -0.5px;
            line-height: 1.2;
        }

        /* Green pill — "15 days of Pro, on us" */
        .free-trial-pill {
            display: inline-block;
            background: rgba(34, 197, 94, 0.10);
            border: 1px solid rgba(0, 0, 0, 0.10);
            border-radius: 999px;
            padding: 7px 14px;
            font-size: 15px;
            font-weight: 500;
            color: #1A1A1A;
            letter-spacing: 0.1px;
            margin-bottom: 20px;
        }

        /* Gift card — white with border, feature list */
        .free-trial-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-radius: 16px;
            padding: 18px 20px;
            margin: 0 0 14px 0;
            text-align: left;
        }

        .free-trial-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .free-trial-card-plan {
            font-size: 20px;
            font-weight: 800;
            color: #1A1A1A;
            letter-spacing: 0.5px;
        }

        .free-trial-card-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            height: 28px;
            border-radius: 999px;
            background: rgba(34, 197, 94, 0.10);
            font-size: 12px;
            font-weight: 700;
            color: #22C55E;
            letter-spacing: 0.5px;
        }

        .free-trial-card-divider {
            height: 1px;
            background: rgba(0, 0, 0, 0.06);
            margin: 14px 0;
        }

        .free-trial-feature-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .free-trial-feature-row {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: #1A1A1A;
            letter-spacing: 0.1px;
        }

        .free-trial-feature-check {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        .free-trial-card-expiry {
            font-size: 13px;
            color: #22C55E;
            font-weight: 600;
            margin: 14px 0 0 0;
            letter-spacing: 0.1px;
        }

        .free-trial-footer {
            margin: 0 0 20px 0;
            padding: 0;
        }

        .free-trial-footer-text {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.35);
            line-height: 1.5;
            margin: 0;
        }

        .free-trial-action {
            margin-top: 0;
        }

        /* Dark rounded button — matching iOS */
        .free-trial-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 16px 32px;
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            background: #1A1A1A;
            border: none;
            border-radius: 9999px;
            cursor: pointer;
            transition: all 0.25s ease;
            letter-spacing: -0.2px;
        }

        .free-trial-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
            background: #2a2a2a;
        }

        .free-trial-btn:active {
            transform: translateY(0) scale(0.99);
        }

        @media (max-width: 768px) {
            .free-trial-overlay {
                padding: 20px;
                align-items: flex-end;
            }

            .free-trial-modal {
                border-radius: 24px 24px 0 0;
                max-width: 100%;
            }

            .free-trial-content {
                padding: 40px 28px 32px;
            }

            .free-trial-success {
                width: 64px;
                height: 64px;
                margin-bottom: 20px;
            }

            .free-trial-success svg {
                width: 28px;
                height: 28px;
            }

            .free-trial-title {
                font-size: 24px;
            }

            .free-trial-card {
                padding: 16px 18px;
            }

            .free-trial-btn {
                padding: 14px 28px;
                font-size: 15px;
            }
        }

        @media (prefers-color-scheme: dark) {
            .free-trial-modal {
                background: #1c1c1e;
            }

            .free-trial-close {
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.5);
            }

            .free-trial-close:hover {
                background: rgba(255, 255, 255, 0.14);
                color: rgba(255, 255, 255, 0.8);
            }

            .free-trial-title {
                color: #f5f5f7;
            }

            .free-trial-pill {
                background: rgba(34, 197, 94, 0.15);
                border-color: rgba(255, 255, 255, 0.08);
                color: #f5f5f7;
            }

            .free-trial-card {
                background: rgba(255, 255, 255, 0.06);
                border-color: rgba(255, 255, 255, 0.10);
            }

            .free-trial-card-plan {
                color: #f5f5f7;
            }

            .free-trial-feature-row {
                color: rgba(255, 255, 255, 0.85);
            }

            .free-trial-footer-text {
                color: rgba(255, 255, 255, 0.30);
            }

            .free-trial-btn {
                background: #f5f5f7;
                color: #1A1A1A;
            }

            .free-trial-btn:hover {
                background: #ffffff;
                box-shadow: 0 8px 24px -8px rgba(255, 255, 255, 0.15);
            }
        }

        /* Gift Expired Notification Banner */
        .gift-expired-banner {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            border: 1px solid rgba(217, 119, 6, 0.2);
            border-radius: 16px;
            margin: 16px 24px 24px;
            padding: 0;
            opacity: 0;
            transform: translateY(-8px);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .gift-expired-banner.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .gift-expired-banner.dismissing {
            opacity: 0;
            transform: translateY(-8px);
        }

        .gift-expired-content {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 20px 24px;
        }

        .gift-expired-icon {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            background: rgba(217, 119, 6, 0.15);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gift-expired-icon svg {
            width: 20px;
            height: 20px;
            color: #b45309;
        }

        .gift-expired-text {
            flex: 1;
            min-width: 0;
        }

        .gift-expired-title {
            font-size: 15px;
            font-weight: 600;
            color: #92400e;
            margin: 0 0 4px 0;
            line-height: 1.3;
        }

        .gift-expired-subtitle {
            font-size: 14px;
            color: #a16207;
            margin: 0;
            line-height: 1.5;
        }

        .gift-expired-link {
            color: #92400e;
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .gift-expired-link:hover {
            color: #78350f;
        }

        .gift-expired-dismiss {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            background: rgba(217, 119, 6, 0.1);
            border: none;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: 4px;
        }

        .gift-expired-dismiss svg {
            width: 16px;
            height: 16px;
            color: #b45309;
        }

        .gift-expired-dismiss:hover {
            background: rgba(217, 119, 6, 0.2);
        }

        @media (max-width: 768px) {
            .gift-expired-banner {
                margin: 12px 16px 20px;
                border-radius: 14px;
            }

            .gift-expired-content {
                padding: 16px 20px;
                gap: 12px;
            }

            .gift-expired-icon {
                width: 36px;
                height: 36px;
            }

            .gift-expired-icon svg {
                width: 18px;
                height: 18px;
            }

            .gift-expired-title {
                font-size: 14px;
            }

            .gift-expired-subtitle {
                font-size: 13px;
            }
        }

        /* Gift subscription modal (for gifted users clicking Manage Subscription) */
        .gift-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            animation: giftModalFadeIn 0.2s ease;
        }

        @keyframes giftModalFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .gift-modal-content {
            background: #fff;
            border-radius: 20px;
            padding: 36px 32px 28px;
            max-width: 340px;
            width: 90%;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            animation: giftModalSlideUp 0.3s ease;
        }

        @keyframes giftModalSlideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .gift-modal-title {
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
            margin: 0 0 20px 0;
            letter-spacing: -0.01em;
        }

        .gift-modal-body {
            margin-bottom: 24px;
        }

        .gift-modal-text {
            font-size: 15px;
            color: #1a1a1a;
            margin: 0 0 6px 0;
            line-height: 1.5;
        }

        .gift-modal-text strong {
            font-weight: 600;
        }

        .gift-modal-days {
            font-size: 14px;
            color: #059669;
            font-weight: 500;
            margin: 0;
        }

        .gift-modal-offer {
            margin-bottom: 20px;
        }

        .gift-modal-offer-text {
            font-size: 14px;
            font-weight: 500;
            color: #6b7280;
        }

        .gift-modal-upgrade-btn {
            display: block;
            width: 100%;
            background: #1a1a1a;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 14px 24px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            transition: background 0.2s;
            margin-bottom: 16px;
        }

        .gift-modal-upgrade-btn:hover {
            background: #333;
        }

        .gift-modal-dismiss {
            background: none;
            border: none;
            color: #9ca3af;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            padding: 8px 16px;
            transition: color 0.2s;
        }

        .gift-modal-dismiss:hover {
            color: #6b7280;
        }

        @media (max-width: 768px) {
            .gift-modal-content {
                padding: 32px 24px 24px;
                max-width: none;
                width: calc(100% - 32px);
            }

            .gift-modal-title {
                font-size: 18px;
            }

            .gift-modal-text {
                font-size: 14px;
            }
        }

        .profile-menu-container {
            position: relative;
            margin-left: -12px;
            /* Pull closer to search bar to compensate for profile button padding */
        }

        .profile-btn {
            background: transparent;
            border: none;
            border-radius: 8px;
            padding: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(0, 0, 0, 0.6);
            transition: all 0.2s ease;
            outline: none;
        }

        .profile-btn:hover {
            background: rgba(0, 0, 0, 0.05);
            color: rgba(0, 0, 0, 0.8);
        }

        .profile-btn[aria-expanded="true"] {
            background: rgba(0, 0, 0, 0.08);
            color: rgba(0, 0, 0, 0.9);
        }

        .profile-icon {
            width: 20px;
            height: 20px;
        }

        .profile-dropdown {
            position: fixed;
            z-index: 9999;
            /* Default position - JS will set top/right dynamically */
            top: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 16px;
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.08),
                0 0 20px rgba(10, 102, 255, 0.1);
            padding: 12px;
            min-width: 200px;
            /* Internal scrolling when content is taller than viewport.
               Without this, touch drags inside the dropdown fall through
               to the page behind, which then triggers close-on-scroll. */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            opacity: 0;
            pointer-events: none;
            transform: scale(0.98) translateY(-6px);
            transform-origin: top right;
            transition:
                opacity 150ms ease,
                transform 150ms ease;
        }

        .profile-dropdown.visible {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1) translateY(0);
        }

        .profile-dropdown-header {
            padding: 16px 16px 12px 16px;
            /* More generous top padding for premium feel */
        }

        .profile-info {
            display: flex;
            flex-direction: column;
            gap: 6px;
            /* Increased from 4px for better breathing room */
            align-items: flex-start;
        }

        .profile-name {
            font-size: 1.0625rem;
            /* 17px - largest, most prominent element */
            font-weight: 600;
            color: var(--ink);
            line-height: 1.4;
            letter-spacing: -0.01em;
        }

        .profile-plan {
            font-size: 0.8125rem;
            /* 13px - secondary info, smaller than name */
            font-weight: 400;
            color: var(--ink-muted);
            text-transform: capitalize;
            line-height: 1.5;
        }

        /* Gift progress widget in profile dropdown */
        .profile-gift-widget {
            padding: 14px 16px;
            border-top: 1px solid var(--border-light, rgba(15, 23, 42, 0.06));
        }

        .profile-gift-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .profile-gift-title {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        .profile-gift-days {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        .profile-gift-bar-bg {
            height: 5px;
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 8px;
            background: rgba(0, 0, 0, 0.05);
        }

        .profile-gift-bar-fill {
            height: 5px;
            border-radius: 3px;
            transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .profile-gift-copy {
            font-size: 12px;
            line-height: 1.4;
            color: var(--ink-muted);
            margin: 0 0 10px;
        }

        .profile-gift-upgrade {
            display: block;
            width: 100%;
            padding: 10px 0;
            background: var(--french-blue);
            color: #ffffff;
            font-size: 13px;
            font-weight: 600;
            border: none;
            border-radius: 999px;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            transition: opacity 0.15s ease;
        }

        .profile-gift-upgrade:hover {
            opacity: 0.9;
        }

        @media (prefers-color-scheme: dark) {
            .profile-gift-widget {
                border-top-color: rgba(255, 255, 255, 0.06);
            }

            .profile-gift-bar-bg {
                background: rgba(255, 255, 255, 0.06);
            }
        }

        .profile-email {
            font-size: 0.8125rem;
            /* 13px - matches plan, secondary info */
            font-weight: 400;
            color: var(--ink-muted);
            padding: 12px 16px 8px 16px;
            line-height: 1.5;
        }

        .upgrade-to-pro-badge {
            display: block;
            margin-top: 10px;
            padding: 12px 0;
            margin-bottom: -4px;
            border-top: 1px solid rgba(15, 23, 42, 0.08);
            font-size: 0.875rem;
            /* 14px - CTA, slightly larger than plan */
            font-weight: 600;
            color: #16a34a;
            text-decoration: none;
            transition: color 200ms ease;
            line-height: 1.5;
            width: 100%;
        }

        .upgrade-to-pro-badge:hover {
            color: #15803d;
        }

        /* ── Conversion mini-panel (dropdown) ──────────────── */
        .profile-convert-card {
            padding: 14px 16px 16px;
            border-top: 1px solid rgba(15, 23, 42, 0.06);
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
            margin: 4px 0;
        }

        .pcc-stats {
            font-size: 12px;
            font-weight: 500;
            color: var(--ink-muted);
            text-align: center;
            margin-bottom: 12px;
            letter-spacing: -0.01em;
        }

        .pcc-stats strong {
            color: var(--french-blue, #2563eb);
            font-weight: 700;
        }

        .pcc-plans {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 10px;
        }

        .pcc-plan {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 12px 6px 10px;
            background: rgba(0, 0, 0, 0.025);
            border: 1.25px solid rgba(0, 0, 0, 0.06);
            border-radius: 12px;
            text-decoration: none;
            color: var(--ink-muted);
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        }

        .pcc-plan:hover {
            background: rgba(0, 0, 0, 0.04);
            transform: translateY(-1px);
        }

        .pcc-plan.active {
            background: #ffffff;
            border-color: var(--french-blue, #2563eb);
            color: var(--ink);
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
        }

        .pcc-plan-badge {
            position: absolute;
            top: -9px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--french-blue, #2563eb);
            color: #ffffff;
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.3px;
            padding: 3px 7px;
            border-radius: 999px;
            white-space: nowrap;
        }

        .pcc-plan-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-muted);
            letter-spacing: 0.2px;
        }

        .pcc-plan.active .pcc-plan-label {
            color: var(--ink);
        }

        .pcc-plan-price {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -0.5px;
            color: inherit;
            line-height: 1.1;
        }

        .pcc-plan-unit {
            font-size: 11px;
            font-weight: 500;
            color: var(--ink-faint, #9ca3af);
            margin-left: 1px;
        }

        .pcc-anchor {
            font-size: 11.5px;
            font-weight: 600;
            font-style: italic;
            color: var(--ink-faint, #9ca3af);
            text-align: center;
            margin: 10px 0 12px;
            letter-spacing: -0.01em;
        }

        .pcc-cta {
            display: block;
            width: 100%;
            padding: 11px 0;
            background: var(--french-blue, #2563eb);
            color: #ffffff;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.2px;
            text-align: center;
            text-decoration: none;
            border-radius: 999px;
            box-shadow: 0 3px 10px rgba(37, 99, 235, 0.22);
            transition: opacity 0.15s ease, transform 0.1s ease;
        }

        .pcc-cta:hover { opacity: 0.92; }
        .pcc-cta:active { transform: scale(0.99); opacity: 0.88; }

        @media (prefers-color-scheme: dark) {
            .profile-convert-card {
                border-top-color: rgba(255, 255, 255, 0.06);
                border-bottom-color: rgba(255, 255, 255, 0.06);
            }
            .pcc-plan {
                background: rgba(255, 255, 255, 0.04);
                border-color: rgba(255, 255, 255, 0.08);
            }
            .pcc-plan:hover {
                background: rgba(255, 255, 255, 0.06);
            }
            .pcc-plan.active {
                background: #ffffff;
                border-color: var(--french-blue, #2563eb);
            }
            .pcc-plan.active .pcc-plan-label { color: #111; }
            .pcc-plan.active .pcc-plan-price { color: #111; }
            .pcc-plan.active .pcc-plan-unit { color: #6b7280; }
        }

        /* Dropdown wider to accommodate conversion card */
        .profile-dropdown:has(.profile-convert-card:not([hidden])) {
            min-width: 280px;
        }

        .profile-language {
            font-size: 0.8125rem;
            font-weight: 400;
            color: var(--ink-muted);
            text-transform: capitalize;
            margin-top: 2px;
        }

        .profile-dropdown-divider {
            height: 1px;
            background: rgba(15, 23, 42, 0.08);
            /* Lighter divider for more subtle separation */
            margin: 0 16px;
            /* Match section padding for alignment */
        }
        
        /* First divider after header - no top margin */
        .profile-dropdown-header + .profile-dropdown-divider {
            margin-top: 0;
        }

        /* Divider before email - tighter spacing */
        .profile-email + .profile-dropdown-divider,
        .profile-dropdown-divider + .profile-email {
            margin-top: 0;
            margin-bottom: 0;
        }

        .profile-dropdown-item {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border: none;
            background: transparent;
            border-radius: 14px;
            font-family: inherit;
            font-size: 0.875rem;
            /* 14px - action items, readable but not competing with labels */
            font-weight: 400;
            color: var(--ink);
            cursor: pointer;
            transition: background-color 200ms ease;
            text-align: left;
            line-height: 1.5;
        }

        /* Manage Subscription - premium styling */
        #manage-subscription-btn {
            font-size: 0.8125rem;
            /* 13px - matches plan/email, subtle */
            font-weight: 400;
            color: var(--ink-muted);
            line-height: 1.5;
        }

        #manage-subscription-btn span {
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            /* Inherit from button to match profile-plan exactly */
        }

        #manage-subscription-btn:hover {
            color: var(--ink-muted);
            /* Keep muted color on hover (subtle) */
        }

        /* Sign out button - subtle but clear */
        #logout-btn {
            font-size: 0.875rem;
            /* 14px - action item, clear but not too prominent */
            font-weight: 400;
            color: var(--ink-muted);
            padding: 12px 16px 16px 16px;
            width: 100%;
            margin-top: 0;
        }

        #logout-btn:hover {
            color: var(--ink);
            background-color: rgba(37, 99, 235, 0.08);
            /* Subtle hover background */
        }

        .profile-dropdown-item:hover {
            background-color: rgba(37, 99, 235, 0.08);
        }

        .profile-dropdown-item svg {
            flex-shrink: 0;
            color: var(--ink-muted);
        }

        .profile-dropdown-item:hover svg {
            color: var(--ink);
        }

        .profile-dropdown-section {
            padding: 14px 16px;
            /* Increased from 12px for more premium spacing */
        }

        .profile-dropdown-label {
            font-size: 0.8125rem;
            /* 13px - matches profile-plan for subtle, cohesive look */
            font-weight: 400;
            color: var(--ink-muted);
            margin-bottom: 10px;
            line-height: 1.5;
        }

        /* Show images ON/OFF toggle - uses same styling as language toggles below */

        /* Profile dropdown actions section */
        .profile-dropdown-actions {
            padding: 8px 0;
        }

        .profile-action-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            color: var(--ink);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.15s ease;
            border: none;
            background: transparent;
            width: 100%;
            text-align: left;
            font-family: inherit;
        }

        .profile-action-item:hover {
            background-color: rgba(37, 99, 235, 0.04);
        }

        .profile-action-chevron {
            width: 16px;
            height: 16px;
            color: var(--ink-muted);
            opacity: 0.5;
            flex-shrink: 0;
        }

        /* Profile account section (email + sign out) */
        .profile-account-section {
            padding: 12px 16px 16px;
        }

        .profile-email {
            font-size: 12px;
            color: var(--ink-muted);
            margin-bottom: 12px;
            opacity: 0.7;
        }

        .profile-signout-btn {
            display: block;
            width: 100%;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink-muted);
            background: rgba(0, 0, 0, 0.04);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.15s ease;
        }

        .profile-signout-btn:hover {
            background: rgba(0, 0, 0, 0.08);
            color: var(--ink);
        }

        .profile-legal-links {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
        }

        .profile-legal-links a,
        .profile-legal-links .profile-legal-delete {
            font-size: 11px;
            color: var(--ink-muted);
            text-decoration: none;
            opacity: 0.5;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            font-family: inherit;
        }

        .profile-legal-links a:hover,
        .profile-legal-links .profile-legal-delete:hover {
            opacity: 0.8;
            text-decoration: underline;
        }

        .profile-legal-dot {
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background: var(--ink-muted);
            opacity: 0.3;
        }

        /* Profile dropdown language toggles - use smartphone toggle design */
        .read-lang-buttons.bf-tier-toggle,
        .explanation-lang-buttons.bf-tier-toggle,
        .show-images-buttons.bf-tier-toggle {
            display: inline-flex;
            gap: 2px;
            background: rgba(240, 240, 240, 0.8);
            border-radius: 14px;
            padding: 4px;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            width: fit-content;
            flex-shrink: 0;
            box-sizing: border-box;
        }

        .read-lang-btn.bf-tier-tab,
        .explanation-lang-btn.bf-tier-tab,
        .show-images-btn.bf-tier-tab {
            padding: 4px 5px;
            font-size: 11px;
            margin: 0;
            border-radius: 8px;
            background: transparent;
            border: none;
            font-family: inherit;
            font-weight: 600;
            color: var(--ink-muted);
            cursor: pointer;
            white-space: nowrap;
            box-sizing: border-box;
            transition: all 0.15s ease;
        }

        .read-lang-btn.bf-tier-tab:hover,
        .explanation-lang-btn.bf-tier-tab:hover,
        .french-level-btn.bf-tier-tab:hover,
        .show-images-btn.bf-tier-tab:hover {
            background-color: rgba(37, 99, 235, 0.05);
        }

        /* Active/Selected state - match toggle design (must come after hover for proper override) */
        .read-lang-btn.bf-tier-tab.selected,
        .read-lang-btn.bf-tier-tab.active,
        .explanation-lang-btn.bf-tier-tab.selected,
        .explanation-lang-btn.bf-tier-tab.active,
        .french-level-btn.bf-tier-tab.selected,
        .french-level-btn.bf-tier-tab.active,
        .show-images-btn.bf-tier-tab.selected,
        .show-images-btn.bf-tier-tab.active {
            background: #fff !important;
            color: var(--french-blue) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        }

        /* Override hover state for active buttons */
        .read-lang-btn.bf-tier-tab.selected:hover,
        .read-lang-btn.bf-tier-tab.active:hover,
        .explanation-lang-btn.bf-tier-tab.selected:hover,
        .explanation-lang-btn.bf-tier-tab.active:hover,
        .french-level-btn.bf-tier-tab.selected:hover,
        .french-level-btn.bf-tier-tab.active:hover,
        .show-images-btn.bf-tier-tab.selected:hover,
        .show-images-btn.bf-tier-tab.active:hover {
            background: #fff !important;
            color: var(--french-blue) !important;
        }

        /* French level toggle - same styling as language toggles */
        .french-level-buttons.bf-tier-toggle {
            display: inline-flex;
            gap: 2px;
            background: rgba(240, 240, 240, 0.8);
            border-radius: 14px;
            padding: 4px;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            width: fit-content;
            flex-shrink: 0;
            box-sizing: border-box;
        }

        .french-level-btn.bf-tier-tab {
            padding: 4px 5px;
            font-size: 11px;
            margin: 0;
            border-radius: 8px;
            background: transparent;
            border: none;
            font-family: inherit;
            font-weight: 600;
            color: var(--ink-muted);
            cursor: pointer;
            white-space: nowrap;
            box-sizing: border-box;
            transition: all 0.15s ease;
        }


        @media (max-width: 768px) {
            /* Profile menu container spacing handled by nav-right gap */

            .profile-btn {
                padding: 6px 10px;
                /* Match header-search-btn and mode-flag-btn padding for visual consistency */
            }

            .profile-icon {
                width: 18px;
                height: 18px;
            }

            .profile-dropdown {
                min-width: 180px;
                z-index: 9999;
            }

            /* Remove all focus rings - text color change is enough for visual feedback */
            .mode-flag-btn:focus {
                outline: none !important;
                box-shadow: none !important;
            }

            .mode-flag-btn:focus-visible {
                outline: none !important;
                box-shadow: none !important;
            }

            .mode-flag-btn:active {
                outline: none !important;
                box-shadow: none !important;
            }

            .mode-flag-btn {
                min-width: 32px;
                padding: 6px 10px;
                font-size: 13px;
                line-height: 1.4;
            }

            .mode-toggle {
                margin-left: auto;
                /* Push language buttons and everything after them to the right */
            }
        }

        /* ============================================
           CATEGORY FILTER BAR
           ============================================ */
        .category-filter-bar {
            position: -webkit-sticky;
            position: sticky;
            top: 64px;
            /* Sticks below navbar */
            left: 0;
            right: 0;
            z-index: 90;
            /* Below navbar (z-index: 100) */
            background: #fafaf8;
            /* Matches body - category pills float on warm surface */
            border: none;
            padding: 30px 0 16px 0;
            /* 30px top creates breathing room from navbar */
            margin-top: 0;
            width: 100%;
            box-shadow: none;
        }

        .category-filter-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            flex-direction: row;
            gap: 0;
        }

        /* Category Buttons Container */
        .category-buttons-container {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE/Edge */
            padding-bottom: 4px;
        }

        .category-buttons-container::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari */
        }

        .category-btn {
            padding: 8px 16px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            background: white;
            color: var(--ink);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            /* OPTIMIZED: Faster transitions (80ms), only animate specific properties */
            transition: background 0.08s ease, border-color 0.08s ease, color 0.08s ease, transform 0.05s ease, box-shadow 0.08s ease;
            white-space: nowrap;
            flex-shrink: 0;
            -webkit-tap-highlight-color: transparent;
            /* Remove mobile tap highlight */
            touch-action: manipulation;
            /* Optimize touch response - removes 300ms delay */
            /* GPU acceleration for smoother transforms */
            will-change: transform, background-color;
            /* Prevent text selection on rapid taps */
            -webkit-user-select: none;
            user-select: none;
        }

        /* DESKTOP ONLY: Hover state (disabled on touch devices via media query) */
        @media (hover: hover) and (pointer: fine) {
            .category-btn:hover:not(.active) {
                background: rgba(var(--french-blue-rgb), var(--blue-opacity-light));
                border-color: var(--french-blue);
            }
        }

        .category-btn:active,
        .category-btn.pressing {
            transform: scale(0.96);
            /* Instant press feedback - more noticeable */
        }

        .category-btn.active {
            background: var(--french-blue);
            color: white;
            border-color: var(--french-blue);
            box-shadow: 0 2px 4px rgba(var(--french-blue-rgb), 0.2);
        }

        /* ============================================
           WEEK SELECTOR (for Weekly archive)
           ============================================ */
        .week-selector-container {
            display: flex;
            align-items: center;
            margin-left: 12px;
            flex-shrink: 0;
        }

        .week-selector {
            padding: 8px 32px 8px 14px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            background: white;
            color: var(--ink);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 10px;
            font-family: inherit;
        }

        .week-selector:hover {
            border-color: var(--french-blue);
        }

        .week-selector:focus {
            outline: none;
            border-color: var(--french-blue);
            box-shadow: 0 0 0 2px rgba(var(--french-blue-rgb), 0.15);
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .category-filter-bar {
                top: 56px;
                /* Below mobile navbar (smaller height on mobile: 12px + content + 12px) */
                padding: 8px 0;
            }

            .category-filter-container {
                padding: 0 16px;
                gap: 10px;
            }

            .category-btn {
                padding: 6px 12px;
                font-size: 13px;
            }

            .category-buttons-container {
                gap: 6px;
            }

            .week-selector-container {
                margin-left: 8px;
            }

            .week-selector {
                padding: 6px 28px 6px 12px;
                font-size: 13px;
            }
        }

        /* ============================================
           MAIN CONTENT
           ============================================ */
        .main-content {
            max-width: 1024px;
            margin: 0 auto;
            padding: 40px 24px;
            /* Add top padding to account for fixed navbar */
            padding-top: 100px;
        }

        @media (max-width: 768px) {
            .main-content {
                padding: 16px 16px;
                /* Tight iOS-style spacing: navbar(54px fixed) + cat bar(46px sticky in flow).
                   padding-top = cat bar flow height (46) + small gap (10) = 56px.
                   Keeps article starting ~10px below sticky category bar. */
                padding-top: 56px;
            }

            /* Match main-content mobile padding for skeleton */
            .loading {
                padding: 15px 16px !important;
                /* Reduced top padding for skeleton on mobile */
            }
        }

        .content-container {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        /* ============================================
           SEARCH STATES
           ============================================ */
        .loading-state,
        .no-results {
            text-align: center;
            padding: 60px 24px;
            color: var(--ink-muted);
            font-size: 16px;
            line-height: 1.6;
        }

        .loading-state {
            color: var(--french-blue);
        }

        .no-results {
            color: var(--ink-muted);
        }

        /* ============================================
           ARTICLE CARDS (Glass Morphism)
           ============================================ */
        .articles-list {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .article-card {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 40px 32px 35px 32px;
            /* top, right, bottom, left - DO NOT CHANGE */
            box-shadow: var(--shadow-md);
            position: relative;
            overflow: hidden;
            /* Initial state for scroll animation */
            opacity: 0;
            transform: translateY(20px);
            transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out),
                padding-top 0.3s ease;
            will-change: transform, opacity;
        }

        /* Visible state after scroll animation */
        .article-card-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Respect user's reduced motion preference */
        @media (prefers-reduced-motion: reduce) {
            .article-card {
                opacity: 1;
                transform: none;
                transition: box-shadow var(--duration-normal) var(--ease-out),
                    border-color var(--duration-normal) var(--ease-out),
                    padding-top 0.3s ease;
            }
        }

        /* Reduce top padding when VocaMatch or Breakdown is active (Quiz keeps original padding) */
        .article-card:has(.bf-match-game-link.open),
        .article-card:has(.bf-breakdown-link.open) {
            padding-top: 24px;
            /* Reduced from 40px when games are active */
        }

        .article-card-visible:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-xl), 0 0 0 1px rgba(37, 99, 235, 0.08);
            /* Premium shadow with blue glow */
            border-color: rgba(37, 99, 235, 0.2);
        }

        .article-card>* {
            position: relative;
            z-index: 1;
        }

        /* ============================================
           ARTICLE FEATURED IMAGE
           Premium thumbnail design:
           - Desktop: floats right, text wraps around
           - Mobile: full-width banner at top (unchanged)
           ============================================ */

        /* Desktop: Premium floating thumbnail on the right */
        .article-image-container {
            float: right;
            width: 240px;
            margin: 16px 0 20px 28px;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            /* Premium shadow for depth */
            box-shadow:
                0 2px 8px rgba(0, 0, 0, 0.08),
                0 4px 16px rgba(0, 0, 0, 0.04);
            /* Subtle border for definition */
            border: 1px solid rgba(0, 0, 0, 0.04);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .article-image-container:hover {
            transform: scale(1.02);
            box-shadow:
                0 4px 12px rgba(0, 0, 0, 0.12),
                0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .article-image {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            display: block;
            background-color: var(--surface);
        }

        /* Clear float after summary to prevent layout issues with game buttons */
        .summary-text::after {
            content: "";
            display: table;
            clear: both;
        }

        /* Hide image when games are open (keeps article compact during gameplay) */
        .article-card:has(.bf-breakdown-link.open) .article-image-container,
        .article-card:has(.bf-match-game-link.open) .article-image-container {
            display: none;
        }

        /* Reduce visual prominence when Quiz is open */
        .article-card:has(.article-quiz.open) .article-image-container {
            opacity: 0.4;
            transition: opacity var(--duration-normal) var(--ease-out);
        }

        /* ============================================
           MOBILE: Full-width banner at top (user preference)
           ============================================ */
        @media (max-width: 768px) {
            .article-image-container {
                /* Reset float for mobile - full width banner */
                float: none;
                width: auto;
                margin: -28px -24px 20px -24px;
                border-radius: var(--radius-lg) var(--radius-lg) 0 0;
                box-shadow: none;
                border: none;
            }

            .article-image-container:hover {
                transform: none;
                box-shadow: none;
            }

            .article-image {
                aspect-ratio: 16 / 9;
            }

            .summary-text::after {
                content: none;
                clear: none;
            }
        }

        /* ============================================
           Image Lightbox - Desktop Only
           Apple-style elegant popup on click
           ============================================ */

        /* Make images clickable on desktop */
        @media (min-width: 769px) {
            .article-image-container {
                cursor: zoom-in;
            }
        }

        /* Lightbox backdrop */
        .image-lightbox-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .image-lightbox-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        /* Lightbox container */
        .image-lightbox {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.85);
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            /* Apple-style spring animation */
            transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                        visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            /* Max size constraints */
            max-width: min(85vw, 900px);
            max-height: 80vh;
        }

        .image-lightbox.active {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }

        /* Closing animation */
        .image-lightbox.closing {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.92);
            transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .image-lightbox-backdrop.closing {
            opacity: 0;
            transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* The image inside lightbox */
        .image-lightbox img {
            display: block;
            max-width: 100%;
            max-height: 80vh;
            width: auto;
            height: auto;
            border-radius: 16px;
            box-shadow:
                0 25px 50px -12px rgba(0, 0, 0, 0.35),
                0 12px 24px -8px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.1);
            object-fit: contain;
            background: var(--surface, #fff);
        }

        /* Subtle hint indicator on image hover (desktop) */
        @media (min-width: 769px) {
            .article-image-container::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    to bottom,
                    transparent 60%,
                    rgba(0, 0, 0, 0.03) 100%
                );
                border-radius: inherit;
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.2s ease;
            }

            .article-image-container:hover::after {
                opacity: 1;
            }
        }

        /* Dark mode adjustments */
        @media (prefers-color-scheme: dark) {
            .image-lightbox-backdrop {
                background: rgba(0, 0, 0, 0.6);
            }

            .image-lightbox img {
                box-shadow:
                    0 25px 50px -12px rgba(0, 0, 0, 0.6),
                    0 12px 24px -8px rgba(0, 0, 0, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.05);
            }
        }

        /* Article Content Styles */
        .article-title {
            font-size: clamp(1.25rem, 3vw, 1.375rem) !important;
            /* Fluid 20px-22px */
            font-weight: 550;
            color: var(--french-blue) !important;
            /* Blue color - match original title */
            margin-top: 0;
            margin-bottom: 11px;
            padding-top: 0;
            line-height: 1.5;
            cursor: pointer;
            /* Smooth transition for hiding/showing */
            transition: opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                max-height 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin-bottom 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow: hidden;
            max-height: 200px;
            /* Initial max-height for smooth transition */
        }

        /* Hide simplified title when breakdown or match game is open (mobile and desktop) */
        /* NOTE: Quiz no longer hides article title - users can reference it while answering */
        .article-card:has(.bf-breakdown-link.open) .article-title,
        .article-card:has(.bf-match-game-link.open) .article-title,
        .article-title.hidden-by-breakdown {
            opacity: 0;
            max-height: 0;
            margin-top: 0;
            margin-bottom: 0;
        }

        /* Reduce visual prominence of reference content when Quiz Me is open */
        /* Keep visible for reference but make it clear the game is the focus */
        .article-card:has(.article-quiz.open) .article-title {
            opacity: 0.55;
            /* 55% visible - slightly more reduced than summary/original title */
            color: rgba(0, 0, 0, 0.55);
            transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .article-card:has(.article-quiz.open) .summary-text.expanded {
            opacity: 0.65;
            /* 65% visible */
            color: rgba(0, 0, 0, 0.65);
            transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .article-card:has(.article-quiz.open) .secondary-title {
            opacity: 0.65;
            /* 65% visible */
            color: rgba(37, 99, 235, 0.52);
            /* 65% of blue intensity */
            transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Reduce opacity of show/hide original title button when quiz is open */
        .article-card:has(.article-quiz.open) .show-original-title-btn {
            opacity: 0.65 !important;
            /* 65% visible - match summary */
            color: rgba(0, 0, 0, 0.39) !important;
            /* 65% of 0.6 = 0.39 */
            transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        }

        /* Ensure revealed secondary title also gets reduced opacity when quiz is open */
        .article-card:has(.article-quiz.open) .secondary-title.revealed {
            opacity: 0.65 !important;
            /* 65% visible - match summary */
            color: rgba(37, 99, 235, 0.52) !important;
            /* 65% of blue intensity */
        }

        /* Also reduce the divider line visibility when quiz is open */
        .article-card:has(.article-quiz.open) .summary-text.expanded::after {
            background: rgba(0, 0, 0, 0.04);
            /* Even more subtle divider */
            transition: background 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .summary-text {
            font-size: 16px !important;
            color: rgba(0, 0, 0, 0.85);
            line-height: 1.6;
            margin: 0;
            padding-left: 0;
            padding-right: 0;
            font-weight: 400;
            text-align: left;
            /* Default to open state */
            opacity: 1;
            margin-top: 4px;
            overflow: hidden;
            /* Slower, smoother transition to match breakdown panel */
            transition: max-height 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .summary-text:not(.expanded) {
            opacity: 0;
            max-height: 0;
            margin-top: 0;
        }

        .summary-text.expanded {
            opacity: 1;
            max-height: 1000px;
            margin-top: 5px;
            /* Increased by 20% from 4px (4 * 1.2 = 4.8px ≈ 5px) */
            margin-bottom: 8px;
            /* Space after divider line to language switcher */
            padding-bottom: 14px;
            /* Space from text to divider line */
            position: relative;
            /* For pseudo-element positioning */
        }

        /* Divider line below summary - full width */
        .summary-text.expanded::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            /* Full width left */
            right: 0;
            /* Full width right */
            height: 0.6px;
            /* Thickness */
            background: rgba(0, 0, 0, 0.15);
            /* 15% opacity */
        }

        /* Secondary title wrapper - desktop: button visible, title hidden by default */
        .secondary-title-wrapper {
            position: relative;
        }

        /* Show original title button - desktop: match mobile styling exactly */
        .show-original-title-btn {
            display: block !important;
            font-size: 10px !important;
            /* Reduced from 16px for more subtle appearance */
            line-height: 1.6 !important;
            /* Match summary line height */
            color: rgba(0, 0, 0, 0.45) !important;
            /* 45% effective visual opacity - subtle and discoverable */
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
            margin: 0 !important;
            margin-bottom: 2px !important;
            /* Consistent 2px spacing to summary (inactive) and to revealed title (active) */
            text-align: left !important;
            cursor: pointer !important;
            font-weight: 400 !important;
            font-family: inherit !important;
            transition: color 0.2s ease !important;
        }

        .show-original-title-btn:active {
            color: rgba(0, 0, 0, 0.45) !important;
            /* Keep same 45% opacity on tap for consistency */
        }

        /* Button text - use span for better control */
        .show-original-title-btn-text {
            display: inline;
        }

        /* Secondary title - hidden by default on desktop */
        .secondary-title {
            font-size: 16px !important;
            /* Match summary-text font size */
            line-height: 1.6 !important;
            /* Match summary-text spacing */
            font-weight: 400 !important;
            /* Normal weight - match summary */
            text-align: left;
            word-wrap: break-word;
            overflow-wrap: break-word;
            overflow-x: hidden;
            /* Prevent horizontal scroll */
            max-width: 100%;
            white-space: normal;
            /* Hidden by default on desktop */
            opacity: 0 !important;
            max-height: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            overflow: hidden !important;
            /* Same transition as mobile */
            transition: max-height 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin-bottom 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        }

        /* Revealed state - show title with smooth animation (desktop) */
        .secondary-title.revealed {
            opacity: 1 !important;
            max-height: 500px !important;
            /* Large enough for title content */
            margin-top: 0 !important;
            /* Spacing from button controlled by button's margin-bottom (2px) */
            margin-bottom: 11px !important;
            /* Match mobile spacing to summary */
            font-weight: 400 !important;
            /* Normal weight - match summary */
        }

        /* Remove summary margin-top when it follows secondary-title-wrapper to achieve even spacing */
        /* This ensures spacing is controlled by button/title margin-bottom only */
        /* Use multiple selectors with high specificity to ensure override works */
        .article-card .secondary-title-wrapper+.summary-text.expanded,
        .secondary-title-wrapper+.summary-text.expanded,
        .secondary-title-wrapper ~ .summary-text.expanded {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
        
        /* Also handle case when summary follows secondary-title directly */
        .secondary-title+.summary-text.expanded {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
        
        /* Ensure hidden title contributes zero spacing - already set at line 1947, but reinforce it */
        .secondary-title:not(.revealed) {
            margin-bottom: 0 !important;
            margin-top: 0 !important;
        }

        .summary-text.expanded+.article-quiz {
            margin-top: 0;
            /* No extra margin - divider line provides visual separation */
        }

        /* When quiz is hidden/collapsed (display:none), add spacing between summary and breakdown-meta-container */
        .summary-text.expanded+.breakdown-meta-container {
            margin-top: 10px;
            /* Default spacing when quiz is hidden (desktop / larger screens) */
        }

        /* Force spacing when quiz is hidden - using class for reliability */
        .article-quiz.quiz-hidden+.breakdown-meta-container,
        .article-quiz[style*="display: none"]+.breakdown-meta-container {
            margin-top: 10px !important;
            /* Spacing when quiz is hidden */
        }

        /* When quiz is visible, remove the extra spacing (quiz handles it) */
        .summary-text.expanded+.article-quiz:not(.quiz-hidden):not([style*="display: none"])+.breakdown-meta-container {
            margin-top: 0;
            /* Quiz already provides spacing */
        }

        /* Quiz Section Styles - Seamlessly Integrated Design (exactly like VocaMatch) */
        .article-quiz {
            margin-top: 0;
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 0;
            padding-right: 0;
            background: transparent;
            border: none;
            border-top: 1px solid transparent;
            /* Hidden by default */
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            will-change: max-height, opacity, margin-top;
            transition: margin-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                max-height 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .article-quiz.open {
            margin-top: 8px;
            /* Match VocaMatch/Breakdown panel spacing */
            margin-bottom: 0;
            /* No bottom margin - reduce space before buttons */
            opacity: 1;
            max-height: 5000px;
            /* Large enough for quiz content - content determines actual height */
            padding-top: 8px;
            /* Reduced by 30% (was 12px) - compact spacing */
            padding-bottom: 24px;
            /* Bottom padding */
            padding-right: 4px;
            /* Add right padding to prevent progress indicator from being clipped */
            border-top: none !important;
            /* Remove top border line */
            will-change: auto;
            /* Remove will-change after animation completes */
        }

        .article-quiz .quiz-container {
            padding-top: 0;
            border-radius: 0;
            box-shadow: none;
            position: relative;
        }

        /* Quiz Progress Header - Compact progress + question counter below question */
        .quiz-progress-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-top: 16px;
            margin-bottom: 20px;
        }

        .quiz-progress {
            flex: 1;
            position: relative;
            margin: 0;
        }

        .quiz-subtitle {
            font-size: 14px !important;
            /* Smaller, secondary text */
            font-weight: 500 !important;
            /* Medium weight */
            color: var(--ink-muted) !important;
            /* Muted color */
            margin: 0;
            white-space: nowrap;
            line-height: 1.4;
        }

        /* Legacy quiz-header (no longer used but kept for compatibility) */
        .quiz-header {
            margin-bottom: 8px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 16px;
        }

        .quiz-title {
            font-size: 18px;
            font-weight: 500;
            color: var(--ink);
            margin: 0;
            letter-spacing: -0.01em;
            line-height: 1.4;
        }

        .quiz-progress-bar-container {
            width: 100%;
            height: 7px;
            /* Desktop height */
            margin: 0 4px;
            /* 4px margin on left and right */
            background: linear-gradient(90deg,
                    rgba(0, 0, 0, 0.04) 0%,
                    rgba(0, 0, 0, 0.08) 50%,
                    rgba(0, 0, 0, 0.04) 100%);
            background-size: 200% 100%;
            border-radius: 100px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
            animation: containerIdleShimmer 3s ease-in-out infinite;
        }

        /* Duolingo-style idle animation - subtle shimmer on empty container */
        @keyframes containerIdleShimmer {

            0%,
            100% {
                background-position: 0% 0;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05),
                    0 0 0 rgba(37, 99, 235, 0);
            }

            50% {
                background-position: 100% 0;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05),
                    0 0 8px rgba(37, 99, 235, 0.1);
            }
        }

        /* Subtle pulse effect on container to draw attention */
        .quiz-progress-bar-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(37, 99, 235, 0.05) 30%,
                    rgba(37, 99, 235, 0.1) 50%,
                    rgba(37, 99, 235, 0.05) 70%,
                    transparent 100%);
            background-size: 200% 100%;
            border-radius: 100px;
            animation: containerPulse 2.5s ease-in-out infinite;
            opacity: 0;
        }

        @keyframes containerPulse {

            0%,
            100% {
                opacity: 0;
                background-position: -100% 0;
            }

            50% {
                opacity: 1;
                background-position: 200% 0;
            }
        }

        /* When progress bar has content, reduce container animation */
        .quiz-progress-bar-container.has-progress {
            animation: none;
        }

        .quiz-progress-bar-container.has-progress::before {
            animation: none;
            opacity: 0;
        }

        .quiz-progress-bar {
            height: 100%;
            background: linear-gradient(90deg,
                    #2563eb 0%,
                    #3b82f6 25%,
                    #60a5fa 50%,
                    #3b82f6 75%,
                    #2563eb 100%);
            background-size: 200% 100%;
            border-radius: 100px;
            transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            /* Slowed down by 50% (0.6s -> 1.2s) for sleek feel */
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(37, 99, 235, 0.3),
                0 0 20px rgba(37, 99, 235, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            animation: progressShimmer 2s ease-in-out infinite;
        }

        /* Initial state: progress bar starts at 12% to show it's waiting to be filled */
        /* The shimmer and container animations provide the "living" effect */

        /* Shimmer animation for progress bar */
        @keyframes progressShimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* Glow effect that intensifies as progress increases */
        .quiz-progress-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    transparent 100%);
            border-radius: 100px;
            animation: progressGlow 1.5s ease-in-out infinite;
        }

        @keyframes progressGlow {

            0%,
            100% {
                opacity: 0.3;
            }

            50% {
                opacity: 0.6;
            }
        }

        /* Pulse effect on progress updates */
        .quiz-progress-bar.progress-update {
            animation: progressShimmer 2s ease-in-out infinite,
                progressPulse 0.5s ease-out;
        }

        @keyframes progressPulse {
            0% {
                transform: scaleY(1);
                box-shadow: 0 0 10px rgba(37, 99, 235, 0.3),
                    0 0 20px rgba(37, 99, 235, 0.15);
            }

            50% {
                transform: scaleY(1.15);
                box-shadow: 0 0 20px rgba(37, 99, 235, 0.5),
                    0 0 30px rgba(37, 99, 235, 0.3);
            }

            100% {
                transform: scaleY(1);
                box-shadow: 0 0 10px rgba(37, 99, 235, 0.3),
                    0 0 20px rgba(37, 99, 235, 0.15);
            }
        }

        /* Completion celebration animation - Duolingo-style dopamine hit! */
        .quiz-progress-bar.complete {
            background: linear-gradient(90deg,
                    #10b981 0%,
                    #34d399 20%,
                    #6ee7b7 40%,
                    #34d399 60%,
                    #10b981 80%,
                    #34d399 100%);
            background-size: 300% 100%;
            animation: progressShimmer 0.8s ease-in-out infinite,
                completeCelebration 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.6),
                0 0 50px rgba(16, 185, 129, 0.4),
                0 0 70px rgba(16, 185, 129, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        @keyframes completeCelebration {
            0% {
                transform: scaleY(1);
                box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
            }

            25% {
                transform: scaleY(1.4);
                box-shadow: 0 0 40px rgba(16, 185, 129, 0.8);
            }

            50% {
                transform: scaleY(1.1);
                box-shadow: 0 0 50px rgba(16, 185, 129, 0.9);
            }

            75% {
                transform: scaleY(1.25);
                box-shadow: 0 0 45px rgba(16, 185, 129, 0.8);
            }

            100% {
                transform: scaleY(1);
                box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
            }
        }

        /* Enhanced particle effects for completion celebration */
        .quiz-progress-bar-container.complete::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 6px;
            height: 6px;
            background: #10b981;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: particleBurst 1s ease-out forwards;
            box-shadow:
                -25px -15px 0 -2px #34d399,
                25px -15px 0 -2px #6ee7b7,
                -20px 20px 0 -2px #10b981,
                20px 20px 0 -2px #34d399,
                -35px 8px 0 -2px #6ee7b7,
                35px 8px 0 -2px #10b981,
                -15px -25px 0 -2px #34d399,
                15px -25px 0 -2px #10b981,
                0 30px 0 -2px #6ee7b7,
                -40px 0 0 -2px #34d399,
                40px 0 0 -2px #10b981;
        }

        @keyframes particleBurst {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            50% {
                opacity: 0.8;
                transform: translate(-50%, -50%) scale(1.2);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
        }

        .quiz-questions {
            position: relative;
            min-height: 200px;
        }

        .quiz-question {
            display: block;
            animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .quiz-question.hidden {
            display: none;
        }

        /* New Quiz Layout - Question First, Progress Secondary */
        .quiz-question-header {
            margin-bottom: 24px;
            /* Reduced by 40% (from 40px to 24px) for tighter spacing between question and progress bar */
        }

        .quiz-question-header .question-text {
            margin: 0 4px;
            /* 4px margin on left and right */
            margin-bottom: 0;
        }

        .quiz-progress-indicator {
            position: absolute;
            top: 50%;
            /* Center vertically using transform */
            right: 0;
            transform: translateY(-50%);
            /* Perfect vertical centering */
            padding: 4px 10px;
            margin: 0;
            background: rgba(15, 23, 42, 0.06);
            border-radius: 999px;
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Consistent font */
            font-size: 13px;
            font-weight: 600;
            color: var(--ink-muted);
            white-space: nowrap;
            z-index: 1;
            line-height: 1.5;
            /* Match other text elements for baseline alignment */
            display: flex;
            align-items: center;
            /* Center content vertically */
        }

        .quiz-progress-text {
            display: inline-block;
        }

        .quiz-progress-bar-wrapper {
            margin-bottom: 20px;
        }

        .quiz-progress-bar-wrapper .quiz-progress {
            margin-bottom: 0;
        }

        .question-text {
            font-size: 20px !important;
            /* Match mobile size */
            font-weight: 600 !important;
            /* Bolder to make it look like a question */
            color: rgba(0, 0, 0, 0.9) !important;
            /* Slightly darker for better contrast */
            margin: 0 4px;
            /* 4px margin on left and right */
            margin-bottom: 0;
            line-height: 1.5;
            text-align: left;
            /* Left align for better readability */
            text-justify: inter-word;
        }

        .quiz-hint-section {
            margin-bottom: 18px;
            margin-right: 4px;
            /* Add right margin to prevent progress indicator from being cut off */
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            /* Allow hint display to wrap to new line */
        }

        /* Progress indicator in hint section, aligned to right */
        .quiz-hint-section .quiz-progress-indicator {
            margin: 0;
            /* Remove margins - parent section handles spacing */
            flex-shrink: 0;
        }

        /* Hint display should appear below the hint button, taking full width */
        .quiz-hint-section .quiz-hint-display {
            width: 100%;
            /* Take full width to break out of flex layout */
            margin-top: 12px;
            /* Spacing below hint button */
            margin-left: 0;
            /* Reset any left margin */
            order: 3;
            /* Ensure it appears after hint button and progress indicator */
        }

        .quiz-hint-btn {
            /* Premium minimalist design - no button styling, just elegant text */
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            margin: 0 4px;
            /* 4px margin on left and right */
            color: rgba(0, 0, 0, 0.65) !important;
            font-size: 14px !important;
            font-weight: 400 !important;
            letter-spacing: -0.01em;
            cursor: pointer;
            transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: inline-block;
            text-decoration: none;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }

        .quiz-hint-btn:hover:not(:disabled) {
            color: rgba(0, 0, 0, 0.85) !important;
        }

        .quiz-hint-btn:active:not(:disabled) {
            color: rgba(0, 0, 0, 0.7) !important;
        }

        .quiz-hint-btn:disabled {
            cursor: not-allowed;
            opacity: 0.4;
            color: rgba(0, 0, 0, 0.4) !important;
        }

        .hint-count {
            font-weight: 500;
            /* Match button font-weight */
            color: inherit;
            /* Inherit button text color */
            font-size: 13px;
            /* Match button font-size */
            letter-spacing: -0.01em;
            /* Match button letter-spacing */
        }

        .quiz-hint-display {
            margin-top: 12px;
            /* Spacing below hint button - controlled by parent flex */
            padding: 16px 20px;
            background: rgba(0, 0, 0, 0.02);
            border: 1.5px solid rgba(0, 0, 0, 0.08);
            border-radius: 14px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);
            line-height: 1.7;
            animation: hintReveal 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
            font-weight: 400;
            will-change: transform, opacity;
            transform-origin: top center;
        }

        .quiz-hint-display.hidden {
            display: none;
        }

        @keyframes hintReveal {
            0% {
                opacity: 0;
                transform: translateY(-12px) scale(0.96);
                filter: blur(4px);
            }

            40% {
                opacity: 0.6;
                transform: translateY(-4px) scale(0.98);
                filter: blur(2px);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        /* Fade out eliminated options for elimination hints */
        .quiz-option.eliminated {
            opacity: 0.5;
            pointer-events: none;
            transition: opacity 0.5s ease-out;
        }

        /* Wrong-disabled option (retry mechanism) */
        .quiz-option.wrong-disabled {
            opacity: 0.4;
            pointer-events: none;
            text-decoration: line-through;
            background: rgba(220, 38, 38, 0.05);
            border-color: rgba(220, 38, 38, 0.3);
            transition: all 0.3s ease-out;
        }

        /* Retry message - appears below the hint, not beside it */
        .quiz-retry-message {
            display: block;
            /* Block display to appear on new line */
            padding: 0;
            background: transparent;
            border: none;
            border-radius: 0;
            margin: 0;
            margin-top: 12px;
            /* Spacing below hint */
            width: 100%;
            /* Full width to appear below hint */
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Consistent font */
            color: rgba(0, 0, 0, 0.7);
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            /* Match other text elements */
            word-wrap: break-word;
            overflow-wrap: break-word;
            text-align: left;
            /* Match question-text alignment */
            order: 10;
            /* Ensure it appears after hint and progress indicator */
        }

        .quiz-retry-message .retry-text {
            /* Text flows naturally - can wrap to multiple lines on smaller screens */
            display: inline;
            /* Inline so text flows naturally */
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Consistent font */
        }

        .quiz-retry-message .retry-text strong {
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Consistent font */
            font-weight: 500;
            /* Bold for "Not quite! Try again —" part */
        }

        .quiz-retry-message.hidden {
            display: none;
        }

        .quiz-retry-message.retry-animate {
            animation: retryPulse 0.5s ease-out;
        }

        @keyframes retryPulse {
            0% {
                transform: scale(0.95);
                opacity: 0;
            }

            50% {
                transform: scale(1.02);
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .retry-icon {
            font-size: 18px;
        }

        /* Auto-clue section (replaces hint buttons) */
        .quiz-clue-section {
            position: relative;
            /* Allow absolute positioning of progress indicator */
            margin-bottom: 24px;
            /* Increased from 18px to 24px for more breathing room before questions */
            margin-right: 4px;
            margin-left: 0;
            /* Align with question-text left edge (question-text has 4px left margin) */
            display: flex;
            justify-content: flex-start;
            /* Changed from space-between to prevent movement */
            align-items: center;
            /* Center align all elements on same baseline */
            flex-wrap: wrap;
            gap: 12px;
            min-height: 21px;
            /* Match text line-height (14px * 1.5 = 21px) for proper baseline alignment */
        }

        .quiz-auto-clue {
            display: block;
            /* Simple block display - emoji is part of text */
            padding: 0;
            /* Remove padding to align with question text */
            margin: 0 4px;
            /* Match question-text left/right margin for alignment */
            background: transparent;
            border: none;
            border-radius: 0;
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Consistent font */
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.7);
            line-height: 1.5;
            /* Match other text elements */
            max-width: calc(100% - 60px);
            /* Leave space for progress indicator */
        }

        .quiz-auto-clue.hidden {
            display: none;
        }

        .quiz-auto-clue.clue-animate {
            animation: clueReveal 0.4s ease-out;
        }

        @keyframes clueReveal {
            0% {
                opacity: 0;
                transform: translateY(-8px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .clue-text {
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Consistent font */
            line-height: 1.5;
            /* Match other text elements */
            font-weight: 400;
        }

        /* Interesting fact in clue section (replaces hint when correct) */
        .quiz-clue-dyk {
            display: flex;
            align-items: center;
            /* Center align to match progress indicator baseline */
            gap: 6px;
            padding: 0;
            /* Remove padding to align with question-text */
            background: transparent;
            border: none;
            border-radius: 0;
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Consistent font */
            font-size: 14px;
            font-weight: 400;
            max-width: calc(100% - 60px);
            /* Leave space for progress indicator */
            flex: 1;
            min-width: 0;
            line-height: 1.5;
            /* Match other text elements */
            margin: 0;
            /* Remove margin - let flexbox gap handle spacing */
        }

        .quiz-clue-dyk.hidden {
            display: none;
        }

        .quiz-clue-dyk .dyk-text-wrapper {
            flex: 1;
            min-width: 0;
            line-height: 1.5;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .quiz-clue-dyk .dyk-label {
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Consistent font */
            font-weight: 600;
            color: rgba(0, 0, 0, 0.7);
            font-size: 14px;
            text-transform: none;
            letter-spacing: 0;
            line-height: 1.5;
            /* Match other text elements */
        }

        .quiz-clue-dyk .dyk-fact {
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Consistent font */
            color: rgba(0, 0, 0, 0.7);
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            /* Match other text elements */
        }

        /* Fill-in-the-blank styles */
        .fill-blank-prompt {
            font-size: 20px !important;
            /* Match regular question-text size */
            font-weight: 600 !important;
            /* Match regular question-text weight */
            color: rgba(0, 0, 0, 0.9) !important;
            /* Match regular question-text color */
            margin: 0 !important;
            /* Remove left/right margin to align with sentence below */
            margin-bottom: 20px !important;
            /* 70% increase in spacing (from ~12px to 20px) */
            line-height: 1.5;
            /* Match regular question-text line-height */
            text-align: left;
            /* Match regular question-text alignment */
        }

        .fill-blank-sentence {
            font-size: 14.45px;
            /* Reduced by 15% from 17px (17 * 0.85 = 14.45) */
            line-height: 1.6;
            color: rgba(0, 0, 0, 0.85);
            margin-bottom: 8px;
        }

        /* Hide any underscores in sentence-after that might create a second blank line */
        .fill-blank-sentence .sentence-after {
            /* Ensure no border or underline appears on sentence-after */
            border-bottom: none !important;
            text-decoration: none !important;
        }

        .blank-slot {
            display: inline-block;
            min-width: 100px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.85);
            /* 50% thinner: 1px instead of 2px */
            color: transparent;
            /* Hide the underscore text - we only want the border line */
            font-weight: 600;
            padding: 0 8px;
            margin: 0 4px;
            text-align: center;
            position: relative;
        }

        .blank-slot.filled {
            color: #059669;
            /* Show the text when filled - green for positive feedback */
            border-bottom: 2px solid #059669;
            background: rgba(5, 150, 105, 0.08);
            border-radius: 4px;
            font-weight: 600;
        }

        /* Word bank (for fill-in-blank) */
        .question-options.word-bank {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .quiz-option.word-option {
            flex: 0 0 auto;
            padding: 10px 18px;
            font-size: 15px;
            min-width: auto;
        }

        /* Interesting fact section */
        .did-you-know {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: 0;
            margin-top: 12px;
            /* Spacing when shown after feedback (was 8px, increased to account for removed explanation) */
            margin-bottom: 0;
            margin-left: 4px;
            /* Match question-text left margin */
            margin-right: 4px;
            /* Match question-text right margin */
            line-height: 1.5;
        }

        .did-you-know.hidden {
            display: none;
        }

        .did-you-know .dyk-text-wrapper {
            flex: 1;
            min-width: 0;
            line-height: 1.5;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .did-you-know .dyk-label {
            font-weight: 600;
            color: rgba(0, 0, 0, 0.7);
            font-size: 14px;
            text-transform: none;
            letter-spacing: 0;
        }

        .did-you-know .dyk-fact {
            color: rgba(0, 0, 0, 0.7);
            font-size: 14px;
            line-height: 1.5;
        }

        /* Learning Summary */
        .quiz-summary {
            padding: 24px;
            text-align: center;
        }

        .quiz-summary.hidden {
            display: none;
        }

        .summary-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .summary-icon {
            font-size: 28px;
            animation: summaryBounce 0.6s ease-out;
        }

        @keyframes summaryBounce {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(1);
            }
        }

        .summary-title {
            font-size: 22px;
            font-weight: 700;
            color: #059669;
        }

        .summary-score {
            font-size: 16px;
            color: rgba(0, 0, 0, 0.6);
            margin-bottom: 20px;
        }

        .summary-learnings {
            background: rgba(0, 0, 0, 0.02);
            border-radius: 16px;
            padding: 20px;
            text-align: left;
            margin-bottom: 20px;
        }

        .learnings-title {
            font-size: 15px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.7);
            margin-bottom: 14px;
        }

        .learnings-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .learning-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14px;
            line-height: 1.5;
            color: rgba(0, 0, 0, 0.75);
        }

        .learning-item::before {
            content: '✨';
            flex-shrink: 0;
        }

        .summary-continue-btn {
            padding: 14px 32px;
            background: var(--french-blue, #2563eb);
            color: white;
            border: none;
            border-radius: 14px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .summary-continue-btn:hover {
            background: #1d4ed8;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }

        .question-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            /* Slightly more spacing for Duolingo-style */
            margin-bottom: 20px;
        }

        .quiz-option {
            padding: 12px 18px;
            /* More compact: reduced from 16px to 12px top/bottom (Duolingo-style) */
            margin: 0 4px;
            /* 4px margin on left and right */
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 16px;
            /* Duolingo-style rounded corners */
            font-size: 14px !important;
            color: rgba(0, 0, 0, 0.85) !important;
            text-align: left;
            /* Left align for better readability in buttons */
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 400 !important;
            font-style: normal;
            position: relative;
            line-height: 1.5;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03),
                0 1px 2px rgba(0, 0, 0, 0.04);
            /* Subtle Duolingo-style shadow */
            overflow: hidden;
        }

        /* Duolingo-style hover effect - lift and glow */
        .quiz-option:hover:not(:disabled) {
            border-color: rgba(37, 99, 235, 0.3);
            background: #f8f9ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15),
                0 2px 4px rgba(0, 0, 0, 0.08);
            color: rgba(0, 0, 0, 0.85) !important;
        }

        .quiz-option:active:not(:disabled) {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            color: rgba(0, 0, 0, 0.85) !important;
        }

        .quiz-option.selected {
            border-color: var(--french-blue);
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.12) 100%);
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85) !important;
        }

        .quiz-option.correct {
            border-color: #10b981;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.15) 100%);
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            color: #059669 !important;
            font-weight: 500;
            animation: correctPulse 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes correctPulse {
            0% {
                transform: scale(1);
                box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
            }

            50% {
                transform: scale(1.02);
                box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
            }
        }

        .quiz-option.incorrect {
            border-color: rgba(239, 68, 68, 0.4);
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, rgba(239, 68, 68, 0.1) 100%);
            box-shadow: 0 1px 3px rgba(239, 68, 68, 0.15);
            color: rgba(0, 0, 0, 0.85) !important;
            opacity: 0.75;
        }

        .quiz-option:disabled {
            cursor: not-allowed;
            opacity: 0.6;
            transform: none !important;
        }

        .quiz-option:disabled {
            cursor: not-allowed;
            opacity: 0.6;
            transform: none !important;
        }

        .quiz-feedback {
            padding: 16px 0;
            margin-top: 16px;
            animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            padding-top: 16px;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(4px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .quiz-feedback.hidden {
            display: none;
        }

        .quiz-feedback.correct {
            border-top-color: rgba(16, 185, 129, 0.2);
        }

        .quiz-feedback.incorrect {
            border-top-color: rgba(239, 68, 68, 0.15);
        }

        .feedback-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .feedback-left {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
        }

        .feedback-icon {
            font-size: 20px;
            display: inline-block;
            animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            flex-shrink: 0;
        }

        @keyframes bounceIn {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.15);
            }

            100% {
                transform: scale(1);
            }
        }

        .feedback-message {
            font-size: 15px;
            font-weight: 500;
            letter-spacing: -0.01em;
            line-height: 1.4;
        }

        .quiz-feedback.correct .feedback-message {
            color: #059669;
        }

        .quiz-feedback.incorrect .feedback-message {
            color: #dc2626;
        }

        /* Premium completion experience - elegant and celebratory */
        .quiz-feedback.premium-completion {
            animation: premiumCompletionSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .quiz-feedback.premium-completion .feedback-message {
            font-size: 17px;
            font-weight: 600;
            color: #059669;
            letter-spacing: -0.02em;
            animation: premiumMessagePulse 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes premiumCompletionSlide {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes premiumMessagePulse {
            0% {
                transform: scale(0.95);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        .feedback-cultural-context {
            font-size: 13px;
            color: var(--ink-muted);
            line-height: 1.6;
            font-style: italic;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
        }

        .quiz-next-btn,
        .quiz-complete-btn {
            padding: 12px 16px;
            /* Compact padding - only as much as needed for text */
            background: var(--french-blue);
            color: #ffffff;
            border: none;
            border-radius: 14px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -0.01em;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            width: auto;
            /* Let button size to content */
            display: inline-flex;
            /* Compact display */
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25), 0 1px 3px rgba(0, 0, 0, 0.1);
            will-change: transform, box-shadow;
        }

        .quiz-next-btn::before,
        .quiz-complete-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }

        .quiz-next-btn:hover::before,
        .quiz-complete-btn:hover::before {
            left: 100%;
        }

        .quiz-next-btn:hover,
        .quiz-complete-btn:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
        }

        .quiz-next-btn:active,
        .quiz-complete-btn:active {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25), 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .quiz-next-btn {
            animation: nextButtonPulse 2s ease-in-out infinite;
        }

        @keyframes nextButtonPulse {

            0%,
            100% {
                box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25), 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            50% {
                box-shadow: 0 2px 12px rgba(37, 99, 235, 0.3), 0 1px 4px rgba(0, 0, 0, 0.12);
            }
        }

        .quiz-next-btn.hidden,
        .quiz-complete-btn.hidden {
            display: none;
        }

        .quiz-completion {
            padding: 0;
            position: relative;
            animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(16, 185, 129, 0.2);
        }

        @keyframes slideUpFade {
            from {
                opacity: 0;
                transform: translateY(4px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .quiz-completion.hidden {
            display: none;
        }

        .completion-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .completion-icon {
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            animation: sparkle 1s ease-in-out;
        }

        @keyframes sparkle {

            0%,
            100% {
                transform: scale(1) rotate(0deg);
            }

            50% {
                transform: scale(1.1) rotate(5deg);
            }
        }

        .completion-text {
            flex: 1;
        }

        .completion-message {
            font-size: 15px;
            font-weight: 500;
            color: #059669;
            margin-bottom: 2px;
            letter-spacing: -0.01em;
            line-height: 1.4;
        }

        .completion-subtitle {
            font-size: 13px;
            color: var(--ink-muted);
            line-height: 1.4;
            font-weight: 400;
        }

        /* Mobile Quiz Styles */
        @media (max-width: 768px) {
            .article-quiz.open {
                margin-top: 8px;
                /* Match VocaMatch/Breakdown spacing */
                padding-top: 7px;
                /* Reduced by 30% (was 10px) - compact spacing */
                padding-bottom: 14px;
                /* Equal bottom padding */
                padding-right: 4px;
                /* Add right padding to prevent progress indicator from being clipped */
                border-top: none !important;
                /* Remove top border line */
            }

            .quiz-progress-header {
                margin-top: 12px;
                margin-bottom: 16px;
                gap: 12px;
            }

            .quiz-subtitle {
                font-size: 13px !important;
                /* Smaller on mobile */
                font-weight: 500 !important;
                color: var(--ink-muted) !important;
            }

            .quiz-question-header {
                flex-direction: column;
                gap: 8px;
                margin-bottom: 24px;
                /* Match desktop spacing */
            }

            .quiz-progress-indicator {
                position: absolute;
                /* Keep absolute positioning on mobile too */
                top: 50%;
                /* Center vertically using transform */
                right: 0;
                transform: translateY(-50%);
                /* Perfect vertical centering */
                font-size: 12px;
                padding: 3px 8px;
            }

            .quiz-progress-bar-wrapper .quiz-progress-indicator {
                position: absolute;
                /* Keep absolute positioning */
                top: 50%;
                /* Center vertically */
                right: 0;
                transform: translateY(-50%);
                /* Perfect vertical centering */
            }

            .match-progress-count {
                font-size: 12px;
                padding: 3px 8px;
            }

            .quiz-progress-bar-wrapper {
                margin-bottom: 20px;
                /* Match desktop spacing */
            }

            .question-text {
                font-size: 20px !important;
                /* Match VocaMatch title size */
                margin-bottom: 0;
            }

            .quiz-progress-bar-container {
                height: 7px;
                /* Match desktop height */
            }

            .quiz-option {
                padding: 12px 16px;
                font-size: 14px;
            }

            .quiz-feedback {
                padding-top: 14px;
                margin-top: 14px;
            }
        }

        @media (max-width: 480px) {
            .article-quiz.open {
                margin-top: 8px;
                /* Match VocaMatch/Breakdown spacing */
                padding-top: 6px;
                /* Reduced by 30% (was 8px) - compact spacing */
                padding-bottom: 12px;
                /* Equal bottom padding */
                padding-right: 4px;
                /* Add right padding to prevent progress indicator from being clipped */
                border-top: none !important;
                /* Remove top border line */
            }

            .quiz-progress-header {
                margin-top: 10px;
                margin-bottom: 14px;
                gap: 10px;
            }

            .quiz-subtitle {
                font-size: 12px !important;
                /* Even smaller on small mobile */
                font-weight: 500 !important;
                color: var(--ink-muted) !important;
            }

            .question-text {
                font-size: 20px !important;
                /* Match VocaMatch title size */
            }

            .quiz-option {
                padding: 12px 14px;
                font-size: 14px;
            }

            .quiz-feedback {
                padding-top: 12px;
                margin-top: 12px;
            }
        }

        .secondary-title {
            font-size: 16px !important;
            /* Match summary-text font size */
            line-height: 1.6 !important;
            /* Match summary-text spacing */
            font-weight: 400 !important;
            /* Normal weight - match summary */
            font-style: normal !important;
            /* Regular (non-italic) style */
            margin-top: 0;
            margin-bottom: 11px !important;
            padding-top: 0 !important;
            /* Removed to match spacing between article-title and summary */
            border-top: none !important;
            /* Removed line above contextual words */
            color: var(--french-blue) !important;
            /* Blue color - match contextual words for aesthetic consistency */
            text-align: left;
            /* Prevent horizontal overflow on mobile */
            word-wrap: break-word;
            overflow-wrap: break-word;
            overflow-x: hidden;
            /* Prevent horizontal scroll */
            max-width: 100%;
            /* Ensure it doesn't exceed container */
            transition: opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                max-height 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin-bottom 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                padding-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Remove summary margin-top when it follows secondary-title on mobile to achieve even spacing */
        .secondary-title+.summary-text.expanded,
        .secondary-title-wrapper+.summary-text.expanded {
            margin-top: 0 !important;
            /* Remove margin-top so spacing is controlled by secondary-title margin-bottom only */
        }

        /* Make french-word elements inside secondary-title - blue by default, black on hover/tap */
        .secondary-title .french-word {
            color: var(--french-blue) !important;
            /* #2563eb - blue by default */
            font-size: 16px !important;
            font-weight: 400 !important;
            line-height: 1.6 !important;
        }

        /* Hide French title completely when breakdown or match game is open (mobile and desktop) */
        /* NOTE: Quiz no longer hides French title - users can reference it while answering */
        .article-card:has(.bf-breakdown-link.open) .secondary-title,
        .article-card:has(.bf-match-game-link.open) .secondary-title,
        .secondary-title.hide-line-by-breakdown {
            opacity: 0 !important;
            max-height: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        /* Hide show/hide original title button when breakdown or match game is open */
        .article-card:has(.bf-breakdown-link.open) .show-original-title-btn,
        .article-card:has(.bf-match-game-link.open) .show-original-title-btn {
            opacity: 0 !important;
            max-height: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            overflow: hidden !important;
            transition: max-height 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin-bottom 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        }

        /* Ensure revealed secondary title is also hidden when games are open */
        .article-card:has(.bf-breakdown-link.open) .secondary-title.revealed,
        .article-card:has(.bf-match-game-link.open) .secondary-title.revealed {
            opacity: 0 !important;
            max-height: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        /* Mobile Controls Group - hidden by default on desktop */
        .mobile-controls-group {
            display: none;
        }

        /* Mobile only: Hide language selector and meta when games are open */
        @media (max-width: 768px) {

            /* NEW: Wrapper for layout + animation control */
            .mobile-controls-group {
                display: block;
                margin-bottom: 8px;
                /* Spacing to game buttons below */
                will-change: max-height, padding, margin, opacity;
                transition: opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    max-height 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    margin 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    padding 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
                overflow: hidden;
            }

            /* Hidden state when game is open */
            .mobile-controls-group.hidden-by-game {
                opacity: 0 !important;
                max-height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                pointer-events: none;
            }

            .article-language-selector-mobile {
                display: flex !important;
                /* Show on mobile */
                margin-top: 0;
                margin-bottom: 0;
                padding-top: 0;
                border-top: 0.5px solid transparent;
                border-bottom: none;
                color: rgba(0, 0, 0, 0.45);
                /* Match "Show original title" color */
                /* Slide animation for game panels */
                will-change: max-height, opacity, margin;
                transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    max-height 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    margin 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
                overflow: hidden;
            }

            /* Hidden state when game is open (Quiz Me, VocaMatch, Breakdown) */
            .article-language-selector-mobile.hidden-by-game {
                opacity: 0 !important;
                max-height: 0 !important;
                margin: 0 !important;
                pointer-events: none;
            }

            .article-meta-wrapper-mobile {
                display: flex !important;
                /* Show mobile wrapper */
                justify-content: space-between !important;
                align-items: baseline !important;
                width: 100% !important;
                margin-top: 8px !important;
                color: rgba(0, 0, 0, 0.45);
                /* Match "Show original title" color */
                /* Slide animation for game panels */
                will-change: max-height, opacity, margin;
                transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    max-height 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    margin 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
                overflow: hidden;
            }

            /* Hidden state when game is open (Quiz Me, VocaMatch, Breakdown) */
            .article-meta-wrapper-mobile.hidden-by-game {
                opacity: 0 !important;
                max-height: 0 !important;
                margin: 0 !important;
                pointer-events: none;
            }
        }

        /* Also hide any line in breakdown-meta-container when buttons are active */
        .article-card:has(.bf-breakdown-link.open) .breakdown-meta-container,
        .article-card:has(.bf-match-game-link.open) .breakdown-meta-container,
        .article-card:has(.bf-quiz-link.open) .breakdown-meta-container {
            border-top: 0.5px solid transparent;
            /* Keep it hidden */
            padding-top: 0;
            /* No padding when title is hidden */
        }

        .breakdown-meta-container {
            display: flex;
            justify-content: space-between;
            /* Restored to space-between so buttons and meta are on same line */
            align-items: baseline;
            margin-top: 8px;
            /* Reduced spacing from panels above */
            margin-bottom: 0;
            padding-top: 0;
            border-top: 0.5px solid transparent;
            /* Clear float so buttons always appear below the image */
            clear: both;
            /* Smooth transition for the line above breakdown button */
            transition: border-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                padding-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Reduce spacing when panels are open */
        .bf-match-game-panel.open+.bf-breakdown-panel+.breakdown-meta-container,
        .bf-breakdown-panel.open+.breakdown-meta-container,
        .bf-match-game-panel.open+.breakdown-meta-container {
            margin-top: 0;
            /* No extra margin - container padding handles spacing */
        }

        /* Don't show line above breakdown button when it's open - French title is hidden, so no line needed */
        /* Line is now handled by the game-buttons-container::after pseudo-element */

        /* Article meta wrapper - flex container for language selector and meta */
        .article-meta-wrapper {
            display: flex;
            justify-content: flex-end;
            /* Right-align on desktop */
            align-items: baseline;
            flex: 1;
            /* Take remaining space after buttons */
            min-width: 0;
            /* Allow shrinking */
        }

        /* Language selector - left side (for mobile) */
        .article-language-selector {
            font-size: 12px;
            font-weight: 300;
            color: var(--ink-muted);
            text-align: left;
            flex-shrink: 0;
        }

        /* Language selector - inline (for desktop, inside article-meta) */
        .article-language-selector-inline {
            font-size: 16px;
            /* Match desktop summary/meta font size */
            font-weight: 300;
            color: rgba(0, 0, 0, 0.85);
            /* Match .article-meta color */
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        /* Article language toggle buttons - smaller version of profile dropdown toggles */
        .article-language-selector-inline .article-lang-toggle {
            display: inline-flex;
            gap: 2px;
            background: rgba(240, 240, 240, 0.8);
            border-radius: 10px;
            padding: 3px;
            margin: 0;
            width: fit-content;
            flex-shrink: 0;
            box-sizing: border-box;
        }
        
        .article-language-selector-inline .read-lang-btn.bf-tier-tab,
        .article-language-selector-inline .explanation-lang-btn.bf-tier-tab {
            padding: 2px 4px;
            font-size: 10px;
            margin: 0;
            border-radius: 6px;
            background: transparent;
            border: none;
            font-family: inherit;
            font-weight: 600;
            color: var(--ink-muted);
            cursor: pointer;
            white-space: nowrap;
            box-sizing: border-box;
            transition: all 0.15s ease;
        }
        
        .article-language-selector-inline .read-lang-btn.bf-tier-tab:hover,
        .article-language-selector-inline .explanation-lang-btn.bf-tier-tab:hover {
            background-color: rgba(37, 99, 235, 0.05);
        }
        
        .article-language-selector-inline .read-lang-btn.bf-tier-tab.selected,
        .article-language-selector-inline .read-lang-btn.bf-tier-tab.active,
        .article-language-selector-inline .explanation-lang-btn.bf-tier-tab.selected,
        .article-language-selector-inline .explanation-lang-btn.bf-tier-tab.active {
            background: #fff !important;
            color: var(--french-blue) !important;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
        }
        
        .article-language-selector-inline .read-lang-btn.bf-tier-tab.selected:hover,
        .article-language-selector-inline .read-lang-btn.bf-tier-tab.active:hover,
        .article-language-selector-inline .explanation-lang-btn.bf-tier-tab.selected:hover,
        .article-language-selector-inline .explanation-lang-btn.bf-tier-tab.active:hover {
            background: #fff !important;
            color: var(--french-blue) !important;
        }

        .article-language-selector .lang-option,
        .article-language-selector-inline .lang-option,
        .article-language-selector-mobile .lang-option {
            cursor: pointer;
            transition: opacity 0.1s ease, color 0.1s ease;
            /* Snappier feedback on desktop + mobile */
            user-select: none;
            touch-action: manipulation;
            /* Remove 300ms click delay on mobile */
            -webkit-tap-highlight-color: transparent;
            /* Remove tap highlight on iOS */
        }

        /* Mobile: Set default gray color for unselected language options */
        @media (max-width: 768px) {
            .article-language-selector-mobile .lang-option:not(.lang-selected) {
                color: rgba(0, 0, 0, 0.45);
                /* Match "Show original title" color */
            }
        }

        /* Hover state - only for unselected items */
        .article-language-selector .lang-option:not(.lang-selected):hover,
        .article-language-selector-inline .lang-option:not(.lang-selected):hover,
        .article-language-selector-mobile .lang-option:not(.lang-selected):hover {
            opacity: 0.7;
        }

        /* Active state - only for unselected items */
        .article-language-selector .lang-option:not(.lang-selected):active,
        .article-language-selector-inline .lang-option:not(.lang-selected):active,
        .article-language-selector-mobile .lang-option:not(.lang-selected):active {
            opacity: 0.5;
        }

        /* Selected language options - always blue, never affected by opacity */
        .article-language-selector .lang-option.lang-selected,
        .article-language-selector-inline .lang-option.lang-selected,
        .article-language-selector-mobile .lang-option.lang-selected {
            font-weight: 400;
            color: var(--french-blue) !important;
            /* Always dark blue - never affected by hover/active opacity */
            opacity: 1 !important;
            /* Force full opacity to prevent gray-blue appearance */
        }

        .article-meta {
            /* Match summary-text sizing on desktop for better readability */
            font-size: 16px;
            font-weight: 300;
            color: rgba(0, 0, 0, 0.85);
            margin-top: 0;
            margin-bottom: 0;
            padding-top: 0;
            text-align: right;
            white-space: nowrap;
            /* Keep everything on one line */
        }

        .article-meta .source-link {
            color: inherit;
            text-decoration: none;
            cursor: pointer;
            transition: opacity 0.2s ease;
        }

        .article-meta .source-link:hover {
            opacity: 0.7;
        }

        .article-meta .source-link:active {
            opacity: 0.5;
        }

        .article-meta .relative-time {
            color: var(--french-blue);
            /* Uses updated softer blue #3b82f6 */
        }

        /* Bookmark button on article cards */
        .article-bookmark-btn {
            background: none;
            border: none;
            padding: 6px;
            cursor: pointer;
            color: #9ca3af;
            transition: all 0.15s ease;
            -webkit-tap-highlight-color: transparent;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            margin-left: 6px;
            position: relative;
            top: 2px;
        }

        .article-bookmark-btn:active {
            transform: scale(0.85);
        }

        .article-bookmark-btn.bookmarked {
            color: #f59e0b;
        }

        .article-bookmark-btn:hover:not(.bookmarked) {
            color: #6b7280;
        }

        .article-meta-source-mobile .article-bookmark-btn {
            display: inline-flex;
            vertical-align: middle;
            margin-left: 6px;
            position: relative;
            top: -1px;
            padding: 4px;
        }

        /* Desktop: show source/date in container, hide bottom one */
        .article-meta-mobile {
            display: none;
        }

        .article-meta-wrapper-mobile {
            display: none;
        }

        /* Desktop: Hide mobile language selector (shown only on mobile) */
        @media (min-width: 769px) {
            .article-language-selector-mobile {
                display: none !important;
            }
        }

        /* Mobile: hide source/date in container, show bottom one */
        @media (max-width: 768px) {
            .article-meta-wrapper {
                display: none !important;
                /* Hide desktop wrapper on mobile */
            }

            .article-meta-wrapper-mobile {
                display: flex !important;
                /* Show mobile wrapper - force override for production */
                justify-content: space-between !important;
                /* Space between source (left) and date/time (right) */
                align-items: baseline !important;
                width: 100% !important;
                margin-top: 9px !important;
                /* Reduced to 9px for 12px total spacing from language selector (3px language margin-bottom + 9px = 12px) */
            }

            /* Hide any language selector in the mobile meta wrapper (moved to below game buttons) */
            .article-meta-wrapper-mobile .article-language-selector {
                display: none;
            }

            .breakdown-meta-container {
                flex-direction: column;
                /* Stack vertically on mobile for proper centering */
                flex-wrap: nowrap;
                align-items: stretch;
                /* Full width */
                gap: 0;
                /* Let per-element margins control vertical spacing for clarity */
            }

            /* Smartphone: spacing between mobile-controls-group and game buttons - compact spacing */
            .summary-text.expanded+.breakdown-meta-container {
                margin-top: 8px;
                /* Reduced from 10px for more compact mobile layout */
            }

            .game-buttons-container {
                width: 100% !important;
                /* Full width on mobile for proper centering */
                flex: none !important;
                /* Don't flex - take full width */
                min-width: 0;
                justify-content: center !important;
                /* Center buttons horizontally */
                order: 1;
                margin-left: 0 !important;
                /* Remove any left margin */
                margin-right: 0 !important;
                /* Remove any right margin */
                margin-bottom: 4px;
                /* Consistent 4px spacing below games on mobile */
            }

            /* Language selector below game buttons - split layout on mobile */
            .article-language-selector-mobile {
                display: flex !important;
                /* Show on mobile */
                justify-content: space-between !important;
                /* Space between read and explanation languages */
                align-items: center;
                width: 100%;
                margin-top: 4px;
                /* Even spacing relative to games */
                margin-bottom: 3px;
                /* Slightly tighter spacing to source/date */
                order: 2;
                /* After game buttons (order: 1), before desktop meta */
                font-size: 16px;
                /* Match .article-meta-mobile font size */
                font-weight: 400;
                /* Normal text weight */
                color: rgba(0, 0, 0, 0.45);
                /* Match "Show original title" color */
                text-transform: none;
                /* Use original casing from HTML */
            }

            /* Read languages (fr en) - left-aligned on mobile */
            .article-language-selector-read-mobile {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
            
            /* Mobile language toggle buttons - match profile dropdown styling */
            .article-language-selector-read-mobile .article-lang-toggle-mobile,
            .article-language-selector-explanation-mobile .article-lang-toggle-mobile {
                display: inline-flex;
                gap: 2px;
                background: rgba(240, 240, 240, 0.8);
                border-radius: 10px;
                padding: 3px;
                margin: 0;
                width: fit-content;
                flex-shrink: 0;
                box-sizing: border-box;
            }
            
            .article-language-selector-read-mobile .read-lang-btn.bf-tier-tab,
            .article-language-selector-read-mobile .explanation-lang-btn.bf-tier-tab,
            .article-language-selector-explanation-mobile .read-lang-btn.bf-tier-tab,
            .article-language-selector-explanation-mobile .explanation-lang-btn.bf-tier-tab {
                padding: 3px 5px;
                font-size: 11px;
                margin: 0;
                border-radius: 6px;
                background: transparent;
                border: none;
                font-family: inherit;
                font-weight: 600;
                color: var(--ink-muted);
                cursor: pointer;
                white-space: nowrap;
                box-sizing: border-box;
                transition: all 0.15s ease;
                min-height: 24px;
                min-width: 28px;
            }
            
            .article-language-selector-read-mobile .read-lang-btn.bf-tier-tab:hover,
            .article-language-selector-read-mobile .explanation-lang-btn.bf-tier-tab:hover,
            .article-language-selector-explanation-mobile .read-lang-btn.bf-tier-tab:hover,
            .article-language-selector-explanation-mobile .explanation-lang-btn.bf-tier-tab:hover {
                background-color: rgba(37, 99, 235, 0.05);
            }
            
            .article-language-selector-read-mobile .read-lang-btn.bf-tier-tab.selected,
            .article-language-selector-read-mobile .read-lang-btn.bf-tier-tab.active,
            .article-language-selector-read-mobile .explanation-lang-btn.bf-tier-tab.selected,
            .article-language-selector-read-mobile .explanation-lang-btn.bf-tier-tab.active,
            .article-language-selector-explanation-mobile .read-lang-btn.bf-tier-tab.selected,
            .article-language-selector-explanation-mobile .read-lang-btn.bf-tier-tab.active,
            .article-language-selector-explanation-mobile .explanation-lang-btn.bf-tier-tab.selected,
            .article-language-selector-explanation-mobile .explanation-lang-btn.bf-tier-tab.active {
                background: #fff !important;
                color: var(--french-blue) !important;
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
            }
            
            .article-language-selector-read-mobile .read-lang-btn.bf-tier-tab.selected:hover,
            .article-language-selector-read-mobile .read-lang-btn.bf-tier-tab.active:hover,
            .article-language-selector-read-mobile .explanation-lang-btn.bf-tier-tab.selected:hover,
            .article-language-selector-read-mobile .explanation-lang-btn.bf-tier-tab.active:hover,
            .article-language-selector-explanation-mobile .read-lang-btn.bf-tier-tab.selected:hover,
            .article-language-selector-explanation-mobile .read-lang-btn.bf-tier-tab.active:hover,
            .article-language-selector-explanation-mobile .explanation-lang-btn.bf-tier-tab.selected:hover,
            .article-language-selector-explanation-mobile .explanation-lang-btn.bf-tier-tab.active:hover {
                background: #fff !important;
                color: var(--french-blue) !important;
            }

            /* Explanation languages (fr en de es) - right-aligned on mobile */
            .article-language-selector-explanation-mobile {
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }

            /* Align last language option flush with right edge on smartphone */
            .article-language-selector-explanation-mobile .lang-option:last-child {
                margin-right: 0;
                /* Remove extra horizontal margin on the very last item */
                min-width: 0;
                /* Remove 36px min-width so text isn't centered in a wide box */
                text-align: right;
                /* Align text to the right edge of the span */
            }

            .article-meta-desktop {
                display: none;
                /* Hide source/date in container on mobile */
            }

            /* Source (left-aligned) on mobile */
            .article-meta-source-mobile {
                display: flex;
                justify-content: flex-start;
                align-items: baseline;
                /* Match language switcher / summary font size & color on mobile */
                font-size: 16px;
                /* Same as .summary-text / language switcher */
                line-height: 1.6;
                color: rgba(0, 0, 0, 0.85);
            }

            /* Ensure source link on mobile looks like plain text (no blue, no underline) */
            .article-meta-source-mobile .source-link {
                color: rgba(0, 0, 0, 0.45) !important;
                /* Match "Show original title" color */
                text-decoration: none !important;
                /* No underline */
            }

            .article-meta-source-mobile .source-link:hover {
                color: rgba(0, 0, 0, 0.45) !important;
                /* Keep same color on hover */
                text-decoration: none !important;
                /* No underline on hover */
                opacity: 0.7;
                /* Slight opacity change for feedback */
            }

            .article-meta-source-mobile .source-link:active {
                color: rgba(0, 0, 0, 0.45) !important;
                /* Match "Show original title" color */
                text-decoration: none !important;
                /* No underline on active */
                opacity: 0.5;
                /* Slight opacity change for feedback */
            }

            /* Date and time (right-aligned) on mobile */
            .article-meta-date-mobile {
                display: flex;
                justify-content: flex-end;
                align-items: baseline;
                /* Match language switcher / summary font size & color on mobile */
                font-size: 16px;
                /* Same as .summary-text / language switcher */
                line-height: 1.6;
                color: rgba(0, 0, 0, 0.45);
                /* Match "Show original title" color */
                white-space: pre;
                /* Preserve spaces, including after | */
            }

            /* Relative time (e.g., "il y a 22 min") - blue color matching language switcher */
            .article-meta-date-mobile .relative-time {
                color: var(--french-blue) !important;
                /* Match language switcher selected color */
            }

            /* Legacy class - keep for backwards compatibility but hide */
            .article-meta-mobile {
                display: none;
                /* Replaced by split layout */
            }

            /* Mobile: Improve touch targets for language selector buttons (base) */
            .article-language-selector-mobile .lang-option,
            .article-language-selector .lang-option {
                display: inline-block;
                /* Allow padding to work properly */
                padding: 12px 10px;
                /* Base padding; overridden for mobile-specific tweak below */
                margin: -6px 0px;
                /* No horizontal margin - spacing controlled by padding and word-spacing only */
                min-height: 36px;
                /* Ensure minimum touch target */
                min-width: 36px;
                /* Ensure minimum touch target */
                /* Match summary text sizing and color for language options */
                font-size: 16px;
                /* Match .summary-text font size */
                line-height: 1.6;
                /* Match .summary-text line height */
                color: rgba(0, 0, 0, 0.85);
                /* Match .summary-text color */
                text-align: center;
                vertical-align: middle;
                border-radius: 4px;
                /* Slight rounding for better touch feel */
                /* Visual feedback on touch */
                transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
            }

            /* Smartphone-only tweak: reduce padding to minimize visual gap while maintaining touch targets */
            .article-language-selector-mobile .lang-option {
                padding: 6px 2px;
                /* Reduced horizontal padding from 5px to 2px - maintains vertical touch target */
            }

            /* Remove horizontal padding from explanation languages for even 6px spacing (must come after general rule) */
            .article-language-selector-explanation-mobile .lang-option {
                padding-left: 0 !important;
                padding-right: 0 !important;
                padding-top: 6px !important;
                /* Keep vertical padding for touch targets */
                padding-bottom: 6px !important;
                /* Keep vertical padding for touch targets */
                margin-left: 0 !important;
                /* Ensure no left margin */
                margin-right: 0 !important;
                /* Ensure no right margin */
            }

            /* Align first language option flush with left edge on smartphone */
            .article-language-selector-mobile .lang-option:first-child {
                margin-left: 0;
                /* Remove extra horizontal margin on the very first item */
                padding-left: 0;
                /* Drop left padding so text aligns with other left-aligned content */
                min-width: 0;
                /* Remove 36px min-width so text isn't centered in a wide box */
                text-align: left;
                /* Align text to the left edge of the span */
            }

            /* Improve container layout for better spacing */
            .article-language-selector-mobile {
                line-height: 1.6;
                /* Better vertical alignment */
                word-spacing: 0px;
                /* Remove word-spacing - rely on padding only for spacing */
            }

            /* Also improve desktop inline selector spacing */
            .article-language-selector {
                line-height: 1.6;
                /* Better vertical alignment */
                word-spacing: 2px;
                /* Space between words (including separator) */
            }
        }

        /* .bf-breakdown-link styles are now unified with .bf-match-game-link above */
        /* Duplicate styles removed - using shared button styles */


        .bf-breakdown-panel {
            margin-top: 0;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            /* Performance: only hint GPU-compositable properties (not max-height) */
            will-change: opacity;
            transition: margin-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                max-height 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .bf-breakdown-panel.open {
            margin-top: 8px;
            /* Space from game buttons - kept for visual separation */
            margin-bottom: 0;
            /* No bottom margin - reduce space before buttons */
            opacity: 1;
            max-height: 1200px;
            /* Remove will-change after animation completes to free up resources */
            will-change: auto;
        }

        .bf-breakdown-content {
            font-size: 15px;
            padding: 0;
            padding-top: 3px;
            /* Space for tier toggle shadow (8px blur needs ~3px clearance) - same as VocaMatch */
            padding-bottom: 24px;
            /* Premium spacing: 24px bottom padding to buttons - match VocaMatch */
        }

        /* Breakdown Header Container - wraps header for consistent alignment (same as VocaMatch) */
        .breakdown-header-container {
            padding: 0 8px;
            /* Consistent padding on left and right for desktop */
            margin-bottom: 16px;
            /* Tighter spacing — divider removed, progress bar sits closer to header */
        }

        /* Breakdown Header - Title on left, Tier toggle on right (match VocaMatch exactly) */
        .breakdown-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 20px;
            /* Premium spacing: 20px to content below - match VocaMatch */
            margin-left: 0;
            /* No margin - container handles padding */
            margin-right: 0;
            /* No margin - container handles padding */
        }

        /* Title section - "Practice Phrases" text */
        .breakdown-title-section {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

        /* "Practice Phrases" text - match VocaMatch title style */
        .breakdown-title-text {
            font-size: 22.5px !important;
            /* Match VocaMatch title text */
            font-weight: 600 !important;
            /* Match VocaMatch title text */
            color: rgba(0, 0, 0, 0.9) !important;
            /* Match VocaMatch title text */
            line-height: 1.5;
            text-align: left;
            margin: 0;
        }

        /* Breakdown tier toggle in header - match VocaMatch styling exactly */
        .breakdown-header .bf-tier-toggle {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            /* Push to right side */
            margin-right: 0;
            /* No margin - container handles padding */
            gap: 3px;
            /* Increased by 20% from 2px - better visibility on desktop */
            padding: 5px;
            /* Increased by 20% from 4px - larger container */
            display: inline-flex;
            /* Keep compact - only as wide as content */
            align-items: center;
            /* Center align buttons */
            background: rgba(240, 240, 240, 0.8);
            /* Light gray background container */
            border-radius: 14px;
            /* Increased by 20% from 12px - larger rounded container */
            box-sizing: border-box;
            /* Include padding in width */
            width: fit-content;
            /* Prevent expansion - only take space needed */
            flex-shrink: 0;
            /* Don't shrink */
        }

        /* Desktop: Breakdown tier toggle buttons - match VocaMatch exactly */
        .breakdown-header .bf-tier-toggle .bf-tier-tab {
            padding: 5px 7px;
            /* Increased by 20% from 4px 6px - larger buttons */
            font-size: 14px;
            /* Increased by 20% from 12px - better readability on desktop */
            margin: 0;
            /* Remove margins - gap handles spacing */
            border-radius: 10px;
            /* Increased by 20% from 8px - larger rounded buttons */
            background: transparent;
            border: none;
            font-family: inherit;
            font-weight: 600;
            color: var(--ink-muted);
            cursor: pointer;
            white-space: nowrap;
            box-sizing: border-box;
        }

        /* Desktop: Active Breakdown tier button - match VocaMatch exactly */
        .breakdown-header .bf-tier-toggle .bf-tier-tab.active {
            background: #fff;
            color: var(--french-blue);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
            /* Increased by 20% from 8px shadow - larger shadow for consistency */
        }

        /* Breakdown text content - match tier toggle left alignment */
        .bf-breakdown-content .bf-tier-panel {
            padding-left: 8px;
            /* Match tier toggle and game-buttons-container left padding */
            padding-right: 8px;
            /* Match game-buttons-container right padding */
        }

        /* ========================================
           PhraseBuilder Styles
           Word-building game inside Breakdown panel
           ======================================== */

        /* Progress Bar */
        .pb-progress-bar {
            display: flex;
            flex-direction: row;
            gap: 3px;
            padding: 0 8px;
            margin-bottom: 12px;
        }

        .pb-progress-seg {
            flex: 1;
            height: 3px;
            border-radius: 1.5px;
            background: rgba(0, 0, 0, 0.08);
        }

        .pb-progress-seg.pb-seg-done {
            background: #2563eb;
        }

        /* Score Pill */
        .pb-score-pill {
            text-align: right;
            padding: 0 8px;
            margin-bottom: 8px;
            font-size: 13px;
        }

        .pb-score-count {
            font-weight: 700;
            color: #2563eb;
            font-size: 15px;
        }

        .pb-score-total {
            color: rgba(0, 0, 0, 0.4);
            font-size: 13px;
        }

        /* Cards Container */
        .pb-cards {
            display: flex;
            flex-direction: column;
        }

        .pb-card {
            padding: 14px 8px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }

        .pb-card:last-child {
            border-bottom: none;
        }

        .pb-card-completed {
            opacity: 0.85;
        }

        .pb-card-active {
            background: rgba(37, 99, 235, 0.04);
            border-radius: 16px;
            border-bottom: none;
            padding: 20px 12px;
            margin: 4px 0;
        }

        .pb-card-dimmed {
            opacity: 0.4;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .pb-card-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .pb-card-content {
            flex: 1;
            min-width: 0;
        }

        .pb-card-fr {
            font-size: 15px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
            line-height: 1.4;
        }

        .pb-card-en {
            font-size: 13px;
            color: rgba(0, 0, 0, 0.45);
            margin-top: 2px;
            line-height: 1.3;
        }

        .pb-card-en-primary {
            font-size: 15px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.75);
            line-height: 1.4;
        }

        /* Number Badge & Check Badge */
        .pb-number-badge {
            width: 28px;
            height: 28px;
            border-radius: 14px;
            background: rgba(0, 0, 0, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.4);
            flex-shrink: 0;
        }

        .pb-check-badge {
            width: 28px;
            height: 28px;
            border-radius: 14px;
            background: rgba(37, 99, 235, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2563eb;
            font-size: 14px;
            font-weight: 700;
            flex-shrink: 0;
        }

        /* Build Button */
        .pb-build-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px;
            border-radius: 20px;
            background: rgba(37, 99, 235, 0.08);
            border: 1.5px solid rgba(37, 99, 235, 0.2);
            color: #2563eb;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .pb-build-btn:hover {
            background: rgba(37, 99, 235, 0.14);
        }

        .pb-build-btn:active {
            transform: scale(0.96);
        }

        .pb-build-btn.pb-pulse {
            animation: pb-pulse 2s ease-in-out infinite;
        }

        .pb-hint-btn.pb-hint-pulse {
            animation: pb-pulse 1.2s ease-in-out 3;
        }

        /* PhraseBuilder Game */
        .pb-game {
            padding-top: 12px;
        }

        .pb-english-hint {
            font-size: 15px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.55);
            line-height: 1.5;
            margin-bottom: 16px;
        }

        .pb-slots-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 20px;
            min-height: 38px;
        }

        .pb-slot {
            padding: 6px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pb-slot-underline {
            height: 2px;
            border-radius: 1px;
            background: rgba(0, 0, 0, 0.12);
        }

        .pb-slot-underline.pb-slot-active {
            background: #2563eb;
            height: 2.5px;
        }

        .pb-slot-underline.pb-slot-wrong {
            background: #ef4444;
            height: 2.5px;
        }

        .pb-slot-filled {
            padding: 6px 12px;
            border-radius: 10px;
            background: rgba(37, 99, 235, 0.12);
            font-size: 15px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
        }

        .pb-slot-filled.pb-slot-pop {
            animation: pb-slot-pop 0.2s ease;
        }

        /* Word Bank */
        .pb-word-bank {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
        }

        .pb-tile {
            padding: 9px 14px;
            border-radius: 12px;
            border: 1.5px solid rgba(0, 0, 0, 0.1);
            background: rgba(0, 0, 0, 0.03);
            font-size: 15px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
            cursor: pointer;
            transition: all 0.2s ease;
            user-select: none;
            animation: pb-fade-in 0.25s ease backwards;
        }

        .pb-tile:hover:not(.pb-tile-used) {
            background: rgba(0, 0, 0, 0.06);
            border-color: rgba(0, 0, 0, 0.15);
        }

        .pb-tile:active:not(.pb-tile-used) {
            transform: scale(0.95);
        }

        .pb-tile-used {
            opacity: 0;
            transform: scale(0.8);
            pointer-events: none;
        }

        .pb-tile-wrong {
            animation: pb-shake 0.3s ease;
        }

        .pb-tile-hinted {
            border-color: rgba(37, 99, 235, 0.5);
            color: #2563eb;
            font-weight: 600;
            box-shadow: 0 0 12px rgba(37, 99, 235, 0.2);
            animation: pb-hint-glow 1.2s ease;
        }

        /* Actions Row */
        .pb-actions-row {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 6px;
            margin-top: 16px;
        }

        .pb-hint-btn {
            width: 28px;
            height: 28px;
            border-radius: 14px;
            background: rgba(37, 99, 235, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: none;
        }

        .pb-close-practice-btn {
            width: 28px;
            height: 28px;
            border-radius: 14px;
            background: rgba(0, 0, 0, 0.04);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(0, 0, 0, 0.3);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            border: none;
        }

        /* Completion Banner */
        .pb-completion-banner {
            text-align: center;
            padding: 8px;
            margin-top: 8px;
        }

        .pb-completion-text {
            font-size: 18px;
            font-weight: 700;
            color: #22c55e;
        }

        /* Tier Completion Celebration */
        .pb-celebration {
            text-align: center;
            padding: 32px 16px;
        }

        .pb-celebration-emoji {
            font-size: 48px;
            margin-bottom: 12px;
        }

        .pb-celebration-title {
            font-size: 24px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.85);
        }

        .pb-celebration-score-row {
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 2px;
            margin: 8px 0;
        }

        .pb-celebration-score-num {
            font-size: 28px;
            font-weight: 700;
            color: #2563eb;
        }

        .pb-celebration-score-divider {
            font-size: 20px;
            color: rgba(0, 0, 0, 0.3);
        }

        .pb-celebration-score-total {
            font-size: 20px;
            color: rgba(0, 0, 0, 0.5);
        }

        .pb-celebration-score-label {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.5);
        }

        .pb-celebration-subtitle {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.5);
            margin-bottom: 24px;
        }

        .pb-celebration-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        .pb-btn-primary {
            padding: 12px 28px;
            border-radius: 24px;
            background: #2563eb;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .pb-btn-primary:hover {
            background: #1d4ed8;
        }

        .pb-btn-secondary {
            padding: 10px 24px;
            background: transparent;
            color: rgba(0, 0, 0, 0.5);
            font-size: 14px;
            font-weight: 500;
            border: none;
            cursor: pointer;
        }

        .pb-empty {
            padding: 20px;
            text-align: center;
            color: rgba(0, 0, 0, 0.4);
            font-size: 14px;
        }

        /* PhraseBuilder Animations */
        @keyframes pb-shake {
            0% { transform: translateX(0); }
            20% { transform: translateX(-6px); }
            40% { transform: translateX(6px); }
            60% { transform: translateX(-4px); }
            80% { transform: translateX(4px); }
            100% { transform: translateX(0); }
        }

        @keyframes pb-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        @keyframes pb-slot-pop {
            0% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }

        @keyframes pb-hint-glow {
            0% { border-color: rgba(37, 99, 235, 0.6); box-shadow: 0 0 12px rgba(37, 99, 235, 0.25); }
            25% { border-color: rgba(37, 99, 235, 0.2); box-shadow: 0 0 4px rgba(37, 99, 235, 0.1); }
            50% { border-color: rgba(37, 99, 235, 0.6); box-shadow: 0 0 12px rgba(37, 99, 235, 0.25); }
            100% { border-color: rgba(0, 0, 0, 0.1); box-shadow: none; }
        }

        @keyframes pb-fade-in {
            0% { opacity: 0; transform: translateY(8px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* Match Game Styles */
        .game-buttons-container {
            display: flex;
            flex-direction: row;
            gap: 16px !important;
            /* Spacing between buttons */
            align-items: center !important;
            flex-wrap: nowrap;
            position: relative;
            padding: 12px 8px;
            /* Padding for shadows (buttons can lift 2px + 24px shadow = ~26px, using 12px top/bottom, 8px sides) */
            margin-bottom: 0;
        }

        .bf-quiz-link,
        .bf-match-game-link,
        .bf-breakdown-link {
            /* Premium CTA button style from landing page */
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-full);
            padding: 10px 20px !important;
            /* DO NOT CHANGE - perfected spacing */
            color: var(--ink);
            text-align: center !important;
            cursor: pointer;
            font-family: inherit;
            font-size: 15px !important;
            font-weight: 500 !important;
            text-decoration: none;
            position: relative;
            display: inline-block;
            white-space: nowrap;
            box-shadow: var(--shadow-sm);
            transition: all var(--duration-normal) var(--ease-out);
            /* Remove grey flash on tap (mobile) */
            -webkit-tap-highlight-color: transparent;
            outline: none;
            user-select: none;
            -webkit-user-select: none;
        }

        /* Ensure buttons fit content */
        .bf-quiz-link,
        .bf-match-game-link,
        .bf-breakdown-link {
            width: fit-content !important;
        }

        /* Hover state - premium landing page style */
        .bf-quiz-link:hover:not(.open),
        .bf-match-game-link:hover:not(.open),
        .bf-breakdown-link:hover:not(.open) {
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
            border-color: var(--border-hover);
        }

        /* Active/pressed state - gentle press */
        .bf-quiz-link:active:not(.open),
        .bf-match-game-link:active:not(.open),
        .bf-breakdown-link:active:not(.open) {
            transform: translateY(0) scale(0.98) translateZ(0) !important;
            box-shadow:
                0 1px 4px rgba(15, 23, 42, 0.1),
                0 2px 8px rgba(15, 23, 42, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
            animation: none !important;
            /* Pause pulse animation on press */
        }

        /* Open/Active state - keep glass effect, no blue background, no pulse */
        .bf-quiz-link.open,
        .bf-match-game-link.open,
        .bf-breakdown-link.open {
            background: var(--glass-tint) !important;
            /* Same as default - no blue background */
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
            border-color: rgba(var(--french-blue-dark-rgb), 0.5) !important;
            color: var(--french-blue) !important;
            /* Keep blue color when open */
            animation: none !important;
            /* Stop pulse when button is active/open */
            font-weight: 600 !important;
            box-shadow:
                0 2px 8px rgba(37, 99, 235, 0.2),
                0 4px 16px rgba(37, 99, 235, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
            transform: translateZ(0) !important;
        }

        .bf-quiz-link.open::before,
        .bf-match-game-link.open::before,
        .bf-breakdown-link.open::before {
            opacity: 0.5;
        }

        /* Clicked state - maintain active appearance */
        .bf-quiz-link.clicked,
        .bf-match-game-link.clicked,
        .bf-breakdown-link.clicked {
            /* Same as open state */
        }

        /* Focus states - accessible outline */
        .bf-quiz-link:focus,
        .bf-match-game-link:focus,
        .bf-breakdown-link:focus {
            outline: none;
        }

        .bf-quiz-link:focus-visible,
        .bf-match-game-link:focus-visible,
            .bf-breakdown-link:focus-visible {
                outline: 2px solid rgba(var(--french-blue-dark-rgb), 0.5) !important;
                outline-offset: 3px !important;
                border-radius: 999px !important;
            }

            /* Back to Article Button - Mobile Styles */
            .back-to-article-btn {
                margin: 10px auto 0px;
                /* Reduced margins on mobile (50% of original: 20px→10px, bottom margin 0px) */
                padding: 6px 14px;
                /* Slightly smaller padding on mobile */
                font-size: 13px;
                /* Slightly smaller font on mobile */
            }

        /* Back to Article Button - appears when any game is open */
        .back-to-article-btn {
            display: none;
            /* Hidden by default, shown via :has() selector when game is open */
            margin: 12px auto 0px;
            /* 12px top margin (reduced from 24px), auto horizontal (centers), 0px bottom margin */
            padding: 8px 16px;
            background: transparent;
            border: none;
            color: rgba(0, 0, 0, 0.5);
            /* Subtle gray text */
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            cursor: pointer;
            transition: opacity 300ms ease, color 200ms ease;
            opacity: 0;
            /* Start hidden for smooth fade-in */
            width: auto;
            /* Ensure button doesn't stretch */
        }

        /* Show button when any game panel is open - button is after breakdown-meta-container */
        .article-quiz.open ~ .breakdown-meta-container ~ .back-to-article-btn,
        .bf-match-game-panel.open ~ .breakdown-meta-container ~ .back-to-article-btn,
        .bf-breakdown-panel.open ~ .breakdown-meta-container ~ .back-to-article-btn {
            display: block !important;
            opacity: 1 !important;
        }

        /* Fallback: Show button when game link is open - using :has() selector */
        .article-card:has(.bf-quiz-link.open) .back-to-article-btn,
        .article-card:has(.bf-match-game-link.open) .back-to-article-btn,
        .article-card:has(.bf-breakdown-link.open) .back-to-article-btn {
            display: block !important;
            opacity: 1 !important;
        }

        .back-to-article-btn:hover {
            color: rgba(0, 0, 0, 0.7);
            /* Slightly darker on hover */
        }

        .back-to-article-btn:active {
            color: rgba(0, 0, 0, 0.6);
            transform: translateY(1px);
            /* Subtle press effect */
        }

        .back-to-article-btn:focus {
            outline: none;
        }

        .back-to-article-btn:focus-visible {
            outline: 1px solid rgba(0, 0, 0, 0.3);
            outline-offset: 2px;
            border-radius: 4px;
        }

        .bf-match-game-panel {
            margin-top: 0;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            background: transparent;
            /* Ensure no gray background during animation */
            will-change: max-height, opacity, margin-top;
            transition: margin-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                max-height 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .bf-match-game-panel.open {
            margin-top: 8px;
            margin-bottom: 0;
            /* No bottom margin - reduce space before buttons */
            opacity: 1;
            max-height: 2000px;
            /* Large enough for any content - content determines actual height */
            background: transparent;
            /* Ensure no gray background when open */
            will-change: auto;
        }

        .bf-match-game-panel.open:has(.match-game-reward.show) {
            max-height: 2000px;
            /* Same - reward adds naturally to content height */
        }

        .match-game-container {
            padding: 0 0 24px 0;
            /* Premium spacing: 24px bottom padding to buttons */
            background: transparent;
            /* Ensure no gray background */
        }

        /* Loading state - hide content and show spinner while panel animates */
        .match-game-container.loading {
            min-height: 200px;
            display: flex !important;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .match-game-container.loading > *:not(.vocamatch-loading-spinner) {
            visibility: hidden !important;
            opacity: 0 !important;
        }

        /* Loading spinner */
        .vocamatch-loading-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 32px;
            height: 32px;
            border: 3px solid rgba(37, 99, 235, 0.15);
            border-top-color: #2563eb;
            border-radius: 50%;
            animation: vocamatchSpinner 0.8s linear infinite;
        }

        @keyframes vocamatchSpinner {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* Hide spinner when not loading */
        .match-game-container:not(.loading) .vocamatch-loading-spinner {
            display: none;
        }

        /* Show content when not loading */
        .match-game-container:not(.loading) > * {
            visibility: visible;
            opacity: 1;
            transition: opacity 200ms ease-out;
        }

        /* VocaMatch loading state (when data not yet available) */
        .vocamatch-loading-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 24px;
            gap: 16px;
            /* Solid background to cover any content behind */
            background: var(--card-bg, #fff);
            position: relative;
            z-index: 10;
            min-height: 200px;
            border-radius: 16px;
            /* Ensure it takes full width */
            width: 100%;
            box-sizing: border-box;
        }

        .vocamatch-loading-state .vocamatch-loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid rgba(37, 99, 235, 0.15);
            border-top-color: #2563eb;
            border-radius: 50%;
            animation: vocamatchSpinner 0.8s linear infinite;
        }

        .vocamatch-loading-text {
            font-size: 15px;
            color: var(--ink-muted, #64748b);
            font-weight: 500;
        }

        /* VocaMatch retry state */
        .vocamatch-retry-message {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .vocamatch-retry-text {
            font-size: 15px;
            color: var(--ink-muted, #64748b);
            font-weight: 500;
        }

        .vocamatch-retry-btn {
            padding: 10px 24px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: #2563eb;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.1s ease;
        }

        .vocamatch-retry-btn:hover {
            background: #1d4ed8;
        }

        .vocamatch-retry-btn:active {
            transform: scale(0.97);
        }

        /* Classic Mode Badge */
        .match-game-classic-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(15, 23, 42, 0.06);
            border: 1px solid rgba(15, 23, 42, 0.1);
            border-radius: 999px;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink-muted);
            margin-bottom: 16px;
        }

        .classic-badge-icon {
            font-size: 14px;
            line-height: 1;
        }

        .classic-badge-text {
            letter-spacing: 0.01em;
        }

        .match-game-progress {
            display: flex;
            justify-content: flex-start;
            /* Left-align the count */
            align-items: center;
            margin-top: 0;
            /* No top margin - spacing handled by container padding */
            margin-bottom: 32px;
            /* Equal spacing below - matches panel margin-top (8px) + container padding-top (24px) = 32px */
            /* Removed border-bottom - no line needed */
        }

        /* Ensure column labels don't add extra spacing */
        .match-game-grid {
            margin-top: 0;
            /* No top margin - spacing handled by progress margin-bottom */
        }

        .match-progress-count {
            flex-shrink: 0;
            padding: 4px 10px;
            background: rgba(15, 23, 42, 0.06);
            border-radius: 999px;
            font-size: 13px !important;
            font-weight: 600;
            color: var(--ink-muted);
            white-space: nowrap;
        }

        .match-progress-text {
            display: inline-block;
        }

        .match-game-grid {
            display: grid;
            /* Fix for iOS 26 Safari / timing issue: Use minmax to ensure French and English columns have minimum width */
            grid-template-columns: auto minmax(80px, 1fr) auto minmax(80px, 1fr);
            /* Audio | French (min 80px) | Practice | English (min 80px) */
            gap: 16px;
            row-gap: 16px;
            /* Spacing between rows */
            align-items: center;
            /* Vertically center all items in each row */
            margin-top: 0;
            /* No top margin - tier toggle handles spacing */
            margin-bottom: 0;
            /* No bottom margin - container handles spacing */
            padding: 0 4px;
            /* Small horizontal padding to prevent edge shadow clipping */
            /* Grid is invisible - no borders, backgrounds, or visible styling */
            border: none;
            background: transparent;
            /* Fix for iOS 26 Safari / timing issue: Ensure grid columns have minimum width */
            min-width: 0; /* Allow grid to shrink */
        }
        
        /* Fix for iOS 26 Safari / timing issue: Ensure French and English columns have minimum width */
        /* Target the column containers (which use display: contents, so their children are grid items) */
        .match-game-column.match-game-french,
        .match-game-column.match-game-english {
            min-width: 0; /* Allow shrinking */
        }
        
        /* Ensure French and English labels have enough space and don't get cut off */
        .match-game-column.match-game-french > .match-game-column-label,
        .match-game-column.match-game-english > .match-game-column-label {
            min-width: 60px; /* Minimum width for "French" (6 chars) and "English" (7 chars) labels */
        }

        /* Column labels - first row of the grid */
        .match-game-column {
            display: contents;
            /* Make columns transparent - labels become direct grid children */
        }

        .match-game-column-label {
            font-size: 16px !important;
            font-weight: 700 !important;
            color: var(--ink) !important;
            text-transform: capitalize !important;
            letter-spacing: -0.01em !important;
            font-family: inherit !important;
            margin-top: 0;
            margin-bottom: 0;
            /* No bottom margin - grid gap handles spacing */
            text-align: center;
            padding: 0 12px;
            /* Horizontal padding for shadows */
            /* Labels are in first row, so they need bottom spacing */
            padding-bottom: 12px;
        }

        /* Practice column label: no padding */
        .match-game-column-practice .match-game-column-label {
            padding: 0 !important;
            padding-bottom: 12px !important;
            /* Keep bottom spacing */
        }

        /* Row-based structure: each row contains French word, Practice button, English word */
        .match-game-row {
            display: contents;
            /* Make rows transparent - items become direct grid children */
        }

        /* Row items - each is a direct child of the main grid, positioned in rows */
        .match-game-row-item {
            display: flex;
            align-items: center;
            /* Vertically center content within the item */
            padding: 0;
            /* No padding - grid gap handles spacing */
        }

        /* Audio button item - center the button */
        .match-game-row-item.match-game-row-audio {
            justify-content: center;
        }

        /* French word item - center the button */
        .match-game-row-item.match-game-row-french {
            justify-content: center;
            padding: 0 12px;
            /* Horizontal padding for shadows */
        }

        /* Practice button item - center it */
        .match-game-row-item.match-game-row-practice {
            justify-content: center;
        }

        /* English word item - center the button */
        .match-game-row-item.match-game-row-english {
            justify-content: center;
            padding: 0 12px;
            /* Horizontal padding for shadows */
        }

        .vocamatch-word-practice-placeholder {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
        }

        /* Practice button - elegant circular design matching audio buttons */
        .vocamatch-word-practice-btn {
            width: 28px;
            height: 28px;
            min-width: 28px;
            min-height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(37, 99, 235, 0.06);
            border: 1.5px solid rgba(37, 99, 235, 0.2);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            animation: audioButtonBreathing 3s ease-in-out infinite;
            animation-delay: -10000s; /* Synced with audio buttons */
        }

        @media (hover: hover) and (pointer: fine) {
            .vocamatch-word-practice-btn:hover {
                background: rgba(37, 99, 235, 0.12);
                border-color: rgba(37, 99, 235, 0.35);
                transform: scale(1.1);
                animation: none;
                box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            }

            .vocamatch-word-practice-btn:hover svg path {
                stroke: #1d4ed8;
            }
        }

        .vocamatch-word-practice-btn:active {
            transform: scale(0.92);
            background: rgba(37, 99, 235, 0.18);
        }

        .vocamatch-word-practice-btn svg {
            width: 14px;
            height: 14px;
        }

        .vocamatch-word-practice-btn svg path {
            stroke: #2563eb;
            stroke-width: 2;
        }

        .match-word {
            /* Modern glass morphism word buttons */
            background: var(--glass-tint) !important;
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
            border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
            border-radius: 16px !important;
            /* Modern rounded corners */
            padding: 12px 18px !important;
            /* Comfortable padding */
            font-family: inherit;
            font-size: 15px !important;
            font-weight: 500 !important;
            color: var(--ink);
            text-align: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            -webkit-tap-highlight-color: transparent;
            box-shadow:
                0 2px 8px rgba(15, 23, 42, 0.08),
                0 4px 16px rgba(15, 23, 42, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
            isolation: isolate;
            transform: translateZ(0);
            /* Fixed width for uniform appearance */
            width: 100%;
            /* Take full width of grid cell */
            max-width: 100%;
            box-sizing: border-box;
            /* Text handling for long phrases */
            white-space: normal;
            /* Allow text wrapping */
            word-wrap: break-word;
            overflow-wrap: break-word;
            /* Subtle entrance animation */
            animation: fadeInUp 0.4s ease-out backwards;
        }

        /* ============================================
           UNIFIED AUDIO BUTTON DESIGN SYSTEM
           Premium, elegant audio buttons with subtle breathing animation
           ============================================ */

        /* Breathing glow animation - subtle pulse to invite interaction */
        @keyframes audioButtonBreathing {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
            }
            50% {
                box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
            }
        }

        /* Playing state animation - more prominent pulse */
        @keyframes audioButtonPlaying {
            0%, 100% {
                box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
            }
            50% {
                box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15);
            }
        }

        /* Icon pulse for playing state */
        @keyframes iconPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(0.85); }
        }

        /* Base audio button - elegant circular design with ring */
        .match-word-audio-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            min-width: 28px;
            min-height: 28px;
            padding: 0;
            margin: 0;
            background: rgba(37, 99, 235, 0.06);
            border: 1.5px solid rgba(37, 99, 235, 0.2);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            position: relative;
            /* Subtle breathing animation to invite clicks - synced with practice button */
            animation: audioButtonBreathing 3s ease-in-out infinite;
            animation-delay: -10000s;
        }

        .match-word-audio-btn svg {
            width: 12px;
            height: 12px;
            color: #2563eb;
            transition: all 0.2s ease;
            pointer-events: none;
            /* Slight offset to visually center the play triangle */
            margin-left: 1px;
        }

        .match-word-audio-btn svg polygon,
        .match-word-audio-btn svg path,
        .match-word-audio-btn svg rect,
        .match-word-audio-btn svg circle {
            fill: #2563eb;
        }

        /* Hover state - desktop only */
        @media (hover: hover) and (pointer: fine) {
            .match-word-audio-btn:hover:not(:disabled):not(.playing):not(.loading) {
                background: rgba(37, 99, 235, 0.12);
                border-color: rgba(37, 99, 235, 0.35);
                transform: scale(1.1);
                animation: none; /* Pause breathing on hover */
                box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            }

            .match-word-audio-btn:hover:not(:disabled):not(.playing):not(.loading) svg polygon,
            .match-word-audio-btn:hover:not(:disabled):not(.playing):not(.loading) svg path {
                fill: #1d4ed8;
            }
        }

        .match-word-audio-btn:active:not(:disabled) {
            transform: scale(0.92);
            background: rgba(37, 99, 235, 0.18);
        }

        /* Playing state - prominent pulsing ring */
        .match-word-audio-btn.playing {
            background: rgba(37, 99, 235, 0.15);
            border-color: rgba(37, 99, 235, 0.4);
            animation: audioButtonPlaying 1.2s ease-in-out infinite;
        }

        .match-word-audio-btn.playing svg {
            animation: iconPulse 1.2s ease-in-out infinite;
        }

        .match-word-audio-btn.playing svg polygon,
        .match-word-audio-btn.playing svg path {
            fill: #1d4ed8;
        }

        /* Loading state */
        .match-word-audio-btn.loading {
            cursor: wait;
            pointer-events: none;
            opacity: 0.7;
            animation: none;
        }

        /* Error state */
        .match-word-audio-btn.error {
            background: rgba(220, 38, 38, 0.08);
            border-color: rgba(220, 38, 38, 0.25);
            animation: none;
        }

        .match-word-audio-btn.error svg polygon,
        .match-word-audio-btn.error svg path {
            fill: #dc2626;
        }

        .match-word-audio-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            animation: none;
        }

        /* Staggered entrance animation for word boxes */
        .match-word:nth-child(1) {
            animation-delay: 0.05s;
        }

        .match-word:nth-child(2) {
            animation-delay: 0.1s;
        }

        .match-word:nth-child(3) {
            animation-delay: 0.15s;
        }

        .match-word:nth-child(4) {
            animation-delay: 0.2s;
        }

        .match-word:nth-child(5) {
            animation-delay: 0.25s;
        }

        .match-word:nth-child(6) {
            animation-delay: 0.3s;
        }

        .match-word:nth-child(7) {
            animation-delay: 0.35s;
        }

        .match-word:nth-child(8) {
            animation-delay: 0.4s;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Hover state - premium subtle lift effect (50% reduced intensity) */
        .match-word:hover:not(.matched):not(.selected) {
            background: rgba(255, 255, 255, 0.75) !important;
            border-color: rgba(var(--french-blue-dark-rgb), 0.15) !important;
            /* 50% reduced from 0.3 */
            transform: translateY(-1px) scale(1.01) translateZ(0) !important;
            /* 50% reduced: -1px (was -2px), 1.01 (was 1.02) */
            box-shadow:
                0 1px 4px rgba(var(--french-blue-dark-rgb), 0.06),
                /* 50% reduced from 0.12 */
                0 2px 6px rgba(15, 23, 42, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        }

        /* Selected state - modern blue glow */
        .match-word.selected {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.25) 100%) !important;
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
            border-color: rgba(37, 99, 235, 0.5) !important;
            border-width: 1.5px !important;
            box-shadow:
                0 1px 4px rgba(37, 99, 235, 0.12),
                0 2px 6px rgba(37, 99, 235, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
            transform: translateZ(0) !important;
        }

        /* Matched state - modern green success */
        .match-word.matched {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.25) 100%) !important;
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
            border-color: rgba(34, 197, 94, 0.5) !important;
            opacity: 0.9;
            cursor: default;
            box-shadow:
                0 1px 4px rgba(34, 197, 94, 0.12),
                0 2px 6px rgba(34, 197, 94, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
            animation: matchSuccess 0.5s ease-out;
        }

        @keyframes matchSuccess {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        /* Wrong match state - red tint with shake animation */
        .match-word.wrong {
            animation: shake 0.3s ease;
            border-color: rgba(239, 68, 68, 0.5) !important;
            background: rgba(239, 68, 68, 0.1) !important;
            /* Red tint for wrong */
            box-shadow:
                0 2px 8px rgba(239, 68, 68, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-4px);
            }

            75% {
                transform: translateX(4px);
            }
        }

        .match-game-reward {
            margin-top: 16px;
            padding: 20px;
            background: rgba(15, 42, 107, 0.05);
            border-radius: 16px;
            border: 1px solid rgba(15, 42, 107, 0.1);
            text-align: center;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .match-game-reward.show {
            opacity: 1;
            transform: translateY(0);
        }

        .match-reward-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--french-blue);
            margin-bottom: 12px;
        }

        .match-reward-text {
            font-size: 18px;
            font-weight: 500;
            color: var(--ink);
            line-height: 1.6;
        }

        .match-game-empty {
            padding: 24px;
            text-align: center;
            color: var(--ink-muted);
            font-size: 15px;
        }

        /* ============================================
           MODERNIZED VOCAMATCH - TIER TABS (Like Breakdown)
           ============================================ */
        .vocamatch-container {
            padding: 0;
            background: transparent;
            /* Ensure no gray background */
        }

        .vocamatch-content {
            padding: 0;
            padding-top: 3px;
            /* Space for tier toggle shadow (8px blur needs ~3px clearance) */
            background: transparent;
            /* Ensure no gray background */
            display: flex;
            flex-direction: column;
            /* Ensure tier toggle appears before game panels */
        }

        .vocamatch-game-panel {
            background: transparent;
            /* Ensure no gray background during animation */
        }

        .vocamatch-game-wrapper {
            background: transparent;
            /* Ensure no gray background */
        }

        /* VocaMatch Header Container - wraps header and progress bar for consistent alignment */
        .vocamatch-header-container {
            padding: 0 8px;
            /* Consistent padding on left and right for desktop */
            margin-bottom: 24px;
            /* Spacing below container */
        }

        /* VocaMatch Header - Title/Counter on left, Tier toggle on right */
        .vocamatch-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 20px;
            /* Premium spacing: 20px to progress bar */
            margin-left: 0;
            /* No margin - container handles padding */
            margin-right: 0;
            /* No margin - container handles padding */
        }

        /* Title section - "Match the words" text + counter */
        .vocamatch-title-section {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

        /* "Match the words" text - match QuizMe question text style */
        .vocamatch-title-text {
            font-size: 22.5px !important;
            /* Increased by 25% from 18px */
            font-weight: 600 !important;
            /* Match QuizMe question text */
            color: rgba(0, 0, 0, 0.9) !important;
            /* Match QuizMe question text */
            line-height: 1.5;
            text-align: left;
            margin: 0;
        }

        /* Counter - match QuizMe progress indicator style */
        .vocamatch-counter {
            background: rgba(15, 23, 42, 0.06);
            /* Match QuizMe progress indicator */
            border-radius: 999px;
            /* Match QuizMe progress indicator */
            font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Match QuizMe */
            font-size: 13px;
            /* Match QuizMe progress indicator */
            font-weight: 600;
            /* Match QuizMe progress indicator */
            color: var(--ink-muted);
            /* Match QuizMe progress indicator */
            padding: 4px 10px;
            /* Match QuizMe progress indicator */
            white-space: nowrap;
            line-height: 1.5;
            display: inline-flex;
            align-items: center;
        }

        /* Tier toggle - moved to right side, inside container */
        .vocamatch-header .bf-tier-toggle {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            /* Push to right side */
            margin-right: 0;
            /* No margin - container handles padding */
            gap: 3px;
            /* Increased by 20% from 2px - better visibility on desktop */
            padding: 5px;
            /* Increased by 20% from 4px - larger container */
            display: inline-flex;
            /* Keep compact - only as wide as content */
            align-items: center;
            /* Center align buttons */
            background: rgba(240, 240, 240, 0.8);
            /* Light gray background container */
            border-radius: 14px;
            /* Increased by 20% from 12px - larger rounded container */
            box-sizing: border-box;
            /* Include padding in width */
            width: fit-content;
            /* Prevent expansion - only take space needed */
            flex-shrink: 0;
            /* Don't shrink */
        }

        /* Desktop: Tier toggle buttons - 20% larger for better visibility */
        .vocamatch-header .bf-tier-toggle .bf-tier-tab {
            padding: 5px 7px;
            /* Increased by 20% from 4px 6px - larger buttons */
            font-size: 14px;
            /* Increased by 20% from 12px - better readability on desktop */
            margin: 0;
            /* Remove margins - gap handles spacing */
            border-radius: 10px;
            /* Increased by 20% from 8px - larger rounded buttons */
            background: transparent;
            border: none;
            font-family: inherit;
            font-weight: 600;
            color: var(--ink-muted);
            cursor: pointer;
            white-space: nowrap;
            box-sizing: border-box;
        }

        /* Desktop: Active tier button - 20% larger shadow for consistency */
        .vocamatch-header .bf-tier-toggle .bf-tier-tab.active {
            background: #fff;
            color: var(--french-blue);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            /* Increased shadow for larger buttons */
        }

        /* Progress bar comes after tier toggle - inside container */
        .vocamatch-header-container .vocamatch-progress-bar {
            margin: 0;
            margin-top: 16px;
            /* Space below tier toggle for visual separation */
            padding: 0;
            /* No padding */
            width: 100%;
            /* Full width within container */
            box-sizing: border-box;
        }

        /* Progress bar container - full width within progress bar */
        .vocamatch-header-container .vocamatch-progress-bar .match-progress-bar-container {
            margin: 0;
            /* No margins */
            width: 100%;
            /* Full width */
        }

        /* Fix wrapper height for VocaMatch progress bar (not in flex container) */
        .vocamatch-progress-bar .match-progress-bar-wrapper {
            flex: none;
            /* Remove flex since not in flex container */
            width: 100%;
            /* Full width */
            height: auto;
            /* Auto height based on content */
        }

        .vocamatch-progress-bar .match-progress {
            flex: none;
            /* Remove flex since not in flex container */
            width: 100%;
            /* Full width */
            height: auto;
            /* Auto height based on content */
        }

        .vocamatch-game-panels {
            position: relative;
        }

        .vocamatch-game-panel {
            display: block;
        }

        .vocamatch-game-panel[hidden] {
            display: none;
        }

        /* VocaMatch Word Tooltip Styling - Match regular tooltip format */
        .vocamatch-word-tooltip {
            position: fixed;
            z-index: 10000;
            background: var(--glass-tint);
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
            border: 1.5px solid var(--glass-border);
            border-radius: 16px;
            padding: 16px 20px;
            box-shadow:
                0 4px 16px rgba(15, 23, 42, 0.15),
                0 8px 32px rgba(15, 23, 42, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            max-width: 300px;
            pointer-events: none;
        }

        /* Use same classes and styling as regular tooltip for consistency */
        .vocamatch-word-tooltip .word-display {
            display: block;
            font-weight: 700;
            font-style: italic;
            /* Translation in italic */
            font-size: 17px;
            color: #1a1a1c;
            margin-bottom: 16px;
            line-height: 1.3;
            letter-spacing: -0.01em;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }

        .vocamatch-word-tooltip .note {
            display: block;
            font-size: 15px;
            color: #3c3c43;
            line-height: 1.4;
            margin-top: 16px;
            margin-bottom: 10px;
            font-style: italic;
            font-weight: 600;
            letter-spacing: -0.003em;
        }

        .vocamatch-word-tooltip .definition {
            display: block;
            font-size: 15px;
            color: #3c3c43;
            line-height: 1.45;
            margin-top: 10px;
            margin-bottom: 0;
        }

        /* Buttons should always be visible - users need to switch between Quiz/VocaMatch/Breakdown */
        /* No special hiding needed - consistent with Quiz Me and Breakdown behavior */

        /* ============================================
           MODERNIZED VOCAMATCH - GAME UI
           ============================================ */
        .vocamatch-game-wrapper {
            padding: 24px 0;
        }

        .match-game-progress {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-top: 0;
            /* No top margin - spacing handled by tier toggle margin-bottom */
            margin-bottom: 24px;
            margin-left: 8px;
            /* Match game-buttons-container left padding (8px) for proper alignment */
        }

        .match-progress-indicator {
            flex-shrink: 0;
            padding: 4px 10px;
            background: rgba(15, 23, 42, 0.06);
            border-radius: 999px;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink-muted);
            white-space: nowrap;
        }

        .match-progress-text {
            display: inline-block;
        }

        .match-progress-bar-wrapper {
            flex: 1;
            position: relative;
            margin: 0;
        }

        .match-progress {
            flex: 1;
            position: relative;
            margin: 0;
        }

        /* VocaMatch Progress Bar - Match Quiz Styling Exactly */
        .match-progress-bar-container {
            width: 100%;
            height: 7px;
            /* Desktop height */
            margin-top: 8px;
            background: linear-gradient(90deg,
                    rgba(0, 0, 0, 0.04) 0%,
                    rgba(0, 0, 0, 0.08) 50%,
                    rgba(0, 0, 0, 0.04) 100%);
            background-size: 200% 100%;
            border-radius: 100px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
            animation: containerIdleShimmer 3s ease-in-out infinite;
        }

        /* Duolingo-style idle animation - subtle shimmer on empty container */
        @keyframes containerIdleShimmer {

            0%,
            100% {
                background-position: 0% 0;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05),
                    0 0 0 rgba(37, 99, 235, 0);
            }

            50% {
                background-position: 100% 0;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05),
                    0 0 8px rgba(37, 99, 235, 0.1);
            }
        }

        /* Subtle pulse effect on container to draw attention */
        .match-progress-bar-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(37, 99, 235, 0.05) 30%,
                    rgba(37, 99, 235, 0.1) 50%,
                    rgba(37, 99, 235, 0.05) 70%,
                    transparent 100%);
            background-size: 200% 100%;
            border-radius: 100px;
            animation: containerPulse 2.5s ease-in-out infinite;
            opacity: 0;
        }

        @keyframes containerPulse {

            0%,
            100% {
                opacity: 0;
                background-position: -100% 0;
            }

            50% {
                opacity: 1;
                background-position: 200% 0;
            }
        }

        /* When progress bar has content, reduce container animation */
        .match-progress-bar-container.has-progress {
            animation: none;
        }

        .match-progress-bar-container.has-progress::before {
            animation: none;
            opacity: 0;
        }

        .match-progress-bar {
            height: 100%;
            background: linear-gradient(90deg,
                    #2563eb 0%,
                    #3b82f6 25%,
                    #60a5fa 50%,
                    #3b82f6 75%,
                    #2563eb 100%);
            background-size: 200% 100%;
            border-radius: 100px;
            transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            /* Match quiz transition */
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(37, 99, 235, 0.3),
                0 0 20px rgba(37, 99, 235, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            animation: progressShimmer 2s ease-in-out infinite;
        }

        /* Shimmer animation for progress bar */
        @keyframes progressShimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* Glow effect that intensifies as progress increases */
        .match-progress-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    transparent 100%);
            border-radius: 100px;
            animation: progressGlow 1.5s ease-in-out infinite;
        }

        @keyframes progressGlow {

            0%,
            100% {
                opacity: 0.3;
            }

            50% {
                opacity: 0.6;
            }
        }

        /* Pulse effect on progress updates */
        .match-progress-bar.progress-update {
            animation: progressShimmer 2s ease-in-out infinite,
                progressPulse 0.5s ease-out;
        }

        @keyframes progressPulse {
            0% {
                transform: scaleY(1);
                box-shadow: 0 0 10px rgba(37, 99, 235, 0.3),
                    0 0 20px rgba(37, 99, 235, 0.15);
            }

            50% {
                transform: scaleY(1.15);
                box-shadow: 0 0 20px rgba(37, 99, 235, 0.5),
                    0 0 30px rgba(37, 99, 235, 0.3);
            }

            100% {
                transform: scaleY(1);
                box-shadow: 0 0 10px rgba(37, 99, 235, 0.3),
                    0 0 20px rgba(37, 99, 235, 0.15);
            }
        }

        /* Completion celebration animation - Duolingo-style dopamine hit! */
        .match-progress-bar.complete {
            background: linear-gradient(90deg,
                    #10b981 0%,
                    #34d399 20%,
                    #6ee7b7 40%,
                    #34d399 60%,
                    #10b981 80%,
                    #34d399 100%);
            background-size: 300% 100%;
            animation: progressShimmer 0.8s ease-in-out infinite,
                completeCelebration 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.6),
                0 0 50px rgba(16, 185, 129, 0.4),
                0 0 70px rgba(16, 185, 129, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        @keyframes completeCelebration {
            0% {
                transform: scaleY(1);
                box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
            }

            25% {
                transform: scaleY(1.4);
                box-shadow: 0 0 40px rgba(16, 185, 129, 0.8);
            }

            50% {
                transform: scaleY(1.1);
                box-shadow: 0 0 50px rgba(16, 185, 129, 0.9);
            }

            75% {
                transform: scaleY(1.25);
                box-shadow: 0 0 45px rgba(16, 185, 129, 0.8);
            }

            100% {
                transform: scaleY(1);
                box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
            }
        }

        /* Enhanced particle effects for completion celebration */
        .match-progress-bar-container.complete::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 6px;
            height: 6px;
            background: #10b981;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: particleBurst 1s ease-out forwards;
            box-shadow:
                -25px -15px 0 -2px #34d399,
                25px -15px 0 -2px #6ee7b7,
                -20px 20px 0 -2px #10b981,
                20px 20px 0 -2px #34d399,
                -35px 8px 0 -2px #6ee7b7,
                35px 8px 0 -2px #10b981,
                -15px -25px 0 -2px #34d399,
                15px -25px 0 -2px #10b981,
                0 30px 0 -2px #6ee7b7,
                -40px 0 0 -2px #34d399,
                40px 0 0 -2px #10b981;
        }

        @keyframes particleBurst {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            50% {
                opacity: 0.8;
                transform: translate(-50%, -50%) scale(1.2);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
        }


        .match-game-hint {
            text-align: center;
            font-size: 14px;
            color: var(--ink-muted);
            margin-top: 20px;
            margin-bottom: 0;
        }

        /* Show desktop hint, hide mobile hint by default */
        .match-game-hint-mobile {
            display: none;
        }

        /* Hide desktop hint, show mobile hint on mobile */
        @media (max-width: 768px) {
            .match-game-hint-desktop {
                display: none;
            }

            .match-game-hint-mobile {
                display: inline;
            }
        }

        /* ============================================
           MODERNIZED VOCAMATCH - SIMPLE COMPLETION MESSAGE
           ============================================ */
        .vocamatch-completion-message {
            margin-top: 24px;
            margin-bottom: 0;
            /* No bottom margin */
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .vocamatch-completion-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            padding: 8px 16px;
            /* 8px top/bottom, 16px left/right to match match-game-grid (4px) + match-game-column (12px) = 16px total padding for alignment */
        }

        .vocamatch-completion-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .vocamatch-completion-text {
            font-size: 17px;
            /* Match quiz feedback-message premium-completion */
            font-weight: 600;
            /* Match quiz feedback-message premium-completion */
            color: #059669;
            /* Match quiz feedback-message premium-completion color */
            letter-spacing: -0.02em;
            /* Match quiz feedback-message premium-completion */
            margin: 0;
            flex-shrink: 0;
            animation: premiumMessagePulse 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            /* Match quiz feedback-message premium-completion animation */
        }

        .vocamatch-completion-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .vocamatch-action-btn {
            padding: 6px 8px;
            /* Match bf-tier-tab compact padding (reduced by 50% from 16px to 8px) */
            font-size: 14px;
            /* Match bf-tier-tab font-size */
            font-weight: 600;
            /* Match bf-tier-tab font-weight */
            border-radius: 8px;
            /* Match bf-tier-tab border-radius */
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-block;
            font-family: inherit;
            /* Match bf-tier-tab font-family */
            margin: 0 4px;
            /* Match bf-tier-tab margin */
        }

        .vocamatch-play-another {
            background: rgba(37, 99, 235, 1);
            color: white;
        }

        .vocamatch-play-another:hover {
            background: rgba(29, 78, 216, 1);
        }

        .vocamatch-play-level {
            background: #fff;
            /* Match bf-tier-tab.active background */
            color: var(--french-blue);
            /* Match bf-tier-tab.active color */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            /* Match bf-tier-tab.active box-shadow */
        }

        .vocamatch-play-level:hover {
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
        }

        .vocamatch-continue {
            background: transparent;
            /* Match bf-tier-tab background */
            color: var(--ink-muted);
            /* Match bf-tier-tab color */
        }

        .vocamatch-continue:hover {
            background: rgba(0, 0, 0, 0.03);
        }

        .vocamatch-practice {
            background: rgba(37, 99, 235, 0.1);
            color: var(--french-blue);
            border: 1px solid rgba(37, 99, 235, 0.2);
        }

        .vocamatch-practice:hover {
            background: rgba(37, 99, 235, 0.15);
            border-color: rgba(37, 99, 235, 0.3);
        }

        /* ============================================
           VOCAMATCH PRACTICE MODAL
           ============================================ */
        .vocamatch-practice-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            pointer-events: none;
        }

        .vocamatch-practice-modal-active {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
        }

        .vocamatch-practice-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }

        .vocamatch-practice-modal-content {
            position: relative;
            background: white;
            border-radius: 20px;
            max-width: 800px;
            width: 90%;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: scale(0.95);
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
        }
        
        /* Instant close - no transform delay */
        .vocamatch-practice-modal:not(.vocamatch-practice-modal-active) .vocamatch-practice-modal-content {
            transition: transform 0.08s ease-out !important;
        }

        .vocamatch-practice-modal-active .vocamatch-practice-modal-content {
            transform: scale(1);
        }

        .vocamatch-practice-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 28px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            gap: 16px;
            min-width: 0;
            /* Allow flex children to shrink below content size */
            position: relative;
            /* For absolute positioning of close button */
        }

        /* Word display in header */
        .vocamatch-practice-modal-header .vocamatch-practice-word-main {
            display: flex;
            align-items: baseline;
            gap: 12px;
            flex: 1;
            margin: 0;
            flex-wrap: wrap;
            /* Allow wrapping on very small screens */
            min-width: 0;
            /* Allow flex item to shrink below content size */
            overflow: visible;
            /* Allow close button to overflow */
        }

        /* Buttons container (audio only on desktop) */
        .vocamatch-practice-modal-header .vocamatch-practice-header-buttons {
            display: flex;
            /* Show on desktop for audio button */
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
            /* Don't shrink */
            margin-left: 0;
            /* Audio button stays with words on left */
        }

        /* Position close button absolutely on right side of header on desktop */
        .vocamatch-practice-modal-header .vocamatch-practice-header-buttons .vocamatch-practice-modal-close {
            position: absolute;
            /* Position absolutely relative to header */
            top: 50%;
            /* Center vertically in header */
            right: 28px;
            /* Match header padding-right (28px) */
            transform: translateY(-50%);
            /* Center vertically */
            display: flex !important;
            /* Show on desktop */
            margin-left: 0 !important;
            /* Remove any margin */
            z-index: 10;
            /* Ensure it's above other content */
        }

        /* Audio button in header - visible on desktop */
        .vocamatch-practice-modal-header .vocamatch-practice-header-buttons .vocamatch-pronunciation-play-btn {
            display: flex;
            /* Show audio button on desktop */
            flex-shrink: 0;
        }

        /* Hide mobile audio button on desktop (only show header-buttons version) */
        .vocamatch-practice-modal-header .vocamatch-practice-word-main .vocamatch-pronunciation-play-btn {
            display: none;
            /* Hide on desktop - only show button in header-buttons */
        }

        .vocamatch-practice-modal-header .vocamatch-practice-word-french {
            font-size: 22px;
            font-weight: 600;
            color: var(--ink);
            letter-spacing: -0.01em;
            flex-shrink: 1;
            /* Allow to shrink when needed */
            min-width: 0;
            /* Allow to shrink below content size */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /* Prevent wrapping, use ellipsis instead */
        }

        .vocamatch-practice-modal-header .vocamatch-practice-word-english {
            font-size: 16px;
            color: var(--ink-muted);
            font-weight: 400;
            flex-shrink: 1;
            /* Allow to shrink when needed */
            min-width: 0;
            /* Allow to shrink below content size */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /* Prevent wrapping, use ellipsis instead */
        }

        .vocamatch-practice-modal-close {
            background: transparent;
            border: none;
            padding: 12px;
            /* Increased for larger touch target (44x44px minimum) */
            min-width: 44px;
            /* iOS recommended minimum touch target */
            min-height: 44px;
            /* iOS recommended minimum touch target */
            width: 44px;
            /* Fixed width to prevent shrinking */
            height: 44px;
            /* Fixed height to prevent shrinking */
            cursor: pointer;
            color: var(--ink-muted);
            border-radius: 8px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: manipulation;
            /* Remove 300ms click delay on mobile */
            -webkit-tap-highlight-color: transparent;
            /* Remove tap highlight */
            position: relative;
            /* Default positioning (overridden on mobile) */
            z-index: 10;
            /* Ensure button is above other content */
            flex-shrink: 0;
            /* Never shrink - always maintain size */
        }

        .vocamatch-practice-modal-close:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--ink);
        }

        .vocamatch-practice-modal-close:active {
            background: rgba(0, 0, 0, 0.1);
            transform: scale(0.95);
            /* Visual feedback on press */
        }

        .vocamatch-practice-modal-body {
            padding: 24px 28px;
            overflow-y: auto;
            flex: 1;
            -webkit-overflow-scrolling: touch;
            /* Smooth scrolling on iOS */
        }

        /* Simplified word item - no nested boxes */
        .vocamatch-practice-word-item {
            padding: 20px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }

        .vocamatch-practice-word-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .vocamatch-practice-word-item:first-child {
            padding-top: 0;
        }

        /* Main word display - prominent */
        .vocamatch-practice-word-main {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 16px;
        }

        .vocamatch-practice-word-french {
            font-size: 22px;
            font-weight: 600;
            color: var(--ink);
            letter-spacing: -0.01em;
        }

        .vocamatch-practice-word-english {
            font-size: 16px;
            color: var(--ink-muted);
            font-weight: 400;
        }

        /* Details section - clean, minimal, horizontal layout */
        .vocamatch-practice-word-details {
            display: flex;
            flex-direction: column;
            gap: 16px;
            /* Comfortable spacing between rows */
        }

        /* Detail rows - horizontal layout (label: value) */
        .vocamatch-practice-detail-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            /* Gap between label and value */
            line-height: 1.6;
            /* Generous line height for readability */
        }

        /* Ensure wrapped text aligns with label start */
        .vocamatch-practice-detail-row .vocamatch-practice-detail-value {
            text-indent: 0;
            /* Remove any text indentation */
            margin-left: 0;
            /* Remove any left margin */
        }

        /* Labels - bold and black like French word */
        .vocamatch-practice-detail-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            /* Black like French word, not muted */
            text-transform: none;
            /* Natural case */
            letter-spacing: -0.01em;
            margin: 0;
            flex-shrink: 0;
            /* Prevent label from shrinking */
        }


        /* Values - comfortable reading size */
        .vocamatch-practice-detail-value {
            font-size: 15px;
            color: var(--ink);
            line-height: 1.6;
            /* Generous line height for easy reading */
            margin: 0;
            padding: 0;
            flex: 1;
            /* Allow value to take remaining space */
            min-width: 0;
            /* Allow text to wrap properly */
            text-indent: 0;
            /* No indentation on wrapped lines */
            box-sizing: border-box;
        }

        /* Full-width rows (for Explanation and Cultural Note) - keep inline but allow wrapping */
        .vocamatch-practice-detail-row.vocamatch-practice-detail-full {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 8px;
            align-items: start;
        }

        .vocamatch-practice-detail-row.vocamatch-practice-detail-full .vocamatch-practice-detail-label {
            grid-column: 1;
        }

        .vocamatch-practice-detail-row.vocamatch-practice-detail-full .vocamatch-practice-detail-value {
            grid-column: 2;
            min-width: 0;
            /* Allow text to wrap properly */
            padding-left: 0;
            margin-left: 0;
            text-indent: 0;
        }

        /* Pronunciation Section - Clean, label-free design */
        .vocamatch-pronunciation-section {
            margin-top: 0;
            margin-bottom: 16px;
            /* Space below pronunciation section */
            padding-top: 0;
        }

        .vocamatch-pronunciation-section .vocamatch-practice-detail-label {
            display: none;
            /* Hide label for cleaner look */
        }

        .vocamatch-pronunciation-section .vocamatch-practice-detail-value {
            flex: 1 1 100%;
            /* Take full width */
            min-width: 100%;
        }

        /* Enhanced Pronunciation Display */
        .vocamatch-pronunciation-display {
            font-size: 15px;
            font-weight: 500;
            line-height: 1.6;
            width: 100%;
        }

        .vocamatch-pronunciation-words {
            display: flex;
            flex-direction: column;
            gap: 4px;
            /* Reduced from 8px for more compact layout */
        }

        .vocamatch-pronunciation-word-item {
            display: flex;
            align-items: baseline;
            gap: 8px;
            /* Spacing between elements */
            padding: 3px 0;
            /* Comfortable padding */
            line-height: 1.6;
            /* Better readability */
        }

        /* Individual word play button - unified audio button design */
        .vocamatch-pronunciation-word-play-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            min-width: 28px;
            min-height: 28px;
            padding: 0;
            margin: 0;
            margin-right: 4px;
            background: rgba(37, 99, 235, 0.06);
            border: 1.5px solid rgba(37, 99, 235, 0.2);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            position: relative;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            animation: audioButtonBreathing 3s ease-in-out infinite;
        }

        .vocamatch-pronunciation-word-play-btn svg {
            width: 12px;
            height: 12px;
            transition: all 0.2s ease;
            pointer-events: none;
            margin-left: 1px;
        }

        .vocamatch-pronunciation-word-play-btn svg polygon,
        .vocamatch-pronunciation-word-play-btn svg path {
            fill: #2563eb;
        }

        /* Hover state - desktop only */
        @media (hover: hover) and (pointer: fine) {
            .vocamatch-pronunciation-word-play-btn:hover:not(:disabled):not(.playing):not(.loading) {
                background: rgba(37, 99, 235, 0.12);
                border-color: rgba(37, 99, 235, 0.35);
                transform: scale(1.1);
                animation: none;
                box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            }
        }

        .vocamatch-pronunciation-word-play-btn:active:not(:disabled) {
            transform: scale(0.92);
            background: rgba(37, 99, 235, 0.18);
        }

        /* Playing state */
        .vocamatch-pronunciation-word-play-btn.playing {
            background: rgba(37, 99, 235, 0.15);
            border-color: rgba(37, 99, 235, 0.4);
            animation: audioButtonPlaying 1.2s ease-in-out infinite;
        }

        .vocamatch-pronunciation-word-play-btn.playing svg {
            animation: iconPulse 1.2s ease-in-out infinite;
        }

        /* Loading state */
        .vocamatch-pronunciation-word-play-btn.loading {
            cursor: wait;
            pointer-events: none;
            opacity: 0.7;
            animation: none;
        }

        .vocamatch-pronunciation-word-play-btn.error {
            background: rgba(220, 38, 38, 0.08);
            border-color: rgba(220, 38, 38, 0.25);
            animation: none;
        }

        .vocamatch-pronunciation-word-play-btn.error svg polygon,
        .vocamatch-pronunciation-word-play-btn.error svg path {
            fill: #dc2626;
        }

        .vocamatch-pronunciation-word-play-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            animation: none;
        }

        .vocamatch-pronunciation-word-label {
            font-weight: 500;
            /* Lighter than section labels (600) */
            color: var(--ink-muted);
            /* Muted color to distinguish from section headings */
            font-size: 14px;
            flex-shrink: 0;
            /* Prevent label from shrinking */
            white-space: nowrap;
            /* Keep word and translation together */
        }

        .vocamatch-pronunciation-word-translation {
            font-weight: 400;
            color: var(--ink-muted);
            font-size: 13px;
            font-style: italic;
        }

        .vocamatch-pronunciation-word-value {
            font-size: 15px;
            /* Slightly smaller for more compact feel */
            font-weight: 500;
            color: var(--ink);
            letter-spacing: 0.5px;
            font-family: 'Courier New', monospace;
            /* Monospace for consistent spacing */
            flex: 1;
            /* Allow pronunciation to take remaining space */
        }

        .vocamatch-pronunciation-single {
            font-size: 16px;
            font-weight: 500;
            color: var(--ink);
            letter-spacing: 0.5px;
            font-family: 'Courier New', monospace;
        }

        .vocamatch-pronunciation-single-translation {
            font-weight: 400;
            color: var(--ink-muted);
            font-size: 14px;
            font-style: italic;
            margin-left: 8px;
        }

        /* Pronunciation Play Button - Unified elegant design */
        .vocamatch-pronunciation-play-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            min-width: 36px;
            min-height: 36px;
            padding: 0;
            margin: 0;
            background: rgba(37, 99, 235, 0.06);
            border: 1.5px solid rgba(37, 99, 235, 0.2);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            position: relative;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            animation: audioButtonBreathing 3s ease-in-out infinite;
        }

        .vocamatch-pronunciation-play-btn svg {
            width: 14px;
            height: 14px;
            transition: all 0.2s ease;
            pointer-events: none;
            margin-left: 2px;
        }

        .vocamatch-pronunciation-play-btn svg polygon,
        .vocamatch-pronunciation-play-btn svg path {
            fill: #2563eb;
        }

        /* Hover state - desktop only */
        @media (hover: hover) and (pointer: fine) {
            .vocamatch-pronunciation-play-btn:hover:not(:disabled):not(.playing):not(.loading) {
                background: rgba(37, 99, 235, 0.12);
                border-color: rgba(37, 99, 235, 0.35);
                transform: scale(1.1);
                animation: none;
                box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            }
        }

        .vocamatch-pronunciation-play-btn:active:not(:disabled) {
            transform: scale(0.92);
            background: rgba(37, 99, 235, 0.18);
        }

        /* Playing state */
        .vocamatch-pronunciation-play-btn.playing {
            background: rgba(37, 99, 235, 0.15);
            border-color: rgba(37, 99, 235, 0.4);
            animation: audioButtonPlaying 1.2s ease-in-out infinite;
        }

        .vocamatch-pronunciation-play-btn.playing svg {
            animation: iconPulse 1.2s ease-in-out infinite;
        }

        .vocamatch-pronunciation-play-btn.playing svg polygon,
        .vocamatch-pronunciation-play-btn.playing svg path {
            fill: #1d4ed8;
        }

        /* Loading state */
        .vocamatch-pronunciation-play-btn.loading {
            cursor: wait;
            pointer-events: none;
            opacity: 0.7;
            animation: none;
        }

        .vocamatch-pronunciation-play-btn.error {
            background: rgba(220, 38, 38, 0.08);
            border-color: rgba(220, 38, 38, 0.25);
            animation: none;
        }

        .vocamatch-pronunciation-play-btn.error svg polygon,
        .vocamatch-pronunciation-play-btn.error svg path {
            fill: #dc2626;
        }

        .vocamatch-pronunciation-play-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            pointer-events: none;
            animation: none;
        }

        .vocamatch-pronunciation-play-btn.unsupported {
            display: none;
        }


        /* Pronunciation display - clean, no button inline */
        .vocamatch-pronunciation-display {
            display: block;
            width: 100%;
        }

        /* Example sentences - beautiful, educational display */
        .vocamatch-practice-examples {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
        }

        .vocamatch-practice-example-sentence {
            font-size: 15px;
            line-height: 1.7;
            color: var(--ink);
            padding: 12px 16px;
            background: rgba(37, 99, 235, 0.04);
            border-left: 3px solid rgba(37, 99, 235, 0.3);
            border-radius: 8px;
            font-style: italic;
            transition: all 0.2s ease;
        }

        .vocamatch-practice-example-sentence:hover {
            background: rgba(37, 99, 235, 0.06);
            border-left-color: rgba(37, 99, 235, 0.5);
        }

        .vocamatch-practice-register {
            display: inline;
            font-size: 15px;
            font-weight: 400;
            text-transform: capitalize;
            color: var(--ink);
            /* No background, border, or padding - just plain text */
        }

        /* Mobile responsive styles for practice modal */
        @media (max-width: 768px) {
            /* ============================================
               PRACTICE MODAL - MOBILE REBUILD (CLEAN)
               ============================================ */

            /* INSTANT modal close - premium experience, no delays */
            .vocamatch-practice-modal {
                transition: opacity 0.1s ease-out, visibility 0.1s ease-out !important;
                /* Ultra-fast close transition (100ms) */
            }
            
            /* When closing, make it instant */
            .vocamatch-practice-modal:not(.vocamatch-practice-modal-active) {
                transition: opacity 0.05s ease-out, visibility 0.05s ease-out !important;
                /* Even faster when closing (50ms) */
            }

            .vocamatch-practice-modal-content {
                width: 95% !important;
                max-height: 90vh !important;
                border-radius: 16px !important;
                transform: none !important;
                /* No scale transform - instant appearance */
                transition: none !important;
                /* No transition delay */
            }

            /* Hide desktop buttons container */
            .vocamatch-practice-modal-header .vocamatch-practice-header-buttons {
                display: none !important;
            }

            /* Clean header layout */
            .vocamatch-practice-modal-header {
                padding: 20px !important;
                padding-right: 72px !important;
                /* Space for close button (52px + 20px) */
                position: relative !important;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
            }

            /* Header: Audio button + text centered */
            .vocamatch-practice-modal-header .vocamatch-practice-word-main {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                /* Center audio button with text block */
                gap: 12px !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* Words container */
            .vocamatch-practice-words-container {
                display: flex !important;
                flex-direction: column !important;
                flex: 1 !important;
                gap: 4px !important;
                min-width: 0 !important;
            }

            /* Audio button in header - centered with text */
            .vocamatch-practice-modal-header .vocamatch-practice-word-main .vocamatch-pronunciation-play-btn {
                display: flex !important;
                flex-shrink: 0 !important;
                align-self: center !important;
                width: 40px !important;
                height: 40px !important;
                min-width: 40px !important;
                min-height: 40px !important;
                border-radius: 12px !important;
                margin: 0 !important;
            }

            /* French and English text in header */
            .vocamatch-practice-modal-header .vocamatch-practice-word-french {
                font-size: 20px !important;
                font-weight: 600 !important;
                color: var(--ink) !important;
                white-space: normal !important;
                line-height: 1.3 !important;
                margin: 0 !important;
            }

            .vocamatch-practice-modal-header .vocamatch-practice-word-english {
                font-size: 15px !important;
                color: var(--ink-muted) !important;
                white-space: normal !important;
                line-height: 1.3 !important;
                margin: 0 !important;
            }

            /* Close button - instant response */
            .vocamatch-practice-modal-header>.vocamatch-practice-modal-close {
                position: absolute !important;
                top: 20px !important;
                right: 20px !important;
                z-index: 100 !important;
                width: 52px !important;
                height: 52px !important;
                min-width: 52px !important;
                min-height: 52px !important;
                padding: 16px !important;
                margin: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: transparent !important;
                border: none !important;
                border-radius: 8px !important;
                cursor: pointer !important;
                color: var(--ink-muted) !important;
                transition: background-color 0.1s ease !important;
                /* Fast feedback only */
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: transparent !important;
            }

            .vocamatch-practice-modal-header>.vocamatch-practice-modal-close:active {
                background: rgba(0, 0, 0, 0.1) !important;
            }

            /* Modal body */
            .vocamatch-practice-modal-body {
                padding: 20px !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }

            /* Word items */
            .vocamatch-practice-word-item {
                padding: 20px 0 !important;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
            }

            .vocamatch-practice-word-item:last-child {
                border-bottom: none !important;
                padding-bottom: 0 !important;
            }

            .vocamatch-practice-word-item:first-child {
                padding-top: 0 !important;
            }

            /* Word details section */
            .vocamatch-practice-word-details {
                display: flex !important;
                flex-direction: column !important;
                gap: 14px !important;
            }

            /* ============================================
               DETAIL ROWS - FORCE GRID LAYOUT (MOBILE)
               BULLETPROOF: Override ALL desktop rules
               ============================================ */

            /* Force ALL detail rows with full class to use grid - override desktop flex */
            .vocamatch-practice-word-item .vocamatch-practice-word-details .vocamatch-practice-detail-row.vocamatch-practice-detail-full,
            .vocamatch-practice-word-details .vocamatch-practice-detail-row.vocamatch-practice-detail-full,
            .vocamatch-practice-detail-row.vocamatch-practice-detail-full {
                /* FORCE grid - kill flex completely */
                display: grid !important;
                grid-template-columns: auto 1fr !important;
                /* Label auto-width, value 1fr */
                grid-template-rows: auto !important;
                gap: 8px !important;
                align-items: start !important;
                align-content: start !important;
                justify-items: start !important;
                line-height: 1.6 !important;
                /* KILL all flex properties that could interfere */
                flex-direction: unset !important;
                flex-wrap: unset !important;
                flex: unset !important;
                flex-flow: unset !important;
                /* ZERO spacing that could cause indentation */
                margin: 0 !important;
                padding: 0 !important;
                text-indent: 0 !important;
                /* Override any positioning */
                position: static !important;
            }

            /* Labels - grid column 1 ONLY, no flex, no spacing, doesn't wrap */
            .vocamatch-practice-word-item .vocamatch-practice-word-details .vocamatch-practice-detail-row.vocamatch-practice-detail-full .vocamatch-practice-detail-label,
            .vocamatch-practice-word-details .vocamatch-practice-detail-row.vocamatch-practice-detail-full .vocamatch-practice-detail-label,
            .vocamatch-practice-detail-row.vocamatch-practice-detail-full .vocamatch-practice-detail-label {
                grid-column: 1 !important;
                grid-row: 1 !important;
                font-size: 13px !important;
                font-weight: 600 !important;
                color: var(--ink) !important;
                /* ZERO spacing */
                margin: 0 !important;
                padding: 0 !important;
                padding-right: 8px !important;
                /* Only right padding for visual gap */
                padding-left: 0 !important;
                /* KILL flex completely */
                flex: none !important;
                flex-shrink: 0 !important;
                flex-grow: 0 !important;
                flex-basis: auto !important;
                /* Auto width - takes only what it needs */
                width: auto !important;
                min-width: auto !important;
                max-width: none !important;
                /* Label doesn't wrap */
                white-space: nowrap !important;
                overflow: visible !important;
            }

            /* Values - grid column 2 ONLY, full width, ZERO indentation */
            .vocamatch-practice-word-item .vocamatch-practice-word-details .vocamatch-practice-detail-row.vocamatch-practice-detail-full .vocamatch-practice-detail-value,
            .vocamatch-practice-word-details .vocamatch-practice-detail-row.vocamatch-practice-detail-full .vocamatch-practice-detail-value,
            .vocamatch-practice-detail-row.vocamatch-practice-detail-full .vocamatch-practice-detail-value {
                grid-column: 2 !important;
                grid-row: 1 !important;
                font-size: 15px !important;
                color: var(--ink) !important;
                line-height: 1.6 !important;
                /* ZERO spacing - wrapped lines MUST align with first line */
                margin: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                padding: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                text-indent: 0 !important;
                /* Force block display in grid */
                display: block !important;
                /* KILL all flex properties */
                flex: none !important;
                flex-shrink: 1 !important;
                flex-grow: 0 !important;
                flex-basis: auto !important;
                /* Full width of grid column 2 - wrapped text aligns perfectly */
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                /* Text wrapping - lines align with start of value */
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                white-space: normal !important;
                /* No positioning that could offset text */
                position: static !important;
                left: auto !important;
                right: auto !important;
                top: auto !important;
                bottom: auto !important;
                transform: none !important;
            }

            /* Pronunciation section */
            .vocamatch-pronunciation-section {
                margin-bottom: 16px !important;
            }

            /* Pronunciation word items - centered alignment */
            .vocamatch-pronunciation-word-item {
                display: flex !important;
                align-items: center !important;
                /* Center text with audio button */
                gap: 6px !important;
                padding: 3px 0 !important;
            }

            /* Pronunciation word play buttons */
            .vocamatch-pronunciation-word-play-btn {
                width: 28px !important;
                height: 28px !important;
                min-width: 28px !important;
                min-height: 28px !important;
                border-radius: 12px !important;
                flex-shrink: 0 !important;
            }

            .vocamatch-pronunciation-word-play-btn svg {
                width: 12px !important;
                height: 12px !important;
            }

            /* Main pronunciation play button */
            .vocamatch-pronunciation-play-btn {
                width: 40px !important;
                height: 40px !important;
                min-width: 40px !important;
                min-height: 40px !important;
                border-radius: 12px !important;
            }

            .vocamatch-pronunciation-play-btn svg {
                width: 16px !important;
                height: 16px !important;
            }
        }

        /* ============================================
           VOCAMATCH PRACTICE BUTTON (INLINE - BEFORE GAME)
           ============================================ */
        .vocamatch-practice-button-container {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 20px;
            padding: 0 4px;
            /* Match game grid padding */
        }

        .vocamatch-practice-btn-inline {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            font-size: 15px;
            font-weight: 600;
            color: white;
            background: linear-gradient(135deg, rgba(37, 99, 235, 1) 0%, rgba(29, 78, 216, 1) 100%);
            border: none;
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            font-family: inherit;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25),
                0 2px 4px rgba(37, 99, 235, 0.15);
            position: relative;
            overflow: hidden;
        }

        .vocamatch-practice-btn-inline::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .vocamatch-practice-btn-inline:hover::before {
            left: 100%;
        }

        .vocamatch-practice-btn-inline:hover {
            background: linear-gradient(135deg, rgba(29, 78, 216, 1) 0%, rgba(37, 99, 235, 1) 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35),
                0 4px 8px rgba(37, 99, 235, 0.2);
        }

        .vocamatch-practice-btn-inline:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
        }

        .vocamatch-practice-btn-inline svg {
            flex-shrink: 0;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
        }

        .vocamatch-practice-unavailable {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            font-size: 14px;
            font-weight: 500;
            color: var(--ink-muted);
            background: rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 10px;
            cursor: not-allowed;
            opacity: 0.7;
        }

        .vocamatch-practice-unavailable svg {
            flex-shrink: 0;
            opacity: 0.6;
        }

        /* Mobile responsive styles for practice button */
        @media (max-width: 768px) {
            .vocamatch-practice-button-container {
                justify-content: flex-start;
                margin-bottom: 16px;
            }

            .vocamatch-practice-btn-inline {
                padding: 11px 18px;
                font-size: 14px;
            }

            .vocamatch-practice-unavailable {
                padding: 10px 16px;
                font-size: 13px;
            }
        }

        /* Mobile responsive styles for completion */
        @media (max-width: 768px) {
            .vocamatch-completion-message {
                margin-left: 0;
                margin-right: 0;
                padding-left: 0;
                padding-right: 0;
                overflow: visible;
                /* Ensure content is not clipped */
            }

            .vocamatch-completion-content {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
                padding: 0;
                /* Remove horizontal padding on mobile - buttons take full width */
                width: 100%;
                box-sizing: border-box;
                overflow: visible;
                /* Ensure buttons are not clipped */
            }

            .vocamatch-completion-left {
                flex-direction: column;
                align-items: center;
                /* Center items */
                gap: 12px;
                width: 100%;
            }

            .vocamatch-completion-text {
                font-size: 15px;
                text-align: center;
                width: 100%;
                /* Full width for centering */
            }

            /* Continue Reading button - full width, centered */
            .vocamatch-completion-left .vocamatch-continue {
                width: 100%;
                padding: 10px 12px;
                font-size: 14px;
                margin: 0;
                box-sizing: border-box;
            }

            /* Actions row - three buttons horizontally */
            .vocamatch-completion-actions {
                display: flex;
                flex-direction: row;
                /* Horizontal layout */
                width: 100%;
                justify-content: center;
                /* Center the three buttons */
                gap: 8px;
                /* Small gap between buttons */
                box-sizing: border-box;
                flex-wrap: nowrap;
                /* Prevent wrapping */
            }

            /* Practice and level buttons - equal width, fit three in a row */
            .vocamatch-completion-actions .vocamatch-action-btn {
                flex: 1;
                /* Equal width for all three buttons */
                min-width: 0;
                /* Allow flex shrinking */
                padding: 10px 8px;
                /* Compact padding */
                font-size: 13px;
                /* Slightly smaller font */
                margin: 0;
                /* Remove margin - gap handles spacing */
                box-sizing: border-box;
                white-space: nowrap;
                /* Prevent text wrapping */
                overflow: hidden;
                text-overflow: ellipsis;
                /* Handle overflow gracefully */
                text-align: center;
                /* Center text in button */
            }

            .bf-quiz-link,
            .bf-match-game-link,
            .bf-breakdown-link {
                font-size: 14px !important;
                /* Keep text size intact */
                padding: 3px 10px !important;
                /* Reduced padding: 3px top/bottom, 10px left/right - smaller buttons, text size unchanged */
            }

            /* Adjust spacing on mobile - align buttons with summary boundaries */
            .game-buttons-container {
                width: 100% !important;
                /* Full width on mobile */
                gap: 0 !important;
                /* No gap - buttons positioned with space-between */
                padding: 0 0 5px 0 !important;
                /* Reduced to 5px for 13px total spacing to language selector (4px margin-bottom + 5px padding + 4px language margin-top = 13px) */
                justify-content: space-between !important;
                /* Distribute: Quiz Me left, VocaMatch center, Breakdown right */
                margin-left: 0 !important;
                /* Remove any left margin */
                margin-right: 0 !important;
                /* Remove any right margin */
                flex: none !important;
                /* Don't flex - take full width */
                box-sizing: border-box !important;
                /* Ensure padding doesn't affect width */
            }

            /* Quiz Me - left aligned (aligns with summary left edge at 24px from card) */
            .game-buttons-container .bf-quiz-link {
                margin-left: 0 !important;
                margin-right: auto !important;
            }

            /* VocaMatch - center aligned (automatically centered with space-between) */
            .game-buttons-container .bf-match-game-link {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* Breakdown - right aligned (aligns with summary right edge at 24px from card) */
            .game-buttons-container .bf-breakdown-link {
                margin-left: auto !important;
                margin-right: 0 !important;
            }

            .breakdown-meta-container {
                flex-direction: column;
                gap: 8px;
                align-items: stretch;
                /* Full width children */
            }

            /* order: 1 already set above in .game-buttons-container */

            .article-meta-desktop {
                order: 2;
                width: 100%;
                text-align: right;
            }


            .match-game-grid {
                grid-template-columns: 21px 1fr 21px 1fr;
                /* Audio (21px, 34% smaller) | French | Practice (21px, 34% smaller) | English */
                gap: 10px;
                /* Generous gap for clear separation between buttons */
                row-gap: 20px;
                /* Increased spacing between rows (20px) + button padding (5px top + 5px bottom) = 30px total minimum space */
                width: 100%;
                /* Full width on mobile */
                margin-left: auto;
                /* Center alignment */
                margin-right: auto;
                /* Center alignment */
                padding: 0 4px;
                /* 4px left/right padding to prevent shadow clipping on audio and English buttons */
            }

            .match-game-column-label {
                font-size: 14px !important;
                /* Match VocaMatch button mobile size */
                padding: 0 4px;
                /* Less padding on mobile */
                padding-bottom: 8px;
                /* Premium spacing: 8px for tight, refined feel on mobile */
                letter-spacing: normal !important;
                /* Match VocaMatch button */
                /* Prevent text cutoff on initial load - ensure full text is visible */
                overflow: visible !important;
                white-space: nowrap !important;
                min-width: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Practice column label: no padding on mobile */
            .match-game-column-practice .match-game-column-label {
                padding: 0 !important;
                padding-bottom: 8px !important;
                /* Keep bottom spacing */
            }

            /* Row items - adjust padding for mobile, center alignment */
            .match-game-row-item.match-game-row-audio {
                justify-content: center;
                /* Center the audio button */
            }

            .match-game-row-item.match-game-row-french {
                justify-content: center;
                /* Center the button */
                padding: 0;
                /* Remove all padding to maximize space for word buttons */
            }

            /* Practice button row item - center alignment */
            .match-game-row-item.match-game-row-practice {
                justify-content: center;
                /* Center the practice button */
            }

            .match-game-row-item.match-game-row-english {
                justify-content: center;
                /* Center the button */
                padding: 0;
                /* Remove all padding to maximize space for word buttons */
            }

            .vocamatch-word-practice-btn,
            .vocamatch-word-practice-placeholder {
                width: 21px;
                /* Reduced by 34% (from 32px) */
                height: 21px;
                /* Reduced by 34% (from 32px) */
                display: flex !important;
                /* Ensure flexbox for centering */
                align-items: center !important;
                /* Center icon vertically */
                justify-content: center !important;
                /* Center icon horizontally */
            }

            /* Practice button - compact with inward breathing for mobile */
            .vocamatch-word-practice-btn {
                width: 22px !important;
                height: 22px !important;
                min-width: 22px !important;
                min-height: 22px !important;
                background: rgba(37, 99, 235, 0.08) !important;
                border: 1.5px solid rgba(37, 99, 235, 0.25) !important;
                border-radius: 50% !important;
                animation: mobileAudioBreathing 2.5s ease-in-out infinite !important;
                animation-delay: -10000s !important; /* Synced with audio buttons */
            }

            .vocamatch-word-practice-btn svg {
                width: 11px !important;
                height: 11px !important;
                margin: 0 !important;
                padding: 0 !important;
                animation: mobileIconPulse 2.5s ease-in-out infinite !important;
                animation-delay: -10000s !important; /* Synced with audio buttons */
            }

            .vocamatch-word-practice-btn svg path {
                stroke: #2563eb !important;
                stroke-width: 2.5 !important;
            }

            /* Center the match game container on mobile */
            .match-game-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                /* Center children horizontally */
            }

            /* Ensure grid and other children are centered */
            .match-game-container>* {
                width: 100%;
                max-width: 100%;
            }

            .match-game-progress {
                margin-bottom: 24px;
                /* Increased spacing on mobile to match desktop proportion */
            }

            .match-word {
                padding: 5px 3px !important;
                /* Consistent padding: 5px top/bottom, 3px left/right for maximum text space */
                font-size: 14px !important;
                /* Match contextual words mobile size */
                border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
                /* Visible border so buttons look clickable */
                border-radius: 20px !important;
                /* Same pill shape */
                min-width: 0 !important;
                /* Prevent grid overflow - allows text to wrap properly */
                width: 100% !important;
                /* Take full width of grid cell */
                max-width: 100% !important;
                /* Never exceed container */
                box-sizing: border-box !important;
                /* Include padding in width calculation */
                white-space: normal !important;
                /* Allow text wrapping */
                word-wrap: break-word !important;
                /* Break long words */
                overflow-wrap: break-word !important;
                /* Modern word breaking */
            }

            /* French word buttons on mobile - flexbox layout */
            .match-word.match-word-french {
                justify-content: flex-start !important;
                /* Ensure left alignment on mobile */
                padding: 5px 3px !important;
                /* Consistent with English: 5px top/bottom, 3px left/right */
                gap: 8px !important;
            }

            /* Mobile-friendly INWARD breathing animation - visible but contained */
            @keyframes mobileAudioBreathing {
                0%, 100% {
                    background: rgba(37, 99, 235, 0.08);
                    border-color: rgba(37, 99, 235, 0.25);
                    box-shadow: inset 0 0 0 0 rgba(37, 99, 235, 0);
                }
                50% {
                    background: rgba(37, 99, 235, 0.18);
                    border-color: rgba(37, 99, 235, 0.45);
                    box-shadow: inset 0 0 8px 0 rgba(37, 99, 235, 0.15);
                }
            }

            /* Icon pulse for mobile - grows bigger to fill the circle */
            @keyframes mobileIconPulse {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.25); }
            }

            /* Audio button sizing for mobile - compact with inward breathing */
            .match-word-audio-btn {
                width: 22px !important;
                height: 22px !important;
                min-width: 22px !important;
                min-height: 22px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: rgba(37, 99, 235, 0.08) !important;
                border: 1.5px solid rgba(37, 99, 235, 0.25) !important;
                border-radius: 50% !important;
                padding: 0 !important;
                /* Inward breathing animation - synced with practice button */
                animation: mobileAudioBreathing 2.5s ease-in-out infinite !important;
                animation-delay: -10000s !important;
            }

            .match-word-audio-btn svg {
                width: 10px !important;
                height: 10px !important;
                margin: 0 !important;
                margin-left: 1px !important;
                padding: 0 !important;
                /* Subtle icon pulse - synced with practice button */
                animation: mobileIconPulse 2.5s ease-in-out infinite !important;
                animation-delay: -10000s !important;
            }

            .match-word-audio-btn svg polygon,
            .match-word-audio-btn svg path,
            .match-word-audio-btn svg rect,
            .match-word-audio-btn svg circle {
                fill: #2563eb !important;
            }

            .match-game-reward {
                padding: 16px;
                margin-top: 12px;
            }

            .match-game-container {
                padding: 0 0 20px 0;
                /* Premium spacing: 20px bottom padding to buttons on mobile */
                background: transparent;
                /* Ensure no gray background on mobile */
            }

            /* Mobile loading state */
            .match-game-container.loading {
                min-height: 180px;
            }

            .vocamatch-loading-spinner {
                width: 28px;
                height: 28px;
            }

            /* Fix gray background issue - keep original animation speeds */
            .bf-match-game-panel {
                background: transparent !important;
                /* Force transparent background on mobile */
            }

            .vocamatch-container,
            .vocamatch-content,
            .vocamatch-game-panel,
            .vocamatch-game-wrapper {
                background: transparent !important;
                /* Force transparent background on mobile */
            }

            /* VocaMatch content - add right padding to match QuizMe alignment */
            .vocamatch-content {
                padding-right: 4px !important;
                /* Match QuizMe: 4px right padding for progress bar alignment */
            }

            .match-game-classic-badge {
                font-size: 12px;
                padding: 5px 10px;
                margin-bottom: 12px;
            }

            .classic-badge-icon {
                font-size: 13px;
            }

            .match-game-grid {
                margin-bottom: 12px;
            }

            .match-reward-title {
                font-size: 18px;
            }

            .match-reward-text {
                font-size: 16px;
            }

            /* Mobile: Add padding-top for shadow clearance */
            .vocamatch-content {
                padding-top: 3px;
                /* Space for tier toggle shadow (8px blur needs ~3px clearance) */
            }

            /* Mobile: VocaMatch Header Container - consistent padding */
            .vocamatch-header-container {
                padding: 0 4px !important;
                /* Consistent 4px padding on left and right for mobile */
                margin-bottom: 18px !important;
                /* Spacing below container to game grid */
            }

            /* Mobile: VocaMatch Header - responsive layout - single line */
            .vocamatch-header {
                margin-left: 0 !important;
                /* No margin - container handles padding */
                margin-right: 0 !important;
                /* No margin - container handles padding */
                margin-bottom: 24px !important;
                /* Spacing to progress bar - testing */
                flex-wrap: nowrap !important;
                /* Force single line - no wrapping */
                gap: 6px !important;
                /* Reduced gap for tighter spacing */
            }

            /* Mobile: Title section */
            .vocamatch-title-section {
                gap: 6px !important;
                /* Reduced gap on mobile for tighter spacing */
                flex: 1;
                min-width: 0;
                /* Allow shrinking */
                white-space: nowrap;
                /* Prevent text wrapping */
            }

            /* Mobile: Title text - reduced size to fit single line */
            .vocamatch-title-text {
                font-size: 20px !important;
                /* Match QuizMe question size */
            }

            /* Mobile: Counter - hidden on mobile to save space */
            .vocamatch-counter {
                display: none !important;
                /* Hide counter on mobile - not enough space */
            }

            /* Mobile: Tier toggle - inside container, aligned properly */
            .vocamatch-header .bf-tier-toggle {
                margin-left: auto !important;
                /* Push to right */
                margin-right: 0 !important;
                /* No margin - container handles padding */
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                gap: 2px !important;
                /* Minimal gap between buttons */
                padding: 4px !important;
                /* Consistent padding all around */
                display: inline-flex !important;
                align-items: center !important;
                background: rgba(240, 240, 240, 0.8) !important;
                border-radius: 12px !important;
                box-sizing: border-box !important;
                width: fit-content !important;
                flex-shrink: 0 !important;
            }

            /* Mobile: Tier toggle buttons - completely reset for alignment */
            .vocamatch-header .bf-tier-toggle .bf-tier-tab {
                padding: 4px 5px !important;
                /* Minimal padding */
                font-size: 11px !important;
                /* Reduced font size */
                margin: 0 !important;
                /* Remove all margins - gap handles spacing */
                border-radius: 8px !important;
                background: transparent !important;
                border: none !important;
                font-family: inherit !important;
                font-weight: 600 !important;
                color: var(--ink-muted) !important;
                cursor: pointer !important;
                white-space: nowrap !important;
                box-sizing: border-box !important;
            }

            /* Mobile: Active tier button */
            .vocamatch-header .bf-tier-toggle .bf-tier-tab.active {
                background: #fff !important;
                color: var(--french-blue) !important;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
            }

            /* Mobile: Progress bar - inside container */
            .vocamatch-header-container .vocamatch-progress-bar {
                margin: 0 !important;
                margin-top: 12px !important;
                /* Space below tier toggle for visual separation */
                padding: 0 !important;
                /* No padding */
                width: 100% !important;
                /* Full width within container */
            }

            /* Mobile: Progress bar container - full width, no margins */
            .vocamatch-header-container .vocamatch-progress-bar .match-progress-bar-container {
                margin: 0 !important;
                /* No margins - container padding handles alignment */
                width: 100% !important;
                /* Full width */
                height: 7px !important;
                /* Match desktop height */
            }

            /* Breakdown - Mobile Header Container */
            .breakdown-header-container {
                padding: 0 4px !important;
                /* Consistent 4px padding on left and right for mobile */
                margin-bottom: 16px !important;
                /* Tighter spacing — divider removed, progress bar sits closer to header */
            }

            /* Mobile: Breakdown Header - responsive layout - single line (match VocaMatch) */
            .breakdown-header {
                margin-left: 0 !important;
                /* No margin - container handles padding */
                margin-right: 0 !important;
                /* No margin - container handles padding */
                margin-bottom: 0 !important;
                /* No bottom margin - container handles spacing */
                flex-wrap: nowrap !important;
                /* Force single line - no wrapping */
                gap: 6px !important;
                /* Reduced gap for tighter spacing */
            }

            /* Mobile: Breakdown Title section */
            .breakdown-title-section {
                gap: 6px !important;
                /* Reduced gap on mobile for tighter spacing */
                flex: 1;
                min-width: 0;
                /* Allow shrinking */
                white-space: nowrap;
                /* Prevent text wrapping */
            }

            /* Mobile: Breakdown Title text - reduced size to fit single line */
            .breakdown-title-text {
                font-size: 20px !important;
                /* Match VocaMatch title size on mobile */
            }

            /* Mobile: Breakdown Tier toggle - inside header, aligned properly (match VocaMatch exactly) */
            .breakdown-header .bf-tier-toggle {
                margin-left: auto !important;
                /* Push to right */
                margin-right: 0 !important;
                /* No margin - container handles padding */
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                gap: 2px !important;
                /* Minimal gap between buttons */
                padding: 4px !important;
                /* Consistent padding all around */
                display: inline-flex !important;
                align-items: center !important;
                background: rgba(240, 240, 240, 0.8) !important;
                border-radius: 12px !important;
                box-sizing: border-box !important;
                width: fit-content !important;
                flex-shrink: 0 !important;
            }

            /* Mobile: Breakdown Tier toggle buttons - match VocaMatch exactly */
            .breakdown-header .bf-tier-toggle .bf-tier-tab {
                padding: 4px 5px !important;
                /* Minimal padding */
                font-size: 11px !important;
                /* Reduced font size */
                margin: 0 !important;
                /* Remove all margins - gap handles spacing */
                border-radius: 8px !important;
                background: transparent !important;
                border: none !important;
                font-family: inherit !important;
                font-weight: 600 !important;
                color: var(--ink-muted) !important;
                cursor: pointer !important;
                white-space: nowrap !important;
                box-sizing: border-box !important;
            }

            /* Mobile: Active Breakdown tier button - match VocaMatch exactly */
            .breakdown-header .bf-tier-toggle .bf-tier-tab.active {
                background: #fff !important;
                color: var(--french-blue) !important;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
            }

            /* Breakdown content - match bottom spacing for harmony */
            .bf-breakdown-content {
                padding-bottom: 24px !important;
                /* Premium spacing: 24px bottom padding to buttons on mobile */
            }

            /* Breakdown text content - match tier toggle left alignment on mobile */
            .bf-breakdown-content .bf-tier-panel {
                padding-left: 8px;
                /* Match tier toggle alignment: 8px from left */
                padding-right: 8px;
                /* Symmetrical right padding for balanced appearance */
            }

            /* Breakdown text lines - improve mobile readability and alignment */
            .bf-breakdown-content .bf-lines {
                padding: 0;
                /* Remove any extra padding */
                margin: 0;
                /* Remove any extra margin */
            }

            .bf-breakdown-content .bf-lines div {
                text-align: left;
                /* Ensure left alignment */
                line-height: 1.5;
                /* Better line spacing for readability */
            }

            /* Breakdown audio button - compact circular design for mobile with inward breathing */
            .bf-breakdown-audio-btn {
                width: 24px !important;
                height: 24px !important;
                min-width: 24px !important;
                min-height: 24px !important;
                background: rgba(37, 99, 235, 0.08) !important;
                border: 1.5px solid rgba(37, 99, 235, 0.25) !important;
                border-radius: 50% !important;
                box-shadow: none !important;
                animation: mobileAudioBreathing 2.5s ease-in-out infinite !important;
                animation-delay: -10000s !important;
            }

            .bf-breakdown-audio-btn svg {
                width: 10px !important;
                height: 10px !important;
                margin-left: 1px !important;
                animation: mobileIconPulse 2.5s ease-in-out infinite !important;
                animation-delay: -10000s !important;
            }

            .bf-breakdown-audio-btn svg polygon,
            .bf-breakdown-audio-btn svg path,
            .bf-breakdown-audio-btn svg rect {
                fill: #2563eb !important;
            }

            /* Mobile: Increase gap between button and phrases by 50% (8px -> 12px) */
            .bf-line-french {
                gap: 12px !important;
                /* Increased by 50% from 8px for better spacing on mobile */
            }

            .bf-lines .bf-line-english {
                padding-left: 40px !important;
                /* Align with French text on mobile (28px button + 12px gap) */
            }

            .vocamatch-completion {
                padding: 32px 20px;
            }

            .vocamatch-completion-title {
                font-size: 28px;
            }

            .vocamatch-completion-text {
                font-size: 16px;
            }


            .match-progress-bar-container {
                height: 5px;
                /* Match quiz mobile height (increased by 50%) */
            }

            .match-game-hint {
                font-size: 13px;
                padding: 8px 12px;
            }
        }

        .bf-tier-toggle {
            display: inline-flex;
            gap: 6px;
            background: rgba(240, 240, 240, 0.8);
            border-radius: 14px;
            padding: 8px;
            /* Increased from 4px to 8px for shadow clearance (active tab has 8px shadow) */
            margin-top: 10px;
            margin-bottom: 12px;
            margin-left: 8px;
            /* Match game-buttons-container left padding (8px) for proper alignment */
        }

        .bf-tier-tab {
            background: transparent;
            border: none;
            padding: 6px 8px;
            /* Left and right padding reduced by 50% (from 16px to 8px) for more proportionate button */
            margin: 0 4px;
            /* 4px margin on left and right */
            border-radius: 8px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            color: var(--ink-muted);
            cursor: pointer;
        }

        .bf-tier-tab.active {
            background: #fff;
            color: var(--french-blue);
            /* Unified premium blue */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .bf-tier-panel {
            display: none;
        }

        .bf-tier-panel[data-tier]:not([hidden]) {
            display: block;
        }

        .bf-lines {
            display: grid;
            gap: 4px;
        }

        .bf-lines div {
            margin: 2px 0;
        }

        .bf-lines div:nth-child(2n) {
            margin-top: 1.4px;
            margin-bottom: 6px;
            font-weight: 400;
            color: var(--ink-muted);
        }

        .bf-lines div:nth-child(2n-1) {
            margin-bottom: 1.4px;
            font-weight: 600;
        }

        /* Breakdown audio buttons - match VocaMatch word button styling */
        .bf-line-french {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 1.4px;
        }

        .bf-line-french-text {
            flex: 1;
        }

        /* Breakdown audio button - unified elegant design */
        .bf-breakdown-audio-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            min-width: 26px;
            min-height: 26px;
            padding: 0;
            margin: 0;
            background: rgba(37, 99, 235, 0.06);
            border: 1.5px solid rgba(37, 99, 235, 0.2);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            animation: audioButtonBreathing 3s ease-in-out infinite;
            animation-delay: -10000s;
        }

        .bf-breakdown-audio-btn svg {
            width: 10px;
            height: 10px;
            transition: all 0.2s ease;
            pointer-events: none;
            margin-left: 1px;
        }

        .bf-breakdown-audio-btn svg polygon,
        .bf-breakdown-audio-btn svg path,
        .bf-breakdown-audio-btn svg rect {
            fill: #2563eb;
        }

        /* Hover state - desktop only */
        @media (hover: hover) and (pointer: fine) {
            .bf-breakdown-audio-btn:hover:not(:disabled):not(.playing):not(.loading) {
                background: rgba(37, 99, 235, 0.12);
                border-color: rgba(37, 99, 235, 0.35);
                transform: scale(1.1);
                animation: none;
                box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            }
        }

        .bf-breakdown-audio-btn:active:not(:disabled) {
            transform: scale(0.92);
            background: rgba(37, 99, 235, 0.18);
        }

        /* Playing state */
        .bf-breakdown-audio-btn.playing {
            background: rgba(37, 99, 235, 0.15);
            border-color: rgba(37, 99, 235, 0.4);
            animation: audioButtonPlaying 1.2s ease-in-out infinite;
        }

        .bf-breakdown-audio-btn.playing svg {
            animation: iconPulse 1.2s ease-in-out infinite;
        }

        .bf-breakdown-audio-btn.playing svg polygon,
        .bf-breakdown-audio-btn.playing svg path {
            fill: #1d4ed8;
        }

        /* Loading state */
        .bf-breakdown-audio-btn.loading {
            cursor: wait;
            pointer-events: none;
            opacity: 0.7;
            animation: none;
        }

        .bf-breakdown-audio-btn.error {
            background: rgba(220, 38, 38, 0.08);
            border-color: rgba(220, 38, 38, 0.25);
            animation: none;
        }

        .bf-breakdown-audio-btn.error svg polygon,
        .bf-breakdown-audio-btn.error svg path {
            fill: #dc2626;
        }

        .bf-breakdown-audio-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            animation: none;
        }

        /* Update existing .bf-lines div:nth-child(2n-1) to target .bf-line-french instead */
        .bf-lines .bf-line-french {
            margin-bottom: 1.4px;
            font-weight: 600;
        }

        .bf-lines .bf-line-english {
            margin-top: 1.4px;
            margin-bottom: 6px;
            font-weight: 400;
            color: var(--ink-muted);
            padding-left: 32px;
            /* Align with French text (24px button + 8px gap) */
        }

        .bf-contextual-highlight {
            color: var(--ink);
            font-weight: 400;
            font-size: inherit;
        }

        .french-word {
            cursor: pointer;
            text-decoration: none;
            position: relative;
        }

        .french-word.active {
            background: rgba(0, 35, 149, 0.1);
            border-radius: 4px;
            padding: 2px 4px;
        }

        /* ============================================
           LOADING STATES (Aesthetic Skeleton Cards)
           ============================================ */
        .loading {
            display: none;
            max-width: 1024px;
            /* Match main-content exactly */
            margin: 0 auto;
            /* Match main-content exactly */
            padding: 15px 24px !important;
            /* Reduced top padding for skeleton */
            flex-direction: column;
            gap: 32px;
            /* Match articles-list gap */
        }

        .loading.visible {
            display: flex;
        }

        .loading-skeleton {
            display: flex;
            flex-direction: column;
            gap: 32px;
            width: 100%;
        }

        .skeleton-card {
            background: #ffffff;
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
            border: 1px solid rgba(15, 42, 107, 0.2);
            border-radius: 20px;
            padding: 40px 32px 35px 32px;
            /* top, right, bottom, left - match article-card exactly */
            box-shadow:
                0 2.5px 5.5px rgba(15, 23, 42, 0.09),
                0 8px 18px rgba(15, 23, 42, 0.07),
                0 14px 32px rgba(15, 23, 42, 0.05);
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transform: translateY(-1px) scale(1.003);
            backface-visibility: hidden;
        }

        .skeleton-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 20px;
            /* Very subtle texture - ChatGPT style - match article-card */
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 .015 .03'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") repeat;
            opacity: 0.3;
            mix-blend-mode: soft-light;
            pointer-events: none;
            z-index: 0;
            clip-path: inset(0 round 20px);
            -webkit-clip-path: inset(0 round 20px);
            overflow: hidden;
        }



        .skeleton-card>* {
            position: relative;
            z-index: 2;
        }

        /* Skeleton Title - Match article-title exactly */
        .skeleton-title {
            height: 33px;
            /* 22px font * 1.5 line-height */
            width: 80%;
            background: rgba(15, 23, 42, 0.08);
            border-radius: 4px;
            margin-top: 0;
            margin-bottom: 11px;
            /* Match article-title margin-bottom */
            position: relative;
            overflow: hidden;
        }

        .skeleton-title::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent);
            animation: skeleton-shine 2.5s ease-in-out infinite;
        }

        /* Skeleton Secondary Title - Match secondary-title exactly (2 lines) */
        .skeleton-secondary-title {
            margin-top: 36px;
            /* Match secondary-title margin-top */
            margin-bottom: 15px;
            /* Match secondary-title margin-bottom */
        }

        .skeleton-secondary-title .skeleton-line {
            height: 24px;
            /* Approximate for secondary title line */
            width: 60%;
            background: rgba(15, 23, 42, 0.08);
            border-radius: 4px;
            margin: 0;
            position: relative;
            overflow: hidden;
        }

        .skeleton-secondary-title .skeleton-line::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent);
            animation: skeleton-shine 2.5s ease-in-out infinite;
        }

        .skeleton-secondary-title .skeleton-line+.skeleton-line {
            margin-top: 4px;
            /* Small gap between secondary title lines */
            width: 45%;
            /* Second line slightly shorter */
        }

        /* Skeleton Summary Container - Match summary-text spacing */
        .skeleton-summary {
            margin-top: 0;
            /* When following secondary-title, margin-top is 0 */
            margin-bottom: 0;
        }

        .skeleton-text {
            height: 25.6px;
            /* 16px font * 1.6 line-height */
            width: 100%;
            background: rgba(15, 23, 42, 0.08);
            border-radius: 4px;
            margin: 0;
            /* No margin - lines stack naturally like text */
            position: relative;
            overflow: hidden;
        }

        .skeleton-text::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent);
            animation: skeleton-shine 2.5s ease-in-out infinite;
        }

        .skeleton-line {
            background: rgba(15, 23, 42, 0.08);
            position: relative;
            overflow: hidden;
        }

        .skeleton-line::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent);
            animation: skeleton-shine 2.5s ease-in-out infinite;
        }

        .skeleton-button {
            background: rgba(15, 23, 42, 0.08);
            position: relative;
            overflow: hidden;
        }

        .skeleton-button::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent);
            animation: skeleton-shine 2.5s ease-in-out infinite;
        }

        .skeleton-meta {
            background: rgba(15, 23, 42, 0.08);
            position: relative;
            overflow: hidden;
        }

        .skeleton-meta::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent);
            animation: skeleton-shine 2.5s ease-in-out infinite;
        }

        /* Smooth, premium shine animation - consistent speed for all elements */
        @keyframes skeleton-shine {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        /* Visual spacing between summary lines - match text line-height appearance */
        .skeleton-summary .skeleton-text+.skeleton-text {
            margin-top: 9.6px;
            /* Visual spacing to match line-height 1.6 (16px * 0.6 = 9.6px between lines) */
        }

        .skeleton-text.short {
            width: 70%;
        }

        /* Skeleton Breakdown Meta Container - Match breakdown-meta-container exactly */
        .skeleton-breakdown-meta {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-top: 10px;
            /* Match spacing when quiz is hidden */
            margin-bottom: 0;
            padding-top: 0;
        }

        /* Skeleton Buttons Container - Match game-buttons-container */
        .skeleton-buttons {
            display: flex;
            flex-direction: row;
            gap: 16px;
            align-items: center;
            padding: 12px 8px;
            /* Match game-buttons-container padding */
        }

        .skeleton-button {
            width: 90px;
            /* Approximate button width */
            height: 36px;
            /* Approximate button height */
            background: rgba(15, 23, 42, 0.08);
            border-radius: 999px;
            /* Pill shape to match buttons */
            position: relative;
            overflow: hidden;
        }

        .skeleton-button::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent);
            animation: skeleton-shine 2.5s ease-in-out infinite;
        }

        /* Skeleton Meta - Match article-meta */
        .skeleton-meta {
            width: 180px;
            /* Approximate meta width */
            height: 14.4px;
            /* 12px font * 1.2 line-height */
            background: rgba(15, 23, 42, 0.08);
            border-radius: 4px;
            margin-top: 0;
            margin-bottom: 0;
            position: relative;
            overflow: hidden;
        }

        .skeleton-meta::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent);
            animation: skeleton-shine 2.5s ease-in-out infinite;
        }

        /* Desktop: show meta in container, hide bottom one */
        .skeleton-meta-mobile {
            display: none;
        }

        @media (max-width: 768px) {
            .skeleton-breakdown-meta {
                flex-direction: column;
                gap: 8px;
                align-items: stretch;
            }

            .skeleton-buttons {
                width: 100%;
                justify-content: center;
                gap: 12px;
                padding: 10px 8px;
            }

            .skeleton-meta-desktop {
                display: none;
                /* Hide meta in container on mobile */
            }

            .skeleton-meta-mobile {
                display: block;
                /* Show meta at bottom on mobile */
                width: 100%;
                margin-top: 16px;
                text-align: right;
            }
        }

        /* ============================================
           ERROR MESSAGE
           ============================================ */
        .error-message {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 24px;
            gap: 24px;
            text-align: center;
        }

        .error-message.visible {
            display: flex;
        }

        .error-message p {
            font-size: 1.125rem;
            color: var(--ink-muted);
        }

        .load-more-btn {
            display: block;
            width: 100%;
            max-width: 400px;
            margin: 40px auto;
            padding: 14px 28px;
            background: #ffffff;
            color: var(--ink);
            border: 1.5px solid rgba(0, 0, 0, 0.12);
            border-radius: 20px;
            font-size: 15px;
            font-weight: 500;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow:
                0 2px 8px rgba(0, 0, 0, 0.08),
                0 4px 16px rgba(0, 0, 0, 0.04);
            text-align: center;
            -webkit-tap-highlight-color: transparent;
        }

        .load-more-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow:
                0 4px 12px rgba(0, 0, 0, 0.12),
                0 8px 24px rgba(0, 0, 0, 0.08);
            border-color: rgba(0, 0, 0, 0.18);
        }

        .load-more-btn:active:not(:disabled) {
            transform: translateY(0);
        }

        .load-more-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }

        .retry-btn {
            background: var(--french-blue);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 20px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .retry-btn:hover {
            background: rgba(0, 35, 149, 0.9);
            transform: translateY(-1px);
        }

        /* ============================================
           MOBILE RESPONSIVE
           ============================================ */
        @media (max-width: 768px) {
            .articles-list {
                gap: 20px;
            }

            .article-card {
                padding: 20px 20px;
                transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.5s ease,
                    padding-top 0.3s ease;
                /* Smooth transition for padding change */
            }

            /* Reduce top padding when VocaMatch or Breakdown is active on mobile (Quiz keeps original padding) */
            .article-card:has(.bf-match-game-link.open),
            .article-card:has(.bf-breakdown-link.open) {
                padding-top: 16px;
                /* Reduced from 28px when games are active on mobile */
            }

            .article-title {
                font-size: 18px !important;
                line-height: 1.6;
                margin-bottom: 14px;
                /* Compact spacing between title and secondary title on smartphone (was 20px) */
            }

            /* Secondary title wrapper - container for button and title */
            .secondary-title-wrapper {
                position: relative;
            }

            /* Show original title button - visible on mobile only */
            .show-original-title-btn {
                display: block !important;
                /* Show on mobile */
                font-size: 10px !important;
                /* Reduced from 16px for more subtle appearance */
                line-height: 1.6 !important;
                /* Match summary line height */
                color: rgba(0, 0, 0, 0.45) !important;
                /* 45% effective visual opacity - subtle and discoverable */
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
                margin: 0 !important;
                margin-bottom: 2px !important;
                /* Consistent 2px spacing to summary (inactive) and to revealed title (active) */
                text-align: left !important;
                cursor: pointer !important;
                font-weight: 400 !important;
                font-family: inherit !important;
                -webkit-tap-highlight-color: transparent !important;
                touch-action: manipulation !important;
                transition: color 0.2s ease !important;
            }

            .show-original-title-btn:active {
                color: rgba(0, 0, 0, 0.45) !important;
                /* Keep same 45% opacity on tap for consistency */
            }

            /* Button text - use span for better control */
            .show-original-title-btn-text {
                display: inline;
            }

            /* Secondary title - hidden by default on mobile */
            .secondary-title {
                font-size: 16px !important;
                /* Match summary-text font size on mobile */
                line-height: 1.6 !important;
                /* Match summary-text spacing on mobile */
                font-weight: 400 !important;
                /* Normal weight - match summary */
                text-align: left;
                word-wrap: break-word;
                overflow-wrap: break-word;
                overflow-x: hidden;
                /* Prevent horizontal scroll on mobile */
                max-width: 100%;
                white-space: normal;
                /* Hidden by default on mobile */
                opacity: 0 !important;
                max-height: 0 !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                overflow: hidden !important;
                /* Same transition as summary */
                transition: max-height 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    margin-top 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    margin-bottom 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
            }

            /* Revealed state - show title with smooth animation */
            .secondary-title.revealed {
                opacity: 1 !important;
                max-height: 500px !important;
                /* Large enough for title content */
                margin-top: 0 !important;
                /* Spacing from button controlled by button's margin-bottom (2px) */
                margin-bottom: 11px !important;
                /* Spacing to summary below */
                font-weight: 400 !important;
                /* Normal weight - match summary */
            }

            /* Reduce opacity of button and revealed title when quiz is open (mobile) */
            .article-card:has(.article-quiz.open) .show-original-title-btn {
                opacity: 0.65 !important;
                /* 65% visible - match summary */
                color: rgba(0, 0, 0, 0.39) !important;
                /* 65% of 0.6 = 0.39 */
            }

            .article-card:has(.article-quiz.open) .secondary-title.revealed {
                opacity: 0.65 !important;
                /* 65% visible - match summary */
                color: rgba(37, 99, 235, 0.52) !important;
                /* 65% of blue intensity */
            }

            /* Hide button and revealed title when breakdown or match game is open (mobile) */
            .article-card:has(.bf-breakdown-link.open) .show-original-title-btn,
            .article-card:has(.bf-match-game-link.open) .show-original-title-btn {
                opacity: 0 !important;
                max-height: 0 !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                overflow: hidden !important;
            }

            .article-card:has(.bf-breakdown-link.open) .secondary-title.revealed,
            .article-card:has(.bf-match-game-link.open) .secondary-title.revealed {
                opacity: 0 !important;
                max-height: 0 !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }

            .bf-breakdown-link {
                font-size: 16px;
            }
        }

        /* ============================================
           PAYWALL MODAL
           ============================================ */
        .paywall-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            /* Force visibility for browser compatibility */
            pointer-events: none;
        }

        /* Simplified: Use .modal-open class (researcher recommendation) */
        .paywall-modal.modal-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* Also support .active for backward compatibility */
        .paywall-modal.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .paywall-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Progressive enhancement: solid background works everywhere */
            background: rgba(0, 0, 0, 0.5);
            /* Fancy blur effect where supported (Safari/Atlas fallback to solid) */
            backdrop-filter: blur(4px);
        }

        /* Fallback for browsers that don't support backdrop-filter */
        @supports not (backdrop-filter: blur(1px)) {
            .paywall-modal-overlay {
                background: rgba(0, 0, 0, 0.65);
                /* Darker when no blur */
            }
        }

        .paywall-modal-content {
            position: relative;
            background: #ffffff;
            border-radius: 24px;
            padding: 40px 36px;
            max-width: 840px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow:
                0 4px 6px rgba(15, 23, 42, 0.07),
                0 10px 20px rgba(15, 23, 42, 0.06),
                0 20px 40px rgba(15, 23, 42, 0.04);
            transform: scale(0.95);
            transition: transform 0.3s ease;
        }

        .paywall-modal.active .paywall-modal-content {
            transform: scale(1);
        }

        .paywall-modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: none;
            border: none;
            font-size: 28px;
            color: var(--ink-muted);
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            transition: color 0.2s ease;
        }

        .paywall-modal-close:hover {
            color: var(--ink);
        }


        .paywall-modal-message {
            display: none;
        }

        .paywall-modal-message strong {
            color: var(--french-blue);
            font-weight: 600;
        }

        .paywall-modal-subtitle {
            font-size: 14px;
            color: var(--ink-muted);
            margin: 0 0 32px 0;
        }

        /* Usage Cards - Text Messages Only */
        .paywall-usage-cards {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 0;
            width: 100%;
        }

        .paywall-usage-card {
            background: none;
            border: none;
            padding: 0;
            width: 100%;
            margin: 0 0 40px 0;
        }

        .paywall-usage-card-content {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 0;
            width: 100%;
        }

        .paywall-usage-card-message {
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1;
        }

        .paywall-usage-card-limit-text {
            font-size: 0.875rem;
            font-weight: 500;
            color: #6b7280;
            line-height: 1.6;
            margin: 0;
        }

        .paywall-usage-card-upgrade-text {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--ink);
            line-height: 1.5;
            margin: 0;
            letter-spacing: -0.01em;
        }

        .paywall-usage-card-timer {
            text-align: right;
            flex-shrink: 0;
        }

        .paywall-usage-card-timer .paywall-reset-timer-label {
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--ink);
            line-height: 1.5;
            display: inline;
            margin-right: 2px;
        }

        .paywall-usage-card-timer .paywall-reset-timer-value {
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--ink);
            line-height: 1.5;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.03em;
        }

        .paywall-reset-timer {
            text-align: right;
            flex-shrink: 0;
        }

        .paywall-reset-timer-label {
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--ink-muted);
            display: block;
            margin-bottom: 6px;
        }

        .paywall-reset-timer-value {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--ink);
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.03em;
        }

        @media (max-width: 768px) {
            .paywall-usage-cards {
                gap: 12px;
                justify-content: center;
                flex-direction: column;
            }

            .paywall-usage-card {
                padding: 16px 20px;
                margin-bottom: 24px;
            }

            .paywall-usage-card-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }

            .paywall-usage-card-message {
                font-size: 0.875rem;
            }

            .paywall-usage-card-timer {
                text-align: left;
                width: 100%;
            }

            .paywall-usage-card-timer .paywall-reset-timer-label {
                font-size: 0.875rem;
            }

            .paywall-usage-card-timer .paywall-reset-timer-value {
                font-size: 0.875rem;
            }
        }

        .paywall-modal-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 32px;
            align-items: center;
        }

        /* Billing Toggle - Integrated in Pro Card */

        .paywall-billing-label {
            font-size: 0.75rem;
            font-weight: 400;
            color: #6b7280;
            padding: 6px 12px;
            border-radius: 999px;
            background: transparent;
            letter-spacing: 0.08em;
            line-height: 1.4;
            transition: color 0.2s ease, background 0.2s ease, font-weight 0.2s ease;
            display: inline-block;
            min-width: fit-content;
        }

        .paywall-billing-label.active {
            color: #000000;
            font-weight: 600;
        }

        .paywall-billing-label[data-period="monthly"].active {
            color: #22c55e;
            font-weight: 600;
            background: rgba(34, 197, 94, 0.06);
        }

        .paywall-billing-label[data-period="annual"].active {
            color: #22c55e;
            font-weight: 600;
            background: rgba(34, 197, 94, 0.06);
        }

        .paywall-billing-toggle {
            width: 40px;
            height: 20px;
            background: rgba(15, 23, 42, 0.08);
            border: none;
            border-radius: 999px;
            position: relative;
            cursor: pointer;
            transition: background 0.2s ease;
            padding: 2px;
            flex-shrink: 0;
        }

        .paywall-billing-toggle:hover {
            background: rgba(15, 23, 42, 0.12);
        }

        .paywall-billing-toggle-slider {
            display: block;
            width: 16px;
            height: 16px;
            background: #ffffff;
            border-radius: 50%;
            transition: transform 0.2s ease;
            transform: translateX(0);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        }

        .paywall-billing-toggle-slider.annual {
            transform: translateX(20px);
        }

        .paywall-billing-toggle:has(.annual) {
            background: rgba(22, 163, 74, 0.2);
        }

        /* Pricing Card in Modal - Premium Spacing */
        .paywall-modal-pricing {
            margin: 0 0 45px 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            justify-items: center;
        }

        .paywall-pricing-card {
            background: rgba(15, 23, 42, 0.02);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: 20px;
            padding: 24px 20px;
            position: relative;
            min-width: 0;
            transition: all 0.2s ease;
        }

        .paywall-pricing-card-billing {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            margin: 0;
            padding: 0;
            flex-shrink: 0;
        }

        .paywall-pricing-card:hover {
            border-color: rgba(15, 23, 42, 0.12);
            background: rgba(15, 23, 42, 0.03);
        }

        .paywall-pricing-card.selected {
            border: 1.25px solid var(--french-blue) !important;
            background: #ffffff !important;
            box-shadow:
                0 2px 8px rgba(37, 99, 235, 0.075),
                0 4px 16px rgba(37, 99, 235, 0.05) !important;
        }

        @media (max-width: 768px) {
            .paywall-modal-pricing {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .paywall-pricing-card {
                padding: 20px;
                max-width: 100%;
            }

            .paywall-pricing-badge {
                padding: 5px 12px;
                font-size: 0.6875rem;
            }

            .paywall-pricing-card-header {
                margin-top: 0;
            }

            .paywall-pricing-card-billing {
                margin-bottom: 10px;
                gap: 8px;
            }

            .paywall-billing-label {
                font-size: 0.75rem;
            }

            .paywall-billing-toggle {
                width: 36px;
                height: 18px;
            }

            .paywall-billing-toggle-slider {
                width: 14px;
                height: 14px;
            }

            .paywall-billing-toggle-slider.annual {
                transform: translateX(18px);
            }

            .paywall-usage-card-limit-text {
                font-size: 0.8125rem;
            }

            .paywall-usage-card-upgrade-text {
                font-size: 1.05rem;
            }
        }

        .paywall-pricing-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 0;
            margin-bottom: 29px;
            gap: 12px;
        }

        .paywall-pricing-badge {
            position: static;
            padding: 0;
            border-radius: 0;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0.01em;
            background: none;
            color: #22c55e;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .paywall-pricing-badge-current {
            position: static;
            background: none;
            color: var(--ink-muted);
            flex-shrink: 0;
            font-size: 0.875rem;
            font-weight: 400;
        }

        .paywall-pricing-title {
            margin: 0;
            font-size: 1.625rem;
            font-weight: 600;
            color: var(--ink);
            letter-spacing: -0.015em;
            flex: 1;
            line-height: 1.2;
        }

        .paywall-pricing-amount {
            display: flex;
            align-items: baseline;
            gap: 4px;
            margin: 0 0 29px 0;
            flex-wrap: wrap;
        }

        .paywall-price-symbol {
            font-size: 0.875rem;
            font-weight: 400;
            color: #6b7280;
            line-height: 1;
            vertical-align: baseline;
            margin-right: 3px;
            align-self: flex-start;
            margin-top: 0.25rem;
        }

        .paywall-price-main {
            font-size: 2.25rem;
            font-weight: 700;
            color: var(--ink);
            line-height: 1;
            letter-spacing: -0.02em;
        }

        .paywall-price-period {
            font-size: 0.875rem;
            font-weight: 400;
            color: #6b7280;
            margin-left: 2px;
        }

        .paywall-pricing-savings {
            margin: 0;
            font-size: 0.6875rem;
            font-weight: 400;
        }

        .paywall-pricing-savings-badge {
            display: inline-block;
            margin-left: 8px;
            padding: 2px 8px;
            background: rgba(22, 163, 74, 0.15);
            color: #16a34a;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 4px;
            vertical-align: middle;
            color: #9ca3af;
            line-height: 1;
            margin-left: 8px;
            letter-spacing: 0.01em;
        }

        .paywall-pricing-features {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 10px;
        }

        .paywall-pricing-features li {
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--ink);
            padding-left: 0;
            line-height: 1.5;
        }

        .paywall-pricing-features li::before {
            content: "✓ ";
            margin-right: 10px;
            color: var(--french-blue);
            font-weight: 700;
            font-size: 1rem;
        }

        .paywall-countdown-container {
            margin: 16px 0;
        }

        .paywall-countdown-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--ink-muted);
            margin-bottom: 8px;
        }

        .paywall-countdown-timer {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--french-blue);
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.05em;
        }

        @media (max-width: 768px) {
            .paywall-countdown-timer {
                font-size: 1.5rem;
            }

            .paywall-pricing-title {
                font-size: 1.375rem;
                font-weight: 600;
                letter-spacing: -0.01em;
            }

            .paywall-price-main {
                font-size: 2rem;
            }
        }

        /* Glass Morphism Button Styles (matching landing page) */
        .btn-glass {
            background: #ffffff;
            color: #000000 !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow:
                0 2px 8px rgba(15, 23, 42, 0.15),
                0 4px 16px rgba(15, 23, 42, 0.12),
                0 8px 32px rgba(15, 23, 42, 0.10),
                0 16px 48px rgba(15, 23, 42, 0.08);
            border: 1.5px solid rgba(15, 23, 42, 0.12);
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transform: translateZ(0);
            backface-visibility: hidden;
            z-index: 1;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.5s ease,
                color 0.5s ease;
        }

        /* Text isolation - ensures text stays black above animation */
        .btn-glass,
        .btn-glass * {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
            position: relative;
            z-index: 10 !important;
            mix-blend-mode: normal !important;
            text-shadow: none !important;
            background: transparent !important;
            isolation: isolate !important;
        }

        /* Hover state - shared for all glass buttons */
        .btn-glass:hover,
        .btn-glass:focus-visible {
            transform: translateY(-2px) scale(1.005);
            color: #000000 !important;
            box-shadow:
                0 4px 12px rgba(15, 23, 42, 0.18),
                0 8px 24px rgba(15, 23, 42, 0.15),
                0 16px 40px rgba(15, 23, 42, 0.12),
                0 24px 56px rgba(15, 23, 42, 0.10);
            border-color: rgba(15, 23, 42, 0.18);
        }

        /* No gradient - clean white button */
        .btn-glass::after {
            display: none;
        }

        .paywall-modal-button {
            border: none !important;
            border-radius: 999px;
            padding: 14px 28px;
            font-weight: 600;
            font-size: 1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            text-decoration: none;
            width: auto;
            letter-spacing: -0.01em;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transform: translateZ(0);
            backface-visibility: hidden;
            z-index: 1;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.5s ease,
                background 0.5s ease;
        }

        .paywall-modal-button-primary {
            background: #ffffff;
            color: #000000 !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow:
                0 2px 8px rgba(15, 23, 42, 0.15),
                0 4px 16px rgba(15, 23, 42, 0.12),
                0 8px 32px rgba(15, 23, 42, 0.10),
                0 16px 48px rgba(15, 23, 42, 0.08);
            border: 1.25px solid var(--french-blue) !important;
        }

        .paywall-modal-button-primary,
        .paywall-modal-button-primary * {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
            position: relative;
            z-index: 10 !important;
            mix-blend-mode: normal !important;
            text-shadow: none !important;
            background: transparent !important;
            isolation: isolate !important;
        }

        .paywall-modal-button-primary:hover,
        .paywall-modal-button-primary:focus-visible {
            transform: translateY(-2px) scale(1.005);
            color: #000000 !important;
            box-shadow:
                0 4px 12px rgba(15, 23, 42, 0.18),
                0 8px 24px rgba(15, 23, 42, 0.15),
                0 16px 40px rgba(15, 23, 42, 0.12),
                0 24px 56px rgba(15, 23, 42, 0.10);
            border-color: var(--french-blue) !important;
        }

        .paywall-modal-button-primary::after {
            display: none;
        }

        .paywall-modal-button-secondary {
            background: transparent;
            color: #6b7280;
            border: none;
            padding: 12px 32px;
            font-weight: 500;
            text-decoration: none;
        }

        .paywall-modal-button-secondary:hover {
            color: var(--ink);
            background: transparent;
        }

        @media (max-width: 768px) {
            .paywall-modal-content {
                padding: 32px 24px;
                max-width: 95%;
            }

            .paywall-modal-title {
                font-size: 20px;
            }

            .paywall-modal-message {
                font-size: 15px;
            }

            .paywall-modal-actions {
                margin-top: 24px;
            }

            .paywall-modal-button {
                padding: 14px 24px;
            }

            .paywall-modal-button-secondary {
                padding: 10px 24px;
            }
        }

        /* ============================================
           DESKTOP NAV ICONS (Saved & Progress)
           ============================================ */
        .nav-icon-btn {
            background: transparent;
            border: none;
            border-radius: 8px;
            padding: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(0, 0, 0, 0.6);
            transition: all 0.2s ease;
            outline: none;
            text-decoration: none;
        }

        .nav-icon-btn:hover {
            background: rgba(0, 0, 0, 0.05);
            color: rgba(0, 0, 0, 0.8);
        }

        .nav-icon-btn:active {
            background: rgba(0, 0, 0, 0.08);
            color: rgba(0, 0, 0, 0.9);
        }

        /* Desktop: nav icon ordering in nav-right (min-width to avoid conflicting with mobile) */
        @media (min-width: 769px) {
            .nav-right .desktop-nav-icon {
                order: 4;
            }

            .nav-right .header-search-btn {
                order: 5;
            }

            .nav-right .profile-menu-container {
                order: 6;
            }
        }

        /* Hide desktop nav icons on mobile (they're in the tab bar) */
        @media (max-width: 768px) {
            .desktop-nav-icon {
                display: none !important;
            }
        }

        /* ============================================
           MOBILE BOTTOM TAB BAR
           ============================================ */
        .bottom-tab-bar {
            display: none;
        }

        @media (max-width: 768px) {
            .bottom-tab-bar {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 200;
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: 50px;
                padding-bottom: env(safe-area-inset-bottom, 0px);
                background: rgba(255, 255, 255, 0.96);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border-top: 1px solid rgba(0, 0, 0, 0.06);
            }

            /* Ensure main content isn't hidden behind the tab bar */
            body {
                padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
            }

            .tab-bar-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                flex: 1;
                height: 100%;
                padding: 6px 0 2px;
                background: none;
                border: none;
                cursor: pointer;
                text-decoration: none;
                -webkit-tap-highlight-color: transparent;
                position: relative;
                transition: color var(--duration-fast) var(--ease-out), opacity 0.12s ease, transform 0.12s ease;
            }

            .tab-bar-item:active {
                opacity: 0.55;
                transform: scale(0.94);
            }

            .tab-bar-item .tab-bar-icon {
                color: #9ca3af;
                transition: color var(--duration-fast) var(--ease-out);
            }

            .tab-bar-item.active .tab-bar-icon {
                color: var(--french-blue);
            }

            .tab-bar-dot {
                display: block;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                margin-top: 4px;
                background: transparent;
                transition: background var(--duration-fast) var(--ease-out);
            }

            .tab-bar-item.active .tab-bar-dot {
                background: var(--french-blue);
            }
        }

        /* Dark mode support for tab bar */
        @media (prefers-color-scheme: dark) and (max-width: 768px) {
            .bottom-tab-bar {
                background: rgba(28, 28, 30, 0.92);
                border-top-color: rgba(255, 255, 255, 0.08);
            }

            .tab-bar-item .tab-bar-icon {
                color: #636366;
            }

            .tab-bar-item.active .tab-bar-icon {
                color: var(--french-blue);
            }
        }

        /* Dark mode for desktop nav icons */
        @media (prefers-color-scheme: dark) {
            .nav-icon-btn {
                color: rgba(255, 255, 255, 0.7);
            }

            .nav-icon-btn:hover {
                background: rgba(255, 255, 255, 0.1);
                color: rgba(255, 255, 255, 0.9);
            }

            .nav-icon-btn:active {
                background: rgba(255, 255, 255, 0.14);
                color: #ffffff;
            }
        }

        /* ============================================
           COMPREHENSIVE DARK MODE
           ============================================ */
        @media (prefers-color-scheme: dark) {
            /* ── CSS Variable Overrides ── */
            :root {
                --ink: #e5e5e5;
                --ink-secondary: #d1d5db;
                --ink-muted: #9ca3af;
                --surface: #1a1a1a;
                --surface-elevated: #1a1a1a;
                --border: rgba(255, 255, 255, 0.06);
                --border-hover: rgba(255, 255, 255, 0.1);
                --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
                --shadow-md:
                    0 1px 2px rgba(0, 0, 0, 0.1),
                    0 4px 12px rgba(0, 0, 0, 0.15),
                    0 12px 32px rgba(0, 0, 0, 0.12);
                --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
                --shadow-xl:
                    0 2px 4px rgba(0, 0, 0, 0.1),
                    0 8px 24px rgba(0, 0, 0, 0.2),
                    0 24px 48px rgba(0, 0, 0, 0.15);
            }

            /* ── Body & Background ── */
            body {
                background: #111111;
                color: var(--ink);
            }

            /* ── Navbar ── */
            .navbar {
                background: rgba(17, 17, 17, 0.85);
            }

            /* ── Logo ── */
            .logo {
                color: var(--ink);
            }

            /* ── Streak Counter (inactive/broken: must be light on dark bg) ── */
            .streak-counter.streak-inactive .streak-days {
                color: rgba(255, 255, 255, 0.35) !important;
            }

            .streak-counter.streak-broken .streak-days {
                color: rgba(255, 255, 255, 0.3) !important;
            }

            .streak-counter.streak-inactive .streak-icon,
            .streak-counter.streak-broken .streak-icon {
                opacity: 0.4;
            }

            /* ── Mode Toggle (FR/EN flags) ── */
            .mode-flag-btn {
                color: rgba(255, 255, 255, 0.4);
            }

            .mode-flag-btn:not(.active) {
                color: rgba(255, 255, 255, 0.35);
            }

            .mode-flag-btn:hover:not(.active) {
                color: rgba(255, 255, 255, 0.6);
            }

            /* ── Profile Button & Dropdown ── */
            .profile-btn {
                color: rgba(255, 255, 255, 0.6);
            }

            .profile-btn:hover {
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.8);
            }

            .profile-btn[aria-expanded="true"] {
                background: rgba(255, 255, 255, 0.12);
                color: rgba(255, 255, 255, 0.9);
            }

            .profile-dropdown {
                background: rgba(30, 30, 32, 0.95);
                border-color: rgba(255, 255, 255, 0.1);
                box-shadow:
                    0 8px 32px rgba(0, 0, 0, 0.4),
                    0 2px 8px rgba(0, 0, 0, 0.3);
            }

            .profile-dropdown-divider {
                background: rgba(255, 255, 255, 0.08);
            }

            .profile-dropdown-item:hover {
                background-color: rgba(255, 255, 255, 0.06);
            }

            .profile-dropdown-item:hover svg {
                color: var(--ink);
            }

            #logout-btn:hover {
                background-color: rgba(255, 255, 255, 0.06);
            }

            /* ── Category Filter Bar ── */
            .category-filter-bar {
                background: #111111;
                border-bottom-color: rgba(255, 255, 255, 0.06);
            }

            .category-btn {
                background: transparent;
                border-color: rgba(255, 255, 255, 0.15);
                color: rgba(255, 255, 255, 0.7);
            }

            .category-btn:hover {
                background: rgba(255, 255, 255, 0.06);
                border-color: rgba(255, 255, 255, 0.25);
                color: rgba(255, 255, 255, 0.9);
            }

            .category-btn.active {
                background: rgba(255, 255, 255, 0.95);
                color: #111111;
                border-color: rgba(255, 255, 255, 0.95);
                font-weight: 600;
            }

            /* ── Article Cards ── */
            .article-card {
                background: #1a1a1a;
                border-color: rgba(255, 255, 255, 0.08);
            }

            .article-card:hover {
                border-color: rgba(255, 255, 255, 0.15);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            }

            .article-thumb-placeholder {
                background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.05));
            }

            /* ── Article Titles: white in dark mode (match iOS) ── */
            /* Higher specificity (.article-card .article-title) to beat the
               .article-title { color: var(--french-blue) !important } rule at line ~3711 */
            .article-card .article-title {
                color: #ffffff !important;
            }

            .article-card .secondary-title,
            .article-card .secondary-title.revealed {
                color: rgba(255, 255, 255, 0.55) !important;
            }

            /* Show original title button */
            .article-card .show-original-title-btn {
                color: rgba(255, 255, 255, 0.35) !important;
            }

            /* ── Article Content Text ── */
            .summary-text {
                color: rgba(255, 255, 255, 0.85) !important;
            }

            .summary-text.expanded::after {
                background: rgba(255, 255, 255, 0.08);
            }

            .article-card .show-original-title-btn:hover,
            .article-card .show-original-title-btn:active {
                color: rgba(255, 255, 255, 0.55) !important;
            }

            /* ── Quiz Open: Reduced opacity text in dark mode ── */
            .article-card:has(.article-quiz.open) .article-title {
                color: rgba(255, 255, 255, 0.4) !important;
            }

            .article-card:has(.article-quiz.open) .summary-text.expanded {
                color: rgba(255, 255, 255, 0.5) !important;
            }

            .article-card:has(.article-quiz.open) .show-original-title-btn {
                color: rgba(255, 255, 255, 0.25) !important;
            }

            .article-card:has(.article-quiz.open) .summary-text.expanded::after {
                background: rgba(255, 255, 255, 0.04);
            }

            /* ── Article Meta (source, date) ── */
            .article-meta,
            .article-meta-source-mobile,
            .article-meta-date-mobile {
                color: rgba(255, 255, 255, 0.45);
            }

            /* Source link - blue like iOS */
            .article-meta .source-link {
                color: var(--french-blue) !important;
            }

            /* Mobile source link - blue, not black */
            .article-meta-source-mobile .source-link {
                color: var(--french-blue) !important;
            }

            .article-meta-source-mobile .source-link:hover {
                color: var(--french-blue) !important;
            }

            .article-meta-source-mobile .source-link:active {
                color: var(--french-blue) !important;
            }

            /* ── Bookmark button on articles ── */
            .article-bookmark-btn {
                color: rgba(255, 255, 255, 0.35);
            }

            .article-bookmark-btn:hover:not(.bookmarked) {
                color: rgba(255, 255, 255, 0.6);
            }

            /* ── Feature Action Buttons (Quiz, Breakdown, VocaMatch, Audio) ── */
            .bf-quiz-link,
            .bf-match-game-link,
            .bf-breakdown-link {
                background: rgba(255, 255, 255, 0.04) !important;
                border-color: rgba(255, 255, 255, 0.12) !important;
                color: rgba(255, 255, 255, 0.8) !important;
            }

            .bf-quiz-link:hover,
            .bf-match-game-link:hover,
            .bf-breakdown-link:hover {
                background: rgba(255, 255, 255, 0.08) !important;
                border-color: rgba(255, 255, 255, 0.2) !important;
            }

            .article-action-btn {
                background: rgba(255, 255, 255, 0.04);
                border-color: rgba(255, 255, 255, 0.12);
                color: rgba(255, 255, 255, 0.8);
            }

            .article-action-btn:hover {
                border-color: rgba(255, 255, 255, 0.2);
                background: rgba(255, 255, 255, 0.08);
            }

            /* ── "Practice this article" text ── */
            .practice-label,
            .game-buttons-label {
                color: rgba(255, 255, 255, 0.35) !important;
            }

            /* ── Mode Toggle (FR/EN) - brighter inactive state ── */
            .mode-flag-btn:not(.active) {
                color: rgba(255, 255, 255, 0.45) !important;
            }

            .mode-flag-btn:hover:not(.active) {
                color: rgba(255, 255, 255, 0.7) !important;
            }

            /* ── Streak Calendar Modal ── */
            .streak-calendar-content {
                background: #1a1a1a;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
            }

            .streak-calendar-close {
                color: #9ca3af;
            }

            .streak-calendar-close:hover {
                color: #e5e5e5;
            }

            /* ── Paywall Modal ── */
            .paywall-modal-content {
                background: #1a1a1a;
                border-color: rgba(255, 255, 255, 0.1);
            }

            .paywall-modal-title {
                color: #e5e5e5;
            }

            .paywall-modal-message {
                color: #9ca3af;
            }

            .paywall-pricing-card {
                background: rgba(255, 255, 255, 0.04);
                border-color: rgba(255, 255, 255, 0.08);
            }

            .paywall-pricing-card:hover {
                border-color: rgba(255, 255, 255, 0.12);
                background: rgba(255, 255, 255, 0.06);
            }

            .paywall-pricing-card.selected {
                background: rgba(37, 99, 235, 0.08) !important;
                border-color: var(--french-blue) !important;
            }

            .paywall-modal-close {
                color: #9ca3af;
            }

            .paywall-modal-close:hover {
                color: #e5e5e5;
            }

            /* ── Skeleton Loading ── */
            .skeleton,
            .skeleton-line,
            .skeleton-card {
                background: linear-gradient(90deg, #222 25%, #2a2a2a 50%, #222 75%) !important;
                background-size: 200% 100%;
            }

            /* ── Article language selector ── */
            .article-language-selector-inline {
                color: rgba(255, 255, 255, 0.85);
            }

            .article-language-selector-inline .article-lang-toggle {
                background: rgba(255, 255, 255, 0.06);
                border-color: rgba(255, 255, 255, 0.1);
            }

            .article-language-selector-inline .read-lang-btn.bf-tier-tab,
            .article-language-selector-inline .explanation-lang-btn.bf-tier-tab {
                color: rgba(255, 255, 255, 0.45) !important;
            }

            .article-language-selector-inline .read-lang-btn.bf-tier-tab.selected,
            .article-language-selector-inline .read-lang-btn.bf-tier-tab.active,
            .article-language-selector-inline .explanation-lang-btn.bf-tier-tab.selected,
            .article-language-selector-inline .explanation-lang-btn.bf-tier-tab.active {
                background: rgba(255, 255, 255, 0.12) !important;
                color: #ffffff !important;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
            }

            .article-language-selector-inline .read-lang-btn.bf-tier-tab.selected:hover,
            .article-language-selector-inline .read-lang-btn.bf-tier-tab.active:hover,
            .article-language-selector-inline .explanation-lang-btn.bf-tier-tab.selected:hover,
            .article-language-selector-inline .explanation-lang-btn.bf-tier-tab.active:hover {
                background: rgba(255, 255, 255, 0.15) !important;
            }

            /* Mobile language toggle containers — match desktop dark style */
            .article-language-selector-read-mobile .article-lang-toggle-mobile,
            .article-language-selector-explanation-mobile .article-lang-toggle-mobile {
                background: rgba(255, 255, 255, 0.06) !important;
            }

            /* Mobile language toggle inactive text */
            .article-language-selector-read-mobile .read-lang-btn.bf-tier-tab,
            .article-language-selector-read-mobile .explanation-lang-btn.bf-tier-tab,
            .article-language-selector-explanation-mobile .read-lang-btn.bf-tier-tab,
            .article-language-selector-explanation-mobile .explanation-lang-btn.bf-tier-tab {
                color: rgba(255, 255, 255, 0.4) !important;
            }

            /* Mobile language toggle active state */
            .article-language-selector-read-mobile .read-lang-btn.bf-tier-tab.selected,
            .article-language-selector-read-mobile .read-lang-btn.bf-tier-tab.active,
            .article-language-selector-read-mobile .explanation-lang-btn.bf-tier-tab.selected,
            .article-language-selector-read-mobile .explanation-lang-btn.bf-tier-tab.active,
            .article-language-selector-explanation-mobile .read-lang-btn.bf-tier-tab.selected,
            .article-language-selector-explanation-mobile .read-lang-btn.bf-tier-tab.active,
            .article-language-selector-explanation-mobile .explanation-lang-btn.bf-tier-tab.selected,
            .article-language-selector-explanation-mobile .explanation-lang-btn.bf-tier-tab.active {
                background: rgba(255, 255, 255, 0.12) !important;
                color: #ffffff !important;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
            }

            /* Mobile language options */
            .article-language-selector-mobile .lang-option:not(.lang-selected) {
                color: rgba(255, 255, 255, 0.4) !important;
            }

            /* ── Toast notifications ── */
            .toast-notification {
                background: #e5e5e5;
                color: #111111;
            }

            /* ── Divider lines ── */
            .summary-text.expanded+.article-quiz:not(.quiz-hidden)+.breakdown-meta-container {
                border-top-color: rgba(255, 255, 255, 0.06);
            }

            .game-buttons-container::after {
                background: rgba(255, 255, 255, 0.06) !important;
            }

            /* ── Quiz Me: Full Dark Mode ── */

            /* Question text - white on dark */
            .question-text {
                color: #ffffff !important;
            }

            /* Progress indicator pill */
            .quiz-progress-indicator {
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.5);
            }

            /* Hint button — brighter for visibility */
            .quiz-hint-btn {
                color: rgba(255, 255, 255, 0.7) !important;
            }

            .quiz-hint-btn:hover:not(:disabled) {
                color: rgba(255, 255, 255, 0.85) !important;
            }

            .quiz-hint-btn:active:not(:disabled) {
                color: rgba(255, 255, 255, 0.7) !important;
            }

            .quiz-hint-btn:disabled {
                color: rgba(255, 255, 255, 0.3) !important;
            }

            /* Hint display box */
            .quiz-hint-display {
                background: rgba(255, 255, 255, 0.06);
                border-color: rgba(255, 255, 255, 0.1);
                color: rgba(255, 255, 255, 0.8);
                box-shadow: none;
            }

            /* Answer options - default state (match VocaMatch tile look) */
            .quiz-option {
                background: rgba(255, 255, 255, 0.06) !important;
                border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
                color: #ffffff !important;
                box-shadow: none !important;
            }

            /* Answer options - hover */
            .quiz-option:hover:not(:disabled) {
                background: rgba(255, 255, 255, 0.1) !important;
                border-color: rgba(37, 99, 235, 0.4) !important;
                color: #ffffff !important;
                box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
            }

            /* Answer options - active press */
            .quiz-option:active:not(:disabled) {
                background: rgba(255, 255, 255, 0.03) !important;
                color: #ffffff !important;
                box-shadow: none !important;
            }

            /* Answer options - selected */
            .quiz-option.selected {
                background: rgba(37, 99, 235, 0.15) !important;
                border-color: var(--french-blue) !important;
                color: #ffffff !important;
                box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
            }

            /* Answer options - correct */
            .quiz-option.correct {
                background: rgba(34, 197, 94, 0.12) !important;
                border-color: rgba(34, 197, 94, 0.4) !important;
                color: #4ade80 !important;
                box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2) !important;
            }

            /* Answer options - incorrect */
            .quiz-option.incorrect {
                background: rgba(239, 68, 68, 0.12) !important;
                border-color: rgba(239, 68, 68, 0.4) !important;
                color: #f87171 !important;
                box-shadow: none !important;
            }

            /* Answer options - disabled (after answering) */
            .quiz-option:disabled {
                background: rgba(255, 255, 255, 0.04) !important;
                border-color: rgba(255, 255, 255, 0.06) !important;
                color: rgba(255, 255, 255, 0.4) !important;
            }

            /* Feedback divider */
            .quiz-feedback {
                border-top-color: rgba(255, 255, 255, 0.08);
            }

            .quiz-feedback.correct {
                border-top-color: rgba(34, 197, 94, 0.2);
            }

            .quiz-feedback.incorrect {
                border-top-color: rgba(239, 68, 68, 0.15);
            }

            /* Feedback message text colors */
            .quiz-feedback.correct .feedback-message {
                color: #4ade80;
            }

            .quiz-feedback.incorrect .feedback-message {
                color: #f87171;
            }

            /* Premium completion message */
            .quiz-feedback.premium-completion .feedback-message {
                color: #4ade80 !important;
            }

            /* Cultural context / explanation */
            .feedback-cultural-context {
                color: rgba(255, 255, 255, 0.5);
                border-top-color: rgba(255, 255, 255, 0.08);
            }

            /* Fill-in-the-blank (quiz variant) */
            .fill-blank-prompt {
                color: #ffffff !important;
            }

            .fill-blank-sentence {
                color: rgba(255, 255, 255, 0.85);
            }

            .blank-slot {
                border-bottom-color: rgba(255, 255, 255, 0.35);
            }

            .blank-slot.filled {
                color: #4ade80;
                border-bottom-color: #4ade80;
                background: rgba(34, 197, 94, 0.15);
            }

            /* ── Breakdown: Full Dark Mode ── */

            /* Title "Practice Phrases" */
            .breakdown-title-text {
                color: #ffffff !important;
            }

            /* Divider line under header */
            .breakdown-header-container::after {
                background: rgba(255, 255, 255, 0.08);
            }

            /* Tier toggle container (shared by Breakdown & VocaMatch) — !important to override mobile styles */
            .breakdown-header .bf-tier-toggle,
            .vocamatch-header .bf-tier-toggle {
                background: rgba(255, 255, 255, 0.08) !important;
            }

            /* Active tier tab — !important to override mobile #fff */
            .breakdown-header .bf-tier-toggle .bf-tier-tab.active,
            .vocamatch-header .bf-tier-toggle .bf-tier-tab.active {
                background: rgba(255, 255, 255, 0.15) !important;
                color: #2563eb !important;
                box-shadow: none !important;
            }

            /* Inactive tier tab text */
            .breakdown-header .bf-tier-toggle .bf-tier-tab,
            .vocamatch-header .bf-tier-toggle .bf-tier-tab {
                color: rgba(255, 255, 255, 0.4) !important;
            }

            /* Profile dropdown toggle containers — match Breakdown/VocaMatch tier style */
            .read-lang-buttons.bf-tier-toggle,
            .explanation-lang-buttons.bf-tier-toggle,
            .show-images-buttons.bf-tier-toggle,
            .french-level-buttons.bf-tier-toggle {
                background: rgba(255, 255, 255, 0.08) !important;
            }

            /* Profile dropdown inactive toggle text */
            .read-lang-btn.bf-tier-tab,
            .explanation-lang-btn.bf-tier-tab,
            .french-level-btn.bf-tier-tab,
            .show-images-btn.bf-tier-tab {
                color: rgba(255, 255, 255, 0.4) !important;
            }

            /* Profile dropdown active toggle — prominent blue text on subtle white bg */
            .read-lang-btn.bf-tier-tab.selected,
            .read-lang-btn.bf-tier-tab.active,
            .explanation-lang-btn.bf-tier-tab.selected,
            .explanation-lang-btn.bf-tier-tab.active,
            .french-level-btn.bf-tier-tab.selected,
            .french-level-btn.bf-tier-tab.active,
            .show-images-btn.bf-tier-tab.selected,
            .show-images-btn.bf-tier-tab.active {
                background: rgba(255, 255, 255, 0.18) !important;
                color: #2563eb !important;
                box-shadow: none !important;
            }

            /* Profile dropdown active toggle hover */
            .read-lang-btn.bf-tier-tab.selected:hover,
            .read-lang-btn.bf-tier-tab.active:hover,
            .explanation-lang-btn.bf-tier-tab.selected:hover,
            .explanation-lang-btn.bf-tier-tab.active:hover,
            .french-level-btn.bf-tier-tab.selected:hover,
            .french-level-btn.bf-tier-tab.active:hover,
            .show-images-btn.bf-tier-tab.selected:hover,
            .show-images-btn.bf-tier-tab.active:hover {
                background: rgba(255, 255, 255, 0.22) !important;
                color: #2563eb !important;
            }

            /* French word active highlight in breakdown */
            .french-word.active {
                background: rgba(37, 99, 235, 0.15);
            }

            /* Back to article button */
            .back-to-article-btn {
                color: rgba(255, 255, 255, 0.4);
            }

            .back-to-article-btn:hover {
                color: rgba(255, 255, 255, 0.6);
            }

            .back-to-article-btn:active {
                color: rgba(255, 255, 255, 0.5);
            }

            .back-to-article-btn:focus-visible {
                outline-color: rgba(255, 255, 255, 0.2);
            }

            /* ── VocaMatch: Full Dark Mode ── */

            /* Title "Match the words" */
            .vocamatch-title-text {
                color: #ffffff !important;
            }

            /* Counter pill */
            .vocamatch-counter,
            .match-progress-indicator,
            .match-progress-count {
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.5);
            }

            /* Classic mode badge */
            .match-game-classic-badge {
                background: rgba(255, 255, 255, 0.06);
                border-color: rgba(255, 255, 255, 0.1);
            }

            /* Column labels (French, English, etc.) */
            .match-game-column-label {
                color: #ffffff !important;
            }

            /* Word tiles - default state */
            .match-word {
                background: rgba(255, 255, 255, 0.06) !important;
                border-color: rgba(255, 255, 255, 0.12) !important;
                color: #ffffff !important;
                box-shadow: none !important;
            }

            /* Word tiles - hover */
            .match-word:hover:not(.matched):not(.selected) {
                background: rgba(255, 255, 255, 0.1) !important;
                border-color: rgba(255, 255, 255, 0.2) !important;
                box-shadow: none !important;
            }

            /* Word tiles - selected */
            .match-word.selected {
                background: rgba(37, 99, 235, 0.15) !important;
                border-color: rgba(37, 99, 235, 0.6) !important;
                color: #ffffff !important;
                box-shadow: none !important;
            }

            /* Word tiles - matched (correct) */
            .match-word.matched {
                background: rgba(34, 197, 94, 0.2) !important;
                border-color: rgba(34, 197, 94, 0.5) !important;
                color: rgba(255, 255, 255, 0.5) !important;
                box-shadow: none !important;
            }

            /* Word tiles - wrong */
            .match-word.wrong {
                background: rgba(239, 68, 68, 0.12) !important;
                border-color: rgba(239, 68, 68, 0.5) !important;
                color: #f87171 !important;
                box-shadow: none !important;
            }

            /* Audio button in VocaMatch */
            .match-word-audio-btn {
                background: rgba(37, 99, 235, 0.15);
                border-color: rgba(37, 99, 235, 0.3);
            }

            /* Practice button in VocaMatch */
            .vocamatch-word-practice-btn {
                background: rgba(37, 99, 235, 0.15);
                border-color: rgba(37, 99, 235, 0.3);
            }

            /* Progress bar track */
            .match-progress-bar-container {
                background: rgba(255, 255, 255, 0.12) !important;
                box-shadow: none !important;
            }

            .match-progress-bar-container::before {
                opacity: 0 !important;
            }

            /* Reward / completion box */
            .match-game-reward {
                background: rgba(37, 99, 235, 0.06);
                border-color: rgba(37, 99, 235, 0.12);
            }

            /* VocaMatch word tooltip */
            .vocamatch-word-tooltip {
                background: #1a1a1a !important;
                border-color: rgba(255, 255, 255, 0.1) !important;
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                    0 8px 32px rgba(0, 0, 0, 0.3) !important;
            }

            .vocamatch-word-tooltip .word-display {
                color: #ffffff;
                text-shadow: none;
            }

            .vocamatch-word-tooltip .note {
                color: rgba(255, 255, 255, 0.6);
            }

            .vocamatch-word-tooltip .definition {
                color: rgba(255, 255, 255, 0.6);
            }

            /* ── Did You Know / Clue sections ── */
            .quiz-clue-dyk .dyk-label,
            .did-you-know .dyk-label {
                color: rgba(255, 255, 255, 0.6);
            }

            .quiz-clue-dyk .dyk-fact,
            .did-you-know .dyk-fact {
                color: rgba(255, 255, 255, 0.6);
            }

            /* ── Quiz Progress Bar ── */
            .quiz-progress-bar-container {
                background: rgba(255, 255, 255, 0.12) !important;
                box-shadow: none !important;
            }

            .quiz-progress-bar-container::before {
                opacity: 0 !important;
            }

            /* ── Quiz Summary / Completion ── */
            .summary-title {
                color: #4ade80;
            }

            .summary-score {
                color: rgba(255, 255, 255, 0.5);
            }

            .summary-learnings {
                background: rgba(255, 255, 255, 0.04);
            }

            .learnings-title {
                color: rgba(255, 255, 255, 0.6);
            }

            .learning-item {
                color: rgba(255, 255, 255, 0.7);
            }

            /* ── VocaMatch Completion ── */
            .vocamatch-completion-text {
                color: #4ade80;
            }

            /* VocaMatch action buttons */
            .vocamatch-play-level {
                background: rgba(255, 255, 255, 0.12);
                box-shadow: none;
            }

            .vocamatch-play-level:hover {
                background: rgba(255, 255, 255, 0.18);
                box-shadow: none;
            }

            .vocamatch-continue:hover {
                background: rgba(255, 255, 255, 0.06);
            }

            /* ── VocaMatch Practice Modal ── */
            .vocamatch-practice-modal-content {
                background: #1a1a1a;
            }

            .vocamatch-practice-modal-header {
                border-bottom-color: rgba(255, 255, 255, 0.08);
            }

            .vocamatch-practice-modal-close:hover {
                background: rgba(255, 255, 255, 0.08);
            }

            .vocamatch-practice-modal-close:active {
                background: rgba(255, 255, 255, 0.12);
            }

            .vocamatch-practice-word-item {
                border-bottom-color: rgba(255, 255, 255, 0.08);
            }

            /* ── Breakdown Audio Buttons ── */
            .bf-breakdown-audio-btn {
                background: rgba(37, 99, 235, 0.15);
                border-color: rgba(37, 99, 235, 0.3);
            }

            /* ── VocaMatch Loading Spinner ── */
            .vocamatch-loading-state .vocamatch-loading-spinner {
                border-color: rgba(37, 99, 235, 0.25);
                border-top-color: #3b82f6;
            }

            /* ── PhraseBuilder Dark Mode ── */
            .pb-progress-seg {
                background: rgba(255, 255, 255, 0.1);
            }

            .pb-score-total {
                color: rgba(255, 255, 255, 0.35);
            }

            .pb-card {
                border-bottom-color: rgba(255, 255, 255, 0.06);
            }

            .pb-card-active {
                background: rgba(37, 99, 235, 0.08);
            }

            .pb-card-fr {
                color: rgba(255, 255, 255, 0.85);
            }

            .pb-card-en {
                color: rgba(255, 255, 255, 0.4);
            }

            .pb-card-en-primary {
                color: rgba(255, 255, 255, 0.6);
            }

            .pb-number-badge {
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.45);
            }

            .pb-check-badge {
                background: rgba(37, 99, 235, 0.2);
            }

            .pb-english-hint {
                color: rgba(255, 255, 255, 0.55);
            }

            .pb-slot-underline {
                background: rgba(255, 255, 255, 0.12);
            }

            .pb-slot-filled {
                background: rgba(37, 99, 235, 0.18);
                color: #fff;
            }

            .pb-tile {
                background: rgba(255, 255, 255, 0.06);
                border-color: rgba(255, 255, 255, 0.1);
                color: #fff;
            }

            .pb-tile:hover:not(.pb-tile-used) {
                background: rgba(255, 255, 255, 0.1);
            }

            .pb-close-practice-btn {
                background: rgba(255, 255, 255, 0.06);
                color: rgba(255, 255, 255, 0.3);
            }

            .pb-completion-text {
                color: #4ade80;
            }

            .pb-celebration-title {
                color: rgba(255, 255, 255, 0.9);
            }

            .pb-celebration-subtitle {
                color: rgba(255, 255, 255, 0.5);
            }

            .pb-btn-secondary {
                color: rgba(255, 255, 255, 0.5);
            }

            .pb-empty {
                color: rgba(255, 255, 255, 0.35);
            }

        }

        /* ============================================
           PHRASEBUILDER MOBILE RESPONSIVE
           ============================================ */
        @media (max-width: 768px) {
            .pb-card {
                padding: 12px 4px;
            }

            .pb-card-active {
                padding: 16px 8px;
            }

            .pb-build-btn {
                padding: 6px 12px;
                font-size: 12px;
            }

            .pb-tile {
                padding: 8px 12px;
                font-size: 14px;
            }

            .pb-celebration {
                padding: 24px 12px;
            }
        }

        /* ============================================
           ACCESSIBILITY
           ============================================ */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }

            .pb-tile-wrong,
            .pb-tile-hinted,
            .pb-slot-filled.pb-slot-pop,
            .pb-build-btn.pb-pulse,
            .pb-hint-btn.pb-hint-pulse {
                animation: none !important;
            }
        }