:root {
            --bg-primary: #f0faf4;
            --bg-secondary: #e2f5ea;
            --bg-card: rgba(255, 255, 255, 0.72);
            --text-primary: #1a2e1a;
            --text-secondary: #5a7a5e;
            --border-color: rgba(56, 176, 120, 0.25);
            --accent-green: #2ecc71;
            --accent-green-dark: #1fa85a;
            --accent-blue: #26C6DA;
            --accent-orange: #FF7043;
            --accent-red: #ef5350;
            --accent-purple: #9b59b6;
            --accent-pink: #ec407a;
            --accent-yellow: #FFD54F;
            --success: #2ecc71;
            --error: #ef5350;
            --selected: #e8faf0;
            --selected-border: #2ecc71;
            --matched: #c8f7dc;
            --matched-border: #2ecc71;
            --wrong: #ffcdd2;
            --wrong-border: #ef5350;
            --border-radius: 20px;
            --border-radius-lg: 28px;
            --glass-bg: rgba(255, 255, 255, 0.55);
            --glass-border: rgba(255, 255, 255, 0.45);
            --glass-shadow: 0 8px 32px rgba(31, 80, 50, 0.12);
            --safe-area-bottom: env(safe-area-inset-bottom, 0px);
            --safe-area-top: env(safe-area-inset-top, 0px);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html, body {
            /* 100dvh accounts for the dynamic viewport (mobile URL bar
               collapse/expand) so the bottom nav truly sits at the
               bottom — 100% / 100vh leave a gap on iOS Safari. */
            height: 100dvh;
            /* Fallback for browsers without dvh support */
            min-height: 100vh;
            overflow: hidden;
        }

        body {
            font-family: 'Nunito', sans-serif;
            background: linear-gradient(160deg, #e8faf0 0%, #f0e6ff 35%, #e2f5ea 65%, #f5eaff 100%);
            color: var(--text-primary);
            line-height: 1.5;
            overscroll-behavior: none;
        }

        .app {
            height: 100%;
            display: flex;
            flex-direction: column;
            padding-top: var(--safe-area-top);
        }

        .screens-container {
            /* Take up all remaining space ABOVE the bottom-nav. The nav
               is a normal flex child below us now (no more fragile
               margin-bottom hack that hardcoded a 64px reservation
               which didn't always match the real nav height). */
            flex: 1;
            min-height: 0; /* allow inner scrolling within flex parent */
            overflow: hidden;
            position: relative;
        }

        .screen {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto;
            overflow-x: hidden;
            opacity: 0;
            transform: translateX(20px);
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
            z-index: 0;
        }

        .screen.active {
            opacity: 1;
            transform: none;
            pointer-events: auto;
            z-index: 1;
        }

        /* ==================== ONBOARDING SCREEN ==================== */
        .onboarding-screen {
            display: flex;
            flex-direction: column;
            padding: 40px 24px;
            padding-top: calc(60px + var(--safe-area-top));
        }

        .onboarding-logo {
            text-align: center;
            margin-bottom: 40px;
        }

        .onboarding-logo .logo-icon {
            font-size: 80px;
            margin-bottom: 16px;
        }

        .onboarding-logo h1 {
            font-size: 36px;
            font-weight: 800;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .onboarding-logo p {
            color: var(--text-secondary);
            font-size: 16px;
            margin-top: 8px;
        }

        .onboarding-section {
            margin-bottom: 32px;
        }

        .onboarding-section h2 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 16px;
            color: var(--text-primary);
        }

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

        .user-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .user-card:active {
            transform: scale(0.98);
        }

        .user-card:hover {
            border-color: var(--accent-green);
        }

        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            font-weight: 800;
        }

        .user-info {
            flex: 1;
        }

        .user-name {
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 2px;
        }

        .user-stats {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .user-arrow {
            color: var(--text-secondary);
            font-size: 20px;
        }

        .divider {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 24px 0;
        }

        .divider-line {
            flex: 1;
            height: 1px;
            background: var(--border-color);
        }

        .divider-text {
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 600;
        }

        .create-user-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .input-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
        }

        .input-field {
            padding: 16px;
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 16px;
            font-family: inherit;
            font-weight: 600;
            transition: border-color 0.2s ease;
        }

        .input-field:focus {
            outline: none;
            border-color: var(--accent-green);
        }

        .input-field::placeholder {
            color: var(--text-secondary);
            font-weight: 400;
        }

        .avatar-picker {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .avatar-option {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.2s ease;
            background: var(--bg-secondary);
        }

        .avatar-option.selected {
            border-color: var(--accent-green);
            background: var(--matched);
            transform: scale(1.1);
        }

        .avatar-option:active {
            transform: scale(0.95);
        }

        /* Passcode Inputs */
        .passcode-inputs {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

        .passcode-digit {
            width: 55px;
            height: 65px;
            border: 3px solid var(--border-color);
            border-radius: 16px;
            font-size: 28px;
            font-weight: 800;
            text-align: center;
            font-family: inherit;
            background: var(--bg-secondary);
            color: var(--text-primary);
            outline: none;
            transition: all 0.2s ease;
        }

        .passcode-digit:focus {
            border-color: var(--accent-green);
            background: white;
            box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2);
        }

        .passcode-digit.filled {
            background: var(--matched);
            border-color: var(--accent-green);
        }

        .passcode-digit.error {
            border-color: var(--error);
            background: var(--wrong);
            animation: shake 0.4s ease;
        }

        .passcode-digit-display {
            width: 55px;
            height: 65px;
            border: 3px solid var(--border-color);
            border-radius: 16px;
            font-size: 28px;
            font-weight: 800;
            text-align: center;
            line-height: 59px;
            font-family: inherit;
            background: var(--bg-secondary);
            color: var(--text-primary);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .passcode-digit-display.active {
            border-color: var(--accent-green);
            background: white;
            box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2);
        }

        .passcode-digit-display.filled {
            background: var(--matched);
            border-color: var(--accent-green);
        }

        .passcode-digit-display.error {
            border-color: var(--error);
            background: var(--wrong);
            animation: shake 0.4s ease;
        }

        .passcode-error {
            color: var(--error);
            font-size: 13px;
            font-weight: 600;
            text-align: center;
            margin-top: 8px;
            min-height: 20px;
        }

        /* Passcode Modal */
        .passcode-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            padding: 20px;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .passcode-modal.active {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

        .passcode-modal-content {
            background: white;
            border-radius: var(--border-radius-lg);
            padding: 32px 24px;
            width: 100%;
            max-width: 340px;
            text-align: center;
        }

        .passcode-modal-avatar {
            font-size: 64px;
            margin-bottom: 12px;
        }

        .passcode-modal-name {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 24px;
            color: var(--text-primary);
        }

        .passcode-modal-label {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 16px;
            font-weight: 600;
        }

        .passcode-modal-inputs {
            margin-bottom: 16px;
        }

        .passcode-modal-error {
            color: var(--error);
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 16px;
            min-height: 20px;
        }

        .passcode-modal-buttons {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .passcode-modal-buttons button {
            flex: 1;
            padding: 14px;
            border-radius: 50px;
            font-size: 15px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
        }

        .passcode-cancel-btn {
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            color: var(--text-primary);
        }

        .passcode-submit-btn {
            background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
            border: none;
            color: white;
        }

        .primary-btn {
            padding: 18px 36px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 6px 0 #4a3580, 0 8px 20px rgba(118, 75, 162, 0.3);
            transition: all 0.2s ease;
        }

        .primary-btn:active {
            transform: translateY(4px);
            box-shadow: 0 2px 0 #4a3580;
        }

        .primary-btn:disabled {
            background: var(--border-color);
            box-shadow: 0 4px 0 #ccc;
            cursor: not-allowed;
        }

        .secondary-btn {
            padding: 16px 32px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 16px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .secondary-btn:active {
            transform: scale(0.98);
        }

        .delete-user-btn {
            padding: 8px;
            background: none;
            border: none;
            color: var(--error);
            font-size: 18px;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s;
        }

        .delete-user-btn:hover {
            opacity: 1;
        }

        /* ==================== BOTTOM NAV ==================== */
        /* Natural flex child — sits directly under .screens-container.
           No `position: fixed` + no `bottom: 0` so the nav can't get
           a gap below itself on viewports where the old `height: 100%`
           fell short of the actual viewport height. */
        .bottom-nav {
            display: flex;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.5);
            padding-bottom: var(--safe-area-bottom);
            box-shadow: 0 -4px 24px rgba(31, 80, 50, 0.1);
            border-radius: 24px 24px 0 0;
            z-index: 300;
        }

        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 0 4px;
            background: none;
            border: none;
            color: #B0B0B0;
            font-size: 11px;
            font-weight: 700;
            transition: color 0.2s ease;
            cursor: pointer;
            font-family: inherit;
        }

        .nav-item.active {
            color: #7c3aed;
        }

        .nav-item .icon {
            font-size: 24px;
            margin-bottom: 4px;
            transition: transform 0.2s ease;
        }

        .nav-item.active .icon {
            transform: scale(1.15);
        }

        /* ==================== HOME SCREEN ==================== */
        .home-screen {
            padding: 0;
            display: flex;
            flex-direction: column;
            overflow-y: hidden;
        }
        .home-screen .home-header {
            display: none;  /* replaced by pet-hero-topbar */
        }
        .home-screen .summer-sun {
            display: none;  /* replaced by habitat emojis */
        }

        /* Floating background decorations on home */
        .home-screen::before {
            content: '🍀';
            position: absolute;
            top: 120px;
            right: -10px;
            font-size: 40px;
            opacity: 0.12;
            pointer-events: none;
            animation: homeDecoFloat 7s ease-in-out infinite;
        }

        .home-screen::after {
            content: '✨';
            position: absolute;
            top: 350px;
            left: -5px;
            font-size: 30px;
            opacity: 0.12;
            pointer-events: none;
            animation: homeDecoFloat 5s ease-in-out infinite 2s;
        }

        @keyframes homeDecoFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(8deg); }
        }

        .summer-sun {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 100px;
            height: 100px;
            z-index: 2;
            pointer-events: none;
            animation: sunFloat 4s ease-in-out infinite;
            filter: drop-shadow(0 0 20px rgba(255, 213, 79, 0.5));
        }

        .summer-sun img {
            width: 100%;
            height: 100%;
        }

        @keyframes sunFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-6px) rotate(5deg); }
        }

        .home-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0;
        }

        .home-user {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .home-user-avatar {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            cursor: pointer;
            transition: transform 0.15s ease;
            box-shadow: 0 4px 16px rgba(46,204,113,0.3);
            border: 3px solid rgba(255,255,255,0.8);
        }

        .home-user-avatar:active {
            transform: scale(0.9);
        }

        .home-user-info {
            display: flex;
            flex-direction: column;
        }

        .home-user-greeting {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .home-user-name {
            font-size: 20px;
            font-weight: 800;
            color: var(--text-primary);
        }

        .streak-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            padding: 8px 16px;
            border-radius: 24px;
            font-weight: 800;
            font-size: 16px;
            color: white;
            border: 1px solid rgba(255,255,255,0.25);
            box-shadow: 0 4px 16px rgba(155,89,182,0.35);
        }

        .stats-row {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .stat-card {
            flex: 1;
            background: linear-gradient(145deg, #2ecc71, #1fa85a);
            border-radius: 20px;
            padding: 16px 12px;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.3);
            box-shadow: 0 6px 20px rgba(46,204,113,0.25);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255,255,255,0.12);
            pointer-events: none;
        }

        .stat-card:nth-child(1) {
            background: linear-gradient(145deg, #2ecc71, #27ae60);
            box-shadow: 0 6px 20px rgba(46,204,113,0.3);
        }

        .stat-card:nth-child(2) {
            background: linear-gradient(145deg, #9b59b6, #8e44ad);
            box-shadow: 0 6px 20px rgba(155,89,182,0.3);
        }

        .stat-card:nth-child(3) {
            background: linear-gradient(145deg, #1abc9c, #16a085);
            box-shadow: 0 6px 20px rgba(26,188,156,0.3);
        }

        .stat-value {
            font-size: 24px;
            font-weight: 800;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }

        .stat-card:nth-child(1) .stat-value {
            color: white;
        }

        .stat-card:nth-child(3) .stat-value {
            color: white;
        }

        .stat-label {
            font-size: 11px;
            color: rgba(255,255,255,0.85);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        /* Difficulty Filter Tabs */
        .difficulty-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            overflow-x: auto;
            padding-bottom: 4px;
            -webkit-overflow-scrolling: touch;
        }

        .difficulty-tab {
            flex-shrink: 0;
            padding: 10px 16px;
            border-radius: 25px;
            border: 1px solid var(--glass-border);
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 2px 12px rgba(31,80,50,0.08);
        }

        .difficulty-tab:active {
            transform: scale(0.95);
        }

        .difficulty-tab.active {
            border-color: transparent;
            color: white;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .difficulty-tab[data-level="all"].active {
            background: linear-gradient(135deg, #2ecc71, #1fa85a);
            box-shadow: 0 4px 14px rgba(46,204,113,0.4);
        }

        .difficulty-tab[data-level="basic"].active {
            background: linear-gradient(135deg, #58d68d, #2ecc71);
            box-shadow: 0 4px 14px rgba(46,204,113,0.4);
        }

        .difficulty-tab[data-level="intermediate"].active {
            background: linear-gradient(135deg, #1abc9c, #16a085);
            box-shadow: 0 4px 14px rgba(26,188,156,0.4);
        }

        .difficulty-tab[data-level="upper"].active {
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            box-shadow: 0 4px 14px rgba(155,89,182,0.4);
        }

        .difficulty-tab[data-level="advanced"].active {
            background: linear-gradient(135deg, #8e44ad, #6c3483);
            box-shadow: 0 4px 14px rgba(142,68,173,0.4);
        }

        .difficulty-tab[data-level="beginning"].active {
            background: linear-gradient(135deg, #27ae60, #1e8449);
            box-shadow: 0 4px 14px rgba(39,174,96,0.4);
        }

        .tab-count {
            background: rgba(0,0,0,0.08);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
        }

        .difficulty-tab.active .tab-count {
            background: rgba(255,255,255,0.25);
        }

        .section-title {
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 16px;
            color: var(--text-primary);
        }

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

        .category-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: var(--border-radius);
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            transition: transform 0.2s ease, border-color 0.2s ease;
            box-shadow: 0 4px 16px rgba(31,80,50,0.06);
        }

        .category-card:active {
            transform: scale(0.98);
        }

        .category-card.completed {
            border-color: rgba(46,204,113,0.4);
            background: linear-gradient(135deg, rgba(46,204,113,0.12) 0%, rgba(255,255,255,0.6) 100%);
        }

        .category-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, rgba(46,204,113,0.15), rgba(155,89,182,0.15));
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
        }

        .category-info {
            flex: 1;
        }

        .category-name {
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 4px;
        }

        .category-progress-text {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .category-lessons {
            display: flex;
            gap: 6px;
        }

        .lesson-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--border-color);
        }

        .lesson-dot.completed {
            background: var(--accent-green);
        }

        .lesson-dot.current {
            background: var(--accent-blue);
            animation: pulse 1.5s ease infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }

        /* Lesson Start Card */
        .lesson-start-card {
            border-radius: 24px;
            padding: 24px;
            margin-bottom: 24px;
            color: white;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        }

        .lesson-start-card::before {
            content: '';
            position: absolute;
            top: -40%;
            right: -20%;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: rgba(255,255,255,0.12);
            pointer-events: none;
        }

        .lesson-start-card::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -15%;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            pointer-events: none;
        }

        .lesson-info {
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
        }

        .lesson-number {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 4px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }

        .lesson-words-preview {
            font-size: 14px;
            opacity: 0.9;
        }

        .lesson-difficulty {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            position: relative;
            z-index: 1;
        }

        .difficulty-badge {
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            backdrop-filter: blur(4px);
        }

        .difficulty-band {
            font-size: 12px;
            opacity: 0.9;
        }

        .start-lesson-btn {
            width: 100%;
            background: white;
            color: #333;
            box-shadow: 0 6px 0 rgba(0,0,0,0.1);
            border: none;
            font-size: 16px;
            font-weight: 800;
            position: relative;
            z-index: 1;
        }

        .lesson-start-card .start-lesson-btn {
            color: #333;
            font-size: 16px;
            border-radius: 16px;
            padding: 14px;
        }

        .start-lesson-btn:active {
            transform: translateY(3px);
            box-shadow: 0 3px 0 rgba(0,0,0,0.1);
        }

        .start-lesson-btn::before {
            content: '';
        }

        /* History Tabs */
        .history-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }

        .history-tab {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid var(--glass-border);
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 16px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-shadow: 0 2px 12px rgba(31,80,50,0.06);
        }

        .history-tab.active {
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 16px rgba(46,204,113,0.3);
        }

        .history-tab-count {
            background: rgba(0,0,0,0.1);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }

        .history-tab.active .history-tab-count {
            background: rgba(255,255,255,0.2);
        }

        /* Lesson History Table */
        .lesson-history {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .empty-history {
            text-align: center;
            padding: 32px;
            color: var(--text-secondary);
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: var(--border-radius);
        }

        .history-table {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: var(--border-radius);
            overflow: hidden;
            border: 1px solid var(--glass-border);
            box-shadow: 0 4px 16px rgba(31,80,50,0.06);
        }

        .history-row {
            display: flex;
            align-items: center;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .history-row:last-child {
            border-bottom: none;
        }

        .history-row:active {
            background: var(--bg-secondary);
        }

        .history-lesson-num {
            width: 36px;
            height: 36px;
            background: var(--bg-secondary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 14px;
            color: var(--accent-green);
            flex-shrink: 0;
        }

        .history-info {
            flex: 1;
            margin-left: 12px;
            min-width: 0;
        }

        .history-title {
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .history-date {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .history-stats {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-right: 8px;
        }

        .history-points {
            font-weight: 700;
            color: #FF7043;
            font-size: 14px;
        }

        .history-accuracy {
            font-size: 12px;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            padding: 3px 8px;
            border-radius: 8px;
        }

        .history-accuracy.perfect {
            background: #B2DFDB;
            color: #00695C;
        }

        .history-expand-icon {
            font-size: 12px;
            color: var(--text-secondary);
            transition: transform 0.2s ease;
        }

        .history-row.expanded .history-expand-icon {
            transform: rotate(180deg);
        }

        .history-detail {
            display: none;
            padding: 0 14px 14px 14px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
        }

        .history-detail.show {
            display: block;
        }

        .history-words-label {
            font-weight: 600;
            font-size: 12px;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .history-words-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }

        .history-word-tag {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            padding: 5px 10px;
            border-radius: 16px;
            font-size: 11px;
            font-weight: 600;
            color: #1976d2;
            border: 2px solid #90caf9;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .history-word-tag:active {
            transform: scale(0.95);
            background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
        }

        .relearn-btn {
            width: 100%;
            padding: 12px 16px;
            background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
            transition: all 0.2s ease;
        }

        .relearn-btn:active {
            transform: scale(0.95);
        }

        /* History Pagination */
        .history-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            padding: 14px 0 4px;
        }

        .history-page-btn {
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 8px 16px;
            font-family: 'Nunito', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: var(--accent-green-dark);
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .history-page-btn:active:not(:disabled) {
            transform: scale(0.95);
            background: var(--bg-secondary);
        }

        .history-page-btn:disabled {
            opacity: 0.35;
            cursor: default;
        }

        .history-page-info {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-secondary);
            min-width: 50px;
            text-align: center;
        }

        /* Mistakes Tab Content */
        .mistakes-container {
            display: none;
        }

        .mistakes-container.show {
            display: block;
        }

        .review-summary {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 12px;
            padding: 10px 14px;
            background: linear-gradient(135deg, rgba(155,89,182,0.1), rgba(46,204,113,0.1));
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            text-align: center;
        }

        .review-lesson-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-left: 4px solid var(--accent-purple);
            border-radius: var(--border-radius);
            padding: 14px 14px 12px;
            margin-bottom: 12px;
            box-shadow: 0 4px 16px rgba(31,80,50,0.06);
        }

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

        .review-lesson-title {
            font-weight: 800;
            font-size: 15px;
            color: var(--text-primary);
        }

        .review-lesson-count {
            background: rgba(155,89,182,0.15);
            color: var(--accent-purple);
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
        }

        .review-lesson-words {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 6px;
            line-height: 1.4;
        }

        .review-lesson-stats {
            font-size: 12px;
            color: var(--accent-purple);
            font-weight: 600;
            margin-bottom: 10px;
        }

        .review-lesson-btn {
            width: 100%;
            padding: 10px 16px;
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(155, 89, 182, 0.3);
            transition: all 0.2s ease;
        }

        .review-lesson-btn:active {
            transform: scale(0.96);
        }

        .clear-mistakes-btn {
            width: 100%;
            padding: 12px 16px;
            background: transparent;
            color: var(--text-secondary);
            border: 2px solid var(--border-color);
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
        }

        .all-complete-card {
            background: linear-gradient(135deg, #2ecc71, #1abc9c);
            border-radius: var(--border-radius);
            padding: 24px;
            margin-bottom: 24px;
            color: white;
            text-align: center;
            box-shadow: 0 6px 20px rgba(46,204,113,0.25);
        }

        .all-complete-icon {
            font-size: 48px;
            margin-bottom: 12px;
        }

        .all-complete-title {
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .all-complete-subtitle {
            font-size: 14px;
            opacity: 0.9;
        }

        /* ==================== LESSON SCREEN ==================== */
        .lesson-screen {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--bg-primary);
        }

        .lesson-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            padding-top: calc(16px + var(--safe-area-top));
        }

        .close-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 300;
            cursor: pointer;
        }

        .progress-bar-container {
            flex: 1;
            height: 16px;
            background: var(--border-color);
            border-radius: 8px;
            overflow: hidden;
        }

        .progress-bar-fill {
            height: 100%;
            background: var(--accent-green);
            border-radius: 8px;
            transition: width 0.3s ease;
        }

        .lesson-points {
            display: flex;
            align-items: center;
            gap: 4px;
            font-weight: 700;
            color: var(--accent-orange);
        }

        .lesson-content {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .lesson-instruction {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 24px;
            color: var(--text-primary);
        }

        .matching-grid {
            display: flex;
            gap: 12px;
            flex: 1;
        }

        .matching-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .match-card {
            flex: 1;
            min-height: 80px;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 2px solid var(--glass-border);
            border-radius: var(--border-radius-lg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 12px 10px;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            word-break: break-word;
            box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        }

        .match-card:active {
            transform: scale(0.97);
        }

        .match-card .card-en {
            display: block;
            font-size: 15px;
            font-weight: 700;
        }

        .match-card .card-ipa {
            display: block;
            font-size: 11px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        .match-card .card-emoji {
            font-size: 36px;
            line-height: 1;
            margin-bottom: 6px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }

        .match-card .card-vi {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .match-card .card-example {
            font-size: 10px;
            font-weight: 400;
            color: var(--text-secondary);
            margin-top: 4px;
            font-style: italic;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .match-card .card-speaker {
            position: absolute;
            top: 4px;
            right: 6px;
            font-size: 14px;
            opacity: 0.6;
            cursor: pointer;
            padding: 4px;
        }

        .match-card .card-speaker:active {
            transform: scale(1.2);
            opacity: 1;
        }

        .match-card {
            position: relative;
        }

        .match-card.selected {
            background: linear-gradient(135deg, rgba(155,89,182,0.15) 0%, rgba(142,68,173,0.1) 100%);
            border-color: #9b59b6;
            box-shadow: 0 0 0 3px rgba(155,89,182,0.25), 0 6px 16px rgba(155,89,182,0.2);
            transform: scale(1.02);
        }

        .match-card.matched {
            background: linear-gradient(135deg, rgba(46,204,113,0.2) 0%, rgba(39,174,96,0.15) 100%);
            border-color: #2ecc71;
            opacity: 0.7;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(102, 187, 106, 0.3);
        }

        .match-card.wrong {
            background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
            border-color: #ef5350;
            animation: shake 0.4s ease;
            box-shadow: 0 0 0 3px #ffcdd2;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-8px); }
            40%, 80% { transform: translateX(8px); }
        }

        /* ==================== LESSON COMPLETE ==================== */
        .lesson-complete {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, #e8faf0 0%, #e2f5ea 40%, #f5eaff 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 200;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .lesson-complete.active {
            opacity: 1;
            pointer-events: auto;
        }

        .complete-icon {
            font-size: 120px;
            margin-bottom: 24px;
            animation: celebrateBounce 0.8s ease infinite;
            filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.4));
        }

        @keyframes celebrateBounce {
            0%, 100% { transform: scale(1) rotate(0deg); }
            25% { transform: scale(1.15) rotate(-8deg); }
            50% { transform: scale(1.1) rotate(5deg); }
            75% { transform: scale(1.15) rotate(-3deg); }
        }

        .complete-title {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 8px;
            color: #1e8449;
        }

        .complete-subtitle {
            font-size: 16px;
            color: var(--text-secondary);
            margin-bottom: 32px;
        }

        .complete-stats {
            display: flex;
            gap: 24px;
            margin-bottom: 40px;
        }

        .complete-stat {
            text-align: center;
        }

        .complete-stat-value {
            font-size: 36px;
            font-weight: 800;
            color: #9b59b6;
            text-shadow: 2px 2px 0 rgba(255,255,255,0.5);
        }

        .complete-stat-label {
            font-size: 14px;
            color: #1a2e1a;
            font-weight: 700;
        }

        .complete-btn {
            width: 100%;
            max-width: 300px;
            background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
            box-shadow: 0 6px 0 #1e8449, 0 8px 20px rgba(46, 204, 113, 0.4) !important;
        }

        /* ==================== SPEED CHALLENGE ==================== */
        .speed-challenge-screen {
            padding: 20px;
            padding-bottom: 100px;
        }

        .speed-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .speed-title {
            font-size: 32px;
            font-weight: 800;
            color: #ff6f00;
            text-shadow: 2px 2px 0 rgba(255, 152, 0, 0.3);
        }

        .speed-subtitle {
            font-size: 16px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .speed-leaderboard {
            background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
            border-radius: var(--border-radius-lg);
            padding: 20px;
            margin-bottom: 24px;
            border: 3px solid #ffc107;
        }

        .leaderboard-title {
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 16px;
            color: #ff8f00;
        }

        .leaderboard-stats {
            display: flex;
            justify-content: space-around;
        }

        .leaderboard-stat {
            text-align: center;
        }

        .leaderboard-value {
            display: block;
            font-size: 28px;
            font-weight: 800;
            color: #e65100;
        }

        .leaderboard-label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .speed-levels {
            margin-bottom: 24px;
        }

        .level-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .level-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px;
            border-radius: var(--border-radius-lg);
            border: 3px solid;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .level-btn:active {
            transform: scale(0.95);
        }

        .level-btn.level-1 {
            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
            border-color: #81c784;
        }

        .level-btn.level-2 {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            border-color: #64b5f6;
        }

        .level-btn.level-3 {
            background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
            border-color: #ffb74d;
        }

        .level-btn.level-4 {
            background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
            border-color: #f06292;
        }

        .level-btn.level-5 {
            background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%);
            border-color: #9575cd;
        }

        .level-btn.level-all {
            grid-column: span 2;
            background: linear-gradient(135deg, #fff9c4 0%, #fff176 100%);
            border-color: #ffd54f;
        }

        .level-icon {
            font-size: 32px;
            margin-bottom: 8px;
        }

        .level-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .level-verbs {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .speed-rules {
            background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
            border-radius: var(--border-radius-lg);
            padding: 20px;
            border: 3px solid #ce93d8;
        }

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

        .rule-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            font-weight: 600;
        }

        .rule-icon {
            font-size: 24px;
        }

        /* Speed Game Overlay */
        .speed-game-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #1a237e 0%, #311b92 100%);
            z-index: 9999;
            display: none;
            flex-direction: column;
            padding: 20px;
            padding-top: calc(20px + var(--safe-area-top));
            padding-bottom: calc(20px + var(--safe-area-bottom));
            overflow-y: auto;
        }

        .speed-game-overlay.active {
            display: flex !important;
        }

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

        .speed-exit-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
        }

        .speed-game-stats {
            display: flex;
            gap: 10px;
        }

        .speed-score, .speed-streak-display {
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, 0.2);
            padding: 6px 12px;
            border-radius: 16px;
            color: white;
            font-weight: 700;
            font-size: 14px;
        }

        .speed-progress {
            color: rgba(255, 255, 255, 0.8);
            font-weight: 600;
            font-size: 14px;
        }

        .speed-timer-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .speed-timer-clock {
            font-size: 28px;
            font-weight: 800;
            color: #ffeb3b;
            min-width: 45px;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .speed-timer-clock.warning {
            color: #ff9800;
            animation: pulse 0.5s ease infinite;
        }

        .speed-timer-clock.danger {
            color: #f44336;
            animation: pulse 0.3s ease infinite;
        }

        .speed-timer-bar {
            flex: 1;
            height: 12px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            overflow: hidden;
        }

        .speed-timer-fill {
            height: 100%;
            background: linear-gradient(90deg, #4caf50 0%, #8bc34a 50%, #ffeb3b 75%, #ff9800 90%, #f44336 100%);
            border-radius: 4px;
            width: 100%;
            transition: width 0.1s linear;
        }

        .speed-game-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 10px;
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
        }

        .speed-verb-display {
            text-align: center;
            margin-bottom: 16px;
        }

        .verb-label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .verb-word {
            font-size: 40px;
            font-weight: 800;
            color: #ffeb3b;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-bottom: 4px;
        }

        .verb-meaning {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            font-style: italic;
        }

        .verb-example {
            color: rgba(255, 255, 255, 0.55);
            font-size: 12.5px;
            margin-top: 6px;
            line-height: 1.45;
            max-width: 320px;
            margin-left: auto;
            margin-right: auto;
        }

        .speed-inputs {
            width: 100%;
            max-width: 300px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 12px;
        }

        .speed-input-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .speed-input-group label {
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
            font-weight: 600;
        }

        .speed-input-group input {
            padding: 12px 16px;
            border-radius: 12px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 16px;
            font-weight: 700;
            font-family: inherit;
            text-align: center;
            outline: none;
            transition: all 0.2s ease;
        }

        .speed-input-group input:focus {
            border-color: #ffeb3b;
            background: rgba(255, 255, 255, 0.2);
        }

        .speed-input-group input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        .speed-input-group input.correct {
            border-color: #4caf50;
            background: rgba(76, 175, 80, 0.3);
        }

        .speed-input-group input.wrong {
            border-color: #f44336;
            background: rgba(244, 67, 54, 0.3);
        }

        .speed-submit-btn {
            padding: 12px 40px;
            background: linear-gradient(135deg, #4caf50 0%, #43a047 100%);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 800;
            font-family: inherit;
            cursor: pointer;
            box-shadow: 0 4px 0 #2e7d32, 0 6px 20px rgba(76, 175, 80, 0.4);
            transition: all 0.2s ease;
        }

        .speed-submit-btn:active {
            transform: translateY(4px);
            box-shadow: none;
        }

        .speed-submit-btn:disabled {
            background: #666;
            box-shadow: 0 4px 0 #444;
            cursor: not-allowed;
        }

        .speed-feedback {
            margin-top: 12px;
            padding: 12px 20px;
            border-radius: 12px;
            text-align: center;
            font-weight: 700;
            font-size: 15px;
            min-height: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .speed-feedback.correct {
            background: rgba(76, 175, 80, 0.3);
            color: #a5d6a7;
        }

        .speed-feedback.wrong {
            background: rgba(244, 67, 54, 0.3);
            color: #ef9a9a;
        }

        .speed-feedback .correct-answer {
            font-size: 14px;
            margin-top: 8px;
            color: rgba(255, 255, 255, 0.8);
        }

        /* Speed Complete Overlay */
        .speed-complete-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #ff6f00 0%, #ff8f00 100%);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .speed-complete-overlay.active {
            display: flex !important;
        }

        .speed-complete-content {
            text-align: center;
        }

        .speed-complete-icon {
            font-size: 100px;
            animation: bounce 0.6s ease infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .speed-complete-title {
            font-size: 32px;
            font-weight: 800;
            color: white;
            margin: 16px 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        .speed-complete-stats {
            display: flex;
            gap: 24px;
            justify-content: center;
            margin-bottom: 24px;
        }

        .speed-complete-stat {
            text-align: center;
        }

        .speed-complete-stat .stat-value {
            font-size: 36px;
            font-weight: 800;
            color: white;
        }

        .speed-complete-stat .stat-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 600;
        }

        .speed-new-record {
            background: white;
            color: #ff6f00;
            padding: 12px 24px;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 24px;
            animation: pulse 0.5s ease infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        /* ==================== ESSAYS SCREEN ==================== */
        .essays-screen {
            padding: 20px;
            padding-bottom: 100px;
        }

        .essays-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .essays-title {
            font-size: 28px;
            font-weight: 800;
        }

        .essays-subtitle {
            color: var(--text-secondary);
            font-size: 14px;
            margin-top: 4px;
        }

        .essays-category {
            margin-bottom: 20px;
        }

        .essays-category-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .essays-category-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }

        .essays-category-title {
            font-size: 16px;
            font-weight: 800;
        }

        .essays-category-count {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .essay-card {
            background: var(--bg-card);
            border-radius: var(--border-radius);
            padding: 14px 16px;
            margin-bottom: 8px;
            border: 2px solid var(--border-color);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .essay-card:active {
            transform: scale(0.98);
            background: var(--bg-secondary);
        }

        .essay-card-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 6px;
        }

        .essay-card-title {
            font-weight: 700;
            font-size: 15px;
        }

        .essay-card-school {
            font-size: 11px;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            padding: 2px 8px;
            border-radius: 8px;
            flex-shrink: 0;
            margin-left: 8px;
        }

        .essay-card-author {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .essay-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .essay-tag {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 6px;
            font-weight: 600;
        }

        .essay-level-progress {
            height: 4px;
            background: var(--border-color);
            border-radius: 2px;
            margin-top: 6px;
            overflow: hidden;
        }

        .essay-level-progress-bar {
            height: 100%;
            border-radius: 2px;
            transition: width 0.4s ease;
        }

        .essay-level-progress-text {
            font-size: 11px;
            font-weight: 600;
            margin-top: 3px;
        }

        .essay-card-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .essay-word-count {
            font-size: 11px;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            padding: 1px 6px;
            border-radius: 4px;
        }

        .essay-card-read {
            opacity: 0.7;
            border-left: 3px solid #26A69A;
        }

        .essay-read-check {
            color: #26A69A;
            font-weight: 700;
            margin-right: 2px;
        }

        /* Essay Reader */
        .essay-reader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-primary);
            z-index: 99999;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .essay-reader-overlay.active {
            display: flex !important;
        }

        .essay-reader-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            padding-top: calc(12px + var(--safe-area-top));
            background: var(--bg-card);
            border-bottom: 2px solid var(--border-color);
            gap: 12px;
            max-width: 740px;
            margin: 0 auto;
            width: 100%;
        }

        .essay-back-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--bg-secondary);
            border: none;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .essay-reader-title-bar {
            flex: 1;
            min-width: 0;
        }

        .essay-reader-title {
            font-weight: 700;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .essay-reader-author {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .essay-reader-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 20px 16px;
            padding-bottom: calc(40px + var(--safe-area-bottom));
            font-size: 17px;
            line-height: 1.8;
            color: var(--text-primary);
            -webkit-overflow-scrolling: touch;
        }

        .essay-reader-body .essay-paragraph {
            max-width: 680px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 16px;
        }

        .essay-reader-body .essay-word {
            cursor: pointer;
            border-radius: 3px;
            padding: 0 1px;
        }

        .essay-reader-body .essay-word:active {
            background: #ffe082;
        }

        .essay-reader-body .essay-word.highlighted {
            background: #fff59d;
            border-bottom: 2px solid #ffc107;
        }

        .essay-reader-body .essay-word.known-word {
            background: #c8e6c9;
            border-bottom: 2px solid #4caf50;
        }

        /* Sentence translation */
        .essay-sentence {
            cursor: pointer;
        }

        .essay-sentence.sentence-active {
            background: rgba(38, 166, 154, 0.1);
            text-decoration: underline;
            text-decoration-color: #26A69A;
            text-underline-offset: 3px;
            text-decoration-thickness: 2px;
        }

        .sentence-translate-bubble {
            display: none;
        }

        .sentence-bubble-floating {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            background: #43A047;
            color: #fff;
            padding: 8px 14px;
            border-radius: 14px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.4;
            white-space: normal;
            max-width: 85vw;
            min-width: 60px;
            text-align: center;
            z-index: 9999999;
            box-shadow: 0 3px 12px rgba(67, 160, 71, 0.35);
            animation: bubblePop 0.2s ease;
            pointer-events: none;
        }

        .sentence-bubble-floating::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: #43A047;
        }

        .sentence-bubble-floating.bubble-below::after {
            top: auto;
            bottom: 100%;
            border-top-color: transparent;
            border-bottom-color: #43A047;
        }

        @keyframes bubblePop {
            from { opacity: 0; transform: translateY(4px) translateX(-50%) scale(0.95); }
            to { opacity: 1; transform: translateY(0) translateX(-50%) scale(1); }
        }

        /* Word Popup */
        .word-popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            z-index: 999999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .word-popup-overlay.active {
            display: flex !important;
        }

        .word-popup {
            background: white;
            border-radius: 20px;
            padding: 24px;
            width: 100%;
            max-width: 300px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: popupSlideUp 0.25s ease;
        }

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

        .word-popup-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 6px;
        }

        .word-popup-speak {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--bg-secondary);
            border: none;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .word-popup-speak:active {
            background: #e0e0e0;
        }

        .word-popup-word {
            font-size: 24px;
            font-weight: 800;
            color: var(--text-primary);
        }

        .word-popup-phonetic {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 4px;
            font-style: italic;
        }

        .word-popup-vi {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
            min-height: 24px;
        }

        .word-popup-en {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 18px;
            line-height: 1.4;
        }

        .word-popup-actions {
            display: flex;
            gap: 10px;
        }

        .word-popup-btn {
            flex: 1;
            padding: 12px;
            border-radius: 14px;
            border: none;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s ease;
        }

        .word-popup-btn.known {
            background: #c8e6c9;
            color: #2e7d32;
        }

        .word-popup-btn.known:active {
            background: #a5d6a7;
        }

        .word-popup-btn.learn {
            background: #fff9c4;
            color: #f57f17;
        }

        .word-popup-btn.learn:active {
            background: #fff176;
        }

        /* Speed Challenge History */
        .speed-history-section {
            margin-top: 20px;
        }

        .speed-history-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .speed-history-table {
            background: var(--bg-card);
            border-radius: var(--border-radius);
            overflow: hidden;
            border: 2px solid var(--border-color);
        }

        .speed-history-row {
            display: flex;
            align-items: center;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .speed-history-row:last-child {
            border-bottom: none;
        }

        .speed-history-row:active {
            background: var(--bg-secondary);
        }

        .speed-history-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .speed-history-icon.level-1 { background: #e8f5e9; }
        .speed-history-icon.level-2 { background: #e3f2fd; }
        .speed-history-icon.level-3 { background: #fff3e0; }
        .speed-history-icon.level-4 { background: #fce4ec; }
        .speed-history-icon.level-5 { background: #ede7f6; }
        .speed-history-icon.level-0 { background: #fff9c4; }

        .speed-history-info {
            flex: 1;
            margin-left: 12px;
            min-width: 0;
        }

        .speed-history-title {
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .speed-history-date {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .speed-history-stats {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-right: 8px;
        }

        .speed-history-score {
            font-weight: 700;
            color: var(--accent-orange);
            font-size: 14px;
        }

        .speed-history-accuracy {
            font-size: 12px;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            padding: 3px 8px;
            border-radius: 8px;
        }

        .speed-history-accuracy.perfect {
            background: #c8e6c9;
            color: var(--accent-green-dark);
        }

        .speed-history-expand {
            font-size: 12px;
            color: var(--text-secondary);
            transition: transform 0.2s ease;
        }

        .speed-history-row.expanded .speed-history-expand {
            transform: rotate(180deg);
        }

        .speed-history-detail {
            display: none;
            padding: 12px 14px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
        }

        .speed-history-detail.show {
            display: block;
        }

        .verb-result-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .verb-result-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 10px;
            background: var(--bg-card);
            font-size: 13px;
        }

        .verb-result-item.correct {
            border-left: 3px solid var(--accent-green);
        }

        .verb-result-item.wrong {
            border-left: 3px solid var(--accent-red);
        }

        .verb-result-icon {
            font-size: 14px;
            flex-shrink: 0;
        }

        .verb-result-text {
            flex: 1;
            min-width: 0;
        }

        .verb-result-forms {
            font-weight: 700;
            color: var(--text-primary);
        }

        .verb-result-user {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        .verb-result-user .wrong-text {
            color: var(--accent-red);
            text-decoration: line-through;
        }

        .speed-history-time {
            font-size: 11px;
            color: var(--text-secondary);
        }

        /* ==================== PROFILE SCREEN ==================== */
        .profile-screen {
            padding: 20px;
            padding-bottom: 100px;
        }

        .profile-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .profile-avatar {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            margin: 0 auto 16px;
            box-shadow: 0 8px 24px rgba(46,204,113,0.25);
            border: 3px solid rgba(255,255,255,0.6);
        }

        .profile-name {
            font-size: 24px;
            font-weight: 800;
        }

        .profile-rank {
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .profile-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        .profile-stat {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: var(--border-radius);
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 16px rgba(31,80,50,0.06);
        }

        .profile-stat-icon {
            font-size: 28px;
            margin-bottom: 8px;
        }

        .profile-stat-value {
            font-size: 28px;
            font-weight: 800;
            color: var(--text-primary);
        }

        .profile-stat-label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .achievements-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        .achievement {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            padding: 12px;
            text-align: center;
        }

        .achievement.locked {
            opacity: 0.4;
        }

        .achievement-icon {
            font-size: 28px;
        }

        .achievement-name {
            font-size: 9px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .switch-user-btn {
            width: 100%;
            margin-top: 16px;
        }

        /* ==================== TOAST ==================== */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 20px 32px;
            border-radius: var(--border-radius);
            font-weight: 700;
            font-size: 18px;
            z-index: 500;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .toast.active {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        /* ==================== CONFETTI ==================== */
        .confetti-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 250;
            overflow: hidden;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            animation: confettiFall 3s ease-out forwards;
        }

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

        /* ==================== MODAL ==================== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 400;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .modal {
            background: var(--bg-primary);
            border-radius: var(--border-radius);
            padding: 24px;
            width: 100%;
            max-width: 320px;
            text-align: center;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .modal-overlay.active .modal {
            transform: scale(1);
        }

        .modal h3 {
            font-size: 20px;
            margin-bottom: 12px;
        }

        .modal p {
            color: var(--text-secondary);
            margin-bottom: 24px;
            font-size: 14px;
        }

        .modal-buttons {
            display: flex;
            gap: 12px;
        }

        .modal-btn {
            flex: 1;
            padding: 14px;
            border-radius: var(--border-radius);
            font-weight: 700;
            font-family: inherit;
            font-size: 14px;
            cursor: pointer;
            border: none;
        }

        .modal-btn.cancel {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .modal-btn.danger {
            background: var(--error);
            color: white;
        }

        /* ==================== SRS REVIEW CARD ==================== */
        .review-card {
            background: linear-gradient(135deg, #FF6B9D, #C44569);
            border-radius: 20px;
            padding: 16px;
            margin-bottom: 16px;
            color: white;
            box-shadow: 0 6px 20px rgba(255,107,157,0.3);
            position: relative;
            overflow: hidden;
        }

        .review-card::before {
            content: '';
            position: absolute;
            top: -30%;
            right: -15%;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            pointer-events: none;
        }

        .review-card-top {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .review-icon {
            font-size: 32px;
            flex-shrink: 0;
        }

        .review-info {
            flex: 1;
            min-width: 0;
        }

        .review-title {
            font-weight: 700;
            font-size: 15px;
        }

        .review-subtitle {
            font-size: 12px;
            opacity: 0.9;
        }

        .review-start-btn {
            background: white;
            color: #C44569;
            border: none;
            border-radius: 12px;
            padding: 8px 18px;
            font-weight: 800;
            font-size: 13px;
            font-family: 'Nunito', sans-serif;
            cursor: pointer;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .review-start-btn:active {
            transform: scale(0.95);
        }

        .review-progress-bar {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            height: 6px;
            margin-top: 12px;
            overflow: hidden;
        }

        .review-progress-fill {
            background: white;
            height: 100%;
            border-radius: 6px;
            transition: width 0.4s ease;
        }

        .review-progress-label {
            font-size: 11px;
            opacity: 0.85;
            margin-top: 4px;
            text-align: right;
        }

        .review-card.all-caught-up {
            background: linear-gradient(135deg, #82E0AA, #27AE60);
            box-shadow: 0 6px 20px rgba(130,224,170,0.3);
        }

        .review-card.all-caught-up .review-start-btn {
            color: #27AE60;
        }

        /* ==================== COMBO CHAIN ==================== */
        .combo-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(var(--combo-scale, 1));
            font-size: 32px;
            font-weight: 800;
            color: #FF6D00;
            text-shadow: 0 2px 8px rgba(255, 109, 0, 0.5);
            z-index: 300;
            pointer-events: none;
            animation: comboPopIn 1.2s ease forwards;
        }

        @keyframes comboPopIn {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
            30% { opacity: 1; transform: translate(-50%, -50%) scale(var(--combo-scale, 1.2)); }
            100% { opacity: 0; transform: translate(-50%, -70%) scale(var(--combo-scale, 1)); }
        }

        .combo-break {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 28px;
            font-weight: 800;
            color: var(--accent-red);
            z-index: 300;
            pointer-events: none;
            animation: comboSnap 0.8s ease forwards;
        }

        @keyframes comboSnap {
            0% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
            50% { transform: translate(-50%, -50%) scale(0.9) rotate(5deg); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
        }

        /* ==================== DAILY STREAK MODAL (v3.37) ==================== */
        .streak-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.78);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9000;
            padding: 20px;
            animation: streakOverlayIn 0.25s ease-out;
        }
        .streak-modal-overlay.active { display: flex; }
        @keyframes streakOverlayIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        .streak-modal {
            position: relative;
            background: linear-gradient(160deg, #1e293b 0%, #4c1d95 60%, #be185d 100%);
            color: white;
            border-radius: 24px;
            padding: 28px 22px 22px;
            max-width: 360px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            text-align: center;
            animation: streakModalIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
            max-height: 90vh;
            overflow-y: auto;
        }
        @keyframes streakModalIn {
            from { opacity: 0; transform: translateY(40px) scale(0.85); }
            to   { opacity: 1; transform: none; }
        }
        .streak-modal-close {
            position: absolute;
            top: 8px;
            right: 12px;
            background: rgba(255,255,255,0.10);
            border: none;
            color: white;
            font-size: 24px;
            line-height: 1;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.15s;
        }
        .streak-modal-close:hover { background: rgba(255,255,255,0.25); }
        .streak-modal-flame {
            font-size: 56px;
            line-height: 1;
            margin-bottom: 4px;
            animation: streakFlamePulse 2s ease-in-out infinite;
            filter: drop-shadow(0 4px 12px rgba(255,107,53,0.6));
        }
        @keyframes streakFlamePulse {
            0%, 100% { transform: scale(1); }
            50%      { transform: scale(1.10) rotate(-3deg); }
        }
        .streak-modal-streak {
            font-size: 78px;
            font-weight: 900;
            line-height: 1;
            color: #fff;
            text-shadow: 0 4px 16px rgba(0,0,0,0.4);
        }
        .streak-modal-streak.streak-tier-1 { color: #fde68a; }
        .streak-modal-streak.streak-tier-2 { color: #fbbf24; }
        .streak-modal-streak.streak-tier-3 { color: #f97316; text-shadow: 0 4px 24px rgba(249,115,22,0.6); }
        .streak-modal-streak.streak-tier-4 { color: #ef4444; text-shadow: 0 4px 28px rgba(239,68,68,0.7); }
        .streak-modal-unit {
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 3px;
            color: rgba(255,255,255,0.75);
            margin-top: -4px;
            margin-bottom: 14px;
        }
        .streak-modal-greeting {
            font-size: 16px;
            font-weight: 700;
            margin: 0 0 16px;
            line-height: 1.35;
        }
        .streak-modal-calendar {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin-bottom: 16px;
        }
        .streak-modal-day {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 8px 4px;
            background: rgba(255,255,255,0.08);
            border-radius: 10px;
            transition: background 0.15s;
        }
        .streak-modal-day.studied {
            background: rgba(249,115,22,0.30);
            border: 1px solid rgba(249,115,22,0.50);
        }
        .streak-modal-day.today {
            outline: 2px solid #fbbf24;
            outline-offset: 1px;
        }
        .streak-modal-day-label {
            font-size: 10px;
            font-weight: 700;
            color: rgba(255,255,255,0.75);
            text-transform: uppercase;
        }
        .streak-modal-day-dot {
            font-size: 14px;
            line-height: 1;
        }
        .streak-modal-progress {
            margin-bottom: 14px;
        }
        .streak-modal-progress-bar {
            height: 10px;
            background: rgba(255,255,255,0.12);
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 6px;
        }
        .streak-modal-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #fbbf24, #f97316, #ef4444);
            border-radius: 5px;
            transition: width 0.6s ease;
        }
        .streak-modal-progress-label {
            font-size: 12px;
            color: rgba(255,255,255,0.85);
        }
        .streak-modal-progress-label strong {
            color: #fbbf24;
            font-weight: 800;
        }
        .streak-modal-best {
            font-size: 12px;
            color: rgba(255,255,255,0.65);
            margin-bottom: 14px;
        }
        .streak-modal-best strong {
            color: white;
            font-weight: 800;
        }
        .streak-modal-cta {
            display: block;
            width: 100%;
            background: linear-gradient(135deg, #f97316, #ef4444);
            color: white;
            border: none;
            padding: 14px 18px;
            border-radius: 14px;
            font-size: 15px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(249,115,22,0.40);
            font-family: inherit;
            transition: transform 0.05s, box-shadow 0.15s;
        }
        .streak-modal-cta:hover { box-shadow: 0 8px 26px rgba(249,115,22,0.55); }
        .streak-modal-cta:active { transform: scale(0.97); }
        .streak-modal-done {
            background: rgba(34,197,94,0.20);
            border: 1px solid rgba(34,197,94,0.45);
            color: #bbf7d0;
            padding: 12px;
            border-radius: 14px;
            font-size: 13px;
            font-weight: 700;
        }

        /* ==================== STREAK SHIELDS ==================== */
        .shield-display {
            display: inline-block;
            margin-left: 4px;
            font-size: 14px;
            letter-spacing: 2px;
        }

        .shield-display.has-shields {
            animation: shieldPulse 2s ease infinite;
        }

        @keyframes shieldPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* ==================== THEME PICKER ==================== */
        .theme-picker {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding: 8px 4px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .theme-picker::-webkit-scrollbar { display: none; }

        .theme-card {
            min-width: 100px;
            height: 120px;
            border-radius: 16px;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .theme-card.active {
            border-color: var(--accent-green);
            box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.2);
        }

        .theme-card.locked {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .theme-card-icon { font-size: 32px; }
        .theme-card-name { font-size: 13px; font-weight: 700; }
        .theme-card-cost { font-size: 11px; color: var(--text-secondary); }

        /* ==================== WORD PET ==================== */
        .pet-container {
            text-align: center;
            padding: 12px 0;
            position: relative;
        }

        .pet-info-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.7);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.15);
            transition: background 0.2s;
            flex-shrink: 0;
        }
        .pet-info-btn:hover { background: rgba(255,255,255,0.95); }

        .pet-info-modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 300;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .pet-info-modal {
            background: var(--card-bg, #fff);
            border-radius: 16px;
            padding: 24px 20px;
            max-width: 320px;
            width: 100%;
            position: relative;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
        }

        .pet-info-close {
            position: absolute;
            top: 10px;
            right: 12px;
            border: none;
            background: none;
            font-size: 18px;
            cursor: pointer;
            color: var(--text-secondary, #999);
            padding: 4px;
        }

        .pet-info-stages {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;
        }

        .pet-info-stage {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 10px;
            border-radius: 10px;
            background: var(--bg-secondary, #f5f5f5);
        }

        .pet-info-emoji { font-size: 22px; }
        .pet-info-label { font-weight: 600; font-size: 13px; flex: 1; }
        .pet-info-pts { font-size: 12px; color: var(--text-secondary, #888); font-weight: 500; }

        .pet-info-tips {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .pet-info-tip {
            font-size: 12px;
            color: var(--text-secondary, #666);
            line-height: 1.4;
        }

        .pet-creature {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: transform 0.2s;
        }
        .pet-creature img {
            display: block;
            object-fit: contain;
            pointer-events: none;
        }

        .pet-creature.happy {
            animation: petBounce 1.5s ease infinite;
        }

        .pet-creature.sleepy {
            opacity: 0.7;
            animation: petSway 3s ease infinite;
        }

        .pet-creature.sleepy::after {
            content: '💤';
            font-size: 20px;
            position: absolute;
            top: -5px;
            right: calc(50% - 45px);
            animation: petZzz 2s ease infinite;
        }

        .pet-creature.wiggle {
            animation: petWiggle 0.6s ease !important;
        }

        .pet-name {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .pet-bubble {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: 16px;
            padding: 6px 14px;
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            animation: bubblePop 0.3s ease;
            z-index: 10;
        }

        .pet-bubble::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid var(--bg-card);
        }

        @keyframes petBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        @keyframes petSway {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(3deg); }
            75% { transform: rotate(-3deg); }
        }

        @keyframes petZzz {
            0%, 100% { opacity: 0.4; transform: translateY(0); }
            50% { opacity: 1; transform: translateY(-8px); }
        }

        @keyframes petWiggle {
            0%, 100% { transform: rotate(0); }
            20% { transform: rotate(-15deg); }
            40% { transform: rotate(15deg); }
            60% { transform: rotate(-10deg); }
            80% { transform: rotate(10deg); }
        }

        /* ==================== PET HERO ZONE ==================== */
        .pet-hero-zone {
            position: relative;
            width: 100%;
            height: 38dvh;
            min-height: 200px;
            max-height: 300px;
            overflow: hidden;
            border-radius: 0 0 28px 28px;
            flex-shrink: 0;
            transition: filter 1.5s ease;
            isolation: isolate;
        }

        /* 10 Dog Breed Backgrounds — rich 3-stop gradients */
        .pet-hero-zone[data-stage="chihuahua"] { background: linear-gradient(180deg, #c8f0b5 0%, #a8e6a0 50%, #8acc8a 100%); }
        .pet-hero-zone[data-stage="beagle"]    { background: linear-gradient(180deg, #dff0e0 0%, #b5d9b7 50%, #8bbf8e 100%); }
        .pet-hero-zone[data-stage="poodle"]    { background: linear-gradient(180deg, #fce4ec 0%, #f48fb1 55%, #e91e8c 100%); }
        .pet-hero-zone[data-stage="retriever"] { background: linear-gradient(180deg, #fffde7 0%, #ffe082 50%, #f9a825 100%); }
        .pet-hero-zone[data-stage="dalmatian"] { background: linear-gradient(180deg, #fff3e0 0%, #ffb74d 55%, #e65100 100%); }
        .pet-hero-zone[data-stage="husky"]     { background: linear-gradient(180deg, #f0faff 0%, #81d4fa 55%, #0288d1 100%); }
        .pet-hero-zone[data-stage="shepherd"]  { background: linear-gradient(180deg, #e0f7fa 0%, #4db6ac 55%, #00695c 100%); }
        .pet-hero-zone[data-stage="akita"]     { background: linear-gradient(180deg, #ede7f6 0%, #9575cd 55%, #4527a0 100%); }
        .pet-hero-zone[data-stage="royal"]     { background: linear-gradient(180deg, #1a1a2e 0%, #16213e 45%, #0f3460 100%); }
        .pet-hero-zone[data-stage="diamond"]   { background: linear-gradient(180deg, #fff9c4 0%, #ffd54f 40%, #ff8f00 75%, #e65100 100%); }

        /* Time of day */
        .pet-hero-zone.time-morning   { filter: brightness(1.05) hue-rotate(5deg); }
        .pet-hero-zone.time-afternoon { filter: brightness(1.0); }
        .pet-hero-zone.time-evening   { filter: brightness(0.9) sepia(0.15); }
        .pet-hero-zone.time-night     { filter: brightness(0.6) saturate(0.7); }

        /* Floating habitat emojis */
        .habitat-emojis {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .habitat-emojis span {
            position: absolute;
            font-size: 24px;
            opacity: 0.55;
            animation: habitatDrift var(--drift-duration, 8s) ease-in-out infinite;
            animation-delay: var(--drift-delay, 0s);
            will-change: transform;
        }
        @keyframes habitatDrift {
            0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.4; }
            25%  { transform: translateY(-14px) translateX(6px) rotate(8deg); opacity: 0.65; }
            50%  { transform: translateY(-22px) translateX(-5px) rotate(-4deg); opacity: 0.55; }
            75%  { transform: translateY(-10px) translateX(8px) rotate(6deg); opacity: 0.65; }
            100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.4; }
        }

        /* Night mode stars */
        .pet-hero-zone.time-night .habitat-emojis span {
            animation: starTwinkle 3s ease-in-out infinite;
            animation-delay: var(--drift-delay, 0s);
        }
        @keyframes starTwinkle {
            0%, 100% { opacity: 0.3; transform: scale(0.9); }
            50%       { opacity: 0.9; transform: scale(1.1); }
        }

        /* Hero top bar — glassmorphism HUD */
        .pet-hero-topbar {
            position: absolute;
            top: 0; left: 0; right: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, transparent 100%);
            z-index: 10;
        }
        .pet-hero-left, .pet-hero-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .pet-hero-avatar {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            backdrop-filter: blur(4px);
            border: 2px solid rgba(255,255,255,0.4);
            transition: transform 0.15s ease;
        }
        .pet-hero-avatar:active { transform: scale(0.9); }
        .pet-hero-level {
            background: rgba(0,0,0,0.35);
            color: #fff;
            font-size: 13px;
            font-weight: 800;
            padding: 5px 12px;
            border-radius: 20px;
            backdrop-filter: blur(4px);
        }
        .pet-hero-version {
            color: rgba(255,255,255,0.5);
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .pet-hero-streak {
            background: rgba(0,0,0,0.35);
            color: #FF8A65;
            font-size: 13px;
            font-weight: 700;
            padding: 5px 10px;
            border-radius: 20px;
            backdrop-filter: blur(4px);
            transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
        }
        /* Streak Tier 1: 3-6 days — warm orange glow */
        .pet-hero-streak.streak-tier-1 {
            background: rgba(255, 109, 0, 0.5);
            color: #FFE082;
            box-shadow: 0 0 8px rgba(255,109,0,0.5);
        }
        /* Streak Tier 2: 7-13 days — red pulse */
        .pet-hero-streak.streak-tier-2 {
            background: rgba(198, 40, 40, 0.55);
            color: #FFCC80;
            animation: streakTier2Pulse 2s ease-in-out infinite;
        }
        @keyframes streakTier2Pulse {
            0%, 100% { box-shadow: 0 0 8px rgba(198,40,40,0.4); }
            50%      { box-shadow: 0 0 16px rgba(198,40,40,0.8); }
        }
        /* Streak Tier 3: 14-29 days — gold shimmer */
        .pet-hero-streak.streak-tier-3 {
            background: linear-gradient(135deg, rgba(183,118,0,0.6), rgba(255,193,7,0.6));
            background-size: 200% 200%;
            color: #FFF9C4;
            animation: streakTier3Shimmer 3s ease infinite;
        }
        @keyframes streakTier3Shimmer {
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        /* Streak Tier 4: 30+ days — rainbow */
        .pet-hero-streak.streak-tier-4 {
            background: linear-gradient(135deg, #e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa);
            background-size: 300% 300%;
            color: #fff;
            font-weight: 900;
            animation: streakRainbow 3s linear infinite;
        }
        @keyframes streakRainbow {
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .pet-hero-coins {
            background: rgba(0,0,0,0.35);
            color: #FFD54F;
            font-size: 13px;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            backdrop-filter: blur(4px);
            transition: transform 0.15s ease;
            animation: coinPulse 4s ease infinite;
        }
        .pet-hero-coins:active { transform: scale(0.92); }
        @keyframes coinPulse {
            0%, 90%, 100% { box-shadow: none; }
            95% { box-shadow: 0 0 0 3px rgba(255,213,79,0.4); }
        }
        .pet-hero-info {
            width: 36px; height: 36px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.2);
            color: white;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
        }

        /* Pet hero stage — the creature area */
        .pet-hero-stage {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            z-index: 5;
            overflow: visible;
        }

        /* Shop button in hero */
        .pet-bottom-strip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
        }
        .pet-bottom-left {
            flex: 1;
        }
        .pet-shop-btn-hero {
            background: rgba(255,255,255,0.25);
            color: white;
            border: 2px solid rgba(255,255,255,0.4);
            border-radius: 18px;
            padding: 6px 18px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            backdrop-filter: blur(4px);
            transition: transform 0.15s;
            flex-shrink: 0;
        }
        .pet-shop-btn-hero:active { transform: scale(0.94); }

        /* XP bar at bottom of hero zone */
        .pet-hero-xpbar {
            position: absolute;
            bottom: 10px;
            left: 16px; right: 16px;
            z-index: 8;
        }
        .pet-hero-xp-track {
            height: 8px;
            background: rgba(0,0,0,0.2);
            border-radius: 6px;
            overflow: hidden;
        }
        .pet-hero-xp-fill {
            height: 100%;
            background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.9));
            border-radius: 6px;
            transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .pet-hero-xp-label {
            display: block;
            text-align: center;
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,255,255,0.7);
            margin-top: 2px;
        }

        /* ==================== PET ANIMATIONS ==================== */

        /* Idle breathing — always on */
        .pet-creature:not(.pet-tapped):not(.wiggle) {
            animation: petBreath 3.5s ease-in-out infinite;
            transform-origin: bottom center;
            will-change: transform;
        }

        /* Tap squish */
        .pet-creature.pet-tapped {
            animation: petSquish 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
        }
        @keyframes petSquish {
            0%   { transform: scale(1.0, 1.0); }
            25%  { transform: scale(1.15, 0.85); }
            60%  { transform: scale(0.92, 1.08); }
            100% { transform: scale(1.0, 1.0); }
        }
        @keyframes petBreath {
            0%, 100% { transform: scaleY(1) scaleX(1); }
            40%      { transform: scaleY(1.04) scaleX(0.98); }
            60%      { transform: scaleY(1.04) scaleX(0.98); }
        }

        /* Happy bounce overrides breathing */
        .pet-creature.happy:not(.pet-tapped) {
            animation: petHeroBounce 1.8s ease infinite !important;
        }
        @keyframes petHeroBounce {
            0%, 100% { transform: translateY(0) scale(1.0); }
            40%      { transform: translateY(-10px) scale(0.97); }
            60%      { transform: translateY(-8px) scale(0.98); }
            80%      { transform: translateY(-2px) scale(1.01); }
        }

        /* Sleepy/hungry sway */
        .pet-creature.sleepy:not(.pet-tapped),
        .pet-creature.hungry:not(.pet-tapped) {
            animation: petSway 3.5s ease-in-out infinite !important;
        }
        .pet-creature.starving:not(.pet-tapped) {
            filter: grayscale(0.5) brightness(0.75);
            animation: petSway 2.5s ease-in-out infinite !important;
        }

        /* Breed glow effects (applied to container, affects img child) */
        .pet-creature[data-stage="poodle"]    { filter: drop-shadow(0 0 8px rgba(255,182,193,0.6)); }
        .pet-creature[data-stage="retriever"] { filter: drop-shadow(0 0 10px rgba(255,215,0,0.5)); }
        .pet-creature[data-stage="dalmatian"] { filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
        .pet-creature[data-stage="husky"]     { filter: drop-shadow(0 0 12px rgba(135,206,250,0.7)); }
        .pet-creature[data-stage="shepherd"]  { filter: drop-shadow(0 0 12px rgba(50,205,50,0.6)); }
        .pet-creature[data-stage="akita"]     { filter: drop-shadow(0 0 14px rgba(147,112,219,0.7)); }
        .pet-creature[data-stage="royal"]     { animation: rainbowGlow 3s ease infinite; }
        .pet-creature[data-stage="diamond"]   { animation: diamondSparkle 2s ease infinite; }

        /* CSS image filters for variant breeds (differentiate reused base images) */
        .pet-creature[data-stage="dalmatian"] img { filter: grayscale(0.2) contrast(1.1); }
        .pet-creature[data-stage="husky"] img     { filter: hue-rotate(190deg) saturate(0.7) brightness(1.1); }
        .pet-creature[data-stage="akita"] img     { filter: sepia(0.3) saturate(1.2); }
        .pet-creature[data-stage="royal"] img     { filter: sepia(0.2) brightness(1.1); }
        .pet-creature[data-stage="diamond"] img   { filter: brightness(1.15) contrast(1.1); }

        /* CSS decorations for premium stages */
        .pet-creature[data-stage="husky"]::before {
            content: "❄️";
            position: absolute;
            font-size: 20px;
            top: -8px;
            right: -12px;
            animation: iceFloat 3s ease-in-out infinite;
            pointer-events: none;
            z-index: 3;
        }
        .pet-creature[data-stage="royal"]::before {
            content: "👑";
            position: absolute;
            font-size: 24px;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            animation: crownFloat 2.5s ease-in-out infinite;
            pointer-events: none;
            z-index: 3;
        }
        .pet-creature[data-stage="diamond"]::before {
            content: "👑";
            position: absolute;
            font-size: 28px;
            top: -22px;
            left: 50%;
            transform: translateX(-50%);
            animation: crownFloat 2.5s ease-in-out infinite;
            pointer-events: none;
            z-index: 3;
        }

        @keyframes iceFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
            50% { transform: translateY(-8px) rotate(15deg); opacity: 1; }
        }
        @keyframes crownFloat {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(-6px); }
        }

        @keyframes rainbowGlow {
            0%   { filter: drop-shadow(0 0 18px rgba(255,0,0,0.6)); }
            16%  { filter: drop-shadow(0 0 18px rgba(255,165,0,0.6)); }
            33%  { filter: drop-shadow(0 0 18px rgba(255,255,0,0.6)); }
            50%  { filter: drop-shadow(0 0 18px rgba(0,255,0,0.6)); }
            66%  { filter: drop-shadow(0 0 18px rgba(0,0,255,0.6)); }
            83%  { filter: drop-shadow(0 0 18px rgba(148,0,211,0.6)); }
            100% { filter: drop-shadow(0 0 18px rgba(255,0,0,0.6)); }
        }
        @keyframes diamondSparkle {
            0%, 100% { filter: drop-shadow(0 0 20px rgba(255,215,0,0.7)) brightness(1); }
            50%      { filter: drop-shadow(0 0 30px rgba(255,215,0,1)) brightness(1.15); }
        }

        /* Heart burst particles */
        .heart-burst {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            pointer-events: none;
            font-size: 20px;
            z-index: 20;
        }
        .heart-burst span {
            position: absolute;
            opacity: 0;
            animation: heartFly var(--fly-dur, 0.8s) ease forwards;
            animation-delay: var(--fly-delay, 0s);
        }
        @keyframes heartFly {
            0%   { transform: translate(0, 0) scale(0.5); opacity: 1; }
            80%  { opacity: 0.8; }
            100% { transform: translate(var(--fly-x, 0), var(--fly-y, -40px)) scale(1.2); opacity: 0; }
        }

        /* Speech bubble (repositioned for hero) */
        .pet-bubble {
            position: absolute;
            top: -16px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255,255,255,0.95);
            border: none;
            border-radius: 18px;
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            animation: bubblePop 0.3s ease;
            z-index: 15;
            color: #333;
        }
        .pet-bubble::after {
            content: '';
            position: absolute;
            bottom: -7px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 7px solid rgba(255,255,255,0.95);
        }

        /* ==================== HOMEPAGE STREAK PANEL (v3.38) ==================== */
        .streak-panel {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            margin-top: -20px;
            padding: 20px 16px 24px;
            background: var(--bg-primary, #f5f5f5);
            border-radius: 24px 24px 0 0;
            position: relative;
            z-index: 15;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        }
        .home-streak-card {
            background: linear-gradient(160deg, #1e293b 0%, #4c1d95 60%, #be185d 100%);
            color: white;
            border-radius: 22px;
            padding: 22px 18px;
            box-shadow: 0 10px 30px rgba(76, 29, 149, 0.30);
            position: relative;
            overflow: hidden;
        }
        .home-streak-card::before {
            content: '';
            position: absolute;
            top: -40%;
            right: -20%;
            width: 240px;
            height: 240px;
            background: radial-gradient(circle, rgba(251,191,36,0.25) 0%, transparent 70%);
            pointer-events: none;
        }
        .home-streak-head {
            text-align: center;
            position: relative;
            z-index: 1;
        }
        .home-streak-tier {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 2.5px;
            color: #fbbf24;
            margin-bottom: 8px;
            text-transform: uppercase;
        }
        .home-streak-number {
            font-size: 64px;
            font-weight: 900;
            line-height: 1;
            text-shadow: 0 4px 16px rgba(0,0,0,0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .home-streak-number span {
            color: #fff;
        }
        .home-streak-number.streak-tier-1 span { color: #fde68a; }
        .home-streak-number.streak-tier-2 span { color: #fbbf24; text-shadow: 0 4px 16px rgba(251,191,36,0.45); }
        .home-streak-number.streak-tier-3 span { color: #f97316; text-shadow: 0 4px 22px rgba(249,115,22,0.55); }
        .home-streak-number.streak-tier-4 span { color: #ef4444; text-shadow: 0 4px 28px rgba(239,68,68,0.65); }
        .home-streak-unit {
            font-size: 13px;
            font-weight: 700;
            color: rgba(255,255,255,0.80);
            margin-top: 4px;
            margin-bottom: 16px;
        }
        .home-streak-week {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
        }
        .home-streak-day {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 8px 4px;
            background: rgba(255,255,255,0.08);
            border-radius: 10px;
        }
        .home-streak-day.studied {
            background: rgba(249,115,22,0.30);
            border: 1px solid rgba(249,115,22,0.50);
        }
        .home-streak-day.today {
            outline: 2px solid #fbbf24;
            outline-offset: 1px;
        }
        .home-streak-day-label {
            font-size: 10px;
            font-weight: 700;
            color: rgba(255,255,255,0.75);
            text-transform: uppercase;
        }
        .home-streak-day-dot {
            font-size: 14px;
            line-height: 1;
        }
        .home-streak-progress {
            margin-bottom: 14px;
            position: relative;
            z-index: 1;
        }
        .home-streak-progress-bar {
            height: 8px;
            background: rgba(255,255,255,0.12);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 6px;
        }
        .home-streak-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #fbbf24, #f97316, #ef4444);
            border-radius: 4px;
            transition: width 0.6s ease;
        }
        .home-streak-progress-label {
            font-size: 12px;
            color: rgba(255,255,255,0.85);
            text-align: center;
        }
        .home-streak-progress-label strong {
            color: #fbbf24;
            font-weight: 800;
        }
        .home-streak-best {
            font-size: 12px;
            color: rgba(255,255,255,0.65);
            text-align: center;
            margin-bottom: 14px;
            position: relative;
            z-index: 1;
        }
        .home-streak-best strong {
            color: white;
            font-weight: 800;
        }
        .home-streak-cta {
            display: block;
            width: 100%;
            background: linear-gradient(135deg, #f97316, #ef4444);
            color: white;
            border: none;
            padding: 14px 18px;
            border-radius: 14px;
            font-size: 15px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(249,115,22,0.45);
            font-family: inherit;
            position: relative;
            z-index: 1;
            transition: transform 0.05s, box-shadow 0.15s;
        }
        .home-streak-cta:hover { box-shadow: 0 8px 26px rgba(249,115,22,0.60); }
        .home-streak-cta:active { transform: scale(0.97); }
        .home-streak-done {
            background: rgba(34,197,94,0.20);
            border: 1px solid rgba(34,197,94,0.45);
            color: #bbf7d0;
            padding: 13px;
            border-radius: 14px;
            font-size: 13px;
            font-weight: 700;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        /* ==================== LEARN PANEL ==================== */
        .learn-panel {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            margin-top: -20px;
            padding: 8px 16px 24px;
            background: var(--bg-primary, #f5f5f5);
            border-radius: 24px 24px 0 0;
            position: relative;
            z-index: 15;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        }
        .learn-panel-handle {
            width: 40px;
            height: 4px;
            background: rgba(0,0,0,0.12);
            border-radius: 2px;
            margin: 8px auto 16px;
        }

        /* Difficulty chips */
        .difficulty-chips {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding: 0 0 8px;
            margin-bottom: 12px;
        }
        .difficulty-chips::-webkit-scrollbar { display: none; }
        .difficulty-chip {
            flex-shrink: 0;
            padding: 6px 14px;
            border-radius: 20px;
            border: 2px solid transparent;
            background: var(--card-bg, #fff);
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary, #888);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .difficulty-chip.active {
            background: linear-gradient(135deg, #764ba2, #667eea);
            color: white;
            border-color: transparent;
            box-shadow: 0 3px 12px rgba(118, 75, 162, 0.35);
        }
        .chip-count {
            background: rgba(0,0,0,0.08);
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 10px;
        }
        .difficulty-chip.active .chip-count {
            background: rgba(255,255,255,0.25);
        }

        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
            .pet-creature, .habitat-emojis span, .heart-burst span {
                animation: none !important;
                transition: none !important;
            }
        }

        /* Accessory positions — slot-based, scale with dog size */
        .pet-wrapper {
            position: relative;
            display: inline-block;
        }
        .pet-accessory {
            position: absolute;
            pointer-events: none;
            z-index: 2;
            line-height: 1;
            /* font-size set dynamically via inline style */
        }
        /* Equipped accessories are draggable around the dog inside the
           pet-hero-zone box. pointer-events:auto re-enables touch/mouse
           (the base class disables them), touch-action:none stops the
           page from scrolling while dragging on mobile. */
        .pet-accessory.draggable-pet-acc {
            pointer-events: auto;
            cursor: grab;
            touch-action: none;
        }
        .pet-accessory.acc-dragging {
            cursor: grabbing;
            z-index: 50;
            filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
        }
        /* Anatomical slots — JS inline styles override with per-breed anchors.
           These are CSS fallbacks only. */
        .pet-accessory.acc-head   { top: -18%; left: 50%; transform: translateX(-50%); }
        .pet-accessory.acc-eyes   { top: 24%;  left: 50%; transform: translateX(-50%); }
        .pet-accessory.acc-neck   { top: 64%;  left: 50%; transform: translateX(-50%); }
        /* Ambient slots — zone-based, same for all breeds */
        .pet-accessory.acc-body   { top: 20%; left: 50%; transform: translateX(-50%); z-index: 0; opacity: 0.85; }
        .pet-accessory.acc-effect { top: -20%; left: 50%; transform: translateX(-50%); animation: effectFloat 2.5s ease-in-out infinite; }
        .pet-accessory.acc-toy    { bottom: -8%; right: -8%; transform: rotate(15deg); }

        @keyframes effectFloat {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50%      { transform: translateX(-50%) translateY(-4px); }
        }

        /* Draggable accessories on pet — override pointer-events: none */
        .draggable-pet-acc {
            pointer-events: auto;
            cursor: grab;
            touch-action: none;
            user-select: none;
            z-index: 3;
            transition: filter 0.15s, z-index 0s;
        }
        .draggable-pet-acc:active,
        .acc-dragging {
            cursor: grabbing;
            z-index: 10 !important;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
            animation: none !important; /* stop effectFloat etc. during drag */
        }
        .acc-dragging {
            transform: translate(-50%, -50%) scale(1.15) !important;
        }

        /* Accessories tray */
        .pet-acc-toggle {
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 12px;
            cursor: pointer;
            margin-top: 4px;
            color: var(--text-secondary);
        }
        .pet-acc-tray {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
            padding: 6px 4px;
            background: rgba(255,255,255,0.5);
            border-radius: 10px;
            margin-top: 4px;
            max-width: 200px;
        }
        .acc-slot {
            font-size: 22px;
            cursor: pointer;
            border-radius: 8px;
            padding: 2px 4px;
            border: 2px solid transparent;
        }
        .acc-slot.equipped {
            border-color: var(--accent-green);
            background: rgba(76,175,80,0.1);
        }

        /* Daily pet quest */
        .pet-quest {
            width: 100%;
            background: rgba(255,255,255,0.75);
            border-radius: 8px;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 700;
            text-align: center;
            margin-top: 4px;
            color: #333;
        }
        .pet-quest.completed { background: rgba(76,175,80,0.25); color: #2e7d32; }

        /* Pet naming form */
        .pet-name-form {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 8px;
        }
        .pet-name-input {
            border: 2px solid var(--accent-green);
            border-radius: 20px;
            padding: 6px 14px;
            font-size: 15px;
            font-weight: 700;
            text-align: center;
            outline: none;
            width: 160px;
        }
        .pet-name-btn {
            background: var(--accent-green);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 6px 20px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }

        /* Evolution overlay */
        .evolution-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            cursor: pointer;
        }
        .evolution-pet-emoji {
            font-size: 96px;
            animation: evolutionPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        .evolution-title {
            color: white;
            font-size: 22px;
            font-weight: 800;
            margin-top: 16px;
            text-align: center;
        }
        .evolution-confetti {
            position: absolute;
            font-size: 24px;
            animation: confettiFall linear forwards;
        }

        @keyframes evolutionPop {
            0%   { transform: scale(0); opacity: 0; }
            70%  { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        @keyframes confettiFall {
            0%   { transform: translateY(-40px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
        }

        /* ==================== DOG PET — LEGACY COMPAT ==================== */
        .pet-top-bar { display: none; }
        .pet-level-badge, .pet-title, .pet-xp-bar, .pet-coin-display, .pet-shop-label { display: none; }
        .pet-shop-btn { display: none; }

        /* Shop modal */
        .pet-shop-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 300;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .pet-shop-modal {
            background: var(--card-bg, #fff);
            border-radius: 16px;
            padding: 20px 16px;
            max-width: 340px;
            width: 100%;
            position: relative;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            max-height: 80vh;
            overflow-y: auto;
        }

        .shop-coins {
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            color: #F57F17;
            margin-bottom: 10px;
        }

        .shop-tabs {
            display: flex;
            gap: 6px;
            margin-bottom: 12px;
        }
        .shop-tab {
            flex: 1;
            padding: 6px 0;
            border: 2px solid var(--border-color, #ddd);
            background: none;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            color: var(--text-secondary);
        }
        .shop-tab.active {
            background: var(--accent-green, #4CAF50);
            color: white;
            border-color: var(--accent-green, #4CAF50);
        }

        /* Accessory category filter pills */
        .shop-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 10px;
        }
        .shop-cat-pill {
            padding: 3px 8px;
            border: 1px solid var(--border-color, #ddd);
            background: none;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 700;
            cursor: pointer;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .shop-cat-pill.active {
            background: var(--accent-green, #4CAF50);
            color: white;
            border-color: var(--accent-green, #4CAF50);
        }

        .shop-items {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .shop-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 12px;
            background: var(--bg-secondary, #f5f5f5);
            transition: opacity 0.2s;
        }
        .shop-item.disabled { opacity: 0.5; }
        .shop-item.owned { background: rgba(76,175,80,0.08); }

        .shop-item-emoji {
            font-size: 24px;
            flex-shrink: 0;
        }

        .shop-item-info {
            flex: 1;
            min-width: 0;
        }
        .shop-item-name {
            font-size: 13px;
            font-weight: 700;
        }
        .shop-item-desc {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .shop-buy-btn {
            padding: 4px 10px;
            border: none;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            background: linear-gradient(135deg, #FFD700, #FFA000);
            color: #5D4037;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .shop-buy-btn.disabled {
            background: #ccc;
            color: #888;
            cursor: default;
        }
        .shop-buy-btn.owned {
            background: var(--accent-green, #4CAF50);
            color: white;
        }
        .shop-buy-btn.equipped {
            background: #ef5350;
            color: white;
        }
        .shop-buy-btn:active:not(.disabled) { transform: scale(0.95); }

        /* ===== HUNGER HEARTS (Option A) ===== */
        .hunger-hearts-row {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 2px;
            font-size: 13px;
        }
        .hunger-heart {
            transition: transform 0.3s, opacity 0.3s;
            display: inline-block;
        }
        .hunger-heart.empty {
            opacity: 0.25;
            filter: grayscale(1);
            font-size: 11px;
        }
        .hunger-heart.full {
            animation: heartPulse 2s ease-in-out infinite;
        }
        .hunger-heart.full:nth-child(2) { animation-delay: 0.15s; }
        .hunger-heart.full:nth-child(3) { animation-delay: 0.3s; }
        .hunger-heart.full:nth-child(4) { animation-delay: 0.45s; }
        .hunger-heart.full:nth-child(5) { animation-delay: 0.6s; }
        @keyframes heartPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }
        .hunger-label {
            font-size: 10px;
            margin-left: 6px;
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .hunger-label.hunger-warning {
            color: #ef5350;
            animation: hungerBlink 1s ease-in-out infinite;
        }
        @keyframes hungerBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        /* ===== FLYING FOOD ANIMATION (Option A) ===== */
        .flying-food {
            position: fixed;
            font-size: 36px;
            z-index: 9999;
            pointer-events: none;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
        }

        /* ===== DOG CHOMP ANIMATION (Option A) ===== */
        .pet-chomp img {
            animation: petChomp 0.5s ease-in-out !important;
        }
        @keyframes petChomp {
            0%   { transform: scale(1) rotate(0deg); }
            15%  { transform: scale(1.12, 0.88) rotate(-2deg); }
            30%  { transform: scale(0.92, 1.08) rotate(2deg); }
            50%  { transform: scale(1.08, 0.92) rotate(-1deg); }
            70%  { transform: scale(0.96, 1.04) rotate(1deg); }
            100% { transform: scale(1) rotate(0deg); }
        }

        /* Feed burst particles (reuses heart-burst pattern) */
        .feed-burst {
            position: absolute;
            top: 50%;
            left: 50%;
            pointer-events: none;
            z-index: 10;
        }
        .feed-burst span {
            position: absolute;
            font-size: 18px;
            opacity: 0;
            animation: feedParticleFly var(--fly-dur, 0.8s) ease-out var(--fly-delay, 0s) forwards;
        }
        @keyframes feedParticleFly {
            0%   { opacity: 1; transform: translate(0, 0) scale(0.5); }
            60%  { opacity: 1; }
            100% { opacity: 0; transform: translate(var(--fly-x, 30px), var(--fly-y, -40px)) scale(1.2); }
        }

        /* ===== FEAST BONUS HINT (Option B) ===== */
        .feast-bonus-hint {
            color: #f59e0b;
            font-weight: 700;
            font-size: 10px;
        }

        /* ===== BOTTOM DRAWER for Food Shop (Option E) ===== */
        .pet-shop-drawer-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.25);
            z-index: 310; /* Above bottom nav (300) */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .pet-shop-drawer-overlay .pet-shop-modal {
            max-width: 100%;
            max-height: 55vh;
            border-radius: 20px 20px 0 0;
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
            box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
            padding: 12px 16px 16px;
        }
        .pet-shop-drawer-overlay.open .pet-shop-modal {
            transform: translateY(0);
        }
        /* Drawer handle */
        .pet-shop-drawer-overlay .pet-shop-modal::before {
            content: '';
            display: block;
            width: 40px;
            height: 4px;
            background: var(--text-secondary, #999);
            border-radius: 2px;
            margin: 0 auto 8px;
            opacity: 0.4;
        }

        /* Compact drawer header for food tab */
        .shop-drawer-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        .shop-drawer-title {
            font-size: 16px;
            font-weight: 800;
            flex: 1;
        }
        .shop-coins-inline {
            font-size: 14px;
            font-weight: 700;
            color: #F57F17;
        }
        .shop-tab-switch {
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border: 1.5px solid var(--border-color, #ddd);
            border-radius: 10px;
            background: none;
            color: var(--text-secondary);
            cursor: pointer;
        }
        .shop-tab-switch:active { background: var(--bg-secondary, #f0f0f0); }

        /* ===== DRAG-TO-FEED (Option E) ===== */
        .draggable-food {
            cursor: grab;
            touch-action: none;
            user-select: none;
            position: relative;
        }
        .draggable-food:active {
            cursor: grabbing;
            transform: scale(0.96);
        }

        .drag-hint {
            display: block;
            font-size: 9px;
            color: var(--accent-green, #4CAF50);
            font-weight: 600;
            opacity: 0.7;
            margin-top: 1px;
        }

        .drag-food-ghost {
            position: fixed;
            font-size: 48px;
            z-index: 9999;
            pointer-events: none;
            transform: translate(-50%, -50%) scale(1.2);
            filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
            transition: transform 0.08s ease-out;
        }
        .drag-food-ghost.snap-back {
            transition: all 0.3s ease-in;
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.3) rotate(180deg);
        }

        /* Drop target hint on dog */
        .drop-target-hint {
            animation: dropHintPulse 1.2s ease-in-out infinite !important;
        }
        .drop-target-hint::after {
            content: '🍽️';
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            animation: dropHintBounce 0.8s ease-in-out infinite;
            z-index: 5;
        }
        @keyframes dropHintPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.06); }
        }
        @keyframes dropHintBounce {
            0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
            50% { transform: translateX(-50%) translateY(-6px); opacity: 1; }
        }

        /* Dog excited wiggle when food is near */
        .drop-target-near {
            animation: dropNearWiggle 0.25s ease-in-out infinite !important;
        }
        .drop-target-near img {
            filter: brightness(1.15) !important;
        }
        .drop-target-near::after {
            content: '😋' !important;
            font-size: 20px !important;
            animation: none !important;
            opacity: 1 !important;
        }
        @keyframes dropNearWiggle {
            0%, 100% { transform: rotate(-4deg) scale(1.05); }
            50% { transform: rotate(4deg) scale(1.05); }
        }

        /* ==================== PET POOP SYSTEM ==================== */

        .pet-poop {
            position: absolute;
            font-size: 28px;
            transform: translate(-50%, -50%);
            cursor: grab;
            z-index: 4;
            animation: poopPlop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
            padding: 10px;
            margin: -10px;
        }
        .pet-poop:active { cursor: grabbing; }

        @keyframes poopPlop {
            0%   { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0; }
            60%  { transform: translate(-50%, -50%) scale(1.15) rotate(5deg); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
        }

        .poop-stink {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            animation: stinkWaft 2s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes stinkWaft {
            0%, 100% { transform: translateX(-50%) translateY(0) rotate(-5deg); opacity: 0.4; }
            50%      { transform: translateX(-50%) translateY(-8px) rotate(5deg); opacity: 0.8; }
        }

        .pet-poop.stinky {
            animation: poopStinkyIdle 3s ease-in-out infinite;
        }
        @keyframes poopStinkyIdle {
            0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
            25%      { transform: translate(-50%, -50%) scale(1.03) rotate(-2deg); }
            75%      { transform: translate(-50%, -50%) scale(0.97) rotate(2deg); }
        }

        .poop-cleaning {
            animation: poopClean 0.4s ease-in forwards !important;
            pointer-events: none !important;
        }
        @keyframes poopClean {
            0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            50%  { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
        }

        .drag-poop-ghost {
            position: fixed;
            font-size: 42px;
            z-index: 9999;
            pointer-events: none;
            transform: translate(-50%, -50%) scale(1.1);
            filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
            transition: transform 0.08s ease-out;
        }
        .drag-poop-ghost.snap-back {
            transition: all 0.3s ease-in;
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.3) rotate(180deg);
        }

        .pet-trash-btn {
            background: rgba(255,255,255,0.25);
            color: white;
            border: 2px solid rgba(255,255,255,0.4);
            border-radius: 18px;
            padding: 6px 14px;
            font-size: 18px;
            cursor: pointer;
            backdrop-filter: blur(4px);
            transition: transform 0.15s, box-shadow 0.2s;
            flex-shrink: 0;
            margin-right: 6px;
            animation: trashInvite 2s ease-in-out infinite;
        }
        .pet-trash-btn:active { transform: scale(0.94); }

        @keyframes trashInvite {
            0%, 100% { transform: scale(1) rotate(0deg); }
            25%      { transform: scale(1.05) rotate(-3deg); }
            75%      { transform: scale(1.05) rotate(3deg); }
        }

        .trash-drop-hint {
            animation: trashHintPulse 1s ease-in-out infinite !important;
            box-shadow: 0 0 12px rgba(255,255,255,0.6);
        }
        @keyframes trashHintPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,255,255,0.4); }
            50%      { transform: scale(1.15); box-shadow: 0 0 20px rgba(255,255,255,0.8); }
        }

        .trash-drop-near {
            animation: trashNearWiggle 0.2s ease-in-out infinite !important;
            background: rgba(255,255,255,0.5) !important;
            box-shadow: 0 0 20px rgba(76,175,80,0.6) !important;
            border-color: rgba(76,175,80,0.8) !important;
        }
        @keyframes trashNearWiggle {
            0%, 100% { transform: rotate(-6deg) scale(1.2); }
            50%      { transform: rotate(6deg) scale(1.2); }
        }

        .clean-burst {
            position: absolute;
            top: 50%;
            left: 50%;
            pointer-events: none;
            z-index: 10;
        }
        .clean-burst span {
            position: absolute;
            font-size: 18px;
            opacity: 0;
            animation: feedParticleFly var(--fly-dur, 0.8s) ease-out var(--fly-delay, 0s) forwards;
        }

        /* ==================== STREAK SHIELD SAVED OVERLAY ==================== */
        .shield-saved-overlay {
            position: fixed;
            inset: 0;
            background: linear-gradient(135deg, rgba(46,204,113,0.85), rgba(155,89,182,0.85));
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1100;
            opacity: 0;
            transition: opacity 0.4s ease;
            padding: 24px;
        }
        .shield-saved-overlay.active { opacity: 1; }
        .shield-saved-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 28px;
            padding: 32px 24px;
            text-align: center;
            max-width: 360px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: shieldPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes shieldPop {
            0% { transform: scale(0.7); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        .shield-saved-icon {
            font-size: 80px;
            margin-bottom: 12px;
            filter: drop-shadow(0 4px 12px rgba(46,204,113,0.5));
            animation: shieldFloat 2.5s ease-in-out infinite;
        }
        @keyframes shieldFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-8px) rotate(5deg); }
        }
        .shield-saved-title {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 12px;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .shield-saved-msg {
            font-size: 15px;
            color: var(--text-primary);
            margin-bottom: 16px;
            line-height: 1.5;
        }
        .shield-saved-remaining {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 20px;
            font-weight: 600;
        }
        .shield-saved-btn {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
            border: none;
            padding: 14px 32px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(46,204,113,0.4);
            transition: transform 0.15s ease;
        }
        .shield-saved-btn:active { transform: scale(0.96); }

        /* ==================== SHIELD SHOP ==================== */
        .shield-shop-intro {
            background: linear-gradient(135deg, rgba(46,204,113,0.1), rgba(155,89,182,0.1));
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 14px;
            font-size: 13px;
            line-height: 1.5;
            color: var(--text-primary);
            margin-bottom: 12px;
            text-align: center;
        }
        .shield-tip {
            font-size: 12px;
            color: var(--text-secondary);
            text-align: center;
            margin-top: 10px;
            padding: 10px;
            background: rgba(255,255,255,0.4);
            border-radius: 12px;
        }

        /* ==================== WEEKLY RECAP MODAL ==================== */
        .weekly-recap-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1050;
            opacity: 0;
            transition: opacity 0.3s ease;
            padding: 20px;
        }
        .weekly-recap-overlay.active { opacity: 1; }
        .weekly-recap-card {
            background: linear-gradient(160deg, #ffffff 0%, #f5eaff 50%, #e2f5ea 100%);
            border-radius: 28px;
            padding: 28px 22px;
            max-width: 380px;
            width: 100%;
            max-height: 88vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.25);
            animation: shieldPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
        }
        .recap-close {
            position: absolute;
            top: 14px;
            right: 14px;
            background: rgba(0,0,0,0.08);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .recap-header {
            text-align: center;
            margin-bottom: 18px;
        }
        .recap-emoji {
            font-size: 56px;
            margin-bottom: 8px;
            filter: drop-shadow(0 4px 12px rgba(155,89,182,0.3));
        }
        .recap-title {
            font-size: 22px;
            font-weight: 800;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .recap-week-range {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .recap-stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 18px;
        }
        .recap-stat {
            background: rgba(255,255,255,0.7);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 14px 10px;
            text-align: center;
        }
        .recap-stat-value {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .recap-stat-label {
            font-size: 11px;
            color: var(--text-secondary);
            font-weight: 600;
            margin-top: 2px;
        }
        .recap-days-row {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin-bottom: 18px;
        }
        .recap-day-pill {
            flex: 1;
            text-align: center;
            padding: 8px 4px;
            border-radius: 10px;
            background: rgba(255,255,255,0.6);
            border: 1px solid var(--glass-border);
            font-size: 11px;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .recap-day-pill.active {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
            border-color: transparent;
            box-shadow: 0 2px 8px rgba(46,204,113,0.3);
        }
        .recap-day-pill .recap-day-dot {
            display: block;
            font-size: 16px;
            margin-bottom: 2px;
        }
        .recap-message {
            background: linear-gradient(135deg, rgba(46,204,113,0.1), rgba(155,89,182,0.1));
            border-radius: 14px;
            padding: 14px;
            text-align: center;
            font-size: 14px;
            line-height: 1.5;
            color: var(--text-primary);
            margin-bottom: 16px;
        }
        .recap-actions {
            display: flex;
            gap: 10px;
        }
        .recap-btn {
            flex: 1;
            border: none;
            padding: 12px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.15s ease;
        }
        .recap-btn:active { transform: scale(0.96); }
        .recap-btn-primary {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
            box-shadow: 0 4px 14px rgba(46,204,113,0.35);
        }
        .recap-btn-secondary {
            background: rgba(255,255,255,0.6);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
        }
        .recap-history-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 12px;
        }
        .recap-history-item {
            background: rgba(255,255,255,0.6);
            border: 1px solid var(--glass-border);
            border-radius: 14px;
            padding: 12px 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: transform 0.15s ease;
        }
        .recap-history-item:active { transform: scale(0.98); }
        .recap-history-week {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .recap-history-stats {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 2px;
        }
        .recap-history-arrow {
            font-size: 18px;
            color: var(--accent-purple);
        }
        .recap-history-btn {
            width: 100%;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
            padding: 14px 18px;
            border-radius: 16px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            box-shadow: 0 4px 16px rgba(31,80,50,0.06);
            transition: transform 0.15s ease;
        }
        .recap-history-btn:active { transform: scale(0.98); }

        /* Level-up overlay */
        .level-up-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            cursor: pointer;
            animation: fadeIn 0.3s ease;
        }
        .level-up-text {
            color: #FFD700;
            font-size: 28px;
            font-weight: 900;
            text-shadow: 0 0 20px rgba(255,215,0,0.5);
            animation: evolutionPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .level-up-level {
            color: white;
            font-size: 20px;
            font-weight: 700;
            margin-top: 4px;
        }
        .level-up-title {
            color: rgba(255,255,255,0.7);
            font-size: 14px;
            margin-top: 8px;
        }
        .level-up-evolution {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 16px;
        }
        .level-up-stage-name {
            color: #FFD700;
            font-size: 16px;
            font-weight: 700;
            margin-top: 8px;
        }
        .level-up-confetti {
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 28px;
            letter-spacing: 8px;
            animation: confettiFall 3s linear infinite;
        }

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

        /* Coins earned on lesson complete */
        .complete-coins {
            font-size: 18px;
            font-weight: 800;
            color: #F57F17;
            margin: 4px 0 8px;
            animation: coinPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes coinPop {
            0% { transform: scale(0); opacity: 0; }
            70% { transform: scale(1.3); opacity: 1; }
            100% { transform: scale(1); }
        }

        /* Streak bonus label in lesson complete */
        .complete-streak-bonus {
            font-size: 14px;
            font-weight: 700;
            color: #FF8A65;
            margin: 2px 0 6px;
            animation: coinPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Streak milestone overlay */
        .streak-milestone-msg {
            color: rgba(255,255,255,0.9);
            font-size: 16px;
            margin-top: 12px;
            max-width: 280px;
            text-align: center;
            line-height: 1.4;
        }
        .streak-milestone-rewards {
            display: flex;
            gap: 12px;
            margin-top: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .streak-reward-item {
            background: rgba(255,255,255,0.15);
            padding: 6px 14px;
            border-radius: 20px;
            color: #FFD54F;
            font-weight: 700;
            font-size: 14px;
        }
        .streak-acc-unlock {
            color: #FF8A65;
            background: rgba(255,138,101,0.2);
            animation: streakAccPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes streakAccPop {
            0% { transform: scale(0); }
            70% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        .streak-next-hint {
            color: rgba(255,255,255,0.6);
            font-size: 13px;
            margin-top: 14px;
        }

        /* Best streak in profile */
        .profile-stat-best {
            font-size: 10px;
            color: #999;
            margin-top: 2px;
        }

        /* Pet info current stage highlight */
        .pet-info-stage.current {
            background: rgba(76,175,80,0.15);
            border: 1px solid rgba(76,175,80,0.3);
        }
        .pet-info-stage.locked {
            opacity: 0.5;
        }

        /* ==================== WORD OF THE DAY ==================== */
        .wotd-card {
            background: linear-gradient(135deg, #7E57C2, #9575CD);
            border-radius: var(--border-radius);
            padding: 16px;
            margin: 8px 0;
            color: white;
            cursor: pointer;
            text-align: center;
            box-shadow: 0 4px 15px rgba(126, 87, 194, 0.3);
        }

        .wotd-label { font-size: 12px; font-weight: 700; opacity: 0.9; text-transform: uppercase; }
        .wotd-emoji { font-size: 36px; margin: 4px 0; }
        .wotd-word { font-size: 20px; font-weight: 800; }

        .wotd-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 200;
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
        }

        .wotd-overlay.active { display: flex; }

        .wotd-panel {
            background: white;
            border-radius: 24px;
            padding: 32px;
            max-width: 320px;
            width: 90%;
            text-align: center;
            animation: panelSlide 0.3s ease;
        }

        .wotd-panel-emoji { font-size: 56px; }
        .wotd-panel-word { font-size: 28px; font-weight: 800; margin: 8px 0; color: var(--text-primary); }
        .wotd-panel-ipa { font-size: 16px; color: var(--text-secondary); margin-bottom: 12px; }
        .wotd-panel-vi { font-size: 22px; font-weight: 700; color: var(--accent-purple); margin-bottom: 12px; }
        .wotd-panel-example { font-size: 15px; color: var(--text-secondary); font-style: italic; line-height: 1.5; }
        .wotd-panel-prompt { font-size: 20px; font-weight: 700; color: var(--accent-green); margin-bottom: 12px; }
        .wotd-panel-challenge { font-size: 15px; color: var(--text-primary); line-height: 1.6; }

        .wotd-speak-btn {
            display: inline-block;
            margin-top: 12px;
            padding: 8px 20px;
            background: var(--accent-green);
            color: white;
            border: none;
            border-radius: 20px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
        }

        .wotd-dots {
            display: flex;
            gap: 8px;
            margin-top: 16px;
        }

        .wotd-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
        }

        .wotd-dot.active { background: white; }

        .wotd-tap-hint {
            color: rgba(255,255,255,0.5);
            font-size: 13px;
            margin-top: 16px;
        }

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

        /* ==================== STICKER BOOK ==================== */
        .sticker-counter {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .sticker-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 16px;
        }

        .sticker-item {
            width: 100%;
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--bg-card);
            border-radius: 16px;
            border: 2px solid var(--border-color);
        }

        .sticker-item.locked {
            opacity: 0.35;
            filter: grayscale(1);
        }

        .sticker-item.rare {
            border-color: gold;
            animation: holographic 3s linear infinite;
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
        }

        .sticker-emoji { font-size: 28px; }
        .sticker-name { font-size: 10px; font-weight: 600; margin-top: 2px; color: var(--text-secondary); }

        @keyframes holographic {
            0% { border-color: gold; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
            33% { border-color: #ff69b4; box-shadow: 0 0 8px rgba(255, 105, 180, 0.4); }
            66% { border-color: #00bfff; box-shadow: 0 0 8px rgba(0, 191, 255, 0.4); }
            100% { border-color: gold; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
        }

        /* ==================== DAILY CHALLENGE ==================== */
        .daily-challenge-card {
            background: linear-gradient(135deg, #FFB300, #FF8F00);
            border-radius: var(--border-radius);
            padding: 16px;
            margin: 8px 0;
            color: white;
            box-shadow: 0 4px 15px rgba(255, 179, 0, 0.3);
        }

        .dc-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .dc-icon { font-size: 24px; }
        .dc-title { font-size: 16px; font-weight: 800; }
        .dc-streak { font-size: 13px; opacity: 0.9; margin-bottom: 10px; }
        .dc-done { font-size: 14px; font-weight: 700; }

        .dc-start-btn {
            background: white !important;
            color: #FF8F00 !important;
        }

        /* Treasure Chest */
        .treasure-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.8);
            z-index: 200;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .treasure-overlay.active { display: flex; }

        .treasure-content {
            text-align: center;
            color: white;
        }

        .treasure-chest {
            font-size: 72px;
            margin-bottom: 16px;
            animation: chestOpen 1s ease;
        }

        .chest-lid {
            display: inline-block;
            animation: lidLift 0.8s ease forwards;
        }

        .chest-body { display: block; margin-top: -10px; }

        .chest-coins {
            position: relative;
            height: 60px;
        }

        .chest-coin {
            position: absolute;
            font-size: 24px;
            left: 50%;
            top: 50%;
            animation: coinBurst 1s ease forwards;
        }

        .treasure-points {
            font-size: 28px;
            font-weight: 800;
            color: #FFD54F;
            margin: 12px 0 4px;
        }

        .treasure-bonus {
            font-size: 16px;
            opacity: 0.8;
            margin-bottom: 16px;
        }

        @keyframes chestOpen {
            0% { transform: scale(0.5); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        @keyframes lidLift {
            0% { transform: translateY(0) rotate(0); }
            100% { transform: translateY(-15px) rotate(-20deg); }
        }

        @keyframes coinBurst {
            0% { transform: translate(0, 0) scale(0); opacity: 1; }
            100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
        }

        /* ==================== SENTENCE BUILDER ==================== */
        .sentence-builder-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            z-index: 200;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .sentence-builder-overlay.active { display: flex; }

        .sb-content {
            background: white;
            border-radius: 24px;
            padding: 24px;
            max-width: 360px;
            width: 92%;
            max-height: 85vh;
            overflow-y: auto;
            text-align: center;
        }

        .sb-header { margin-bottom: 12px; }
        .sb-title { font-size: 16px; font-weight: 700; color: var(--text-secondary); }
        .sb-word { font-size: 24px; font-weight: 800; margin-top: 4px; }

        .sb-sentence {
            background: var(--bg-secondary);
            border-radius: 16px;
            padding: 16px;
            margin: 12px 0;
            font-size: 16px;
            line-height: 1.8;
            min-height: 60px;
            word-wrap: break-word;
        }

        .sb-palette {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 6px;
            margin: 12px 0;
        }

        .sb-emoji-btn {
            font-size: 22px;
            padding: 6px;
            border: none;
            background: var(--bg-primary);
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.1s;
        }

        .sb-emoji-btn:active { transform: scale(0.9); }

        .sb-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            align-items: center;
            justify-content: center;
        }

        .sb-undo-btn, .sb-skip-btn {
            padding: 8px 16px;
            border: none;
            background: var(--bg-primary);
            border-radius: 12px;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }

        .sb-save-btn {
            flex: 1;
        }

        .sentence-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 14px;
            margin-bottom: 8px;
            text-align: left;
        }

        .sentence-card-word {
            font-size: 12px;
            font-weight: 700;
            color: var(--accent-purple);
            margin-bottom: 4px;
        }

        .sentence-card-text {
            font-size: 14px;
            line-height: 1.5;
        }

        .sentences-list {
            margin-bottom: 16px;
        }

        /* ==================== BATTLE MODE ==================== */
        .battle-card {
            background: linear-gradient(135deg, #ef5350, #FF7043);
            border-radius: var(--border-radius);
            padding: 16px;
            margin: 8px 0;
            color: white;
            text-align: center;
            box-shadow: 0 4px 15px rgba(239, 83, 80, 0.3);
        }

        .battle-card-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .battle-card-icon { font-size: 24px; }
        .battle-card-title { font-size: 16px; font-weight: 800; }
        .battle-record { font-size: 13px; opacity: 0.9; margin-bottom: 10px; }

        .battle-start-btn {
            background: white !important;
            color: #ef5350 !important;
        }

        .battle-setup-overlay,
        .battle-game-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            z-index: 200;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .battle-setup-overlay.active,
        .battle-game-overlay.active { display: flex; }

        .battle-setup-content {
            background: white;
            border-radius: 24px;
            padding: 24px;
            max-width: 340px;
            width: 90%;
            text-align: center;
        }

        .battle-setup-content h2 { margin-bottom: 16px; }

        .battle-no-opponents {
            color: var(--text-secondary);
            margin-bottom: 16px;
        }

        .battle-user-list {
            margin-bottom: 16px;
        }

        .battle-user-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .battle-user-item:hover { background: var(--bg-secondary); }
        .battle-user-avatar { font-size: 28px; }
        .battle-user-name { flex: 1; font-weight: 700; text-align: left; }
        .battle-user-points { font-size: 13px; color: var(--text-secondary); }

        .battle-game-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 16px;
        }

        .battle-game-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: white;
            padding: 8px 0;
        }

        .battle-player-tag {
            font-size: 14px;
            font-weight: 700;
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 12px;
        }

        .battle-timer {
            font-size: 18px;
            font-weight: 800;
            color: #FFD54F;
        }

        .battle-matching-grid {
            flex: 1;
            display: flex;
            gap: 8px;
            overflow-y: auto;
            padding: 8px 0;
        }

        .battle-matching-grid .matching-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .battle-ready-content {
            text-align: center;
            color: white;
        }

        .battle-player-num {
            font-size: 16px;
            opacity: 0.8;
        }

        .battle-player-name {
            font-size: 32px;
            font-weight: 800;
            margin: 8px 0 20px;
        }

        .battle-go-btn {
            font-size: 18px;
            padding: 14px 40px;
        }

        .battle-results-content {
            text-align: center;
            color: white;
            max-width: 360px;
            width: 90%;
        }

        .battle-results-title {
            font-size: 24px;
            margin-bottom: 8px;
        }

        .battle-winner-name {
            font-size: 28px;
            font-weight: 800;
            color: #FFD54F;
            margin-bottom: 16px;
        }

        .battle-scores {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .battle-score-card {
            flex: 1;
            background: rgba(255,255,255,0.15);
            border-radius: 16px;
            padding: 16px;
        }

        .battle-score-card.winner {
            border: 2px solid gold;
            box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
        }

        .battle-score-name { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
        .battle-score-accuracy { font-size: 28px; font-weight: 800; }
        .battle-score-time { font-size: 13px; opacity: 0.8; }
        .battle-vs { font-size: 18px; font-weight: 800; opacity: 0.6; }

        .battle-reward {
            font-size: 18px;
            font-weight: 700;
            color: #FFD54F;
            margin-bottom: 16px;
        }

        /* ==================== WORD HUNT ==================== */
        .word-hunt-card {
            background: linear-gradient(135deg, #00897B, #26A69A);
            border-radius: var(--border-radius);
            padding: 16px;
            margin: 8px 0;
            color: white;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 137, 123, 0.3);
        }

        .wh-card-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .wh-card-icon { font-size: 24px; }
        .wh-card-title { font-size: 16px; font-weight: 800; }
        .wh-card-desc { font-size: 13px; opacity: 0.9; margin-bottom: 10px; }

        .wh-start-btn {
            background: white !important;
            color: #00897B !important;
        }

        .word-hunt-overlay {
            position: fixed;
            inset: 0;
            background: linear-gradient(180deg, #004D40 0%, #00695C 100%);
            z-index: 200;
            display: none;
            flex-direction: column;
        }

        .word-hunt-overlay.active { display: flex; }

        .wh-game-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            color: white;
            padding-top: calc(12px + var(--safe-area-top));
        }

        .wh-timer {
            font-size: 22px;
            font-weight: 800;
            color: #A5D6A7;
        }

        .wh-timer.danger { color: #ef5350; animation: pulse 1s infinite; }

        .wh-found {
            font-size: 16px;
            font-weight: 700;
            color: white;
        }

        .wh-targets {
            display: flex;
            gap: 8px;
            padding: 8px 16px;
            overflow-x: auto;
        }

        .wh-target {
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            padding: 6px 12px;
            color: white;
            font-weight: 700;
            flex-shrink: 0;
        }

        .wh-target.found {
            background: rgba(76, 175, 80, 0.4);
        }

        .wh-target.found .wh-target-word {
            text-decoration: line-through;
            opacity: 0.7;
        }

        .wh-target-vi {
            display: block;
            font-size: 11px;
            font-weight: 400;
            opacity: 0.8;
        }

        .wh-grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 2px;
            max-width: 380px;
            margin: 12px auto;
            padding: 0 8px;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }

        .wh-cell {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.15);
            border-radius: 6px;
            color: white;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s;
        }

        .wh-cell.selected {
            background: rgba(33, 150, 243, 0.6);
            transform: scale(1.05);
        }

        .wh-cell.found {
            background: rgba(76, 175, 80, 0.5);
        }

        .wh-cell.wrong {
            background: rgba(239, 83, 80, 0.5);
            animation: shake 0.3s ease;
        }

        .wh-meaning-popup {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            color: var(--text-primary);
            padding: 10px 20px;
            border-radius: 16px;
            font-weight: 700;
            font-size: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            display: none;
            z-index: 210;
        }

        .wh-meaning-popup.active { display: block; animation: panelSlide 0.3s ease; }

        .wh-complete {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            padding: 24px;
        }

        .wh-complete-icon { font-size: 64px; margin-bottom: 16px; }
        .wh-complete h2 { font-size: 24px; margin-bottom: 8px; }
        .wh-complete-score { font-size: 18px; opacity: 0.9; margin-bottom: 4px; }
        .wh-complete-points { font-size: 24px; font-weight: 800; color: #FFD54F; margin-bottom: 20px; }

        /* ==================== PROFILE BACK BUTTON ==================== */
        .profile-back-btn {
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 4px;
            background: var(--bg-primary);
            border: none;
            font-family: 'Nunito', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: var(--accent-green-dark);
            padding: 12px 20px;
            cursor: pointer;
        }

        .profile-back-btn:active { opacity: 0.7; }

        /* ==================== TOPIC VOCABULARY CARDS ==================== */
        .topic-cards-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .topic-card {
            border-radius: 16px;
            padding: 14px 10px 12px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            border: 2px solid rgba(0,0,0,0.04);
            position: relative;
            overflow: hidden;
        }

        .topic-card:active {
            transform: scale(0.95);
        }

        .topic-card-img {
            width: 72px;
            height: 72px;
            margin: 0 auto 8px;
        }

        .topic-card-img svg {
            width: 100%;
            height: 100%;
        }

        .topic-card-emoji {
            width: 72px;
            height: 72px;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 42px;
            line-height: 1;
        }

        .topic-category-header {
            font-size: 18px;
            font-weight: 800;
            color: #1a1a2e;
            margin: 24px 0 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid rgba(0,0,0,0.06);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .topic-category-header:first-child {
            margin-top: 8px;
        }

        .topic-cat-count {
            font-size: 13px;
            font-weight: 600;
            color: #999;
            margin-left: 4px;
        }

        .topic-card-word {
            font-size: 15px;
            font-weight: 800;
            color: #1a1a2e;
            margin-bottom: 2px;
            letter-spacing: 0.3px;
        }

        .topic-card-ipa {
            font-size: 11px;
            color: #666;
            margin-bottom: 4px;
            font-style: italic;
        }

        .topic-card-vi {
            font-size: 12px;
            color: #444;
            font-weight: 600;
        }

        .topic-practice-section {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 8px;
            margin-bottom: 24px;
        }

        .topic-practice-btn {
            width: 100%;
            padding: 14px 20px;
            border-radius: 14px;
            border: 2px solid rgba(0,0,0,0.06);
            background: white;
            font-size: 15px;
            font-weight: 700;
            color: #333;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 3px 8px rgba(0,0,0,0.06);
        }

        .topic-practice-btn:active {
            transform: scale(0.97);
        }

        .topic-practice-all {
            background: linear-gradient(135deg, #FF8A65, #F4511E);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(244,81,30,0.3);
        }

        @media (min-width: 400px) {
            .topic-cards-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* ==================== TOPICS SCREEN (NEW v3.12) ==================== */
        .topics-screen {
            padding: 20px 16px 100px;
        }
        .topics-header {
            text-align: center;
            margin-bottom: 18px;
        }
        .topics-title {
            font-size: 26px;
            font-weight: 800;
            margin-bottom: 4px;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .topics-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .topics-difficulty-tabs {
            display: flex;
            gap: 6px;
            margin-bottom: 16px;
            overflow-x: auto;
            padding-bottom: 4px;
            -webkit-overflow-scrolling: touch;
        }
        .topics-diff-tab {
            flex-shrink: 0;
            padding: 8px 14px;
            border-radius: 18px;
            border: 1px solid var(--glass-border);
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            color: var(--text-primary);
        }
        .topics-diff-tab.active {
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(46,204,113,0.3);
        }
        .topics-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        @media (min-width: 400px) {
            .topics-grid { grid-template-columns: repeat(3, 1fr); }
        }
        .topic-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-left: 4px solid var(--topic-color, var(--accent-purple));
            border-radius: 18px;
            padding: 14px 10px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.2s ease;
            box-shadow: 0 3px 12px rgba(31,80,50,0.06);
            font-family: inherit;
        }
        .topic-card:active {
            transform: scale(0.96);
        }
        .topic-card:hover {
            box-shadow: 0 6px 20px rgba(31,80,50,0.12);
        }
        .topic-card-empty {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .topic-card-icon {
            font-size: 32px;
            margin-bottom: 6px;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));
        }
        .topic-card-name {
            font-size: 12px;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1.2;
            margin-bottom: 4px;
            min-height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .topic-card-count {
            font-size: 11px;
            color: var(--text-secondary);
            font-weight: 600;
        }
        .topic-card-progress {
            font-size: 10px;
            font-weight: 800;
            color: #2ecc71;
            margin-top: 4px;
            background: rgba(46,204,113,0.12);
            padding: 2px 8px;
            border-radius: 10px;
            display: inline-block;
        }
        .topic-detail-progress {
            font-size: 13px;
            font-weight: 700;
            color: #2ecc71;
            margin-top: 6px;
        }
        .topic-lesson-status {
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 10px;
            display: inline-block;
            margin-bottom: 6px;
        }
        .topic-lesson-status.status-perfect {
            background: linear-gradient(135deg, rgba(255,214,10,0.2), rgba(255,159,28,0.2));
            color: #b8860b;
        }
        .topic-lesson-status.status-done {
            background: rgba(46,204,113,0.15);
            color: #1e8449;
        }
        .topic-lesson-perfect {
            border-left-color: #FFD60A !important;
        }
        .topic-lesson-done {
            border-left-color: #2ecc71 !important;
        }

        /* ========== SR-AWARE TOPICS (v3.26) ========== */
        /* Daily review banner */
        .topics-sr-banner-slot {
            margin-bottom: 12px;
        }
        .topics-sr-banner {
            display: flex;
            gap: 12px;
            align-items: center;
            width: 100%;
            text-align: left;
            background: linear-gradient(135deg, rgba(58,134,255,0.10), rgba(108,92,231,0.10));
            border: 1px solid rgba(58,134,255,0.25);
            border-radius: 14px;
            padding: 12px 14px;
            cursor: pointer;
            transition: transform 0.05s, box-shadow 0.15s;
            font-family: inherit;
        }
        .topics-sr-banner-due {
            background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(217,119,6,0.10));
            border-color: rgba(245,158,11,0.40);
            box-shadow: 0 4px 14px rgba(245,158,11,0.15);
        }
        .topics-sr-banner-due:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(245,158,11,0.25);
        }
        .topics-sr-banner-due:active {
            transform: scale(0.99);
        }
        .topics-sr-banner-empty {
            background: rgba(148,163,184,0.10);
            border-color: rgba(148,163,184,0.30);
            cursor: default;
        }
        .topics-sr-banner-clear {
            background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(16,185,129,0.10));
            border-color: rgba(34,197,94,0.30);
            cursor: default;
        }
        .topics-sr-banner-icon {
            font-size: 28px;
            flex-shrink: 0;
        }
        .topics-sr-banner-text {
            flex: 1;
        }
        .topics-sr-banner-title {
            font-size: 14px;
            font-weight: 800;
            color: #1e293b;
            line-height: 1.3;
        }
        .topics-sr-banner-sub {
            font-size: 12px;
            color: #475569;
            margin-top: 2px;
        }
        .topics-sr-banner-arrow {
            font-size: 22px;
            color: #94a3b8;
            font-weight: 800;
            margin-left: auto;
        }
        /* Topic of the day */
        .topics-totd {
            display: flex;
            gap: 10px;
            align-items: center;
            width: 100%;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-left: 4px solid var(--topic-color, #6c5ce7);
            border-radius: 12px;
            padding: 10px 12px;
            margin-top: 8px;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
            transition: transform 0.05s;
        }
        .topics-totd:active {
            transform: scale(0.98);
        }
        .topics-totd-label {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            color: #92400e;
            background: rgba(245,158,11,0.15);
            padding: 2px 8px;
            border-radius: 6px;
            flex-shrink: 0;
        }
        .topics-totd-name {
            font-size: 13px;
            font-weight: 700;
            color: #1e293b;
        }
        .topics-totd-meta {
            margin-left: auto;
            font-size: 11px;
            color: #64748b;
            font-weight: 600;
        }

        /* Topic card SR badges */
        .topic-card-sr-row {
            display: flex;
            justify-content: center;
            gap: 4px;
            margin-top: 4px;
            flex-wrap: wrap;
        }
        .topic-card-due {
            font-size: 10px;
            font-weight: 800;
            color: #b45309;
            background: rgba(245,158,11,0.15);
            padding: 2px 6px;
            border-radius: 8px;
        }
        .topic-card-struggle {
            font-size: 10px;
            font-weight: 800;
            color: #b91c1c;
            background: rgba(239,68,68,0.12);
            padding: 2px 6px;
            border-radius: 8px;
        }
        .topic-card-mastery {
            margin-top: 6px;
            height: 4px;
            background: rgba(148,163,184,0.20);
            border-radius: 2px;
            overflow: hidden;
        }
        .topic-card-mastery-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--topic-color, #6c5ce7), #10b981);
            border-radius: 2px;
            transition: width 0.4s ease;
        }
        .topic-card-mastery-label {
            font-size: 9px;
            font-weight: 700;
            color: var(--text-secondary, #64748b);
            margin-top: 2px;
            text-align: center;
        }
        .topic-card-warm {
            box-shadow: 0 0 0 1px rgba(245,158,11,0.30), 0 3px 12px rgba(245,158,11,0.10);
        }
        .topic-card-hot {
            box-shadow: 0 0 0 2px rgba(239,68,68,0.40), 0 4px 14px rgba(239,68,68,0.18);
            animation: topicCardPulse 2.4s ease-in-out infinite;
        }
        @keyframes topicCardPulse {
            0%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,0.40), 0 4px 14px rgba(239,68,68,0.18); }
            50%      { box-shadow: 0 0 0 2px rgba(239,68,68,0.60), 0 6px 20px rgba(239,68,68,0.28); }
        }

        /* Topic detail SR hub */
        .topic-sr-hub {
            background: linear-gradient(135deg, rgba(58,134,255,0.06), rgba(108,92,231,0.06));
            border: 1px solid rgba(58,134,255,0.20);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 16px;
        }
        .topic-sr-hub-title {
            font-size: 14px;
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 10px;
        }
        .topic-sr-hub-empty {
            text-align: center;
            color: #64748b;
            font-size: 13px;
            background: rgba(148,163,184,0.08);
            border: 1px dashed rgba(148,163,184,0.40);
            border-radius: 10px;
            padding: 14px;
        }
        .topic-sr-review-btn {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            width: 100%;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 14px 16px;
            font-size: 16px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(245,158,11,0.30);
            transition: transform 0.05s, box-shadow 0.15s;
            font-family: inherit;
            text-align: left;
        }
        .topic-sr-review-btn:active {
            transform: scale(0.98);
        }
        .topic-sr-review-btn:hover {
            box-shadow: 0 6px 20px rgba(245,158,11,0.42);
        }
        .topic-sr-review-btn-sub {
            font-size: 12px;
            font-weight: 600;
            opacity: 0.92;
        }
        .topic-sr-review-clear {
            text-align: center;
            color: #047857;
            background: rgba(16,185,129,0.10);
            border: 1px solid rgba(16,185,129,0.30);
            border-radius: 10px;
            padding: 12px;
            font-size: 13px;
            font-weight: 700;
        }
        .topic-sr-stacks {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
            margin-top: 12px;
        }
        .topic-sr-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 10px 6px;
            cursor: pointer;
            transition: transform 0.05s, border-color 0.15s;
            font-family: inherit;
        }
        .topic-sr-stack.stack-learning { border-bottom: 3px solid #10b981; }
        .topic-sr-stack.stack-reviewing { border-bottom: 3px solid #3b82f6; }
        .topic-sr-stack.stack-mature { border-bottom: 3px solid #6c5ce7; }
        .topic-sr-stack:not(.disabled):active { transform: scale(0.96); }
        .topic-sr-stack.disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .topic-sr-stack-icon {
            font-size: 24px;
        }
        .topic-sr-stack-count {
            font-size: 22px;
            font-weight: 800;
            color: #1e293b;
            line-height: 1;
        }
        .topic-sr-stack-label {
            font-size: 11px;
            font-weight: 700;
            color: #475569;
            text-align: center;
            line-height: 1.3;
        }
        .topic-sr-stack-meta {
            font-weight: 500;
            color: #94a3b8;
            font-size: 10px;
        }
        .topic-sr-struggle-btn {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            width: 100%;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 12px 14px;
            margin-top: 10px;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(239,68,68,0.25);
            font-family: inherit;
            text-align: left;
        }
        .topic-sr-struggle-btn:active { transform: scale(0.98); }
        .topic-sr-struggle-btn-sub {
            font-size: 11px;
            font-weight: 600;
            opacity: 0.92;
        }
        .topic-sr-mastery {
            margin-top: 12px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 10px 12px;
        }
        .topic-sr-mastery-head {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 6px;
        }
        .topic-sr-mastery-pct {
            color: #6c5ce7;
        }
        .topic-sr-mastery-bar {
            height: 8px;
            background: rgba(148,163,184,0.20);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 4px;
        }
        .topic-sr-mastery-fill {
            height: 100%;
            background: linear-gradient(90deg, #f59e0b, #6c5ce7, #10b981);
            border-radius: 4px;
            transition: width 0.6s ease;
        }
        .topic-sr-mastery-meta {
            font-size: 11px;
            color: #64748b;
            font-weight: 600;
        }

        /* Lesson card SR additions */
        .topic-lesson-warm {
            border-left-color: #f59e0b !important;
            background: linear-gradient(135deg, rgba(245,158,11,0.05), transparent);
        }
        .topic-lesson-hot {
            border-left-color: #ef4444 !important;
            background: linear-gradient(135deg, rgba(239,68,68,0.06), transparent);
        }
        .topic-lesson-mastered {
            border-left-color: #6c5ce7 !important;
            background: linear-gradient(135deg, rgba(108,92,231,0.05), transparent);
        }
        .topic-lesson-status.status-mastered {
            background: linear-gradient(135deg, rgba(108,92,231,0.20), rgba(58,134,255,0.20));
            color: #4c1d95;
        }
        .topic-lesson-due-chip {
            display: inline-block;
            font-size: 11px;
            font-weight: 800;
            color: #b45309;
            background: rgba(245,158,11,0.15);
            padding: 2px 8px;
            border-radius: 8px;
            margin-left: 6px;
        }
        .topic-lesson-replay-due-btn {
            display: block;
            width: 100%;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 12px;
            margin-top: 6px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: transform 0.05s;
        }
        .topic-lesson-replay-due-btn:active {
            transform: scale(0.98);
        }

        /* Topic detail view */
        .topics-detail:empty { display: none; }
        .topic-detail-back {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            margin-bottom: 14px;
        }
        .topic-detail-header {
            text-align: center;
            padding: 24px 16px;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-top: 5px solid var(--topic-color, var(--accent-purple));
            border-radius: 22px;
            margin-bottom: 16px;
            box-shadow: 0 4px 16px rgba(31,80,50,0.08);
        }
        .topic-detail-icon {
            font-size: 56px;
            margin-bottom: 8px;
            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
        }
        .topic-detail-name {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .topic-detail-meta {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 600;
        }
        .topic-detail-actions {
            display: flex;
            gap: 10px;
            margin-bottom: 18px;
        }
        .topic-lesson-btn {
            flex: 1;
            padding: 14px;
            border: none;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            transition: transform 0.15s ease;
            font-family: inherit;
        }
        .topic-lesson-btn:active { transform: scale(0.96); }
        .topic-lesson-btn-primary {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
            box-shadow: 0 4px 14px rgba(46,204,113,0.35);
        }
        .topic-lesson-btn-secondary {
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            color: white;
            box-shadow: 0 4px 14px rgba(155,89,182,0.35);
        }
        .topic-detail-list-title {
            font-size: 15px;
            font-weight: 800;
            margin-bottom: 10px;
            color: var(--text-primary);
        }
        .topic-words-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .topic-word-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            background: var(--glass-bg);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid var(--glass-border);
            border-radius: 14px;
        }
        .topic-word-emoji {
            font-size: 26px;
            flex-shrink: 0;
            width: 36px;
            text-align: center;
        }
        .topic-word-text {
            flex: 1;
            min-width: 0;
        }
        .topic-word-en {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 1px;
        }
        .topic-word-vi {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        .topic-word-speak {
            background: rgba(46,204,113,0.12);
            border: none;
            font-size: 16px;
            padding: 6px 10px;
            border-radius: 50px;
            cursor: pointer;
        }
        .topic-word-speak:active {
            background: rgba(46,204,113,0.25);
            transform: scale(0.92);
        }

        /* ==================== GRAMMAR SCREEN (NEW v3.14) ==================== */
        .grammar-screen {
            padding: 20px 16px 110px;
            overflow-y: auto;
        }
        .grammar-header {
            text-align: center;
            margin-bottom: 16px;
        }
        .grammar-title {
            font-size: 26px;
            font-weight: 800;
            margin-bottom: 4px;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .grammar-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .grammar-subtabs {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }
        .grammar-subtab {
            flex: 1;
            padding: 10px;
            border: 1px solid var(--glass-border);
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 16px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-secondary);
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s ease;
        }
        .grammar-subtab.active {
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(46,204,113,0.3);
        }
        .grammar-body { }

        /* Bulk expand/collapse bar above the unit list */
        .grammar-units-bulk-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 4px 10px;
            margin-bottom: 4px;
        }
        .grammar-units-bulk-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary, #64748b);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .grammar-units-bulk-btn {
            background: transparent;
            border: 1px solid rgba(108,92,231,0.4);
            color: var(--accent-purple, #6c5ce7);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s;
        }
        .grammar-units-bulk-btn:hover {
            background: rgba(108,92,231,0.08);
        }

        /* Unit cards */
        .grammar-unit-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-left: 5px solid var(--unit-color, var(--accent-purple));
            border-radius: 20px;
            padding: 12px 16px;
            margin-bottom: 10px;
            box-shadow: 0 4px 16px rgba(31,80,50,0.06);
            transition: padding 0.2s ease, box-shadow 0.2s ease;
        }
        .grammar-unit-card.expanded {
            padding: 16px;
            box-shadow: 0 6px 22px rgba(31,80,50,0.10);
        }
        /* Header is now a button (clickable) — keep button defaults from
           leaking and align contents. */
        .grammar-unit-header {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            background: transparent;
            border: none;
            padding: 0;
            margin: 0 0 6px 0;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
        }
        .grammar-unit-card.expanded .grammar-unit-header {
            margin-bottom: 8px;
        }
        .grammar-unit-header:hover .grammar-unit-name {
            color: var(--accent-purple, #6c5ce7);
        }
        .grammar-unit-icon {
            font-size: 32px;
            flex-shrink: 0;
        }
        .grammar-unit-card.expanded .grammar-unit-icon {
            font-size: 36px;
        }
        .grammar-unit-text { flex: 1; min-width: 0; }
        .grammar-unit-name {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 2px;
            transition: color 0.15s;
        }
        .grammar-unit-card.expanded .grammar-unit-name {
            font-size: 16px;
        }
        .grammar-unit-desc {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
            /* When collapsed, truncate the description to one line so cards
               stay short — the user can expand to see the full text. */
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .grammar-unit-card.expanded .grammar-unit-desc {
            -webkit-line-clamp: unset;
            display: block;
            overflow: visible;
        }
        .grammar-unit-toggle {
            flex-shrink: 0;
            font-size: 13px;
            color: var(--text-secondary, #64748b);
            background: rgba(108,92,231,0.08);
            border-radius: 50%;
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background 0.15s;
        }
        .grammar-unit-card.expanded .grammar-unit-toggle {
            background: rgba(108,92,231,0.18);
            color: var(--accent-purple, #6c5ce7);
        }
        .grammar-unit-header:hover .grammar-unit-toggle {
            background: rgba(108,92,231,0.20);
            color: var(--accent-purple, #6c5ce7);
        }
        /* Animate the expanded body so the open feels smooth */
        .grammar-unit-body {
            animation: grammarUnitOpen 0.25s ease-out;
        }
        @keyframes grammarUnitOpen {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .grammar-unit-stats {
            font-size: 13px;
            color: var(--text-primary);
            background: rgba(46,204,113,0.08);
            padding: 6px 12px;
            border-radius: 10px;
            margin-bottom: 0;
        }
        .grammar-unit-card.expanded .grammar-unit-stats {
            margin-bottom: 10px;
        }
        .grammar-unit-actions {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }
        .grammar-quiz-btn {
            flex: 1;
            padding: 11px;
            border: none;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            transition: transform 0.15s ease;
            font-family: inherit;
        }
        .grammar-quiz-btn:active { transform: scale(0.96); }
        .grammar-btn-primary {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
            box-shadow: 0 4px 12px rgba(46,204,113,0.3);
        }
        .grammar-btn-secondary {
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            color: white;
            box-shadow: 0 4px 12px rgba(155,89,182,0.3);
        }
        .grammar-unit-meta {
            font-size: 11px;
            color: var(--text-secondary);
            text-align: center;
            font-weight: 600;
        }

        /* Empty state */
        .grammar-empty {
            text-align: center;
            padding: 40px 20px;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
        }
        .grammar-empty-icon { font-size: 48px; margin-bottom: 12px; }
        .grammar-empty-title { font-size: 16px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
        .grammar-empty-sub { font-size: 13px; color: var(--text-secondary); }

        /* History list */
        .grammar-history-list { display: flex; flex-direction: column; gap: 8px; }
        .grammar-history-item {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-left: 4px solid #888;
            border-radius: 14px;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: transform 0.15s ease;
        }
        .grammar-history-item:active { transform: scale(0.98); }
        .grammar-history-item.history-tier-perfect { border-left-color: #FFD60A; }
        .grammar-history-item.history-tier-great   { border-left-color: #2ecc71; }
        .grammar-history-item.history-tier-ok      { border-left-color: #1abc9c; }
        .grammar-history-item.history-tier-weak    { border-left-color: #ef5350; }
        .grammar-history-emoji { font-size: 28px; flex-shrink: 0; }
        .grammar-history-text { flex: 1; min-width: 0; }
        .grammar-history-unit {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 2px;
        }
        .grammar-history-meta {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 600;
        }
        .grammar-history-arrow {
            font-size: 22px;
            color: var(--accent-purple);
            font-weight: 800;
        }

        /* Quiz screen */
        /* Top bar: Exit on the left, Next on the right (visible only after
           the user submits an answer). Sticky to the top of the scroll
           container so the Next button stays in reach during long
           explanations. */
        .grammar-quiz-topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            position: sticky;
            top: 0;
            z-index: 50;
            padding: 6px 0;
            background: linear-gradient(180deg, var(--surface, #f8fafc) 70%, rgba(248,250,252,0));
        }
        .grammar-back-btn {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
            padding: 8px 14px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
        }
        .grammar-next-btn-top {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            border: none;
            padding: 9px 18px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            font-family: inherit;
            box-shadow: 0 4px 14px rgba(16,185,129,0.35);
            transition: transform 0.05s, box-shadow 0.15s;
            animation: nextBtnPulseIn 0.35s ease-out;
        }
        .grammar-next-btn-top:hover {
            box-shadow: 0 6px 20px rgba(16,185,129,0.45);
        }
        .grammar-next-btn-top:active {
            transform: scale(0.96);
        }
        @keyframes nextBtnPulseIn {
            0%   { transform: scale(0.6); opacity: 0; }
            60%  { transform: scale(1.08); opacity: 1; }
            100% { transform: scale(1);    opacity: 1; }
        }
        .grammar-back-btn-bottom {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
            padding: 12px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            width: 100%;
            margin-top: 16px;
        }
        .grammar-quiz-header { margin-bottom: 14px; }
        .grammar-quiz-unit {
            font-size: 13px;
            color: var(--accent-purple);
            font-weight: 800;
            margin-bottom: 4px;
        }
        .grammar-quiz-progress {
            font-size: 14px;
            color: var(--text-primary);
            font-weight: 700;
            margin-bottom: 6px;
        }
        .grammar-progress-bar {
            background: rgba(155,89,182,0.15);
            height: 6px;
            border-radius: 3px;
            overflow: hidden;
        }
        .grammar-progress-fill {
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            height: 100%;
            transition: width 0.3s ease;
        }
        .grammar-question-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 18px;
            margin-bottom: 14px;
            box-shadow: 0 4px 16px rgba(31,80,50,0.06);
        }
        .grammar-question-tag {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            color: white;
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            padding: 3px 10px;
            border-radius: 10px;
            margin-bottom: 10px;
            text-transform: capitalize;
        }
        .grammar-question-text {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 14px;
            line-height: 1.5;
        }
        .grammar-options { display: flex; flex-direction: column; gap: 8px; }
        .grammar-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            background: rgba(255,255,255,0.6);
            border: 2px solid var(--glass-border);
            border-radius: 14px;
            cursor: pointer;
            font-family: inherit;
            font-size: 14px;
            text-align: left;
            transition: all 0.15s ease;
        }
        .grammar-option:active:not(:disabled) {
            transform: scale(0.98);
            background: rgba(155,89,182,0.08);
        }
        .grammar-option:hover:not(:disabled) {
            border-color: var(--accent-purple);
            background: rgba(155,89,182,0.05);
        }
        .grammar-option:disabled { cursor: default; }
        .grammar-option.correct {
            background: rgba(46,204,113,0.15);
            border-color: #2ecc71;
        }
        .grammar-option.wrong {
            background: rgba(239,83,80,0.12);
            border-color: #ef5350;
        }
        .grammar-option-letter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--accent-purple);
            color: white;
            font-weight: 800;
            font-size: 13px;
            flex-shrink: 0;
        }
        .grammar-option.correct .grammar-option-letter { background: #2ecc71; }
        .grammar-option.wrong .grammar-option-letter { background: #ef5350; }
        .grammar-option-text { flex: 1; color: var(--text-primary); font-weight: 600; }

        /* Explanation box */
        .grammar-explanation {
            border-radius: 16px;
            padding: 14px;
            margin-bottom: 14px;
            box-shadow: 0 3px 10px rgba(31,80,50,0.06);
        }
        .grammar-explanation.correct {
            background: linear-gradient(135deg, rgba(46,204,113,0.18), rgba(46,204,113,0.06));
            border-left: 4px solid #2ecc71;
        }
        .grammar-explanation.wrong {
            background: linear-gradient(135deg, rgba(239,83,80,0.18), rgba(239,83,80,0.06));
            border-left: 4px solid #ef5350;
        }
        .grammar-explanation-header {
            font-size: 15px;
            font-weight: 800;
            margin-bottom: 6px;
            color: var(--text-primary);
        }
        .grammar-explanation-body {
            font-size: 14px;
            line-height: 1.5;
            color: var(--text-primary);
        }
        .grammar-next-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 15px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(46,204,113,0.35);
            font-family: inherit;
        }
        .grammar-next-btn:active { transform: scale(0.97); }

        /* Result screen */
        .grammar-result-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            padding: 28px 18px;
            text-align: center;
            box-shadow: 0 8px 28px rgba(31,80,50,0.08);
        }
        .grammar-result-emoji {
            font-size: 72px;
            margin-bottom: 8px;
        }
        .grammar-result-title {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 6px;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .grammar-result-score {
            font-size: 42px;
            font-weight: 900;
            color: var(--text-primary);
            margin-bottom: 0;
        }
        .grammar-result-pct {
            font-size: 16px;
            color: var(--text-secondary);
            font-weight: 700;
            margin-bottom: 10px;
        }

        /* ===== Phrases tab (prepositions) ===== */
        .phrases-wrap { padding: 4px 0 12px; }
        .phrases-hero { text-align: center; margin-bottom: 14px; }
        .phrases-hero-icon { font-size: 46px; line-height: 1; }
        .phrases-hero h1 {
            font-size: 24px; font-weight: 900; margin: 4px 0 4px;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .phrases-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; max-width: 330px; margin: 0 auto; }

        /* Primary CTA */
        .phrases-cta {
            display: flex; align-items: center; gap: 12px; width: 100%;
            border: none; cursor: pointer; text-align: left;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            color: #fff; border-radius: 18px; padding: 16px 18px; margin-bottom: 10px;
            box-shadow: 0 8px 22px rgba(155,89,182,0.28);
        }
        .phrases-cta:active { transform: scale(0.98); }
        .phrases-cta-icon { font-size: 26px; }
        .phrases-cta-text { display: flex; flex-direction: column; flex: 1; }
        .phrases-cta-text strong { font-size: 17px; font-weight: 800; }
        .phrases-cta-text small { font-size: 12px; opacity: 0.9; }
        .phrases-cta-arrow { font-size: 26px; font-weight: 700; opacity: 0.85; }
        .phrases-cta-row { display: flex; gap: 10px; margin-bottom: 16px; }
        .phrases-cta-secondary {
            flex: 1; border: 1px solid var(--glass-border); background: var(--glass-bg);
            color: var(--text-primary); font-size: 13px; font-weight: 700;
            border-radius: 12px; padding: 11px 10px; cursor: pointer;
        }
        .phrases-cta-secondary:active { transform: scale(0.98); }
        .phrases-review-btn { width: 100%; margin-top: 10px; }

        /* Categories (collapsible) */
        .phrases-cats-wrap { margin-bottom: 16px; }
        .phrases-cats-wrap > summary {
            list-style: none; cursor: pointer; font-size: 13px; font-weight: 700;
            color: var(--text-secondary); padding: 4px 2px;
        }
        .phrases-cats-wrap > summary::-webkit-details-marker { display: none; }
        .phrases-cats-wrap > summary::after { content: ' ▾'; }
        .phrases-cats-wrap[open] > summary::after { content: ' ▴'; }
        .phrases-cats {
            background: var(--glass-bg); border: 1px solid var(--glass-border);
            border-radius: 16px; padding: 4px 14px; margin-top: 8px;
        }
        .phrases-cat-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 9px 0; font-size: 14px; color: var(--text-primary);
            border-bottom: 1px solid var(--glass-border);
        }
        .phrases-cat-row:last-child { border-bottom: none; }
        .phrases-cat-row strong { color: var(--accent-purple); font-weight: 800; }

        .phrases-blank { color: var(--accent-purple); font-weight: 900; letter-spacing: 1px; }
        .phrases-vi { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; }
        .phrases-pct { color: var(--text-secondary); font-weight: 600; }
        .phrases-quiz-header { display: flex; align-items: center; gap: 10px; }
        .phrases-quiz-header .grammar-progress-bar { flex: 1; }

        /* Section titles + counts */
        .phrases-section-title {
            font-size: 15px; font-weight: 800; color: var(--text-primary);
            margin: 18px 0 10px; display: flex; align-items: center; gap: 8px;
        }
        .phrases-count {
            font-size: 12px; font-weight: 800; color: var(--accent-purple);
            background: rgba(155,89,182,0.12); border-radius: 10px; padding: 1px 8px;
        }
        .phrases-empty {
            font-size: 13px; color: var(--text-secondary); text-align: center;
            padding: 18px 12px; background: var(--glass-bg);
            border: 1px dashed var(--glass-border); border-radius: 14px;
        }

        /* Words to review */
        .phrases-review-words {
            background: var(--glass-bg); border: 1px solid var(--glass-border);
            border-radius: 16px; padding: 12px 14px; margin-top: 18px;
        }
        .phrases-review-words .phrases-section-title { margin-top: 0; }
        .phrases-word-chips { display: flex; flex-wrap: wrap; gap: 7px; }
        .phrases-word-chip {
            font-size: 12.5px; font-weight: 700; color: var(--text-primary);
            background: rgba(231,76,60,0.10); border: 1px solid rgba(231,76,60,0.25);
            border-radius: 999px; padding: 4px 10px;
        }
        .phrases-word-chip i { font-style: normal; color: #e74c3c; font-weight: 800; margin-left: 5px; font-size: 11px; }

        /* Session review */
        .phrases-review-line { font-size: 12.5px; color: var(--text-secondary); margin: 4px 0 6px; }
        .phrases-review-line s { color: #e74c3c; }
        .phrases-review-line b { color: #2ecc71; }

        /* Lessons tab — searchable study list */
        .phrases-search-wrap { position: sticky; top: 0; z-index: 5; padding: 2px 0 8px; background: var(--bg-gradient, transparent); }
        .phrases-search {
            width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px;
            color: var(--text-primary); background: var(--glass-bg);
            border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 14px;
        }
        .phrases-search:focus { outline: none; border-color: var(--accent-purple); }
        .phrases-search-count { font-size: 11.5px; color: var(--text-secondary); font-weight: 700; margin: 6px 2px 0; }
        .phrases-lesson-group { margin-bottom: 4px; }
        .phrases-lesson {
            background: var(--glass-bg); border: 1px solid var(--glass-border);
            border-radius: 14px; padding: 11px 14px; margin-bottom: 8px;
        }
        .phrases-lesson-term { font-size: 15px; font-weight: 800; color: var(--accent-purple); }
        .phrases-lesson-vi { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 3px 0 5px; line-height: 1.4; }
        .phrases-lesson-ex { font-size: 13px; color: var(--text-secondary); font-style: italic; line-height: 1.45; }
        .grammar-result-unit {
            font-size: 13px;
            color: var(--text-primary);
            font-weight: 700;
            margin-bottom: 6px;
        }
        .grammar-result-coins {
            font-size: 13px;
            color: #b8860b;
            font-weight: 700;
            margin-bottom: 18px;
        }
        .grammar-result-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .grammar-result-date {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .grammar-result-header {
            text-align: center;
            margin-bottom: 16px;
            padding: 18px;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
        }
        .grammar-result-header h2 {
            font-size: 16px;
            margin-bottom: 6px;
        }

        /* Review list */
        .grammar-review-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .grammar-review-item {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 14px;
            border-left: 4px solid #888;
        }
        .grammar-review-item.correct { border-left-color: #2ecc71; }
        .grammar-review-item.wrong { border-left-color: #ef5350; }
        .grammar-review-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        .grammar-review-num { font-weight: 800; color: var(--text-primary); }
        .grammar-review-status { font-weight: 700; }
        .grammar-review-item.correct .grammar-review-status { color: #1e8449; }
        .grammar-review-item.wrong .grammar-review-status   { color: #c0392b; }
        .grammar-review-tag {
            background: rgba(155,89,182,0.12);
            color: var(--accent-purple);
            padding: 2px 8px;
            border-radius: 8px;
            font-weight: 700;
            text-transform: capitalize;
        }
        .grammar-review-q {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
            line-height: 1.4;
        }
        .grammar-review-answers { margin-bottom: 8px; }
        .grammar-review-line {
            font-size: 13px;
            padding: 6px 10px;
            border-radius: 8px;
            margin-bottom: 4px;
        }
        .grammar-review-line.line-correct { background: rgba(46,204,113,0.12); color: #1e8449; }
        .grammar-review-line.line-wrong   { background: rgba(239,83,80,0.10); color: #c0392b; }
        .grammar-review-explain {
            font-size: 13px;
            line-height: 1.5;
            color: var(--text-primary);
            background: rgba(155,89,182,0.08);
            padding: 10px 12px;
            border-radius: 10px;
        }
        .grammar-page-ref {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 6px;
            padding: 6px 10px;
            background: rgba(58,134,255,0.10);
            border-left: 3px solid #3a86ff;
            border-radius: 6px;
            font-style: italic;
        }

        /* ========== GRAMMAR TIP (v3.40 — Vietnamese mnemonic) ========== */
        .grammar-tip {
            margin-top: 10px;
            padding: 12px;
            background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(249,115,22,0.08));
            border-left: 4px solid #fbbf24;
            border-radius: 10px;
            color: #1f2937;
        }
        .grammar-tip-title {
            font-size: 14px;
            font-weight: 800;
            margin-bottom: 8px;
            color: #92400e;
        }
        .grammar-tip-body { font-size: 13px; line-height: 1.5; }
        .grammar-tip .tip-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 8px;
        }
        .grammar-tip .tip-row:last-child { margin-bottom: 0; }
        .grammar-tip .tip-tag {
            flex-shrink: 0;
            display: inline-block;
            min-width: 44px;
            text-align: center;
            font-size: 12px;
            font-weight: 800;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            padding: 3px 6px;
            border-radius: 6px;
            color: white;
            line-height: 1.25;
        }
        .grammar-tip .tip-tag-iz { background: linear-gradient(135deg, #f97316, #ea580c); }
        .grammar-tip .tip-tag-s  { background: linear-gradient(135deg, #6c5ce7, #4c1d95); }
        .grammar-tip .tip-tag-z  { background: linear-gradient(135deg, #10b981, #059669); }
        .grammar-tip em {
            font-style: normal;
            font-weight: 700;
            color: #b45309;
            padding: 0 4px;
            background: rgba(251,191,36,0.20);
            border-radius: 4px;
        }
        .grammar-tip strong { color: #1e293b; }
        .grammar-tip .tip-eg {
            display: block;
            font-size: 12px;
            color: #475569;
            font-style: italic;
            margin-top: 2px;
        }

        /* ========== LESSONS SUB-TAB (theory notes) ========== */
        .grammar-lessons-intro {
            display: flex;
            gap: 12px;
            align-items: center;
            background: linear-gradient(135deg, rgba(58,134,255,0.10), rgba(167,139,250,0.10));
            border: 1px solid rgba(58,134,255,0.25);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 16px;
        }
        .grammar-lessons-intro-icon {
            font-size: 32px;
            flex-shrink: 0;
        }
        .grammar-lessons-intro-text {
            font-size: 14px;
            line-height: 1.45;
            color: #475569;
        }
        .grammar-lessons-intro-text strong {
            color: #1e293b;
        }
        .lesson-unit-group {
            background: white;
            border: 1px solid #e5e7eb;
            border-left: 5px solid #3a86ff;
            border-radius: 14px;
            padding: 10px 14px;
            margin-bottom: 10px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.04);
            transition: padding 0.2s ease, box-shadow 0.2s ease;
        }
        .lesson-unit-group.expanded {
            padding: 14px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.07);
        }
        /* Header is now a button (clickable to toggle). Reset button styles. */
        .lesson-unit-header {
            display: flex;
            gap: 8px;
            align-items: center;
            width: 100%;
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
        }
        .lesson-unit-group.expanded .lesson-unit-header {
            margin-bottom: 4px;
        }
        .lesson-unit-header:hover .lesson-unit-title {
            color: #6c5ce7;
        }
        .lesson-unit-icon {
            font-size: 22px;
            flex-shrink: 0;
        }
        .lesson-unit-title {
            flex: 1;
            font-size: 15px;
            font-weight: 700;
            color: #1e293b;
            transition: color 0.15s;
        }
        .lesson-unit-group.expanded .lesson-unit-title {
            font-size: 17px;
        }
        .lesson-unit-count {
            flex-shrink: 0;
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            background: rgba(108,92,231,0.08);
            padding: 2px 8px;
            border-radius: 8px;
            white-space: nowrap;
        }
        .lesson-unit-toggle {
            flex-shrink: 0;
            font-size: 13px;
            color: #64748b;
            background: rgba(108,92,231,0.08);
            border-radius: 50%;
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s, color 0.15s;
        }
        .lesson-unit-group.expanded .lesson-unit-toggle {
            background: rgba(108,92,231,0.18);
            color: #6c5ce7;
        }
        .lesson-unit-header:hover .lesson-unit-toggle {
            background: rgba(108,92,231,0.20);
            color: #6c5ce7;
        }
        .lesson-unit-body {
            animation: lessonUnitOpen 0.25s ease-out;
            margin-top: 8px;
        }
        @keyframes lessonUnitOpen {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .lesson-unit-intro {
            font-size: 13px;
            color: #64748b;
            margin-bottom: 12px;
            line-height: 1.4;
        }
        .lesson-unit-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .lesson-ican-block {
            background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(217,119,6,0.10));
            border: 1px solid rgba(245,158,11,0.30);
            border-radius: 10px;
            padding: 10px 12px;
            margin-bottom: 12px;
        }
        .lesson-ican-summary {
            font-size: 13px;
            font-weight: 700;
            color: #92400e;
            cursor: pointer;
            list-style: none;
            user-select: none;
        }
        .lesson-ican-summary::-webkit-details-marker {
            display: none;
        }
        .lesson-ican-summary::before {
            content: '▸ ';
            display: inline-block;
            transition: transform 0.15s;
        }
        .lesson-ican-block[open] .lesson-ican-summary::before {
            content: '▾ ';
        }
        .lesson-ican-list {
            margin: 8px 0 0 0;
            padding-left: 22px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .lesson-ican-item {
            font-size: 13px;
            color: #78350f;
            line-height: 1.5;
        }
        .lesson-item {
            display: flex;
            flex-direction: column;
            gap: 6px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 10px 12px;
            text-align: left;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, transform 0.05s;
        }
        .lesson-item:hover {
            background: #eef2ff;
            border-color: #c7d2fe;
        }
        .lesson-item:active {
            transform: scale(0.98);
        }
        .lesson-item-head {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .lesson-item-id {
            background: #3a86ff;
            color: white;
            font-size: 12px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 999px;
            flex-shrink: 0;
        }
        .lesson-item-title {
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
            flex: 1;
        }
        .lesson-item-page {
            font-size: 11px;
            color: #94a3b8;
            font-weight: 500;
            flex-shrink: 0;
        }
        .lesson-item-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .lesson-item-tag {
            font-size: 11px;
            background: rgba(58,134,255,0.10);
            color: #1e40af;
            padding: 2px 7px;
            border-radius: 999px;
            font-weight: 500;
        }

        /* Lesson detail view */
        .lesson-detail {
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding-bottom: 24px;
        }
        /* Top bar: [← All] + sibling-lesson chips */
        .lesson-detail-topbar {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .lesson-detail-topbar::-webkit-scrollbar { display: none; }
        .lesson-back-btn {
            flex-shrink: 0;
            background: transparent;
            border: 1px solid #cbd5e1;
            color: #475569;
            font-size: 13px;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .lesson-back-btn:hover {
            background: #f1f5f9;
        }
        .lesson-sibling-chips {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }
        .lesson-sibling-chip {
            min-width: 38px;
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid #cbd5e1;
            background: white;
            color: #475569;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
            font-family: inherit;
        }
        .lesson-sibling-chip:hover:not(.active) {
            background: #eef2ff;
            border-color: #c7d2fe;
            color: #3730a3;
        }
        .lesson-sibling-chip:active:not(.active) {
            transform: scale(0.94);
        }
        .lesson-sibling-chip.active {
            background: linear-gradient(135deg, #3a86ff, #6c5ce7);
            color: white;
            border-color: transparent;
            cursor: default;
            box-shadow: 0 2px 8px rgba(58,134,255,0.35);
        }
        .lesson-detail-header {
            background: linear-gradient(135deg, #3a86ff, #6c5ce7);
            color: white;
            border-radius: 14px;
            padding: 18px;
            text-align: center;
        }
        .lesson-detail-id {
            display: inline-block;
            background: rgba(255,255,255,0.25);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.5px;
            padding: 3px 10px;
            border-radius: 999px;
            margin-bottom: 8px;
        }
        .lesson-detail-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        .lesson-detail-meta {
            font-size: 12px;
            opacity: 0.9;
        }
        .lesson-section {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .lesson-section-vocab {
            border-left: 4px solid #10b981;
        }
        .lesson-section-pron {
            border-left: 4px solid #f59e0b;
        }
        .lesson-section-grammar {
            border-left: 4px solid #6c5ce7;
        }
        .lesson-section-head {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-bottom: 10px;
        }
        .lesson-section-icon {
            font-size: 18px;
        }
        .lesson-section-title {
            font-size: 15px;
            font-weight: 700;
            color: #1e293b;
        }
        .lesson-section-rule {
            font-size: 14px;
            color: #334155;
            line-height: 1.55;
            margin-bottom: 10px;
        }
        .lesson-section-note {
            margin-top: 10px;
            background: rgba(245,158,11,0.10);
            border-left: 3px solid #f59e0b;
            padding: 8px 10px;
            font-size: 13px;
            color: #78350f;
            border-radius: 6px;
            line-height: 1.45;
        }
        .lesson-word-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .lesson-word-chip {
            font-size: 13px;
            font-weight: 500;
            background: #ecfdf5;
            color: #065f46;
            border: 1px solid #a7f3d0;
            padding: 4px 10px;
            border-radius: 999px;
        }
        .lesson-form-table {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 12px;
            background: #faf5ff;
            border-radius: 8px;
            padding: 10px;
        }
        .lesson-form-row {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            font-size: 13.5px;
        }
        .lesson-form-label {
            background: #6c5ce7;
            color: white;
            font-weight: 700;
            min-width: 28px;
            text-align: center;
            padding: 2px 6px;
            border-radius: 6px;
            font-size: 12px;
            flex-shrink: 0;
        }
        .lesson-form-text {
            color: #1e293b;
            line-height: 1.5;
            flex: 1;
        }
        .lesson-example-list {
            margin: 0;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .lesson-example-list li {
            font-size: 13.5px;
            color: #334155;
            line-height: 1.5;
        }
        .lesson-practice-btn {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(16,185,129,0.3);
            transition: transform 0.05s, box-shadow 0.15s;
        }
        .lesson-practice-btn:hover {
            box-shadow: 0 6px 18px rgba(16,185,129,0.4);
        }
        .lesson-practice-btn:active {
            transform: scale(0.98);
        }
        .lesson-practice-none {
            text-align: center;
            color: #94a3b8;
            font-size: 13px;
            padding: 16px;
            background: #f8fafc;
            border-radius: 10px;
            border: 1px dashed #cbd5e1;
        }

        /* ========== MISTAKE BANK CARD (T1.2) ========== */
        .grammar-mistakes-card {
            background: linear-gradient(135deg, rgba(239,71,111,0.10), rgba(255,159,28,0.10));
            border: 1px solid rgba(239,71,111,0.25);
            border-left: 4px solid #ef476f;
            border-radius: 16px;
            padding: 14px;
            margin-bottom: 14px;
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto auto;
            gap: 4px 12px;
            align-items: center;
        }
        .grammar-mistakes-icon {
            font-size: 36px;
            grid-row: span 2;
        }
        .grammar-mistakes-text { min-width: 0; }
        .grammar-mistakes-title {
            font-size: 16px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .grammar-mistakes-sub {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 2px;
        }
        .grammar-mistakes-bookmark {
            color: #ff9f1c;
            font-weight: 700;
        }
        .grammar-mistakes-actions {
            grid-column: 1 / -1;
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        .grammar-mistakes-empty-cta {
            font-size: 12px;
            color: var(--text-secondary);
            font-style: italic;
            padding: 8px 0;
        }

        /* ========== AGGREGATE STATS BANNER (T2.6) ========== */
        .grammar-stats-banner {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 6px;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 14px;
            padding: 10px 8px;
            margin-bottom: 12px;
        }
        .stats-cell {
            text-align: center;
            padding: 4px;
        }
        .stats-num {
            font-size: 18px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .stats-lbl {
            font-size: 9px;
            color: var(--text-secondary);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 2px;
        }
        .stats-cell.weak-cell .stats-num {
            color: #c0392b;
        }

        /* ========== WEAK TOPICS (T1.3) ========== */
        .grammar-weak-topics {
            background: rgba(239,71,111,0.06);
            border: 1px solid rgba(239,71,111,0.18);
            border-radius: 14px;
            padding: 10px;
            margin-bottom: 12px;
        }
        .grammar-weak-topics-title {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .grammar-weak-topic {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            background: rgba(255,255,255,0.5);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
            margin-bottom: 6px;
            cursor: pointer;
            transition: transform 0.15s ease;
        }
        .grammar-weak-topic:active { transform: scale(0.98); }
        .grammar-weak-topic:last-child { margin-bottom: 0; }
        .weak-topic-icon { font-size: 18px; }
        .weak-topic-name {
            flex: 1;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .weak-topic-misses {
            font-size: 11px;
            font-weight: 700;
            color: #c0392b;
            background: rgba(239,83,80,0.12);
            padding: 2px 8px;
            border-radius: 10px;
        }
        .weak-topic-arrow {
            font-size: 12px;
            color: var(--accent-purple);
        }

        /* ========== FILTER CHIPS (T2.7-8) ========== */
        .grammar-filters {
            margin-bottom: 12px;
        }
        .grammar-filter-row {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            padding-bottom: 4px;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 6px;
        }
        .filter-chip {
            flex-shrink: 0;
            padding: 6px 12px;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 18px;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
            font-family: inherit;
            transition: all 0.15s ease;
        }
        .filter-chip.active {
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            color: white;
            border-color: transparent;
            box-shadow: 0 2px 8px rgba(46,204,113,0.3);
        }

        /* ========== TIME-BUCKET LABELS (T2.9) ========== */
        .grammar-bucket-label {
            font-size: 12px;
            font-weight: 800;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.7px;
            margin: 14px 4px 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .grammar-bucket-label .bucket-count {
            background: rgba(155,89,182,0.15);
            color: var(--accent-purple);
            padding: 1px 8px;
            border-radius: 10px;
            font-size: 11px;
        }

        /* ========== BOOKMARK BUTTON (T1.5) ========== */
        .grammar-bookmark-btn {
            margin-left: auto;
            background: transparent;
            border: none;
            font-size: 18px;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 6px;
            font-family: inherit;
            transition: transform 0.15s ease;
        }
        .grammar-bookmark-btn:active { transform: scale(0.85); }
        .grammar-bookmark-btn.bookmarked {
            color: #ff9f1c;
            text-shadow: 0 1px 4px rgba(255,159,28,0.4);
        }

        /* ========== RE-PRACTICE BUTTON (T1.4) ========== */
        .grammar-result-actions {
            margin-bottom: 12px;
        }

        /* ==================== ARRANGEMENT TILES (NEW v3.14.2) ==================== */
        .arr-answer-zone {
            min-height: 64px;
            background: linear-gradient(135deg, rgba(46,204,113,0.06), rgba(155,89,182,0.06));
            border: 2px dashed rgba(155,89,182,0.35);
            border-radius: 14px;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            margin-bottom: 14px;
        }
        .arr-pool-label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 700;
            margin-bottom: 6px;
        }
        .arr-pool-zone {
            min-height: 50px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px;
            background: rgba(255,255,255,0.4);
            border-radius: 12px;
            border: 1px solid var(--glass-border);
        }
        .arr-tile {
            display: inline-block;
            padding: 9px 14px;
            border-radius: 12px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.12s ease, box-shadow 0.15s ease;
            border: 2px solid transparent;
            white-space: nowrap;
        }
        .arr-tile:active:not(:disabled) {
            transform: scale(0.94);
        }
        .arr-tile-pool {
            background: linear-gradient(135deg, #ffffff, #f5eaff);
            color: var(--text-primary);
            border-color: rgba(155,89,182,0.3);
            box-shadow: 0 2px 6px rgba(155,89,182,0.15);
        }
        .arr-tile-pool:hover:not(:disabled) {
            border-color: var(--accent-purple);
            box-shadow: 0 3px 12px rgba(155,89,182,0.25);
        }
        .arr-tile-answer {
            background: linear-gradient(135deg, rgba(46,204,113,0.18), rgba(46,204,113,0.08));
            color: var(--text-primary);
            border-color: rgba(46,204,113,0.35);
            box-shadow: 0 2px 6px rgba(46,204,113,0.12);
        }
        .arr-tile-answer.correct {
            background: linear-gradient(135deg, rgba(46,204,113,0.3), rgba(46,204,113,0.15));
            border-color: #2ecc71;
        }
        .arr-tile-answer.wrong {
            background: linear-gradient(135deg, rgba(239,83,80,0.25), rgba(239,83,80,0.1));
            border-color: #ef5350;
        }
        .arr-placeholder {
            color: var(--text-secondary);
            font-size: 13px;
            font-style: italic;
            opacity: 0.7;
            padding: 6px 10px;
        }
        .arr-controls {
            display: flex;
            gap: 8px;
        }
        .arr-clear-btn {
            padding: 12px 20px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-primary);
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
        }
        .arr-clear-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .arr-submit-btn {
            flex: 1;
            padding: 12px 20px;
            background: linear-gradient(135deg, #2ecc71, #9b59b6);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(46,204,113,0.35);
            font-family: inherit;
        }
        .arr-submit-btn:disabled {
            background: var(--glass-bg);
            color: var(--text-secondary);
            box-shadow: none;
            cursor: not-allowed;
        }
        .arr-correct-sentence {
            font-style: italic;
            font-size: 14px;
            color: #1e8449;
            background: rgba(46,204,113,0.12);
            padding: 8px 12px;
            border-radius: 10px;
            margin: 8px 0;
        }
        .topic-word-level {
            font-size: 11px;
            opacity: 0.7;
            margin-left: 4px;
        }

        /* Lesson chunk cards (sorted easy→hard) */
        .topic-lessons-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 18px;
        }
        .topic-lesson-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-left: 4px solid var(--topic-color, var(--accent-purple));
            border-radius: 16px;
            padding: 14px;
            box-shadow: 0 3px 12px rgba(31,80,50,0.06);
        }
        .topic-lesson-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }
        .topic-lesson-card-num {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .topic-lesson-card-diff {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-secondary);
            background: rgba(155,89,182,0.1);
            padding: 3px 9px;
            border-radius: 12px;
        }
        .topic-lesson-card-preview {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
            margin-bottom: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .topic-lesson-start-btn {
            width: 100%;
            padding: 10px;
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(46,204,113,0.3);
            transition: transform 0.15s ease;
            font-family: inherit;
        }
        .topic-lesson-start-btn:active { transform: scale(0.96); }

        /* ==================== TOPICS REVIEW CARD ==================== */
        .topics-review-card {
            margin-bottom: 14px;
        }
        .topics-review-btn {
            width: 100%;
            background: linear-gradient(135deg, rgba(155,89,182,0.15), rgba(46,204,113,0.15));
            border: 1px solid var(--glass-border);
            border-left: 4px solid var(--accent-purple);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 18px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(155,89,182,0.12);
            transition: transform 0.15s ease;
            font-family: inherit;
            text-align: left;
        }
        .topics-review-btn:active { transform: scale(0.98); }
        .review-btn-icon {
            font-size: 32px;
            flex-shrink: 0;
        }
        .review-btn-text {
            flex: 1;
            min-width: 0;
        }
        .review-btn-title {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .review-btn-sub {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 2px;
            font-weight: 600;
        }
        .review-btn-arrow {
            font-size: 24px;
            color: var(--accent-purple);
            font-weight: 800;
        }
        .topics-review-empty {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 18px;
        }
        .review-empty-icon {
            font-size: 26px;
        }
        .review-empty-title {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .review-empty-sub {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 2px;
        }
        .review-mistakes-badge {
            background: rgba(239,71,111,0.15) !important;
            color: #c0392b !important;
        }
        .review-wrong-count {
            color: #c0392b;
            font-weight: 700;
        }
        .review-lesson-chunk {
            border-left-color: var(--accent-purple) !important;
        }
        .review-clear-all-btn {
            width: 100%;
            margin-top: 16px;
            padding: 12px;
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 50px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
        }