/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
    --bg-primary: #0f1117;
    --bg-secondary: #161822;
    --bg-surface: #1e2030;
    --bg-card: #242738;
    --accent: #6c5ce7;
    --accent-hover: #7f71f0;
    --accent-glow: rgba(108, 92, 231, 0.25);
    --accent-2: #00cec9;
    --text-primary: #f0f0f5;
    --text-secondary: #9ca0b0;
    --text-muted: #5f6380;
    --border: #2d3048;
    --msg-user: #2d3048;
    --msg-assistant: #1a1d2e;
    --success: #00b894;
    --error: #e17055;
    --warning: #fdcb6e;
    --radius: 12px;
    --radius-lg: 16px;
    --font: "Segoe UI", system-ui, -apple-system, sans-serif;
    --shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* ── Light theme ──────────────────────────────────────────────────────── */
[data-theme="light"] {
    --bg-primary: #f5f6fa;
    --bg-secondary: #ffffff;
    --bg-surface: #eef0f6;
    --bg-card: #ffffff;
    --accent: #6c5ce7;
    --accent-hover: #5a4bd6;
    --accent-glow: rgba(108, 92, 231, 0.15);
    --accent-2: #00a89d;
    --text-primary: #1a1a2e;
    --text-secondary: #555770;
    --text-muted: #8e90a6;
    --border: #d8dbe6;
    --msg-user: #e4e6f0;
    --msg-assistant: #f0f1f8;
    --success: #00a878;
    --error: #d63031;
    --warning: #e17000;
    --shadow: 0 4px 24px rgba(0,0,0,0.08);
}
[data-theme="light"] .coin { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
[data-theme="light"] .bill { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

/* ── Light theme element overrides — fix readability ───────────────── */
[data-theme="light"] #welcome-screen,
[data-theme="light"] #auth-screen {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108, 92, 231, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(0, 168, 157, 0.08) 0%, transparent 50%),
        linear-gradient(160deg, var(--bg-primary) 0%, #ffffff 40%, var(--bg-secondary) 100%);
}
[data-theme="light"] #welcome-screen::before { opacity: 0.6; }
[data-theme="light"] .welcome-title {
    background: linear-gradient(135deg, var(--accent) 0%, #5a4bd6 50%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 2px 6px rgba(108, 92, 231, 0.18));
}
[data-theme="light"] .welcome-sub { color: var(--text-secondary); }

[data-theme="light"] .picker-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
[data-theme="light"] .pick-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
[data-theme="light"] .pick-card:hover {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 6px 18px rgba(108, 92, 231, 0.15), 0 0 0 1px rgba(108, 92, 231, 0.2);
}
[data-theme="light"] .pick-card.active {
    background: rgba(108, 92, 231, 0.08);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 4px 12px rgba(108, 92, 231, 0.15);
}
[data-theme="light"] .pick-desc { color: var(--text-secondary); }

/* Auth card on light */
[data-theme="light"] .auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
[data-theme="light"] .auth-field input,
[data-theme="light"] .auth-password-wrap input {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
[data-theme="light"] .auth-field input::placeholder { color: var(--text-muted); }

/* Buttons */
[data-theme="light"] .pill-btn.ghost {
    border: 1px solid var(--border);
    color: var(--text-secondary);
    background: var(--bg-card);
}
[data-theme="light"] .pill-btn.ghost:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}
[data-theme="light"] .btn-start { color: #fff; }

/* Settings panel + tiles */
[data-theme="light"] .settings-panel,
[data-theme="light"] .settings-tile,
[data-theme="light"] .settings-overlay > .settings-panel {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .settings-tab { color: var(--text-secondary); }
[data-theme="light"] .settings-tab.active { color: var(--accent); }
[data-theme="light"] .settings-body input,
[data-theme="light"] .settings-body select,
[data-theme="light"] .security-form input,
[data-theme="light"] .su-search-input,
[data-theme="light"] .su-role-select {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

/* Dashboard / topic cards */
[data-theme="light"] .topic-card,
[data-theme="light"] .tc-card,
[data-theme="light"] .problem-card,
[data-theme="light"] .su-user-row,
[data-theme="light"] .results-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="light"] .topic-card:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(108, 92, 231, 0.15);
}

/* Chat drawer + messages */
[data-theme="light"] .chat-drawer {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .chat-msg.user { background: var(--msg-user); color: var(--text-primary); }
[data-theme="light"] .chat-msg.assistant { background: var(--msg-assistant); color: var(--text-primary); }
[data-theme="light"] #chat-input {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

/* Choice / answer buttons */
[data-theme="light"] .choice-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
[data-theme="light"] .choice-btn:hover:not(.correct):not(.wrong):not(.disabled) {
    border-color: var(--accent);
    background: var(--bg-surface);
}

/* Splash on light */
[data-theme="light"] .splash-loader {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108, 92, 231, 0.10) 0%, transparent 60%),
        linear-gradient(160deg, var(--bg-primary) 0%, #fff 40%, var(--bg-secondary) 100%);
}

/* ── Accessibility ────────────────────────────────────────────────────── */
.a11y-high-contrast {
    --bg-primary: #000;
    --bg-secondary: #111;
    --bg-surface: #1a1a1a;
    --bg-card: #222;
    --text-primary: #fff;
    --text-secondary: #ddd;
    --text-muted: #aaa;
    --border: #555;
    --accent: #9b8aff;
    --accent-2: #00ffea;
    --success: #00ff88;
    --error: #ff5555;
}
[data-theme="light"].a11y-high-contrast {
    --bg-primary: #fff;
    --bg-secondary: #fff;
    --bg-surface: #f0f0f0;
    --bg-card: #fff;
    --text-primary: #000;
    --text-secondary: #222;
    --text-muted: #444;
    --border: #000;
    --accent: #4a30d9;
    --success: #006644;
    --error: #cc0000;
}
.a11y-large-fonts { font-size: 120% !important; }
.a11y-large-fonts .problem-question { font-size: 1.4rem !important; }
.a11y-large-fonts .choice-btn { font-size: 1.1rem !important; padding: 14px 18px !important; }
.a11y-large-fonts .chat-msg { font-size: 1rem !important; }
.a11y-dyslexia, .a11y-dyslexia * {
    font-family: "OpenDyslexic", "Comic Sans MS", "Segoe UI", system-ui, sans-serif !important;
}
.a11y-reduce-motion, .a11y-reduce-motion * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    /* v0.16.61 — fluid root font: 16px on phones → 18px on iPad → 20px on desktop.
       Every rem-based size in the app scales with this automatically. */
    font-size: clamp(16px, calc(14px + 0.45vw), 20px);
}
html, body {
    height: 100%;
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    /* Safe-area padding for notched phones */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Bigger tap targets on coarse-pointer (touch) devices */
@media (pointer: coarse) {
    .choice-btn { min-height: 56px; font-size: 1.02rem; padding: 18px 14px; }
    .action-pill-icon, .action-pill-ask { min-height: 44px; min-width: 44px; }
    .pill-btn { min-height: 44px; }
    .tc-pill  { min-height: 40px; }
}
.hidden { display: none !important; }

/* ── SVG Icon base ────────────────────────────────────────────────────── */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Splash loader during auth check */
.splash-loader {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108, 92, 231, 0.12) 0%, transparent 60%),
        linear-gradient(160deg, var(--bg-primary) 0%, #0d0f1a 40%, var(--bg-secondary) 100%);
}
.splash-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── App container ────────────────────────────────────────────────────── */
#app { height: 100vh; height: 100dvh; overflow: hidden; position: relative; }

/* ═══════════════════════════════════════════════════════════════════════ *
 *  AUTH SCREEN                                                            *
 * ═══════════════════════════════════════════════════════════════════════ */
#auth-screen {
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108, 92, 231, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(0, 206, 201, 0.08) 0%, transparent 50%),
        linear-gradient(160deg, var(--bg-primary) 0%, #0d0f1a 40%, var(--bg-secondary) 100%);
    overflow-y: auto;
    padding: 32px 16px;
}
#auth-screen .welcome-inner {
    animation: welcomeFadeUp 0.5s ease both;
}
.auth-card {
    width: 100%;
    max-width: min(94vw, 440px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.auth-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 3px;
}
.auth-tab {
    flex: 1;
    padding: 9px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-tab.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 12px rgba(108, 92, 231, 0.35);
}
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-field { display: flex; flex-direction: column; gap: 4px; }
.auth-field label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.auth-field input {
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 16px; /* ≥16px prevents iOS auto-zoom */
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-field input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
}
.auth-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-password-wrap input {
    flex: 1;
    padding-right: 40px;
}
.auth-show-pw {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    opacity: 0.5;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, color 0.15s;
}
.auth-show-pw:hover { opacity: 0.8; }
.auth-show-pw.active { opacity: 1; color: var(--accent); }
.auth-error {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(225, 112, 85, 0.15);
    color: var(--error);
    font-size: 0.82rem;
}

.auth-suggestion-btn {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-surface);
    border: none;
    color: var(--accent);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.auth-suggestion-btn:hover {
    background: rgba(108, 92, 231, 0.1);
}

.auth-guest-btn {
    width: 100%;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-guest-btn:hover {
    border-color: rgba(108, 92, 231, 0.4);
    color: var(--text-primary);
    box-shadow: 0 2px 12px rgba(108, 92, 231, 0.1);
}

/* Setup banner (first-run) */
.setup-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.25);
    margin-bottom: 8px;
    max-width: 380px;
    text-align: left;
}
.setup-banner-icon { flex-shrink: 0; margin-top: 2px; color: var(--accent); display: flex; }
.setup-banner strong { color: var(--accent); display: block; margin-bottom: 4px; font-size: 0.9rem; }
.setup-banner p { margin: 0; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════ *
 *  USER MENU (welcome screen top-right)                                   *
 * ═══════════════════════════════════════════════════════════════════════ */
.user-menu {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 110;
}
.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-menu-btn:hover {
    border-color: rgba(108, 92, 231, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(108, 92, 231, 0.15);
}
.user-menu-chevron { font-size: 0.7rem; opacity: 0.5; }

/* Avatar circle */
.user-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
    flex-shrink: 0;
}
.user-avatar-sm {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    flex-shrink: 0;
}

/* Dropdown */
.user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: rgba(30, 32, 48, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: cardIn 0.15s ease;
}
.user-dropdown-header {
    padding: 12px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dropdown-name { font-weight: 600; font-size: 0.88rem; }
.dropdown-role {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.dropdown-item:hover { background: rgba(255,255,255,0.04); }
.dropdown-item-danger { color: var(--error); }
.dropdown-item-danger:hover { background: rgba(225, 112, 85, 0.08); }
/* v0.16.69 — Version row shows the version on the right */
#dropdown-version { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dropdown-version-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-glow, rgba(108,92,231,0.12));
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

/* Header user button (dashboard/problem) */
.header-user-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    margin-left: 8px;
    border-radius: 50%;
    transition: box-shadow 0.15s;
}
.header-user-btn:hover { box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3); }

/* ═══════════════════════════════════════════════════════════════════════ *
 *  WELCOME SCREEN                                                        *
 * ═══════════════════════════════════════════════════════════════════════ */
#welcome-screen {
    /* v0.16.67 — restore fixed-height scroll container so the page is
       actually scrollable on mobile. align-items: flex-start (was: center)
       prevents the title from being clipped above the scroll origin. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108, 92, 231, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(0, 206, 201, 0.08) 0%, transparent 50%),
        linear-gradient(160deg, var(--bg-primary) 0%, #0d0f1a 40%, var(--bg-secondary) 100%);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(28px, 5vh, 64px) 16px clamp(48px, 8vh, 96px);
    position: relative;
}
/* subtle floating particle dots */
#welcome-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(108, 92, 231, 0.3) 50%, transparent 50%),
        radial-gradient(1px 1px at 70% 15%, rgba(0, 206, 201, 0.25) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 85% 65%, rgba(108, 92, 231, 0.2) 50%, transparent 50%),
        radial-gradient(1px 1px at 40% 80%, rgba(0, 206, 201, 0.2) 50%, transparent 50%),
        radial-gradient(1px 1px at 10% 70%, rgba(108, 92, 231, 0.15) 50%, transparent 50%);
    pointer-events: none;
    animation: welcomeDrift 20s ease-in-out infinite alternate;
}
@keyframes welcomeDrift {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-12px) scale(1.02); }
}

.welcome-inner {
    width: 100%;
    max-width: min(92vw, 880px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    animation: welcomeFadeUp 0.5s ease both;
    position: relative;
    z-index: 1;
    /* v0.16.67 — flex-shrink: 0 so the inner block keeps its natural height
       inside the scrolling flex container (browsers otherwise compress it
       and chop the bottom controls). */
    flex-shrink: 0;
}
@keyframes welcomeFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.welcome-title {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--accent) 0%, #a78bfa 40%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 12px rgba(108, 92, 231, 0.3));
}
.welcome-sub {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-top: -16px;
    letter-spacing: 0.01em;
}

/* ── Picker sections ──────────────────────────────────────────────────── */
.picker-section {
    width: 100%;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.picker-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 14px;
    font-weight: 700;
}

/* ── Card grid ────────────────────────────────────────────────────────── */
.card-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.grade-grid { justify-content: center; gap: 6px; }

.pick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    width: 66px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
.pick-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.1), rgba(0, 206, 201, 0.05));
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: inherit;
}
.pick-card:hover::before { opacity: 1; }
.pick-card:hover {
    border-color: rgba(108, 92, 231, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(108, 92, 231, 0.1);
}
.pick-card.active {
    border-color: var(--accent);
    background: rgba(108, 92, 231, 0.12);
    box-shadow:
        0 0 20px rgba(108, 92, 231, 0.2),
        0 0 0 1px var(--accent),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}
.pick-card.active::before { opacity: 1; }
.pick-icon {
    line-height: 1;
    color: var(--accent);
    opacity: 0.85;
}
.pick-icon .icon { filter: drop-shadow(0 2px 4px rgba(108, 92, 231, 0.3)); }
.pick-text { font-size: 0.85rem; font-weight: 700; position: relative; letter-spacing: -0.01em; }
.pick-desc {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.35;
    position: relative;
}

/* Grade-only cards (no icon) */
.grade-grid .pick-card {
    width: auto;
    min-width: 66px;
    padding: 12px 10px;
}
.grade-grid .pick-text {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    text-align: center;
    line-height: 1.2;
}

/* Curriculum picker — wide toggle cards (v0.16.15: wrap multiple rows) */
.curriculum-grid { justify-content: center; gap: 10px; flex-wrap: wrap; }
.curriculum-grid .curriculum-card {
    width: auto;
    min-width: 140px;
    max-width: 220px;
    padding: 14px 20px;
    flex-direction: column;
    gap: 2px;
}
.curriculum-grid .curriculum-card .pick-text { font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; }
.curriculum-grid .curriculum-card .pick-desc { font-size: 0.72rem; text-align: center; }

/* Subject cards — v0.36.1: shrunk to flex-basis so 3-5 cards fit
   without overflowing. Pre-0.36 cards were a fixed 50% (2-per-row) which
   blew up vertically once Science/History/Spanish were added. */
.subject-grid { gap: 10px; justify-content: center; }
.subject-card {
    flex: 1 1 140px;
    max-width: 180px;
    padding: 16px 12px;
    gap: 6px;
    border-radius: var(--radius-lg);
}
.subject-card .pick-icon { color: var(--accent); }
.subject-card .pick-icon .icon { width: 26px; height: 26px; }
.subject-card .pick-text { font-size: 0.95rem; font-weight: 700; }
.subject-card .pick-desc { font-size: 0.68rem; line-height: 1.3; }

/* ── Start button ─────────────────────────────────────────────────────── */
.btn-start {
    padding: 16px 52px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, #8b7cf7 50%, #a78bfa 100%);
    box-shadow:
        0 4px 20px rgba(108, 92, 231, 0.35),
        0 0 0 1px rgba(108, 92, 231, 0.2);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
}
.btn-start::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.btn-start:hover:not(:disabled)::before {
    transform: translateX(100%);
}
.btn-start:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow:
        0 8px 32px rgba(108, 92, 231, 0.45),
        0 0 0 1px rgba(108, 92, 231, 0.3);
}
.btn-start:active:not(:disabled) {
    transform: translateY(-1px);
}
.btn-start:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: linear-gradient(135deg, #4a4570, #5a5480);
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════ *
 *  SHARED HEADER                                                         *
 * ═══════════════════════════════════════════════════════════════════════ */
.screen-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.header-info { display: flex; flex-direction: column; }
.header-title { font-weight: 600; font-size: 0.95rem; }
.header-sub { font-size: 0.75rem; color: var(--text-muted); }
.header-stats { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 50px;
    background: var(--bg-surface);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.stat-icon { display: inline-flex; align-items: center; color: var(--accent); }
.stat-icon .icon { width: 14px; height: 14px; }
.prob-progress {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Shared buttons ───────────────────────────────────────────────────── */
.icon-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s;
}
.icon-btn:hover { background: var(--bg-surface); color: var(--text-primary); }

.pill-btn {
    padding: 8px 16px;
    border-radius: 50px;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.pill-btn.accent { background: var(--accent); color: #fff; }
.pill-btn.accent:hover { background: var(--accent-hover); }
.pill-btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.pill-btn.ghost:hover { background: var(--bg-surface); color: var(--text-primary); }
.pill-btn.wide { width: 100%; padding: 12px; font-size: 0.9rem; }

/* ═══════════════════════════════════════════════════════════════════════ *
 *  DASHBOARD SCREEN                                                      *
 * ═══════════════════════════════════════════════════════════════════════ */
#dashboard-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}
.dash-body {
    flex: 1;
    overflow-y: auto;
    /* v0.32.4 — Scroll container is full-width so the scrollbar sits flush
       against the viewport edge (no dead strip). The horizontal padding
       below is what visually centers and constrains the content. */
    padding-top: clamp(20px, 2.5vw, 40px);
    padding-bottom: 100px;
    padding-left: max(clamp(16px, 3vw, 48px), calc((100% - 1400px) / 2));
    padding-right: max(clamp(16px, 3vw, 48px), calc((100% - 1400px) / 2));
    width: 100%;
}
.section-title {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 18vw, 220px), 1fr));
    gap: clamp(10px, 1.2vw, 20px);
}
/* Real-world section header (spans full row inside topics-grid) */
.real-world-section-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 18px;
    padding: 8px 4px 6px;
    border-top: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.real-world-section-header .rw-sub {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-transform: none;
}
.topic-card-realworld {
    background: linear-gradient(180deg, var(--bg-card), var(--bg-surface));
}
.topic-card-realworld:hover {
    border-color: #5eb37b;
}
.topic-card-ai {
    border-color: rgba(108, 124, 247, 0.45);
    background: linear-gradient(180deg, var(--bg-card), rgba(108, 124, 247, 0.06));
}
.topic-icon-emoji {
    font-size: 1.85rem;
    line-height: 1;
}
.topic-card.ai-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.topic-card.ai-disabled:hover {
    transform: none;
    box-shadow: none;
}
[data-theme="light"] .real-world-section-header { border-top-color: rgba(0,0,0,0.12); }
.topic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.6vw, 12px);
    padding: clamp(18px, 2vw, 32px) clamp(10px, 1.2vw, 18px) clamp(16px, 1.8vw, 26px);
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    color: var(--text-primary);
    text-align: center;
}
.topic-card:hover {
    border-color: var(--accent);
    background: var(--bg-surface);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.topic-card:active { transform: translateY(0); }
.topic-icon { color: var(--accent); opacity: 0.85; }
.topic-icon .icon { width: 28px; height: 28px; filter: drop-shadow(0 2px 6px rgba(108, 92, 231, 0.3)); }
.topic-name { font-size: 0.95rem; font-weight: 600; }
.topic-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; }

/* ── Topic config overlay ─────────────────────────────────────────────── */
.topic-config-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,17,23,0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    backdrop-filter: blur(4px);
}
.tc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    max-width: min(92vw, 560px);
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    animation: cardIn 0.25s ease;
}

/* ── Difficulty slider ────────────────────────────────────────────────── */
.diff-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.diff-label-end { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.diff-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--success) 0%, var(--warning) 50%, var(--error) 100%);
    outline: none;
}
.diff-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 3px solid var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: transform 0.15s;
}
.diff-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.diff-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 3px solid var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.diff-slider-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 28px;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.diff-slider-value {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Progressive toggle ───────────────────────────────────────────────── */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.toggle-input { display: none; }
.toggle-switch {
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all 0.2s;
}
.toggle-input:checked + .toggle-switch {
    background: var(--accent);
}
.toggle-input:checked + .toggle-switch::after {
    left: 21px;
    background: #fff;
}
.toggle-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ── Difficulty badge (problem header) ────────────────────────────────── */
.diff-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.diff-badge.diff-easy {
    color: var(--success);
    border-color: var(--success);
    background: rgba(0, 184, 148, 0.12);
}
.diff-badge.diff-medium {
    color: var(--warning);
    border-color: var(--warning);
    background: rgba(253, 203, 110, 0.12);
}
.diff-badge.diff-hard {
    color: var(--error);
    border-color: var(--error);
    background: rgba(225, 112, 85, 0.12);
}

/* Adaptive Learning badge */
.diff-badge.adaptive-badge {
    border-color: var(--accent);
    background: rgba(108, 92, 231, 0.15);
    color: var(--accent);
    transition: transform 0.3s ease, background 0.3s ease;
}
.diff-badge.adaptive-pulse {
    animation: adaptivePulse 0.5s ease;
}
@keyframes adaptivePulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.adaptive-indicator {
    font-size: 0.9rem;
    animation: adaptiveBrain 2s ease-in-out infinite;
}
.adaptive-indicator.hidden { display: none; }
@keyframes adaptiveBrain {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.tc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.tc-topic-icon { color: var(--accent); }
.tc-topic-icon .icon { width: 28px; height: 28px; }
.tc-topic-name { font-size: 1.2rem; font-weight: 700; }
.tc-section { display: flex; flex-direction: column; gap: 10px; }
.tc-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* v0.16.26 — Collapsible tc-section. Applied via JS to keep the
   topic-config modal compact by default. The .tc-label becomes a
   clickable header with a rotating chevron; children hide when the
   section has `.collapsed`. */
.tc-section.collapsible > .tc-label {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 2px;
    margin: -6px -2px;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}
.tc-section.collapsible > .tc-label:hover {
    background: var(--bg-surface);
    color: var(--text-secondary);
}
.tc-section.collapsible > .tc-label::after {
    content: "▾";
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: transform 0.18s ease;
    line-height: 1;
}
.tc-section.collapsible.collapsed > .tc-label::after {
    transform: rotate(-90deg);
}
.tc-section.collapsible.collapsed > *:not(.tc-label) {
    display: none !important;
}
.tc-section.collapsible > .tc-label .tc-label-summary {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0;
    margin-left: auto;
    padding-right: 6px;
    opacity: 0.85;
}
.tc-section.collapsible:not(.collapsed) > .tc-label .tc-label-summary {
    display: none;
}
.tc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tc-pill {
    padding: 8px 16px;
    border-radius: 50px;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.tc-pill:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.tc-pill.active {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--text-primary);
    font-weight: 600;
}
.tc-custom-input {
    padding: 9px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    width: 140px;
    margin-top: 2px;
}
.tc-custom-input:focus { border-color: var(--accent); }
.tc-custom-input::placeholder { color: var(--text-muted); }

/* ── Mixed operations picker ──────────────────────────────────────────── */
.mixed-ops-picker {
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    animation: cardIn 0.2s ease;
}
.mixed-ops-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 10px;
}
.mixed-ops-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.op-check {
    cursor: pointer;
    display: flex;
    align-items: center;
}
.op-check input[type="checkbox"] { display: none; }
.op-chip {
    padding: 6px 14px;
    border-radius: 50px;
    border: 2px solid var(--border);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    transition: all 0.15s;
    user-select: none;
}
.op-check input[type="checkbox"]:checked + .op-chip {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--text-primary);
    font-weight: 600;
}
.op-chip:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.tc-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}
.tc-actions .pill-btn { padding: 10px 24px; font-size: 0.9rem; }

/* ═══════════════════════════════════════════════════════════════════════ *
 *  PROBLEM SCREEN                                                        *
 * ═══════════════════════════════════════════════════════════════════════ */
#problem-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    position: relative;
}
.problem-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    padding: 24px 20px 100px;
    gap: 20px;
}
/* When content is taller than the viewport, pin to top so everything remains
   reachable via scroll. Otherwise auto-center via justify-content above. */
.problem-body > * { flex-shrink: 0; }

/* Problem card */
.problem-card {
    width: 100%;
    max-width: min(92vw, 760px);
    /* v0.16.62 — give the card a substantial minimum height so it fills the
       screen even before "Show work" is opened. On phones we stay compact. */
    min-height: clamp(320px, 62vh, 720px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(22px, 3vw, 40px) clamp(18px, 2.4vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 2vw, 28px);
    animation: cardIn 0.3s ease;
}

/* v0.16.63 — Device-specific tuning via <html data-device="..."> set by JS.
   Uses --app-vh (real viewport height) so iOS Safari URL bar doesn't truncate.
   v0.16.65 — values are now backed by --lay-* CSS custom properties set per
   device by the admin Layout console (with these defaults as fallbacks). */
html[data-device="phone"]   .problem-card {
    min-height: calc(var(--app-vh, 1vh) * var(--lay-card-vh, 55));
    max-width: min(96vw, var(--lay-card-maxw, 420px));
    padding: var(--lay-card-pad, 20px) calc(var(--lay-card-pad, 20px) * 0.8);
    gap: var(--lay-gap, 16px);
}
html[data-device="tablet"]  .problem-card {
    min-height: calc(var(--app-vh, 1vh) * var(--lay-card-vh, 70));
    max-width: var(--lay-card-maxw, min(88vw, 880px));
    padding: var(--lay-card-pad, 32px) calc(var(--lay-card-pad, 32px) * 0.9);
    gap: var(--lay-gap, 28px);
    justify-content: flex-start;
}
html[data-device="desktop"] .problem-card {
    min-height: calc(var(--app-vh, 1vh) * var(--lay-card-vh, 65));
    max-width: var(--lay-card-maxw, min(80vw, 1040px));
    padding: var(--lay-card-pad, 40px) calc(var(--lay-card-pad, 40px) * 0.9);
    gap: var(--lay-gap, 32px);
    justify-content: flex-start;
}

/* Touch devices get larger answer buttons regardless of screen size */
html[data-pointer="touch"] .choice-btn { min-height: 64px; font-size: 1.08rem; }
html[data-pointer="touch"] .mc-choices { gap: 14px; }

/* v0.16.64 — Content scales to fill the enlarged card on tablet / desktop.
   v0.16.65 — now driven by --lay-q-size / --lay-btn-size / --lay-btn-h. */

/* Tablet (iPad) */
html[data-device="tablet"] .problem-question {
    font-size: var(--lay-q-size, 1.8rem);
    line-height: 1.4;
}
html[data-device="tablet"] .mc-choices {
    gap: var(--lay-gap, 18px);
    flex: 1 1 auto;
    align-content: stretch;
}
html[data-device="tablet"] .choice-btn {
    min-height: var(--lay-btn-h, 88px);
    font-size: var(--lay-btn-size, 1.25rem);
    padding: calc(var(--lay-btn-h, 88px) * 0.24) 20px;
    border-radius: 14px;
}
html[data-device="tablet"] .problem-feedback { font-size: calc(var(--lay-btn-size, 1.25rem) * 0.9); }

/* Desktop */
html[data-device="desktop"] .problem-question {
    font-size: var(--lay-q-size, 2rem);
    line-height: 1.4;
}
html[data-device="desktop"] .mc-choices {
    gap: var(--lay-gap, 20px);
    flex: 1 1 auto;
    align-content: stretch;
}
html[data-device="desktop"] .choice-btn {
    min-height: var(--lay-btn-h, 96px);
    font-size: var(--lay-btn-size, 1.3rem);
    padding: calc(var(--lay-btn-h, 96px) * 0.24) 24px;
    border-radius: 14px;
}
html[data-device="desktop"] .problem-feedback { font-size: calc(var(--lay-btn-size, 1.3rem) * 0.9); }

/* Phone */
html[data-device="phone"] .problem-question {
    font-size: var(--lay-q-size, 1.25rem);
    line-height: 1.4;
}
html[data-device="phone"] .choice-btn {
    min-height: var(--lay-btn-h, 56px);
    font-size: var(--lay-btn-size, 1.02rem);
}

/* Tablet + desktop counters / action pills scale up too */
html[data-device="tablet"]  .prob-counter,
html[data-device="desktop"] .prob-counter { font-size: 1rem; }

/* Make the multiple-choice grid actually stretch: the grid must fill the card */
html[data-device="tablet"]  .mc-choices,
html[data-device="desktop"] .mc-choices {
    grid-auto-rows: 1fr;     /* each row equal height so buttons grow to fill */
}

/* Layout admin console — device tabs + sliders */
.layout-dev-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
#settings-layout-section input[type="range"] {
    width: 100%;
    margin: 4px 0 14px;
}
#settings-layout-section .lay-val {
    font-weight: 600;
    color: var(--accent);
    margin-left: 6px;
}
/* v0.16.70 — slider description hints */
#settings-layout-section .lay-hint {
    margin: 4px 0 4px;
    line-height: 1.45;
    opacity: 0.85;
}
#settings-layout-section .lay-hint b { opacity: 1; }
@keyframes cardIn {
    from { opacity: 0; transform: scale(0.96) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.problem-question {
    font-size: clamp(1.15rem, 1.5vw + 0.75rem, 1.7rem);
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    /* v0.18.6 — preserve newlines so embedded visual aids (Markdown
       tables, ASCII bar charts, labelled diagrams) render cleanly. */
    white-space: pre-wrap;
}

/* Multiple choice buttons */
.mc-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.choice-btn {
    padding: clamp(14px, 1.4vw, 22px) clamp(12px, 1.4vw, 22px);
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.15rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-align: center;
    line-height: 1.4;
    word-wrap: break-word;
}
.choice-btn:hover:not(.correct):not(.wrong):not(.disabled) {
    border-color: var(--accent);
    background: var(--accent-glow);
    transform: translateY(-1px);
}
.choice-btn.correct {
    border-color: var(--success);
    background: rgba(0,184,148,0.15);
    color: var(--success);
}
.choice-btn.wrong {
    border-color: var(--error);
    background: rgba(225,112,85,0.15);
    color: var(--error);
    animation: shake 0.4s ease;
}
.choice-btn.disabled { cursor: default; opacity: 0.6; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Free response */
.fr-area {
    display: flex;
    gap: 10px;
}
#answer-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 50px;
    font-size: 16px; /* ≥16px prevents iOS auto-zoom on focus */
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}
#answer-input:focus { border-color: var(--accent); }
#answer-input::placeholder { color: var(--text-muted); }

/* Feedback */
.feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.feedback.correct-fb { background: rgba(0,184,148,0.12); color: var(--success); }
.feedback.wrong-fb   { background: rgba(225,112,85,0.12); color: var(--error); }
#feedback-emoji { display: inline-flex; align-items: center; }
#feedback-emoji .icon { width: 20px; height: 20px; }

/* Problem actions */
.problem-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.action-pill {
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.action-pill:hover { background: var(--bg-surface); color: var(--text-primary); }

/* ── Icon-only action pills (Hint, Calculator, Scratch Pad) ───────── */
.action-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}
.action-pill-icon svg { display: block; }
.action-pill-icon:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.action-pill-hint.is-loading svg {
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── "Ask Tutor" — gradient pill with a single bubble+sparkle icon ── */
.action-pill-ask {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    padding: 0;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #6c5ce7 0%, #00b4d8 100%);
    box-shadow: 0 4px 14px rgba(108, 92, 231, 0.35);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}
.action-pill-ask:hover {
    background: linear-gradient(135deg, #7d6ee9 0%, #18c0e3 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(108, 92, 231, 0.45);
    transform: translateY(-1px);
}
.action-pill-ask:active { transform: translateY(0); }
.action-pill-ask .ask-icon  {
    flex-shrink: 0;
    animation: askPulse 2.6s ease-in-out infinite;
}
@keyframes askPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
/* A subtle shimmer sweep on hover */
.action-pill-ask::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}
.action-pill-ask:hover::after { transform: translateX(100%); }

/* AI hint bubble (Socratic nudge) */
.hint-bubble {
    margin: 12px auto 0;
    max-width: 560px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--accent, #6c7cf7);
    background: rgba(108, 124, 247, 0.10);
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: left;
    position: relative;
    animation: fadeIn 0.25s ease-out;
}
.hint-bubble::before {
    content: "NUDGE";
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent, #6c7cf7);
    background: rgba(108, 124, 247, 0.14);
    border-radius: 10px;
}
.hint-bubble.is-hint::before {
    content: "HINT";
}
[data-theme="light"] .hint-bubble {
    background: rgba(108, 124, 247, 0.08);
    color: #1a1a2e;
}

/* Next button */
.btn-next {
    padding: 12px 36px;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg, var(--accent), #8b7cf7);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    box-shadow: 0 4px 16px var(--accent-glow);
}
.btn-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════════════════════ *
 *  SHOW WORK PANEL                                                       *
 * ═══════════════════════════════════════════════════════════════════════ */
.show-work { margin-top: 12px; }
.show-work-toggle {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 10px 14px;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-secondary);
    font-size: 0.85rem; font-weight: 500;
    cursor: pointer; transition: all 0.2s;
    font-family: inherit;
}
.show-work-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
.sw-icon { font-size: 1rem; }
.sw-chevron { margin-left: auto; font-size: 0.7rem; transition: transform 0.25s; }
.sw-chevron.open { transform: rotate(180deg); }

.sw-steps {
    display: flex; flex-direction: column; gap: 0;
    padding: 0 4px; margin-top: 8px;
    overflow: hidden;
}
.sw-steps.hidden { display: none; }

.sw-method-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    padding: 4px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
}
.sw-method-tab {
    flex: 1 1 auto;
    min-width: 80px;
    padding: 6px 10px;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.sw-method-tab:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text-primary);
}
.sw-method-tab.active {
    background: var(--accent);
    color: #fff;
}

.sw-step {
    display: flex; align-items: flex-start; gap: 12px;
    position: relative; padding: 10px 0 10px 0;
    animation: stepFadeIn 0.3s ease both;
}
.sw-step:not(:last-child)::after {
    content: ''; position: absolute;
    left: 15px; top: 38px; bottom: -2px;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent) 0%, transparent 100%);
    opacity: 0.4;
}
.sw-step-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-glow); border-radius: 50%;
    font-size: 1rem; z-index: 1;
}
.sw-step:last-child .sw-step-icon {
    background: rgba(0,184,148,0.15);
}
.sw-step-body { flex: 1; padding-top: 4px; }
.sw-step-label {
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent); margin-bottom: 2px;
}
.sw-step:last-child .sw-step-label { color: var(--success); }
.sw-step-text {
    font-size: 0.88rem; color: var(--text-primary);
    line-height: 1.45;
}
@keyframes stepFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* stagger each step */
.sw-step:nth-child(1) { animation-delay: 0s; }
.sw-step:nth-child(2) { animation-delay: 0.08s; }
.sw-step:nth-child(3) { animation-delay: 0.16s; }
.sw-step:nth-child(4) { animation-delay: 0.24s; }
.sw-step:nth-child(5) { animation-delay: 0.32s; }
.sw-step:nth-child(6) { animation-delay: 0.4s; }

/* ─── Worksheet style ─────────────────────────────────────────────── */
.ws-sheet {
    background: linear-gradient(to bottom, #1e1f2e 0%, #1a1b2a 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px 12px;
    position: relative;
    /* ruled lines */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 35px,
        rgba(100, 108, 150, 0.12) 35px, rgba(100, 108, 150, 0.12) 36px
    );
    background-size: 100% 36px;
    background-position: 0 16px;
}
.ws-sheet::before {
    content: ''; position: absolute;
    left: 38px; top: 0; bottom: 0; width: 2px;
    background: rgba(225, 112, 85, 0.18);
}
.ws-row {
    display: flex; align-items: baseline; gap: 14px;
    padding: 6px 0 6px 0; min-height: 36px;
    animation: stepFadeIn 0.3s ease both;
}
.ws-row:nth-child(1) { animation-delay: 0s; }
.ws-row:nth-child(2) { animation-delay: 0.1s; }
.ws-row:nth-child(3) { animation-delay: 0.2s; }
.ws-row:nth-child(4) { animation-delay: 0.3s; }
.ws-row:nth-child(5) { animation-delay: 0.4s; }
.ws-row:nth-child(6) { animation-delay: 0.5s; }
.ws-num {
    width: 24px; flex-shrink: 0; text-align: center;
    font-size: 0.75rem; font-weight: 700;
    color: var(--accent); opacity: 0.7;
}
.ws-text {
    font-size: 0.92rem; color: var(--text-primary);
    line-height: 1.5;
    font-family: 'Georgia', 'Times New Roman', serif;
    letter-spacing: 0.01em;
}
.ws-answer {
    margin-top: 4px; padding-top: 8px;
    border-top: 2px dashed rgba(0, 184, 148, 0.3);
}
.ws-answer .ws-num { color: var(--success); opacity: 1; font-size: 0.95rem; }
.ws-answer .ws-text { color: var(--success); font-weight: 600; }

/* ─── Compact style ───────────────────────────────────────────────── */
.sw-compact {
    display: flex; flex-wrap: wrap; gap: 8px;
    animation: fadeIn 0.25s ease;
}
.sw-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.82rem; color: var(--text-primary);
    animation: stepFadeIn 0.25s ease both;
}
.sw-badge:nth-child(1) { animation-delay: 0s; }
.sw-badge:nth-child(2) { animation-delay: 0.06s; }
.sw-badge:nth-child(3) { animation-delay: 0.12s; }
.sw-badge:nth-child(4) { animation-delay: 0.18s; }
.sw-badge:nth-child(5) { animation-delay: 0.24s; }
.sw-badge:nth-child(6) { animation-delay: 0.3s; }
.sw-badge-icon { font-size: 0.9rem; }
.sw-badge-answer {
    background: rgba(0,184,148,0.1); border-color: rgba(0,184,148,0.3);
    color: var(--success); font-weight: 600;
}
/* Arrows between compact badges */
.sw-compact .sw-badge:not(:last-child)::after {
    content: '→'; margin-left: 4px; color: var(--text-secondary); font-size: 0.7rem; opacity: 0.5;
}

/* ─── Style picker in settings ────────────────────────────────────── */
.sw-style-picker { margin-top: 12px; }
.sw-style-label {
    font-size: 0.8rem; color: var(--text-secondary);
    margin-bottom: 8px; display: block;
}
.sw-style-options { display: flex; gap: 8px; flex-wrap: wrap; }
.sw-style-btn {
    flex: 1 1 0; min-width: 64px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px;
    background: var(--bg-surface); border: 2px solid var(--border);
    border-radius: var(--radius); cursor: pointer;
    transition: all 0.2s; font-family: inherit;
    color: var(--text-secondary); font-size: 0.78rem; font-weight: 500;
}
.sw-style-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.sw-style-btn.selected {
    border-color: var(--accent); background: var(--accent-glow);
    color: var(--text-primary);
}
/* Mini preview icons in style buttons */
.sw-style-preview {
    display: flex; align-items: center; gap: 3px;
    height: 24px;
}
.sw-preview-timeline { flex-direction: column; gap: 2px; height: 24px; justify-content: center; }
.sw-preview-timeline span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.7;
}
.sw-preview-worksheet { flex-direction: column; gap: 1px; }
.sw-preview-worksheet span {
    width: 24px; height: 3px; border-radius: 1px;
    background: var(--text-secondary); opacity: 0.35;
}
.sw-preview-compact span {
    padding: 2px 6px; border-radius: 8px; font-size: 0;
    width: 18px; height: 10px;
    background: var(--bg-surface); border: 1px solid var(--border);
}

/* ═══ Chat position previews ═══ */
.cp-preview-right, .cp-preview-bottom, .cp-preview-float {
    position: relative;
    width: 36px; height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-surface);
}
.cp-preview-right span {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 10px; background: var(--accent); border-radius: 0 3px 3px 0;
}
.cp-preview-bottom span {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 8px; background: var(--accent); border-radius: 0 0 3px 3px;
}
.cp-preview-float span {
    position: absolute; right: 3px; bottom: 3px;
    width: 14px; height: 12px; background: var(--accent); border-radius: 3px;
}

/* ═══ Settings toggle switch ═══ */
.settings-section { margin-bottom: 18px; }
.settings-section-title {
    font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary); margin: 16px 0 10px;
}
.settings-section-title:first-child { margin-top: 0; }
.toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; cursor: pointer; padding: 6px 0;
    font-size: 0.9rem; color: var(--text-primary);
}
.toggle-row input[type="checkbox"] { display: none; }
.toggle-slider {
    position: relative; width: 44px; height: 24px; flex-shrink: 0;
    background: var(--bg-surface); border: 2px solid var(--border);
    border-radius: 12px; transition: all 0.25s;
}
.toggle-slider::after {
    content: ''; position: absolute;
    top: 2px; left: 2px; width: 16px; height: 16px;
    background: var(--text-secondary); border-radius: 50%;
    transition: all 0.25s;
}
.toggle-row input:checked + .toggle-slider {
    background: var(--accent); border-color: var(--accent);
}
.toggle-row input:checked + .toggle-slider::after {
    left: 22px; background: #fff;
}

/* Progress dots */
.progress-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.2s;
}
.dot.done { background: var(--success); }
.dot.active {
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
    transform: scale(1.2);
}
.dot.wrong-dot { background: var(--error); }

/* Results overlay */
.results-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,17,23,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    backdrop-filter: blur(6px);
}
.results-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: cardIn 0.35s ease;
    max-width: 90vw;
}
.results-emoji { display: flex; justify-content: center; color: var(--accent); }
.results-emoji .icon { width: 48px; height: 48px; }
.results-title { font-size: 1.4rem; font-weight: 700; }
.results-score { font-size: 1.1rem; color: var(--text-secondary); }
.results-points {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent);
}
.results-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════ *
 *  CHAT DRAWER  — position controlled by data-pos="right|bottom|float"  *
 * ═══════════════════════════════════════════════════════════════════════ */
.chat-drawer {
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    box-sizing: border-box;
    overflow: hidden;
    transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* ── RIGHT (side panel) ───────────────────────────────────────────── */
.chat-drawer[data-pos="right"] {
    top: 56px; right: 0; bottom: 0; left: auto;  /* leave room for .screen-header */
    width: 360px;
    max-width: 90vw;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: translateX(100%);
    pointer-events: none;
}
.chat-drawer[data-pos="right"].expanded {
    transform: translateX(0);
    pointer-events: auto;
}
.chat-drawer[data-pos="right"] .chat-tab {
    pointer-events: auto;
    position: absolute;
    left: 0; top: 50%; bottom: auto; right: auto;
    transform: translate(-100%, -50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: 40px;
    height: auto;
    padding: 14px 6px;
    border-radius: 12px 0 0 12px;
    border: 1px solid var(--border);
    border-right: 0;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
}
.chat-drawer[data-pos="right"] .chat-tab #chat-toggle {
    transform: rotate(90deg);
}
.chat-drawer[data-pos="right"].expanded .chat-tab {
    position: static;
    transform: none;
    writing-mode: horizontal-tb;
    text-orientation: initial;
    width: auto;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    padding: 12px 18px;
    font-size: 0.92rem;
    background: linear-gradient(135deg, #6c5ce7 0%, #00b4d8 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.25);
}
.chat-drawer[data-pos="right"].expanded .chat-tab:hover { color: #fff; }
.chat-drawer[data-pos="right"].expanded .chat-tab #chat-toggle {
    transform: none;
}

/* ── BOTTOM ───────────────────────────────────────────────────────── */
.chat-drawer[data-pos="bottom"] {
    bottom: 0; left: 0; right: 0; top: auto;
    height: 44px;
    max-height: 60vh;
}
.chat-drawer[data-pos="bottom"].expanded { height: 60vh; }
.chat-drawer[data-pos="bottom"] .chat-tab {
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--border);
}

/* ── FLOAT (bottom-right bubble) ──────────────────────────────────── */
.chat-drawer[data-pos="float"] {
    bottom: 24px; right: 24px; left: auto; top: auto;
    width: 380px;
    max-width: calc(100vw - 48px);
    height: 52px;
    max-height: 70vh;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    border: 1px solid var(--border);
    overflow: hidden;
}
.chat-drawer[data-pos="float"].expanded { height: 480px; }
.chat-drawer[data-pos="float"] .chat-tab {
    border-radius: 16px 16px 0 0;
}

/* ── Shared sub-elements ──────────────────────────────────────────── */
.chat-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--bg-card);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    user-select: none;
}
.chat-tab:hover { color: var(--text-primary); }

/* Ask Tutor header title — icon + sparkle ─ */
.chat-tab-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.chat-tab-icon { flex-shrink: 0; }
.chat-drawer[data-pos="right"]:not(.expanded) .chat-tab-title {
    flex-direction: column;
    gap: 4px;
}
.chat-drawer[data-pos="right"]:not(.expanded) .chat-tab-title > span:last-child {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
#chat-toggle { transition: transform 0.2s ease; }
.chat-drawer[data-pos="right"].expanded #chat-toggle {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.9rem;
}
.chat-drawer[data-pos="right"].expanded #chat-toggle:hover {
    background: rgba(255, 255, 255, 0.32);
}

.chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    overflow: hidden;
    min-width: 0;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-msg {
    max-width: 92%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
    animation: fadeIn 0.2s ease;
}
.chat-msg.user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg.assistant {
    align-self: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
/* Markdown inside assistant chat messages */
.chat-msg.assistant h1, .chat-msg.assistant h2, .chat-msg.assistant h3,
.chat-msg.assistant h4, .chat-msg.assistant h5, .chat-msg.assistant h6 {
    margin: .6em 0 .3em;
    line-height: 1.3;
}
.chat-msg.assistant h3 { font-size: .95rem; }
.chat-msg.assistant p { margin: .35em 0; }
.chat-msg.assistant ul, .chat-msg.assistant ol { margin: .3em 0; padding-left: 1.4em; }
.chat-msg.assistant code {
    background: rgba(255,255,255,.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .82em;
}
.chat-msg.assistant pre {
    background: rgba(0,0,0,.3);
    padding: 8px 10px;
    border-radius: 6px;
    overflow-x: auto;
    max-width: 100%;
    white-space: pre-wrap;
    margin: .4em 0;
}
.chat-msg.assistant pre code { background: none; padding: 0; }
.chat-msg.assistant a { word-break: break-all; overflow-wrap: break-word; }
.chat-msg.assistant .katex-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; }
.chat-msg.assistant strong { color: var(--accent-2, #00cec9); }
.chat-msg.typing::after {
    content: "●  ●  ●";
    letter-spacing: 2px;
    animation: pulse 1.4s ease-in-out infinite;
    color: var(--text-muted);
}
/* v0.16.34 — tutor typing with a short status line */
.chat-msg.tutor-typing {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.chat-msg.tutor-typing::after {
    /* Keep the pulsing dots but place them after the status text */
    order: 2;
}
.chat-msg.tutor-typing .tutor-typing-text {
    order: 1;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
    transition: opacity 0.15s ease;
}
/* v0.16.34 — welcome bubble + mascot */
.chat-msg.tutor-welcome {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 92%;
    min-width: 0;
}
.chat-msg.tutor-welcome .tutor-mascot {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(108,92,231,0.25));
    animation: tutorMascotBounce 1.8s ease-in-out infinite;
}
.chat-msg.tutor-welcome .tutor-welcome-text {
    flex: 1;
    min-width: 0;
}
@keyframes tutorMascotBounce {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-3px) rotate(2deg); }
}
.a11y-reduce-motion .chat-msg.tutor-welcome .tutor-mascot { animation: none; }
@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}
.chat-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.chat-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
/* v0.16.43 — mic / screenshot / speak buttons in the chat input row */
.chat-iconbtn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.chat-iconbtn:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--accent); }
.chat-iconbtn[aria-pressed="true"],
.chat-iconbtn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.chat-iconbtn.recording {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    animation: chatMicPulse 1.1s ease-in-out infinite;
}
@keyframes chatMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}
/* v0.16.45 — mic button + chevron split, with a popover for picking
   between browser Web-Speech and server-side Whisper transcription. */
.chat-mic-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}
.chat-mic-chevron {
    width: 18px; height: 34px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: all 0.15s;
}
.chat-mic-chevron:hover { color: var(--text-primary); border-color: var(--accent); }
.chat-mic-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 280px;
    padding: 8px;
    background: var(--bg-elevated, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.chat-mic-popover.hidden { display: none; }
.chat-mic-popover-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 4px 8px;
}
.chat-mic-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
}
.chat-mic-option:hover { background: var(--bg-surface); }
.chat-mic-option.selected {
    border-color: var(--accent);
    background: var(--bg-surface);
}
.chat-mic-option-name { font-size: 13px; font-weight: 600; }
.chat-mic-option-sub  { font-size: 11px; color: var(--text-muted); }
.chat-attach-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
}
.chat-attach-preview.hidden { display: none; }
.chat-attach-preview img {
    max-height: 56px;
    max-width: 100px;
    border-radius: 6px;
    object-fit: cover;
}
.chat-attach-preview .chat-attach-label {
    flex: 1;
    font-size: 12px;
    color: var(--text-muted);
}
.chat-attach-preview .chat-attach-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 6px;
}
.chat-attach-preview .chat-attach-remove:hover { color: var(--error, #dc2626); }
/* Screenshot inside a user chat bubble */
.chat-msg .chat-bubble-img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    margin-top: 6px;
}
/* v0.16.46 — voice-note audio inside a user chat bubble */
.chat-msg .chat-bubble-audio {
    display: block;
    width: 100%;
    margin-top: 6px;
    height: 32px;
}
#chat-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 50px;
    font-size: 16px; /* ≥16px prevents iOS auto-zoom */
    outline: none;
    font-family: inherit;
}
#chat-input:focus { border-color: var(--accent); }
#chat-input::placeholder { color: var(--text-muted); }
.chat-send {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
.chat-send:hover { background: var(--accent-hover); }
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-send svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════════════ *
 *  SETTINGS FAB + MODAL                                                  *
 * ═══════════════════════════════════════════════════════════════════════ */

/* Floating Action Button */
.settings-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.settings-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(108, 92, 231, 0.55);
}
.settings-fab:active { transform: scale(0.95); }
.settings-fab svg { stroke: currentColor; }

/* Modal overlay */
.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}
.settings-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 860px;
    max-width: 95vw;
    height: 80vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    animation: cardIn 0.25s ease;
}
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.settings-header h2 { font-size: 1.05rem; margin: 0; }

/* Settings tab bar */
.settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    background: var(--bg-secondary);
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}
.settings-tabs::-webkit-scrollbar { height: 3px; }
.settings-tabs::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
.settings-tabs::-webkit-scrollbar-track { background: transparent; }
.settings-tab {
    padding: 10px 18px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.settings-tab:hover { color: var(--text-primary); }
.settings-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.settings-tab.hidden { display: none; }

/* Tab panes */
.settings-tab-pane { display: none; }
.settings-tab-pane.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   v0.16.77 — SETTINGS REDESIGN: category landing + drill-in
   ═══════════════════════════════════════════════════════════════════════ */
.settings-home-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 32px; height: 32px;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.15s, border-color 0.15s;
    margin-right: 6px;
}
.settings-home-btn:hover { background: var(--bg-surface); border-color: var(--accent); }

.settings-breadcrumb {
    font-size: 0.84rem;
    color: var(--text-secondary);
    margin-left: 8px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-breadcrumb .crumb-sep { opacity: 0.5; margin: 0 6px; }
.settings-breadcrumb .crumb-current { color: var(--text-primary); font-weight: 600; }

/* Landing view container */
.settings-landing {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: settingsLandingIn 0.22s ease;
}
.settings-landing.hidden { display: none; }
@keyframes settingsLandingIn {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}
/* Detail view fade-in (when tabs-bar is visible) */
.settings-tabs:not(.hidden),
.settings-body:not(.hidden) {
    animation: settingsDetailIn 0.22s ease;
}
@keyframes settingsDetailIn {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Search */
.settings-search-wrap { position: relative; }
.settings-search {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    font-size: 0.95rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.settings-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.settings-search-results {
    margin-top: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
}
.settings-search-results.hidden { display: none; }
.settings-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s;
}
.settings-search-result:last-child { border-bottom: none; }
.settings-search-result:hover { background: var(--bg-secondary); }
.settings-search-result .ssr-title { font-weight: 600; color: var(--text-primary); flex: 1; }
.settings-search-result .ssr-cat {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-glow);
    color: var(--accent);
    font-weight: 600;
}
.settings-search-empty { padding: 14px; color: var(--text-secondary); font-size: 0.85rem; text-align: center; }

/* Category tile grid */
.settings-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.settings-category-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.settings-category-tile:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(108, 92, 231, 0.18);
}
.settings-category-tile .sct-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--accent-glow);
    color: var(--accent);
    margin-bottom: 4px;
}
.settings-category-tile .sct-icon .icon { width: 26px; height: 26px; }
.settings-category-tile .sct-title {
    font-size: 1.02rem;
    font-weight: 700;
}
.settings-category-tile .sct-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
.settings-category-tile .sct-meta {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    align-items: center;
}
.settings-category-tile .sct-count {
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.settings-category-tile .sct-admin-pill {
    font-size: 0.66rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 165, 0, 0.15);
    color: #ffa500;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Section flash on search-jump */
.settings-section-flash {
    animation: settingsFlash 1.6s ease;
}
@keyframes settingsFlash {
    0%, 100% { background: transparent; }
    20%, 60% { background: var(--accent-glow); }
}

/* Recently used row */
.settings-recent-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.settings-recent-row .srr-label { font-weight: 600; }
.settings-recent-chip {
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.78rem;
    transition: border-color 0.15s, background 0.15s;
}
.settings-recent-chip:hover { border-color: var(--accent); background: var(--accent-glow); }

/* Mobile */
@media (max-width: 640px) {
    .settings-categories { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .settings-category-tile { padding: 14px; }
    .settings-category-tile .sct-icon { width: 36px; height: 36px; }
    .settings-category-tile .sct-icon .icon { width: 20px; height: 20px; }
    .settings-category-tile .sct-title { font-size: 0.92rem; }
    .settings-category-tile .sct-desc { display: none; }
}

.settings-layout-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}
.settings-layout-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.settings-layout-select {
    min-width: 190px;
}
.settings-layout-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* General tab — tile grid */
.settings-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    grid-auto-flow: dense;
    grid-auto-rows: 8px;
}
.settings-tile {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: max-content;
}
.settings-tile .settings-section { margin-bottom: 0; }
.settings-tile .settings-section-title { margin-top: 0; }

.settings-tile-grid[data-layout="masonry"] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 8px;
}
.settings-tile-grid[data-layout="cols2"] {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: auto;
}
.settings-tile-grid[data-layout="cols3"] {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: auto;
}
.settings-tile-grid[data-layout="single"] {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-rows: auto;
}
.settings-tile-grid[data-layout="single"] .settings-tile-wide {
    grid-column: span 1;
}
.settings-tile-handle {
    margin-left: 8px;
    opacity: 0.6;
    font-size: 0.84rem;
    letter-spacing: -1px;
    cursor: grab;
    user-select: none;
}
.settings-tile .settings-section-title {
    display: inline-flex;
    align-items: center;
}
.settings-tile.dragging {
    opacity: 0.5;
    transform: scale(0.99);
}
.settings-tile.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: 2px;
}

/* AI tab — 2-column */
.settings-ai-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
}
.settings-ai-left { display: flex; flex-direction: column; gap: 10px; }
.settings-ai-right {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    overflow-y: auto;
    max-height: 50vh;
}

/* v0.17.5 — AI Behavior tab live preview pane */
.ai-behavior-grid {
    display: grid;
    /* Form column: enough for the labels/selects (~340px). Preview column
       takes whatever remains, never collapsing below the form even when
       the settings overlay is narrow. */
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}
.ai-behavior-form { min-width: 0; }
.ai-behavior-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    min-height: 420px;
}
.ai-behavior-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ai-behavior-preview-pill {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(108, 92, 231, 0.18);
    color: var(--accent);
    padding: 3px 8px;
    border-radius: 999px;
}
.ai-behavior-preview-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ai-behavior-preview-controls select {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.85rem;
}
.ai-behavior-preview-chat {
    flex: 1;
    min-height: 200px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    font-size: 0.92rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-behavior-preview-chat:empty::before {
    content: "Send a message to preview how the tutor will respond with the current settings.";
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
}
.ai-preview-msg {
    max-width: 88%;
    padding: 8px 12px;
    border-radius: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.ai-preview-msg.user {
    align-self: flex-end;
    background: rgba(108, 92, 231, 0.18);
    color: var(--text-primary);
    border-top-right-radius: 4px;
}
.ai-preview-msg.assistant {
    align-self: flex-start;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-top-left-radius: 4px;
}
.ai-preview-msg.error {
    align-self: stretch;
    background: rgba(225, 112, 85, 0.12);
    color: var(--error);
    border: 1px solid rgba(225, 112, 85, 0.4);
}
.ai-preview-msg.thinking {
    align-self: flex-start;
    color: var(--text-muted);
    font-style: italic;
}
.ai-behavior-preview-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-behavior-preview-input textarea {
    width: 100%;
    resize: vertical;
    min-height: 44px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.92rem;
}
.ai-behavior-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.ai-behavior-preview-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ai-behavior-preview-chip {
    font-size: 0.78rem;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
}
.ai-behavior-preview-chip:hover { border-color: var(--accent); color: var(--text-primary); }

@media (max-width: 760px) {
    .ai-behavior-grid { grid-template-columns: 1fr; }
}

/* v0.17.6 — Refusal log tab */
.refusal-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.refusal-input {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 0.88rem;
    min-width: 220px;
}
.refusal-input-narrow { min-width: 130px; }
.refusal-summary {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.refusal-list {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    background: var(--bg-card);
}
.refusal-empty {
    display: block;
    padding: 24px 12px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.88rem;
}
.refusal-row {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.86rem;
    line-height: 1.45;
}
.refusal-row:last-child { border-bottom: none; }
.refusal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}
.refusal-time {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.refusal-tag {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(225, 112, 85, 0.18);
    color: #f0a08a;
}
.refusal-chip {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.refusal-actor {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.refusal-msg, .refusal-refusal {
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    margin-top: 4px;
}
.refusal-refusal { opacity: 0.78; }
.refusal-msg em, .refusal-refusal em {
    font-style: normal;
    font-weight: 700;
    color: var(--text-muted);
    margin-right: 4px;
}
.refusal-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.refusal-actions .pill-btn {
    padding: 4px 10px;
    font-size: 0.78rem;
}
.refusal-list {
    /* v0.18.2 — give the list breathing room so a single row never gets
       visually clipped under the surrounding container's overflow. */
    min-height: 100px;
}

@media (max-width: 700px) {
    .settings-tile-grid { grid-template-columns: 1fr; }
    .settings-layout-toolbar { align-items: flex-start; flex-direction: column; }
    .settings-layout-select { width: 100%; }
    .settings-ai-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    .settings-tile-grid[data-layout="cols2"],
    .settings-tile-grid[data-layout="cols3"] {
        grid-template-columns: 1fr;
    }
}

.settings-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.settings-close-btn:hover { color: var(--text-primary); }

/* Role badge in settings header */
.settings-role-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: auto;
    margin-right: 12px;
}
.settings-role-badge.role-admin   { background: rgba(108, 92, 231, 0.2); color: var(--accent); }
.settings-role-badge.role-student { background: rgba(0, 206, 209, 0.15); color: #00ced1; }
.settings-role-badge.role-guest   { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); }

/* Lock banner for non-admin settings */
.settings-lock-banner {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 200, 50, 0.1);
    border: 1px solid rgba(255, 200, 50, 0.2);
    color: #e8c547;
    font-size: 0.8rem;
    margin-bottom: 8px;
}

/* Guest notice */
.settings-guest-notice {
    padding: 14px;
    border-radius: var(--radius);
    background: rgba(108, 92, 231, 0.08);
    border: 1px solid rgba(108, 92, 231, 0.15);
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.5;
}
.settings-guest-notice strong { color: var(--accent); }

/* ── User Management ── */

/* v0.32.3 — Compact toolbar that fits even in narrow panels.
   The container is allowed to wrap as a last resort, but the
   default sizing keeps everything on one row at typical widths. */

.su-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.su-toolbar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.su-toolbar-title .settings-section-title { margin: 0; }
.su-toolbar .su-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.su-new-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: .82rem;
    white-space: nowrap;
}
/* Row 2: status pills | spacer | role/sort/actions */
.su-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.su-filter-spacer { flex: 1 1 8px; min-width: 8px; }
.su-toolbar .su-compact-select,
.su-filter-row .su-compact-select {
    flex: 0 0 auto;
    width: auto;
    max-width: 130px;
    padding: 5px 22px 5px 8px;
    font-size: .75rem;
}
.su-filter-row .su-icon-btn { flex-shrink: 0; padding: 4px 8px; }

/* Slide-down create-user drawer */
.su-create-drawer {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
    animation: suDrawerSlide .18s ease-out;
}
.su-create-drawer.hidden { display: none; }
@keyframes suDrawerSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.su-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.su-create-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 14px;
}
.su-create-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .75rem;
    color: var(--text-secondary);
}
.su-create-grid input,
.su-create-grid select {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: .85rem;
}
.su-create-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}
.su-create-actions .pill-btn { padding: 7px 16px; }
.su-create-error {
    color: #ff7675;
    font-size: 0.78rem;
    margin: 0;
}
.su-create-success {
    color: #00b894;
    font-size: 0.78rem;
    margin: 0;
}

/* v0.32.3 — Collapsible attestations section.
   Collapsed by default so it doesn't eat vertical space when empty. */
.su-attest-section {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.su-attest-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 6px 4px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: .85rem;
    text-align: left;
}
.su-attest-toggle:hover { background: var(--bg-surface); border-radius: 6px; }
.su-attest-caret {
    display: inline-block;
    transition: transform .15s ease;
    color: var(--text-muted);
    font-size: .75rem;
}
.su-attest-section:not(.collapsed) .su-attest-caret { transform: rotate(90deg); }
.su-attest-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .72rem;
    color: var(--text-secondary);
}
.su-attest-toggle-spacer { flex: 1; }
.su-attest-body-wrap {
    padding: 8px 4px 4px;
}
.su-attest-section.collapsed .su-attest-body-wrap { display: none; }
.su-attest-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* Legacy 2-column layout — left in place but no longer used by the
   Users tab. Other places may reuse it. */
.su-columns {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 20px;
    min-height: 0;
    flex: 1;
}
.su-list-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.su-create-col {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: start;
}
.su-create-col .settings-section-title { margin: 0 0 8px; }
.su-create-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 560px) {
    .su-toolbar .su-search-input { flex: 1 1 100%; order: -1; }
    .su-toolbar-title { flex: 0 0 auto; }
}

.su-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.su-section-header .settings-section-title { margin: 0; }
.su-count-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
}
.su-header-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}
.su-icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}
.su-icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.su-search-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.su-search-input {
    flex: 1;
    min-width: 200px;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: border-color 0.15s;
}
.su-search-input:focus { outline: none; border-color: var(--accent); }
.su-search-input::placeholder { color: var(--text-muted); }
.su-role-select {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.78rem;
    cursor: pointer;
}
.su-role-select:focus { outline: none; border-color: var(--accent); }

.su-filter-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.su-filter-pill {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}
.su-filter-pill:hover { border-color: var(--accent); color: var(--accent); }
.su-filter-pill.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.su-user-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    overflow-y: auto;
}
.su-loading {
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
    padding: 16px 0;
}

.su-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    position: relative;
}
.su-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.su-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.su-user-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.su-you-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 4px;
}
.su-user-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.su-presence-meta {
    color: #93c5fd;
}
.su-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 2px;
    vertical-align: middle;
}
.su-status-active  { background: #00b894; }
.su-status-disabled { background: #fdcb6e; }
.su-status-archived { background: #636e72; }

.su-user-actions { position: relative; }
.su-action-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius);
    transition: background 0.15s;
}
.su-action-toggle:hover { background: rgba(255,255,255,0.06); }

.su-action-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 195px;
    max-width: 240px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    overflow: hidden;
    /* v0.32.2 — keep the popover on-screen on narrow viewports. */
    max-height: 70vh;
    overflow-y: auto;
}
.su-action-menu.open { display: block; }
.su-action-menu button {
    display: block;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    text-align: left;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s;
}
.su-action-menu button:hover { background: rgba(255,255,255,0.06); }
.su-action-menu button.su-danger { color: #ff7675; }
.su-action-menu button.su-danger:hover { background: rgba(255,118,117,0.1); }

.su-info-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* ── MFA badge in user row ── */
.su-mfa-badge {
    display: inline-block;
    background: #00cec9;
    color: #0f1117;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Security Tab ── */
.security-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.security-smtp-col, .security-mfa-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.security-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.security-form label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.security-form input[type="text"],
.security-form input[type="password"],
.security-form input[type="number"],
.security-form input[type="email"] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    color: var(--text-primary);
    font-size: 0.85rem;
}
.security-form input:focus {
    border-color: var(--accent);
    outline: none;
}
.security-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.security-status {
    font-size: 0.78rem;
    margin: 4px 0 0;
    padding: 4px 8px;
    border-radius: 4px;
}
.security-success {
    color: #00b894;
}
.security-error {
    color: #ff7675;
}

/* MFA setup */
.mfa-qr-display {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    margin: 8px 0;
}
.mfa-secret-code {
    display: block;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--accent-2);
    word-break: break-all;
    user-select: all;
}

@media (max-width: 700px) {
    .security-grid { grid-template-columns: 1fr; }
}

/* ── Forgot password / MFA login on auth screen ── */
.auth-forgot-link {
    text-align: center;
    margin-top: 8px;
}
.auth-forgot-link a {
    color: var(--accent);
    font-size: 0.82rem;
    text-decoration: none;
}
.auth-forgot-link a:hover {
    text-decoration: underline;
}
.auth-mfa-title {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 6px;
    text-align: center;
}
.auth-mfa-hint {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 12px;
}
.mfa-login-input {
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.mfa-login-input:focus {
    border-color: var(--accent);
    outline: none;
}
.auth-back-link {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-decoration: none;
}
.auth-back-link:hover { color: var(--accent); }
.auth-success {
    color: #00b894;
    font-size: 0.82rem;
    text-align: center;
    margin: 6px 0;
}

.settings-body {
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}
.settings-body label:not(.toggle-row):not(.sw-style-label) {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.settings-body select,
.settings-body input[type="text"],
.settings-body input[type="password"] {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-family: inherit;
}
.settings-body input:focus,
.settings-body select:focus { border-color: var(--accent); outline: none; }

/* Voice settings rows */
.settings-voice-row { margin-bottom: 10px; }
.settings-field-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.settings-range-row { display: flex; align-items: center; gap: 8px; }
.settings-preview-btn { font-size: 0.82rem; padding: 5px 14px; margin-top: 4px; }

.provider-fields { display: flex; flex-direction: column; gap: 8px; }
.field-hint { font-size: 0.75rem; color: var(--text-muted); margin: 0; }
.field-hint a { color: var(--accent); text-decoration: none; }
.field-hint a:hover { text-decoration: underline; }

/* ── Model picker ─────────────────────────────────────────────────────── */
#model-picker { display: flex; flex-direction: column; gap: 12px; max-height: 280px; overflow-y: auto; }
.model-group-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
}
.model-list { display: flex; flex-direction: column; gap: 3px; }
.model-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text-primary);
    border: 1px solid transparent;
    transition: all 0.12s;
}
.model-option:hover { background: var(--bg-surface); }
.model-option.selected { border-color: var(--accent); background: var(--accent-glow); }
.model-option input[type="radio"] { accent-color: var(--accent); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .welcome-inner { max-width: 100%; }
    .pick-card { width: 52px; padding: 8px 4px; }
    .pick-icon .icon { width: 18px; height: 18px; }
    .pick-text { font-size: 0.72rem; }
    .subject-card { flex: 1 1 calc(50% - 8px); max-width: none; padding: 14px 8px; }
    .screen-header { padding: 10px 12px; }
    .topics-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .problem-body { padding: 16px 14px 100px; }
    .mc-choices { grid-template-columns: 1fr; }
    .results-card { padding: 32px 24px; }
    .chat-drawer[data-pos="bottom"].expanded { height: 55vh; height: 55dvh; }
    .chat-drawer[data-pos="right"] { width: 100vw; max-width: 100vw; }
    .chat-drawer[data-pos="float"] { width: calc(100vw - 24px); bottom: 12px; right: 12px; }
    .header-stats { gap: 8px; }
    .progress-body { padding: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VISUAL ELEMENTS (generated by problem_generator)
   ═══════════════════════════════════════════════════════════════════════ */

.visual-question { margin-top: 14px; }

/* v0.16.41 / v0.16.75 — questions render `**word**` (and legacy `<b>`) markers
   with an admin-configurable tag (b | u | i | span). Style each tag explicitly
   so the chosen emphasis is honored without mixing styles. */
.q-emph { font-style: inherit; } /* base — per-tag rules below provide the look */
b.q-emph    { font-weight: 700; }
u.q-emph    { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
em.q-emph   { font-style: italic; font-weight: 600; }
span.q-emph { font-weight: inherit; } /* "none" — no visual emphasis */

/* v0.16.19 — Word-problem illustration block */
.wp-illus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0 auto 14px;
    max-width: 420px;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.wp-illus.loaded { opacity: 1; }
.wp-illus img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    background: var(--bg-surface);
}
.wp-illus-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.7;
    font-style: italic;
}

/* Clock */
.visual-clock { width: 140px; height: 140px; display: block; margin: 0 auto 8px; }

/* Number line */
.visual-numberline { width: 100%; max-width: 520px; display: block; margin: 0 auto 12px; }

/* Reading passage */
.reading-passage {
  background: var(--surface);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 14px;
  line-height: 1.65;
}
.reading-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--primary);
}
.reading-text {
  font-size: 0.97rem;
  color: var(--text);
}

/* ═══ Passage Screen (reading time before questions) ═══ */
.passage-screen {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 0;
}
.passage-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 28px 24px 22px;
  max-width: 620px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.passage-header {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.passage-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 12px;
}
.passage-text {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 22px;
  white-space: pre-wrap;
}

/* ═══ Read Aloud bar ═══ */
.read-aloud-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--surface-hover, rgba(255,255,255,0.04));
  border-radius: 12px;
}
.read-aloud-btn {
  font-size: 0.88rem;
  white-space: nowrap;
}
.read-aloud-btn.sm {
  font-size: 0.8rem;
  padding: 4px 10px;
  margin-left: auto;
}
.voice-select {
  font-size: 0.82rem;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  max-width: 200px;
}
.voice-select option {
  background: #1e2030;
  color: #e2e4f0;
}
.tts-rate {
  width: 70px;
  accent-color: var(--accent);
}
.tts-rate-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  min-width: 24px;
}

/* ═══ Length range sub-section ═══ */
.tc-sub {
  margin-top: 10px;
}
.tc-range-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.tc-range {
  width: 100%;
  margin-top: 4px;
  accent-color: var(--accent);
}

/* v0.16.24 — Story theme dropdown + custom-description textarea */
.tc-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: right 16px top 50%, right 11px top 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.tc-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Native <option> elements: most browsers render these via the OS, so we
   explicitly paint them so they don't appear as light-grey-on-white in
   dark mode (the original bug reported in v0.16.24). */
.tc-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}
.tc-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
  margin-top: 4px;
}
.tc-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.tc-textarea::placeholder {
  color: var(--text-muted);
}

/* v0.16.25 — "Show older releases" toggle button */
.version-older-toggle {
  display: block;
  width: 100%;
  margin: 14px 0 8px;
  padding: 10px 14px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.version-older-toggle:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--accent);
}
.version-older-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* v0.16.28 — Try again / Back to topics buttons shown on error */
.problem-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.problem-error-btn {
  padding: 10px 20px;
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.problem-error-btn:hover {
  background: var(--bg-card);
  border-color: var(--accent);
}
.problem-error-btn:active { transform: scale(0.97); }
.problem-error-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.problem-error-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* v0.16.29 — Passage source badge ("AI-generated · History" vs fallback) */
.passage-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  max-width: fit-content;
  line-height: 1.3;
}
.passage-source-badge.badge-llm {
  background: rgba(108, 92, 231, 0.12);
  color: var(--accent);
  border-color: rgba(108, 92, 231, 0.35);
}
.passage-source-badge.badge-fallback {
  background: rgba(253, 203, 110, 0.12);
  color: #d99a1a;
  border-color: rgba(253, 203, 110, 0.45);
}
[data-theme="light"] .passage-source-badge.badge-fallback {
  color: #a8720e;
}

/* Pool section styles */
.tc-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}
.pool-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 6px;
}
.pool-counter {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  margin-left: auto;
}

.passage-go {
  display: block;
  margin: 0 auto;
  font-size: 1rem;
  padding: 12px 32px;
}

/* ═══ Story Modal (bring up passage during questions) ═══ */
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg, #121520);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  overflow-y: auto;
  animation: fadeIn 0.18s ease;
}
.story-modal-content {
  background: var(--surface);
  border-radius: 16px;
  padding: 24px 22px 20px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  animation: slideUp 0.22s ease;
}
.story-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.story-modal-image {
  width: 100%;
  max-height: min(260px, 34vh);
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}
.story-close {
  font-size: 1.2rem;
  opacity: 0.7;
  cursor: pointer;
}
.story-close:hover { opacity: 1; }

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

/* ═══ Show Story action button ═══ */
#btn-story {
  background: linear-gradient(135deg, #5b8cff 0%, #7c6cff 100%);
  color: #fff !important;
  border: none;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(91, 140, 255, 0.25);
}
#btn-story:hover {
  background: linear-gradient(135deg, #4a7bee 0%, #6b5bee 100%);
  color: #fff !important;
}
[data-theme="light"] #btn-story { color: #fff !important; }

/* Bookmark toggle on reading screen (v0.16.11) */
#btn-bookmark-passage {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1;
}
#btn-bookmark-passage.active {
  color: #f5b642;
  border-color: #f5b642;
}
#btn-bookmark-passage:hover { color: #f5b642; }

/* Place value blocks */
.pv-row { display: flex; gap: 24px; justify-content: center; flex-wrap: nowrap; margin-bottom: 10px; align-items: flex-end; }
.pv-group { text-align: center; flex-shrink: 0; }
.pv-blocks { display: flex; align-items: flex-end; gap: 4px; justify-content: center; }
.pv-label { font-size: 0.72rem; color: var(--text-secondary); margin-top: 6px; font-weight: 600; text-transform: capitalize; }

/* Base-10 block SVGs */
.b10-flat  { width: 44px; height: 44px; flex-shrink: 0; }
.b10-rod   { width: 5px; height: 44px; flex-shrink: 0; }
.b10-unit  { width: 5px; height: 5px; flex-shrink: 0; }
.b10-flat rect  { fill: #5b8cff; stroke: rgba(0,0,0,0.2); stroke-width: 0.3; }
.b10-rod  rect  { fill: #2dd4a8; stroke: rgba(0,0,0,0.2); stroke-width: 0.3; }
.b10-unit rect  { fill: #ffb347; stroke: rgba(0,0,0,0.2); stroke-width: 0.3; }

/* Flats wrap into rows of 5 so they don't stretch too wide */
.pv-flats { flex-wrap: wrap; max-width: 240px; }
/* Units cluster in a 2-col grid */
.pv-units { flex-wrap: wrap; width: 16px; gap: 2px; align-items: flex-start; justify-content: flex-start; }

/* Money */
.money-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 0; }
.money-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.coin-name { font-size: 0.62rem; color: var(--text-muted); font-weight: 500; max-width: 70px; text-align: center; line-height: 1.2; }

/* ── Coin base styles ─────────────────────────────────────────────────── */
.coin {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
}
.coin-rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.12);
    box-shadow:
        0 3px 10px rgba(0,0,0,0.5),
        inset 0 2px 4px rgba(255,255,255,0.2),
        inset 0 -2px 4px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 2;
}
.coin::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.06);
    pointer-events: none;
    z-index: 1;
}
.coin-face {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.coin-emblem {
    font-size: 1.1rem;
    line-height: 1;
    filter: grayscale(20%);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.coin-denom {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    letter-spacing: -0.02em;
}

/* ── Bill base ────────────────────────────────────────────────────────── */
.bill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 40px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 1.5px solid rgba(255,255,255,0.12);
    position: relative;
    overflow: hidden;
}
.bill::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 2px;
    pointer-events: none;
}
.bill-val { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════ *
 *  PER-COUNTRY COIN STYLES                                               *
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── US coins ─────────────────────────────────────────────────────────── */
.coin-us-penny   { background: radial-gradient(circle at 35% 35%, #d4894a, #b87333 40%, #8b5e2b); color: #f5e6d3; }
.coin-us-nickel  { background: radial-gradient(circle at 35% 35%, #c0c0c0, #a8a9ad 40%, #808183); color: #f0f0f0; width: 62px; height: 62px; }
.coin-us-dime    { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 50px; height: 50px; }
.coin-us-dime .coin-emblem { font-size: 0.9rem; }
.coin-us-dime .coin-denom { font-size: 0.62rem; }
.coin-us-quarter { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 68px; height: 68px; }
.coin-us-quarter .coin-denom { font-size: 0.78rem; }
.bill-us-1       { background: linear-gradient(135deg, #4a7c4a, #3a6b35 50%, #2d5a27); color: #d4e8d0; }

/* ── UK coins ─────────────────────────────────────────────────────────── */
.coin-uk-1p  { background: radial-gradient(circle at 35% 35%, #d4894a, #b87333 40%, #8b5e2b); color: #f5e6d3; width: 52px; height: 52px; }
.coin-uk-1p  .coin-emblem { font-size: 0.9rem; }
.coin-uk-1p  .coin-denom { font-size: 0.6rem; }
.coin-uk-2p  { background: radial-gradient(circle at 35% 35%, #d4894a, #b87333 40%, #7a4a1e); color: #f5e6d3; width: 58px; height: 58px; }
.coin-uk-5p  { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 48px; height: 48px; }
.coin-uk-5p  .coin-emblem { font-size: 0.85rem; }
.coin-uk-5p  .coin-denom { font-size: 0.6rem; }
.coin-uk-10p { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 56px; height: 56px; }
.coin-uk-20p { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 54px; height: 54px; border-radius: 42%; }
.coin-uk-20p .coin-rim { border-radius: 42%; }
.coin-uk-20p::after { border-radius: 42%; }
.coin-uk-50p { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 60px; height: 60px; border-radius: 42%; }
.coin-uk-50p .coin-rim { border-radius: 42%; }
.coin-uk-50p::after { border-radius: 42%; }
.coin-uk-1   { background: radial-gradient(circle at 35% 35%, #f0d060, #daa520 40%, #a07818); color: #fff8dc; width: 54px; height: 54px; }
.coin-uk-2   { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #fff; width: 62px; height: 62px; }
.coin-uk-2 .coin-rim { box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 0 0 8px #c5981a; }
.bill-uk-5   { background: linear-gradient(135deg, #3a8fd4, #2980b9 50%, #1a5276); color: #d4e8f5; }

/* ── EU coins ─────────────────────────────────────────────────────────── */
.coin-eu-1c  { background: radial-gradient(circle at 35% 35%, #d4894a, #b87333 40%, #8b5e2b); color: #f5e6d3; width: 46px; height: 46px; }
.coin-eu-1c  .coin-emblem { font-size: 0.8rem; }
.coin-eu-1c  .coin-denom { font-size: 0.56rem; }
.coin-eu-2c  { background: radial-gradient(circle at 35% 35%, #d4894a, #b87333 40%, #7a4a1e); color: #f5e6d3; width: 50px; height: 50px; }
.coin-eu-2c  .coin-denom { font-size: 0.6rem; }
.coin-eu-5c  { background: radial-gradient(circle at 35% 35%, #d4894a, #b87333 40%, #8b5e2b); color: #f5e6d3; width: 54px; height: 54px; }
.coin-eu-10c { background: radial-gradient(circle at 35% 35%, #f0d060, #daa520 40%, #a07818); color: #fff8dc; width: 52px; height: 52px; }
.coin-eu-20c { background: radial-gradient(circle at 35% 35%, #f0d060, #daa520 40%, #a07818); color: #fff8dc; width: 56px; height: 56px; }
.coin-eu-50c { background: radial-gradient(circle at 35% 35%, #f0d060, #daa520 40%, #a07818); color: #fff8dc; width: 60px; height: 60px; }
.coin-eu-1   { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #fff; width: 56px; height: 56px; }
.coin-eu-1  .coin-rim { box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 0 0 7px #c5981a; }
.coin-eu-2   { background: radial-gradient(circle at 35% 35%, #f0d060, #daa520 40%, #a07818); color: #fff; width: 60px; height: 60px; }
.coin-eu-2  .coin-rim { box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 0 0 7px #a8a8a8; }
.bill-eu-5   { background: linear-gradient(135deg, #9e9e9e, #8e8e8e 50%, #6a6a6a); color: #f0f0f0; }

/* ── CA coins ─────────────────────────────────────────────────────────── */
.coin-ca-nickel  { background: radial-gradient(circle at 35% 35%, #c0c0c0, #a8a9ad 40%, #808183); color: #f0f0f0; width: 54px; height: 54px; }
.coin-ca-dime    { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 48px; height: 48px; }
.coin-ca-dime .coin-emblem { font-size: 0.85rem; }
.coin-ca-dime .coin-denom { font-size: 0.6rem; }
.coin-ca-quarter { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 58px; height: 58px; }
.coin-ca-loonie  { background: radial-gradient(circle at 35% 35%, #f0d060, #daa520 40%, #a07818); color: #fff8dc; width: 58px; height: 58px; }
.coin-ca-loonie  .coin-denom { font-size: 0.78rem; }
.coin-ca-toonie  { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #fff; width: 62px; height: 62px; }
.coin-ca-toonie .coin-rim { box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 0 0 9px #c5981a; }
.bill-ca-5       { background: linear-gradient(135deg, #3a8fd4, #2e86c1 50%, #1b4f72); color: #d4e8f5; }

/* ── AU coins ─────────────────────────────────────────────────────────── */
.coin-au-5c  { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 48px; height: 48px; }
.coin-au-5c  .coin-emblem { font-size: 0.85rem; }
.coin-au-5c  .coin-denom { font-size: 0.6rem; }
.coin-au-10c { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 54px; height: 54px; }
.coin-au-20c { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 58px; height: 58px; }
.coin-au-50c { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 62px; height: 62px; border-radius: 38%; }
.coin-au-50c .coin-rim { border-radius: 38%; }
.coin-au-50c::after { border-radius: 38%; }
.coin-au-1   { background: radial-gradient(circle at 35% 35%, #f0d060, #daa520 40%, #a07818); color: #fff8dc; width: 56px; height: 56px; }
.coin-au-2   { background: radial-gradient(circle at 35% 35%, #f0d060, #daa520 40%, #a07818); color: #fff8dc; width: 52px; height: 52px; }
.bill-au-5   { background: linear-gradient(135deg, #f06292, #e74c8b 50%, #b03060); color: #fde8f0; }

/* ── JP coins ─────────────────────────────────────────────────────────── */
.coin-jp-1   { background: radial-gradient(circle at 35% 35%, #e0e0e0, #d0d0d0 40%, #aaaaaa); color: #555; width: 46px; height: 46px; }
.coin-jp-1   .coin-emblem { font-size: 0.85rem; }
.coin-jp-1   .coin-denom { font-size: 0.58rem; }
.coin-jp-5   { background: radial-gradient(circle at 35% 35%, #dbb842, #c5a53a 40%, #9a7e20); color: #fff8dc; width: 52px; height: 52px; }
.coin-jp-5  .coin-rim { box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 0 0 6px rgba(0,0,0,0.12); }
.coin-jp-10  { background: radial-gradient(circle at 35% 35%, #d4894a, #b87333 40%, #8b5e2b); color: #f5e6d3; width: 56px; height: 56px; }
.coin-jp-50  { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 54px; height: 54px; }
.coin-jp-50 .coin-rim { box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 0 0 6px rgba(0,0,0,0.1); }
.coin-jp-100 { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 58px; height: 58px; }
.coin-jp-500 { background: radial-gradient(circle at 35% 35%, #f0d060, #daa520 40%, #a07818); color: #fff; width: 62px; height: 62px; }
.coin-jp-500 .coin-rim { box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 0 0 7px #a8a8a8; }

/* ── IN coins ─────────────────────────────────────────────────────────── */
.coin-in-1   { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 52px; height: 52px; }
.coin-in-2   { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 56px; height: 56px; }
.coin-in-5   { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 56px; height: 56px; border-radius: 38%; }
.coin-in-5  .coin-rim { border-radius: 38%; }
.coin-in-5::after { border-radius: 38%; }
.coin-in-10  { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #fff; width: 60px; height: 60px; }
.coin-in-10 .coin-rim { box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 0 0 7px #c5981a; }
.bill-in-20  { background: linear-gradient(135deg, #e8a04a, #e08a3a 50%, #b86e1d); color: #fff8e8; }

/* ── MX coins ─────────────────────────────────────────────────────────── */
.coin-mx-50c { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 48px; height: 48px; }
.coin-mx-50c .coin-emblem { font-size: 0.85rem; }
.coin-mx-50c .coin-denom { font-size: 0.6rem; }
.coin-mx-1   { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 54px; height: 54px; }
.coin-mx-2   { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #f5f5f5; width: 56px; height: 56px; }
.coin-mx-5   { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #fff; width: 58px; height: 58px; }
.coin-mx-5  .coin-rim { box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 0 0 7px #a0623a; }
.coin-mx-10  { background: radial-gradient(circle at 35% 35%, #d8d8d8, #c0c0c0 40%, #969696); color: #fff; width: 62px; height: 62px; }
.coin-mx-10 .coin-rim { box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 0 0 8px #c5981a; }
.bill-mx-20  { background: linear-gradient(135deg, #3a8fd4, #2980b9 50%, #1a5276); color: #d4e8f5; }

/* ── Currency picker (topic config) ───────────────────────────────────── */
/* Money mode picker */
.money-mode-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.money-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 6px;
    background: var(--bg-surface);
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    color: var(--text-primary);
}
.money-mode-card:hover {
    border-color: var(--border);
    background: var(--bg-card);
}
.money-mode-card.active {
    border-color: var(--accent);
    background: var(--accent-glow);
    box-shadow: 0 0 10px var(--accent-glow);
}
.mm-icon { font-size: 0.85rem; font-weight: 700; line-height: 1; color: var(--accent); letter-spacing: -0.02em; }
.mm-name { font-size: 0.72rem; font-weight: 700; }
.mm-desc { font-size: 0.56rem; color: var(--text-muted); text-align: center; line-height: 1.2; }

/* Market receipt visual */
.shopping-receipt {
    background: #faf9f0;
    border: 2px dashed #c8c4b0;
    border-radius: 4px;
    padding: 18px 22px 14px;
    max-width: 280px;
    margin: 0 auto 16px;
    font-family: 'Courier New', Courier, monospace;
    color: #2c2c2c;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
}
.shopping-receipt::before,
.shopping-receipt::after {
    content: '';
    display: block;
    height: 4px;
    background: repeating-linear-gradient(90deg, #c8c4b0 0, #c8c4b0 4px, transparent 4px, transparent 8px);
    margin: 0 -22px;
}
.shopping-receipt::before { margin-top: -18px; margin-bottom: 10px; }
.shopping-receipt::after  { margin-bottom: -14px; margin-top: 10px; }
.shopping-receipt .receipt-header {
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1px;
    border-bottom: 1px dashed #bbb;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.shopping-receipt .market-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 0.88rem;
    line-height: 1.4;
    gap: 8px;
}
.shopping-receipt .market-row::after {
    content: '';
    flex: 1;
    border-bottom: 1px dotted #aaa;
    margin: 0 4px;
    min-width: 20px;
    position: relative;
    top: -3px;
    order: 2;
}
.shopping-receipt .market-item {
    text-transform: capitalize;
    font-weight: 500;
    white-space: nowrap;
    order: 1;
    background: none;
    border: none;
    padding: 0;
    display: inline;
    cursor: default;
    color: #2c2c2c;
    font-size: inherit;
    font-family: inherit;
}
.shopping-receipt .market-item:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}
.shopping-receipt .market-price {
    font-weight: 700;
    white-space: nowrap;
    order: 3;
    color: #2c2c2c;
}
.shopping-receipt .receipt-divider {
    border-top: 1px dashed #aaa;
    margin: 8px 0 6px;
}
.shopping-receipt .receipt-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 2px 0;
    letter-spacing: 0.5px;
}

/* Making-change visual */
.change-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    margin-bottom: 12px;
}
.change-item, .change-paid {
    background: var(--bg-surface);
    border-radius: var(--radius);
    padding: 10px 18px;
    font-size: 0.92rem;
    border: 1px solid var(--border);
}

/* Combo-meal menu visual */
.menu-card {
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    max-width: 280px;
    margin: 0 auto 12px;
}
.menu-header {
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 6px;
    margin-bottom: 8px;
    color: var(--accent);
}
.menu-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.82rem;
    border-bottom: 1px dotted var(--border);
}
.menu-row:last-of-type { border-bottom: none; }
.menu-label { }
.menu-price { font-weight: 700; color: var(--text-primary); }
.menu-budget {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 2px solid var(--border);
    text-align: center;
    font-size: 0.88rem;
}

.currency-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.currency-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    background: var(--bg-surface);
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    color: var(--text-primary);
}
.currency-card:hover {
    border-color: var(--border);
    background: var(--bg-card);
}
.currency-card.active {
    border-color: var(--accent);
    background: var(--accent-glow);
    box-shadow: 0 0 10px var(--accent-glow);
}
.currency-flag { font-size: 1.3rem; line-height: 1; }
.currency-name { font-size: 0.68rem; font-weight: 600; }
.currency-sym  { font-size: 0.62rem; color: var(--text-muted); }

/* Patterns */
.pattern-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 1.3rem; margin-bottom: 10px; }
.pattern-item { min-width: 32px; text-align: center; }
.pattern-blank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px;
    border: 2px dashed var(--accent); color: var(--accent);
    font-weight: 700; font-size: 1.2rem;
}

/* ═══ Graphs & Data Charts ═══ */

.chart-container {
    background: var(--card);
    border-radius: 14px;
    padding: 16px;
    margin: 10px auto;
    max-width: 380px;
}

.chart-title {
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 12px;
}

/* Bar chart */
.chart-bar-area {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    height: 160px;
    padding: 0 8px;
    border-bottom: 2px solid var(--border);
}
.chart-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
    height: 100%;
}
.chart-bar {
    width: 100%;
    max-width: 44px;
    min-height: 4px;
    border-radius: 6px 6px 0 0;
    transition: height 0.4s ease;
}
.chart-bar-val {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.chart-bar-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-top: 6px;
    text-align: center;
    word-break: break-word;
    line-height: 1.1;
}

/* Pie chart */
.pie-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.pie-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text);
}
.pie-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pie-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Pictograph */
.picto-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.picto-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.picto-cat {
    min-width: 80px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}
.picto-icons {
    font-size: 1.2rem;
    line-height: 1.4;
}
.picto-half {
    opacity: 0.4;
}
.picto-key {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* Line graph */
.line-graph-svg {
    width: 100%;
    max-width: 340px;
    display: block;
    margin: 0 auto;
}

/* Data table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.data-table th,
.data-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
   SEQUENCING – DRAG & DROP
   ═══════════════════════════════════════════════════════════════════════ */
.seq-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.seq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.seq-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: grab;
    user-select: none;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s, background 0.2s;
}
.seq-item:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.18);
}
.seq-item:active, .seq-item.seq-dragging {
    cursor: grabbing;
    transform: scale(1.03);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.25);
    border-color: var(--accent);
    opacity: 0.85;
}
.seq-item.seq-over {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.08);
}
.seq-item.seq-selected {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.12);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
.seq-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.seq-text {
    flex: 1;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.4;
}
.seq-grip {
    color: var(--muted);
    font-size: 1.3rem;
    flex-shrink: 0;
    opacity: 0.5;
    cursor: grab;
}
.seq-item:hover .seq-grip {
    opacity: 1;
}

/* Ghost element for touch drag */
.seq-ghost {
    position: fixed;
    left: 1rem;
    right: 1rem;
    pointer-events: none;
    opacity: 0.75;
    z-index: 9999;
    transform: scale(1.04);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Correct / wrong after checking */
.seq-item.seq-correct {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.10);
}
.seq-item.seq-correct .seq-badge {
    background: #22c55e;
}
.seq-item.seq-wrong {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.10);
}
.seq-item.seq-wrong .seq-badge {
    background: #ef4444;
}
.seq-check-btn {
    align-self: center;
    margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPOUND WORDS – MATCH THE HALVES
   ═══════════════════════════════════════════════════════════════════════ */
.match-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.25rem;
}
.match-columns {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    align-items: start;
}
.match-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.match-pairs-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
}
.match-word {
    padding: 0.65rem 1rem;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
    text-align: center;
}
.match-word:hover {
    border-color: var(--accent);
    transform: scale(1.04);
}
.match-word.match-active {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.15);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    transform: scale(1.06);
}
.match-word.match-paired {
    border-color: var(--pair-color, var(--accent));
    background: color-mix(in srgb, var(--pair-color, var(--accent)) 12%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pair-color, var(--accent)) 30%, transparent);
    cursor: pointer; /* click to unpair */
    opacity: 0.9;
}
.match-pair-label {
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pair-color, var(--accent));
    background: color-mix(in srgb, var(--pair-color, var(--accent)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--pair-color, var(--accent)) 30%, transparent);
    white-space: nowrap;
    animation: matchPop 0.25s ease;
}
@keyframes matchPop {
    0%   { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* Result states */
.match-word.match-correct,
.match-pair-label.match-correct {
    border-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.12) !important;
    color: #22c55e;
    box-shadow: none;
}
.match-word.match-wrong,
.match-pair-label.match-wrong {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444;
    box-shadow: none;
}
.match-check-btn {
    align-self: center;
    margin-top: 0.5rem;
}

/* Responsive: stack columns on small screens */
@media (max-width: 480px) {
    .match-columns {
        grid-template-columns: 1fr 1fr;
    }
    .match-pairs-col {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}
.data-table th {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-dim);
}
.data-table tbody tr:hover {
    background: rgba(108, 92, 231, 0.08);
}

/* Comparison */
.compare-row { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 1.8rem; margin-bottom: 10px; }
.compare-num { font-weight: 700; color: var(--text-primary); }
.compare-vs {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--accent); color: var(--accent);
    font-size: 1.1rem; font-weight: 700;
}

/* Tally marks */
.tally-row { display: flex; gap: 12px; justify-content: center; align-items: flex-end; flex-wrap: wrap; font-size: 1.6rem; margin-bottom: 10px; }
.tally-group { letter-spacing: 2px; }
.tally-one { margin-left: 3px; }

/* Fraction bar */
.frac-bar { display: flex; gap: 3px; justify-content: center; margin-bottom: 10px; }
.frac-fill, .frac-empty {
    width: 34px; height: 34px; border-radius: 6px;
    border: 2px solid var(--border);
}
.frac-fill { background: var(--accent); border-color: var(--accent); }
.frac-empty { background: var(--bg-surface); }

/* Fraction compare visual */
.frac-compare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}
.frac-compare-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.frac-compare-item .frac-bar { margin-bottom: 0; }
.frac-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.frac-compare-vs {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
}

/* Mixed number visual */
.frac-mixed-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.frac-mixed-visual .frac-bar { margin-bottom: 0; }
.frac-ellipsis {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0 4px;
}

/* Counting objects */
.counting-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; font-size: 1.3rem; margin-bottom: 10px; line-height: 1.6; }

/* Ruler / measurement */
.ruler-visual { text-align: center; margin-bottom: 10px; }
.ruler-obj { font-size: 1.2rem; margin-bottom: 4px; }
.ruler-bar { height: 10px; background: var(--accent); border-radius: 5px; margin: 0 auto; }
.ruler-label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   GAMES — Dashboard Cards + Game Screens
   ═══════════════════════════════════════════════════════════════════════ */

.game-section-title { margin-top: 32px; }

/* ─── Game Cards Grid ───────────────────────────────────────────────── */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px 22px;
    border-radius: 18px;
    cursor: pointer;
    border: none;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    color: #fff;
}
.game-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: 0.12;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4), transparent 60%);
    pointer-events: none;
}
.game-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.game-card:active { transform: scale(0.98); }

/* Gradient themes per game */
.game-card[data-game="speed_math"]    { background: linear-gradient(135deg, #e17055 0%, #d63031 100%); }
.game-card[data-game="number_pop"]    { background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%); }
.game-card[data-game="word_scramble"] { background: linear-gradient(135deg, #00b894 0%, #00cec9 100%); }
.game-card[data-game="spelling_bee"]  { background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%); }

/* v0.36.8 — gradients for the new subject games. Without these the
   cards rendered with no background, leaving white-on-white text in
   light mode and unreadable contrast in dark mode. */
.game-card[data-game="sci_element_match"] { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
.game-card[data-game="sci_state_sort"]    { background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); }
.game-card[data-game="sci_food_chain"]    { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.game-card[data-game="sci_atomic_sprint"] { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
.game-card[data-game="sci_temp_estimate"] { background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%); }

.game-card[data-game="hist_figure_match"]  { background: linear-gradient(135deg, #92400e 0%, #b45309 100%); }
.game-card[data-game="hist_era_sort"]      { background: linear-gradient(135deg, #6d28d9 0%, #db2777 100%); }
.game-card[data-game="hist_timeline"]      { background: linear-gradient(135deg, #0369a1 0%, #0891b2 100%); }
.game-card[data-game="hist_date_sprint"]   { background: linear-gradient(135deg, #7c2d12 0%, #c2410c 100%); }
.game-card[data-game="hist_year_estimate"] { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); }

.game-card[data-game="esp_word_match"]     { background: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%); }
.game-card[data-game="esp_gender_sort"]    { background: linear-gradient(135deg, #be185d 0%, #db2777 100%); }
.game-card[data-game="esp_sentence_order"] { background: linear-gradient(135deg, #047857 0%, #65a30d 100%); }
.game-card[data-game="esp_verb_sprint"]    { background: linear-gradient(135deg, #b91c1c 0%, #ea580c 100%); }
.game-card[data-game="esp_number_estimate"]{ background: linear-gradient(135deg, #0e7490 0%, #14b8a6 100%); }

.game-card-icon { color: var(--accent); opacity: 0.85; }
.game-card-icon .icon { width: 32px; height: 32px; filter: drop-shadow(0 2px 6px rgba(108, 92, 231, 0.3)); }
.game-card-name { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.game-card-desc { font-size: 0.72rem; opacity: 0.85; line-height: 1.3; }
.game-card-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

/* Practice Mode placeholder cards — subdued, theme-aware */
.practice-placeholder,
.practice-card {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-surface));
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.practice-card {
    cursor: pointer;
}
.practice-card .game-card-desc,
.practice-placeholder .game-card-desc {
    color: var(--text-secondary);
    opacity: 1;
}
.practice-card .game-card-name,
.practice-placeholder .game-card-name {
    text-shadow: none;
    color: var(--text-primary);
}
.practice-card .game-card-icon,
.practice-placeholder .game-card-icon {
    font-size: 2rem;
}
.practice-placeholder {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.practice-placeholder:hover {
    transform: none;
    box-shadow: none;
}
.practice-card .game-card-badge {
    background: var(--accent);
    color: #fff;
    opacity: 1;
}
.practice-placeholder .game-card-badge {
    background: var(--bg-surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.practice-section-title {
    margin-top: 32px;
}

/* Topic-config mastery hint banner */
.tc-mastery-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 8px 0 4px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    font-size: 0.88rem;
    color: var(--text-primary);
}
.tc-mastery-hint.hidden { display: none; }
.tc-mastery-icon { font-size: 1.1rem; }
.tc-mastery-text { flex: 1; line-height: 1.3; }
.tc-mastery-text strong { color: var(--accent); font-weight: 700; }
.tc-mastery-apply {
    font-size: 0.78rem;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}
.tc-mastery-apply:hover { background: var(--accent-hover); }
.tc-mastery-apply.applied {
    background: var(--success);
    cursor: default;
}

/* ─── Flashcards (Practice Mode) ─────────────────────────────────────── */
#flashcards-screen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-primary);
    color: var(--text-primary);
}
#flashcards-screen.hidden { display: none; }
.fc-stat {
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.fc-stat-know {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 15%, transparent);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.fc-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 32px;
    gap: 20px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}
.fc-progress-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-surface);
    overflow: hidden;
    border: 1px solid var(--border);
}
.fc-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 0.35s ease;
}
.fc-card-wrap {
    perspective: 1600px;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}
.fc-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 3 / 2;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
    outline: none;
}
.fc-card.flipped { transform: rotateY(180deg); }
.fc-card:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-glow);
    border-radius: 16px;
}
.fc-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.fc-face-front {
    background: linear-gradient(145deg, var(--bg-card), var(--bg-surface));
    color: var(--text-primary);
}
.fc-face-back {
    background: linear-gradient(145deg, var(--accent), var(--accent-hover));
    color: #fff;
    border-color: var(--accent);
    transform: rotateY(180deg);
}
.fc-face-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    opacity: 0.75;
    margin-bottom: 16px;
}
.fc-face-text {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.35;
    max-width: 100%;
    overflow-wrap: break-word;
}
.fc-face-text .fc-question-text {
    font-size: 1.15rem;
    font-weight: 500;
    margin-top: 14px;
}
.fc-face-text img,
.fc-face-text svg,
.fc-face-text .coin,
.fc-face-text .bill {
    max-width: 100%;
    height: auto;
}
.fc-face-text .money-display,
.fc-face-text .coins-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-height: 160px;
    overflow: hidden;
}
.fc-face-text .money-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-height: 180px;
    overflow: auto;
    margin-bottom: 8px;
}
.fc-face-text .money-item {
    transform: scale(0.7);
    transform-origin: center;
}
.fc-face-hint {
    font-size: 0.78rem;
    opacity: 0.55;
    margin-top: 18px;
    font-style: italic;
}
.fc-explanation {
    font-size: 0.92rem;
    font-weight: 400;
    opacity: 0.92;
    margin-top: 14px;
    line-height: 1.45;
    max-width: 100%;
    max-height: 120px;
    overflow-y: auto;
    white-space: pre-line;
}
.fc-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.fc-btn-review {
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}
.fc-btn-know.accent {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.fc-done {
    text-align: center;
    padding: 32px 24px;
    max-width: 480px;
}
.fc-done-icon { font-size: 4rem; margin-bottom: 8px; }
.fc-done-title { font-size: 1.8rem; margin: 0 0 12px; color: var(--text-primary); }
.fc-done-stats { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 24px; }
.fc-done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Flashcards picker overlay */
.fc-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}
.fc-picker-grid .fc-topic-pill {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.fc-picker-grid .fc-topic-pill:hover {
    background: color-mix(in srgb, var(--accent) 15%, var(--bg-surface));
    border-color: var(--accent);
}
.fc-picker-grid .fc-topic-pill.active {
    background: color-mix(in srgb, var(--accent) 25%, var(--bg-surface));
    border-color: var(--accent);
    color: var(--text-primary);
}

@media (max-width: 520px) {
    .fc-face-text { font-size: 1.25rem; }
    .fc-card { aspect-ratio: 4 / 3; }
}

/* ─── Practice Mode (Quiz / Trivia / Drill) ─────────────────────────── */
#practice-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}
#practice-screen.hidden { display: none; }
.pm-timer {
    background: rgba(255, 118, 117, 0.18);
    color: #ff7675;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pm-timer.low { animation: pmTimerPulse 0.6s ease-in-out infinite; }
@keyframes pmTimerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.pm-card-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}
.pm-card {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: cardIn 0.25s ease;
}
.pm-mode-badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-glow);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pm-question {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
}
.pm-question .fc-question-text { margin-top: 8px; }
.pm-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pm-choice {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    transition: all 0.12s ease;
}
.pm-choice:hover:not(.correct):not(.wrong):not(:disabled) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-surface));
}
.pm-choice.correct { background: rgba(0, 184, 148, 0.18); border-color: var(--success); color: var(--success); }
.pm-choice.wrong { background: rgba(225, 112, 85, 0.16); border-color: var(--error); color: var(--error); }
.pm-choice:disabled { cursor: default; }
.pm-fr { display: flex; gap: 8px; }
.pm-fr input {
    flex: 1;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--bg-input, var(--bg-surface));
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.95rem;
}
.pm-fr input:focus { border-color: var(--accent); outline: none; }
.pm-reveal {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
    border-radius: 12px;
    padding: 14px 16px;
    animation: fadeIn 0.25s ease;
}
.pm-reveal-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--success);
    margin-bottom: 6px;
}
.pm-reveal-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.pm-reveal-fact {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
    white-space: pre-wrap;
}
.pm-controls {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.pm-done {
    max-width: 480px;
    margin: 40px auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: fadeIn 0.3s ease;
}
.pm-done .fc-done-icon { font-size: 3rem; }
@media (max-width: 520px) {
    .pm-question { font-size: 1.05rem; }
    .pm-reveal-text { font-size: 1rem; }
}

/* ─── Game Screen ───────────────────────────────────────────────────── */
.game-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}
.game-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 3vw, 36px);
    overflow-y: auto;
}
/* v0.17.3 — widen the play area so games feel arcade-sized instead of
   crammed into a phone-width column on a desktop. */
.game-mode { width: 100%; max-width: min(960px, 100%); display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.2vh, 26px); }
.game-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--bg-card);
}
.game-stat .icon { color: var(--accent); }

/* ─── Speed Math ────────────────────────────────────────────────────── */
.speed-problem {
    font-size: clamp(2.8rem, 7vw, 4.6rem);
    font-weight: 800;
    text-align: center;
    color: var(--text-primary);
    animation: speedPop 0.25s ease;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}
@keyframes speedPop {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
.speed-input {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    text-align: center;
    width: min(320px, 80vw);
    padding: 16px 20px;
    border-radius: 18px;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s;
}
.speed-input:focus { border-color: var(--accent); }
.speed-feedback {
    font-size: 1.4rem;
    font-weight: 700;
    min-height: 40px;
    text-align: center;
    transition: all 0.15s;
}
.speed-feedback.correct { color: var(--success); animation: speedPop 0.2s ease; }
.speed-feedback.wrong   { color: var(--error); animation: shake 0.3s ease; }
.speed-streak {
    font-size: 0.85rem;
    color: var(--text-muted);
    min-height: 20px;
}

/* ─── Number Pop ────────────────────────────────────────────────────── */
.pop-question {
    font-size: clamp(2rem, 4.6vw, 3rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: 14px;
    color: var(--text-primary);
}
.pop-field {
    position: relative;
    width: 100%;
    max-width: 880px;
    height: clamp(360px, 62vh, 620px);
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 22%, rgba(116,185,255,0.10), transparent 55%),
        radial-gradient(circle at 82% 78%, rgba(253,121,168,0.10), transparent 55%),
        var(--bg-card);
    border: 2px solid var(--border);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 14px 40px rgba(0,0,0,0.18);
}
.pop-bubble {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease;
    user-select: none;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.2);
    animation: bubbleFloat 3s ease-in-out infinite alternate;
}
.pop-bubble:hover { transform: scale(1.15); }
.pop-bubble:active { transform: scale(0.9); }
.pop-bubble.pop-correct {
    animation: popBurst 0.35s ease forwards;
    background: var(--success) !important;
}
.pop-bubble.pop-wrong {
    animation: shake 0.3s ease;
    opacity: 0.5;
}
@keyframes bubbleFloat {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-12px); }
}
@keyframes popBurst {
    0%   { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.6; }
    100% { transform: scale(0); opacity: 0; }
}

/* Bubble color palette */
.pop-bubble:nth-child(6n+1) { background: #e17055; color: #fff; }
.pop-bubble:nth-child(6n+2) { background: #6c5ce7; color: #fff; }
.pop-bubble:nth-child(6n+3) { background: #00b894; color: #fff; }
.pop-bubble:nth-child(6n+4) { background: #fdcb6e; color: #2d3436; }
.pop-bubble:nth-child(6n+5) { background: #74b9ff; color: #2d3436; }
.pop-bubble:nth-child(6n+6) { background: #fd79a8; color: #fff; }

/* ─── Word Scramble ─────────────────────────────────────────────────── */
.scramble-hint {
    font-size: 1.1rem;
    color: var(--text-secondary);
    text-align: center;
}
.scramble-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.scramble-tile {
    width: clamp(56px, 7vw, 76px);
    height: clamp(60px, 7.5vw, 82px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 800;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    user-select: none;
    box-shadow: 0 3px 8px rgba(108,92,231,0.35);
}
.scramble-tile:hover { transform: translateY(-3px); }
.scramble-tile.used { opacity: 0.25; pointer-events: none; transform: scale(0.9); }
.scramble-slots {
    display: flex;
    gap: 8px;
    justify-content: center;
    min-height: 56px;
}
.scramble-slot {
    width: clamp(56px, 7vw, 76px);
    height: clamp(60px, 7.5vw, 82px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 800;
    border-radius: 14px;
    border: 2px dashed var(--border);
    color: var(--text-primary);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.15s;
}
.scramble-slot.filled { border-style: solid; border-color: var(--accent); background: rgba(108,92,231,0.15); }
.scramble-slot.correct { border-color: var(--success); background: rgba(0,184,148,0.15); }
.scramble-slot.wrong   { border-color: var(--error); background: rgba(225,112,85,0.15); }
.scramble-reset { margin-top: 6px; font-size: 0.82rem; }
.scramble-feedback {
    font-size: 1.2rem;
    font-weight: 700;
    min-height: 36px;
    text-align: center;
}

/* ─── Spelling Bee ──────────────────────────────────────────────────── */
.spelling-prompt {
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
}
.spelling-listen {
    font-size: 1rem;
    padding: 10px 24px;
}
.spelling-input {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    text-align: center;
    width: min(420px, 86vw);
    padding: 16px 20px;
    border-radius: 18px;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    outline: none;
    letter-spacing: 0.08em;
}
.spelling-input:focus { border-color: var(--accent); }
.spelling-check { font-size: 0.95rem; padding: 10px 28px; }
.spelling-feedback {
    font-size: 1.2rem;
    font-weight: 700;
    min-height: 36px;
    text-align: center;
}

/* ─── Game Over ─────────────────────────────────────────────────────── */
.game-over {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(15,17,23,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(6px);
    animation: fadeIn 0.3s ease;
}
.game-over-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 36px 32px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: cardIn 0.3s ease;
}
.game-over-emoji { display: flex; justify-content: center; color: var(--accent); }
.game-over-emoji .icon { width: 48px; height: 48px; }
.game-over-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.game-over-stats { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.8; }
.game-over-stats b { color: var(--text-primary); }
.game-over-actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }

/* ─── Math Racing ───────────────────────────────────────────────────── */
.game-card[data-game="math_racing"]   { background: linear-gradient(135deg, #0984e3 0%, #00cec9 100%); }
.game-card[data-game="market_mayhem"] { background: linear-gradient(135deg, #e84393 0%, #fd79a8 100%); }

.race-track {
    width: 100%;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-right: 40px;
}
.race-lane {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.race-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}
.race-progress-bar {
    flex: 1;
    height: clamp(42px, 5vh, 56px);
    background: var(--bg-card);
    border-radius: 22px;
    border: 2px solid var(--border);
    overflow: hidden;
    position: relative;
}
.race-fill {
    height: 100%;
    border-radius: 18px;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 0%;
    position: relative;
}
.race-fill-player { background: linear-gradient(90deg, #0984e3, #00cec9); }
.race-fill-cpu    { background: linear-gradient(90deg, #636e72, #b2bec3); }
.race-car {
    position: absolute;
    font-size: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    left: 0;
}
.race-car-player { left: 2px; }
.race-car-cpu    { left: 2px; }
.race-finish {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
}
.race-lap {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    margin: 6px 0;
}
.race-problem {
    font-size: clamp(2.4rem, 5.4vw, 3.6rem);
    font-weight: 800;
    text-align: center;
    color: var(--text-primary);
    animation: speedPop 0.25s ease;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.race-choices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 600px;
}
.race-choice {
    padding: 22px 12px;
    border-radius: 18px;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.race-choice:hover { border-color: var(--accent); background: rgba(108,92,231,0.1); }
.race-choice:focus { outline: none; }
.race-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.race-choice:active { transform: scale(0.96); }
.race-choice.correct { border-color: var(--success); background: rgba(0,184,148,0.15); color: var(--success); }
.race-choice.wrong   { border-color: var(--error); background: rgba(225,112,85,0.1); color: var(--error); }
.race-feedback {
    font-size: 1.1rem;
    font-weight: 700;
    min-height: 30px;
    text-align: center;
}
.race-boost {
    animation: raceBoost 0.5s ease;
    color: var(--success);
}
@keyframes raceBoost {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3) translateX(10px); }
    100% { transform: scale(1); }
}

/* ─── Market Mayhem ─────────────────────────────────────────────────── */
.market-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 460px;
    gap: 12px;
    flex-wrap: wrap;
}
.market-budget, .market-cart {
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 2px solid var(--border);
}
.market-budget { border-color: var(--success); color: var(--success); }
.market-cart   { border-color: var(--accent); color: var(--accent); }
.market-task {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.market-clue {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    padding: 14px 20px;
    background: var(--bg-card);
    border-radius: 14px;
    border-left: 4px solid var(--accent);
    width: 100%;
    max-width: 460px;
}
.market-shelves {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 460px;
}
.market-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 10px 12px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.18s;
    position: relative;
}
.market-item:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.market-item:active { transform: scale(0.96); }
.market-item.correct {
    border-color: var(--success);
    background: rgba(0,184,148,0.12);
    animation: speedPop 0.3s ease;
}
.market-item.wrong {
    border-color: var(--error);
    background: rgba(225,112,85,0.1);
    animation: shake 0.3s ease;
}
.market-item.in-cart {
    border-color: var(--accent);
    background: rgba(108,92,231,0.1);
}
.market-item-emoji { font-size: 2.2rem; }
.market-item-name  { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.market-item-price {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--success);
    padding: 2px 10px;
    background: rgba(0,184,148,0.1);
    border-radius: 8px;
}
.market-receipt {
    width: 100%;
    max-width: 460px;
    min-height: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.market-receipt-tag {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(108,92,231,0.15);
    color: var(--accent);
    font-weight: 600;
}
.market-feedback {
    font-size: 1.1rem;
    font-weight: 700;
    min-height: 30px;
    text-align: center;
}
@media (max-width: 400px) {
    .market-shelves { grid-template-columns: repeat(2, 1fr); }
    .race-choices { grid-template-columns: 1fr 1fr; }
}

/* ═══ Word Search ═══ */
.game-card[data-game="word_search"] { background: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%); }

.ws-config {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
}
.ws-config-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ws-config-row {
    width: 100%;
    max-width: 420px;
}
.ws-config-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.ws-theme-pills, .ws-count-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.ws-start-btn {
    margin-top: 8px;
    font-size: 1rem;
    padding: 12px 32px;
}

/* Puzzle area */
.ws-puzzle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.ws-info-bar {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 420px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.ws-found-count { font-weight: 700; color: var(--accent); }
.ws-theme-label { font-weight: 600; }

.ws-grid-wrap {
    position: relative;
    display: inline-block;
}
.ws-grid {
    display: grid;
    gap: 2px;
    user-select: none;
    touch-action: none;
}
.ws-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.ws-cell {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-card);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
}
.ws-cell:hover { background: var(--bg-surface); }
.ws-cell.ws-selecting {
    background: rgba(108,92,231,0.4);
    transform: scale(1.08);
}
.ws-cell.ws-found {
    color: var(--accent);
    font-weight: 800;
}

.ws-word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-width: 420px;
    padding: 8px 0;
}
.ws-bank-word {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    transition: all 0.3s;
    letter-spacing: 1px;
}
.ws-bank-word.ws-struck {
    text-decoration: line-through;
    opacity: 0.4;
    background: rgba(108,92,231,0.15);
    color: var(--accent);
}

@media (max-width: 480px) {
    .ws-cell { width: 24px; height: 24px; font-size: 0.7rem; }
}

/* ─── Game Card Gradients (new 8) ──────────────────────────────────── */
.game-card[data-game="fraction_builder"] { background: linear-gradient(135deg,#6c5ce740,#e17055aa); }
.game-card[data-game="estimation"]       { background: linear-gradient(135deg,#00b89440,#6c5ce7aa); }
.game-card[data-game="math_bomb"]        { background: linear-gradient(135deg,#d6336c40,#e17055aa); }

/* ═══════════════════════════════════════════════════════════════════════
   PROGRESS TRACKER SCREEN
   ═══════════════════════════════════════════════════════════════════════ */

#progress-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.progress-body {
    padding: 1.2rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* ── Summary Cards ─────────────────────────────────────────────────── */
.progress-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.progress-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.8rem 0.6rem;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.progress-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.psc-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.psc-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
.progress-stat-card.accent-card {
    background: linear-gradient(135deg, rgba(108,92,231,0.2), rgba(108,92,231,0.05));
    border-color: rgba(108,92,231,0.4);
}
.progress-stat-card.accent-card .psc-value { color: var(--accent); }

.progress-stat-card.streak-card {
    background: linear-gradient(135deg, rgba(253,203,110,0.2), rgba(253,203,110,0.05));
    border-color: rgba(253,203,110,0.35);
}
.progress-stat-card.streak-card .psc-value { color: #fdcb6e; }

/* ── Section Titles ────────────────────────────────────────────────── */
.progress-body .section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin: 1.2rem 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

/* ── Two-column layout for wider screens ───────────────────────────── */
.progress-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-items: start;
}

/* ── Topic Mastery Cards ───────────────────────────────────────────── */
.progress-topics {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.progress-topic-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    transition: border-color 0.15s ease;
}
.progress-topic-card:hover {
    border-color: var(--accent);
}
.ptc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.ptc-icon {
    color: var(--accent-2);
    display: flex;
    align-items: center;
}
.ptc-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    flex: 1;
}
.ptc-mastery {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
}
.mastery-mastered  { background: rgba(0,206,201,0.15); color: #00cec9; }
.mastery-proficient { background: rgba(108,92,231,0.15); color: #a29bfe; }
.mastery-developing { background: rgba(253,203,110,0.15); color: #fdcb6e; }
.mastery-beginner   { background: rgba(255,255,255,0.08); color: var(--text-muted); }

.ptc-bar-wrap {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    margin-bottom: 0.35rem;
}
.ptc-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 0.5s ease;
    min-width: 2px;
}
.ptc-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.ptc-time {
    opacity: 0.7;
}

/* ── Recent Sessions ───────────────────────────────────────────────── */
.progress-sessions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-bottom: 2rem;
}
.progress-session-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
}
.psr-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}
.psr-subject {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary);
}
.psr-grade {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.psr-date {
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.7;
    margin-left: auto;
}
.psr-stats {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.psr-score {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}
.psr-points {
    font-size: 0.7rem;
    color: var(--accent);
    font-weight: 600;
}

/* ── Empty state ───────────────────────────────────────────────────── */
.progress-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 2rem 0.5rem;
    line-height: 1.4;
}

/* ── Dashboard progress button ─────────────────────────────────────── */
#dash-progress-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(108,92,231,0.12);
    border: 1px solid rgba(108,92,231,0.25);
    color: var(--accent);
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
#dash-progress-btn:hover {
    background: rgba(108,92,231,0.22);
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* ── Reset button styling ──────────────────────────────────────────── */
#progress-reset-btn {
    color: var(--error, #e17055);
    border-color: rgba(225,112,85,0.25);
}
#progress-reset-btn:hover {
    background: rgba(225,112,85,0.12);
    border-color: rgba(225,112,85,0.5);
}

@media (max-width: 768px) {
    .progress-columns { grid-template-columns: 1fr; }
    .progress-summary { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 400px) {
    .progress-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    .progress-summary > :nth-child(5) { grid-column: 1 / -1; }
    .psr-info { flex-wrap: wrap; }
    .progress-body { padding: 0.8rem; }
}
.game-card[data-game="tower_of_ten"]     { background: linear-gradient(135deg,#00b89440,#fdcb6eaa); }
.game-card[data-game="word_chain"]       { background: linear-gradient(135deg,#a29bfe40,#6c5ce7aa); }
.game-card[data-game="crossword_dash"]   { background: linear-gradient(135deg,#fdcb6e40,#e17055aa); }
.game-card[data-game="story_builder"]    { background: linear-gradient(135deg,#00cec940,#6c5ce7aa); }
.game-card[data-game="synonym_smash"]    { background: linear-gradient(135deg,#ff758c40,#ff7eb3aa); }

/* ─── Fraction Builder ─────────────────────────────────────────────── */
.fb-target  { text-align:center; font-size:2rem; font-weight:700; color:var(--accent); margin-bottom:1rem; }

/* ─── Branding Settings ───────────────────────────────────────────── */
.branding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
@media (max-width: 700px) {
    .branding-grid { grid-template-columns: 1fr; }
}
.branding-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.branding-col h4 {
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent-2);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .25rem;
}
.color-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.color-row input[type="color"] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}
.color-row .mono {
    font-family: var(--font-mono, 'Fira Code', monospace);
    font-size: .85rem;
    color: var(--text-muted);
}

/* ─── Guest Banner ────────────────────────────────────────────────── */
.guest-banner {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff;
    text-align: center;
    padding: .65rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 500;
}
.guest-banner a {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
    cursor: pointer;
}
.guest-banner a:hover { opacity: .85; }

/* ─── Guest Access Settings Groups ────────────────────────────────── */
.guest-group {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: .5rem;
    overflow: hidden;
}
.guest-group[open] {
    border-color: var(--accent);
}
.guest-group-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    background: var(--bg-surface);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    list-style: none;
    user-select: none;
}
.guest-group-header::-webkit-details-marker { display: none; }
.guest-group-header::before {
    content: "▸";
    font-size: .75rem;
    transition: transform .2s;
    color: var(--text-muted);
}
.guest-group[open] > .guest-group-header::before {
    transform: rotate(90deg);
}
.guest-group-header > span:first-of-type {
    flex: 1;
}
.guest-toggle-all {
    font-size: .7rem;
    padding: .15rem .45rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.guest-toggle-all:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.guest-groups-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
@media (max-width: 700px) {
    .guest-groups-grid { grid-template-columns: 1fr; }
}
.guest-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: .25rem 0;
    max-height: 280px;
    overflow-y: auto;
}
@media (max-width: 600px) {
    .guest-checklist { grid-template-columns: 1fr; }
}
.guest-checklist label {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    font-size: .82rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s;
}
.guest-checklist label:hover {
    background: var(--bg-surface);
}
.guest-checklist input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.guest-other-toggles {
    padding: .4rem .85rem .6rem;
}

/* ─── Guest Locked States ─────────────────────────────────────────── */
.guest-locked {
    position: relative;
    opacity: .4;
    pointer-events: none;
    user-select: none;
    filter: grayscale(.6);
}
.guest-locked::after {
    content: "🔒";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    z-index: 2;
    pointer-events: none;
}
.fb-bar-wrap{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:1.2rem; }
.fb-bar     { display:flex; width:100%; max-width:420px; height:48px; border-radius:10px; overflow:hidden; border:2px solid var(--accent); }
.fb-seg     { border-right:1px solid rgba(255,255,255,.15); transition:background .25s; background:var(--bg-surface); }
.fb-seg.fb-filled { background:var(--accent); }
.fb-blocks  { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:.8rem; }
.fb-block   { padding:.6rem 1.4rem; border-radius:10px; border:2px solid var(--accent); background:var(--bg-card);
              color:var(--text-primary); font-size:1.1rem; font-weight:600; cursor:pointer; transition:transform .15s,background .2s; }
.fb-block:hover { transform:scale(1.08); background:var(--accent); color:#fff; }
.fb-block:disabled { opacity:.4; pointer-events:none; }

/* ─── Game Config Overlay ───────────────────────────────────────────── */
.gc-config {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 20px;
}
.gc-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}
.gc-row {
    width: 100%;
    max-width: 400px;
}
.gc-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.gc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.gc-start-btn {
    margin-top: 8px;
    padding: 10px 36px;
    font-size: 1rem;
}

/* ─── Estimation Station ───────────────────────────────────────────── */
.es-prompt    { text-align:center; font-size:1.2rem; margin-bottom:1rem; color:var(--text-primary); }
.es-line-wrap { position:relative; width:100%; max-width:500px; margin:0 auto 1.2rem; display:flex; align-items:center; gap:12px; }
.es-label     { font-size:.95rem; font-weight:600; color:var(--text-muted); min-width:2ch; }
.es-label:last-of-type { text-align:right; }
.es-track     { flex:1; height:8px; border-radius:4px; background:var(--bg-surface); position:relative; cursor:pointer; touch-action:none; margin-top:18px; margin-bottom:22px; }
.es-ticks     { position:absolute; inset:0; pointer-events:none; }
.es-tick      { position:absolute; width:1px; background:var(--text-muted); opacity:.5; height:12px; top:-2px; transform:translateX(-50%); }
.es-tick.major{ height:18px; top:-5px; opacity:.75; width:2px; }
.es-tick-label{ position:absolute; top:100%; left:50%; transform:translateX(-50%); font-size:.65rem; color:var(--text-muted); white-space:nowrap; margin-top:2px; }
.es-fill      { position:absolute; left:0; top:0; height:100%; border-radius:4px; background:var(--accent); opacity:.25; pointer-events:none; }
.es-marker    { position:absolute; width:22px; height:22px; border-radius:50%; background:var(--accent);
                top:50%; transform:translate(-50%,-50%); pointer-events:none; transition:left .1s; box-shadow:0 0 8px var(--accent); z-index:2; }
.es-tooltip   { position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
                background:var(--bg-card); color:var(--text-primary); font-size:.75rem; font-weight:700;
                padding:2px 8px; border-radius:6px; border:1px solid var(--accent); white-space:nowrap; pointer-events:none; }
.es-answer-marker { position:absolute; width:6px; height:28px; border-radius:3px; background:var(--success);
                    top:50%; transform:translate(-50%,-50%); pointer-events:none; display:none; z-index:1; }
.es-lock      { display:block; margin:0 auto; padding:.5rem 2rem; border-radius:8px; border:2px solid var(--accent);
                background:var(--bg-card); color:var(--accent); font-weight:600; cursor:pointer; transition:background .2s; }
.es-lock:hover{ background:var(--accent); color:#fff; }
.es-lock:disabled { opacity:.4; cursor:default; }

/* ─── Math Bomb ────────────────────────────────────────────────────── */
.bomb-target     { text-align:center; margin-bottom:.8rem; }
.bomb-target-num { font-size:2.2rem; font-weight:700; color:#ff6b6b; }
.bomb-current-num{ font-size:1.8rem; font-weight:700; color:var(--accent); display:block; text-align:center; margin-bottom:.8rem; }
.bomb-field      { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.bomb-op         { padding:.6rem 1.4rem; border-radius:10px; border:2px solid var(--accent); background:var(--bg-card);
                   color:var(--text-primary); font-size:1.1rem; font-weight:600; cursor:pointer; transition:transform .15s,background .2s; }
.bomb-op:hover   { transform:scale(1.08); background:var(--accent); color:#fff; }
.bomb-op.bomb-used { opacity:.3; pointer-events:none; text-decoration:line-through; }
.bomb-op:disabled  { opacity:.3; pointer-events:none; }

/* ─── Tower of Ten ─────────────────────────────────────────────────── */
.tow-goal     { text-align:center; font-size:1.2rem; color:var(--text-muted); margin-bottom:.4rem; }
.tow-goal b   { color:var(--accent); font-size:1.6rem; }
.tow-sum-num  { text-align:center; font-size:1.4rem; font-weight:700; color:var(--accent); margin-bottom:.6rem; }
.tow-tower    { display:flex; flex-direction:column; align-items:center; gap:4px; min-height:60px; margin-bottom:.8rem; }
.tow-block    { background:var(--accent); color:#fff; font-weight:700; border-radius:6px; padding:6px 0;
                text-align:center; animation:towDrop .35s ease-out; }
@keyframes towDrop { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
.tow-choices  { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.tow-block-btn{ padding:.6rem 1.4rem; border-radius:10px; border:2px solid var(--accent); background:var(--bg-card);
                color:var(--text-primary); font-size:1.1rem; font-weight:600; cursor:pointer; transition:transform .15s,background .2s; }
.tow-block-btn:hover { transform:scale(1.08); background:var(--accent); color:#fff; }
.tow-shake    { animation:towShake .4s ease; }
@keyframes towShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

/* ─── Word Chain ───────────────────────────────────────────────────── */
.chain-display { display:flex; flex-wrap:wrap; gap:4px; align-items:center; justify-content:center;
                 min-height:48px; padding:.8rem; background:var(--bg-surface); border-radius:10px; margin-bottom:1rem; overflow:auto; max-height:120px; }
.chain-link    { display:inline-block; padding:4px 10px; border-radius:6px; background:var(--accent); color:#fff;
                 font-weight:600; font-size:.95rem; animation:chainPop .3s ease; }
@keyframes chainPop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
.chain-arrow   { color:var(--text-muted); font-weight:700; }
.chain-prompt  { text-align:center; font-size:1.1rem; color:var(--text-primary); margin-bottom:.6rem; }
.chain-prompt b{ color:var(--accent); font-size:1.3rem; }
.chain-input   { display:block; margin:0 auto; width:80%; max-width:280px; padding:.6rem 1rem; border-radius:8px;
                 border:2px solid var(--accent); background:var(--bg-card); color:var(--text-primary); font-size:1rem;
                 text-align:center; outline:none; }
.chain-input:focus { box-shadow:0 0 0 3px rgba(108,92,231,.35); }

/* ─── Crossword Dash ───────────────────────────────────────────────── */
.cw-clue       { text-align:center; font-size:1.1rem; color:var(--text-primary); min-height:2rem; margin-bottom:.6rem; }
.cw-grid       { display:grid; gap:2px; max-width:300px; margin:0 auto 1rem; }
.cw-cell       { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700;
                 text-transform:uppercase; border-radius:4px; background:var(--bg-surface); color:var(--text-primary);
                 border:2px solid transparent; outline:none; cursor:text; caret-color:var(--accent); }
.cw-cell.cw-active  { border-color:var(--accent); background:rgba(108,92,231,.15); }
.cw-cell.cw-correct { background:rgba(0,184,148,.2); border-color:var(--success); }
.cw-cell.cw-black   { background:var(--bg-primary); pointer-events:none; }
.cw-clue-list  { display:flex; flex-direction:column; gap:4px; max-height:120px; overflow:auto; padding:.4rem; }
.cw-clue-item  { font-size:.85rem; color:var(--text-muted); cursor:pointer; padding:4px 8px; border-radius:6px; }
.cw-clue-item:hover { background:var(--bg-surface); color:var(--text-primary); }

/* ─── Story Builder ────────────────────────────────────────────────── */
.sb-prompt     { text-align:center; font-size:1rem; color:var(--text-muted); margin-bottom:.6rem; }
.sb-rail       { display:flex; flex-wrap:wrap; gap:6px; min-height:48px; padding:.6rem; background:var(--bg-surface);
                 border-radius:10px; margin-bottom:.6rem; border:2px dashed var(--accent); align-items:center; }
.sb-bank       { display:flex; flex-wrap:wrap; gap:6px; padding:.6rem; background:var(--bg-card); border-radius:10px; margin-bottom:.8rem; justify-content:center; }
.sb-chip       { padding:6px 14px; border-radius:8px; font-weight:600; cursor:pointer; transition:transform .15s,background .2s; font-size:.95rem; }
.sb-rail-chip  { background:var(--accent); color:#fff; }
.sb-bank-chip  { background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--accent); }
.sb-bank-chip:hover { background:var(--accent); color:#fff; transform:scale(1.05); }
.sb-rail-chip:hover { opacity:.8; transform:scale(1.05); }
.sb-placeholder{ color:var(--text-muted); font-style:italic; font-size:.9rem; }

/* ─── Synonym Smash ────────────────────────────────────────────────── */
.syn-field     { display:flex; gap:1.2rem; justify-content:center; margin-bottom:1rem; }
.syn-col       { display:flex; flex-direction:column; gap:8px; min-width:120px; }
.syn-word      { padding:.6rem 1.2rem; border-radius:10px; border:2px solid var(--accent); background:var(--bg-card);
                 color:var(--text-primary); font-weight:600; font-size:1rem; cursor:pointer; transition:transform .15s,background .2s; text-align:center; }
.syn-word:hover{ transform:scale(1.05); }
.syn-word.syn-active  { background:var(--accent); color:#fff; transform:scale(1.08); }
.syn-word.syn-matched { background:rgba(0,184,148,.3); border-color:var(--success); color:var(--success); pointer-events:none; }
.syn-word.syn-wrong   { animation:synShake .4s ease; border-color:var(--error); }
@keyframes synShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (768–1024px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {
    .dash-body { padding: 24px 32px 80px; }
    .topics-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
    .problem-card { max-width: min(92vw, 820px); }
    .results-card { min-width: auto; max-width: 520px; }
    .chat-drawer[data-pos="right"] { width: clamp(320px, 36vw, 420px); }
    .progress-body { max-width: 680px; padding: 1.2rem; }
    .game-body { padding: 20px 32px; }
    .settings-panel { width: 95vw; }
}

/* v0.16.76 — Tablet/narrow-desktop: when the side chat drawer is open,
   push the page content left so the problem area isn't covered.
   Phones (≤640px) get a full-width overlay drawer instead. Wide desktops
   (≥1281px) have natural side-by-side room with the existing layout.
   Uses `:has()` (Safari 15.4+, all current iPadOS) with a JS-toggled
   class fallback. */
@media (min-width: 641px) and (max-width: 1280px) {
    body:has(.chat-drawer[data-pos="right"].expanded) #app,
    body.chat-right-open #app {
        padding-right: clamp(320px, 36vw, 460px);
        transition: padding-right 0.3s ease;
    }
}

/* Large tablet / desktop (≥1025px) — v0.16.59 */
@media (min-width: 1025px) {
    .problem-card { max-width: min(90vw, 960px); }
    .welcome-inner { max-width: min(88vw, 1080px); }
    .topics-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
    .chat-drawer[data-pos="right"] { width: clamp(340px, 28vw, 460px); }
}

/* Landscape phone — tighten vertical chrome so content fits */
@media (orientation: landscape) and (max-height: 480px) {
    .screen-header { padding: 6px 12px; }
    .problem-body { padding-top: 8px; padding-bottom: 60px; }
    .welcome-inner { gap: 16px; }
    .welcome-title { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL PHONES (≤380px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .screen-header { gap: 6px; padding: 8px 10px; }
    .screen-header .header-title { font-size: 0.82rem; }
    .header-stats { gap: 6px; }
    .stat-badge { padding: 3px 7px; font-size: 0.72rem; }
    #dash-progress-btn { padding: 3px 6px; font-size: 0.68rem; }
    .dash-body { padding: 16px 12px 80px; }
    .problem-body { padding: 14px 10px 80px; }
    .problem-card { padding: 18px 14px; }
    .speed-input { width: 160px; font-size: 1.4rem; }
    .results-card { min-width: auto; width: 100%; padding: 24px 16px; }
    .chat-drawer[data-pos="float"] { width: calc(100vw - 24px); right: 12px; }
    .syn-col { min-width: 90px; }
    .syn-word { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SAFE-AREA INSETS — fixed elements (chat drawer, bottom content)
   ═══════════════════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .chat-drawer[data-pos="bottom"] { padding-bottom: env(safe-area-inset-bottom); }
    .chat-drawer[data-pos="float"] { bottom: calc(12px + env(safe-area-inset-bottom)); }
    .chat-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    .dash-body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
    .problem-body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
    .progress-sessions { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
    .game-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ANALYTICS DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */
.analytics-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.analytics-stat-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
}
.analytics-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}
.analytics-stat-label {
    font-size: .82rem;
    color: var(--text-secondary);
    margin-top: 4px;
}
.analytics-tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.analytics-table-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 16px;
}
.analytics-table-card h4 {
    margin: 0 0 10px;
    font-size: .95rem;
    color: var(--text-primary);
}
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}
.analytics-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,.1);
    font-weight: 500;
}
.analytics-table td {
    padding: 6px 8px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.analytics-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    padding-top: 8px;
}
.analytics-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 100%;
}
.analytics-bar-fill {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--accent);
    min-height: 2px;
    transition: height .3s;
}
.analytics-bar-label {
    font-size: .7rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   VERSION TAB
   ═══════════════════════════════════════════════════════════════════════ */
.version-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.version-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--accent-glow);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}
.version-icon .icon { width: 24px; height: 24px; }
.version-app-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.version-number {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.version-releases {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* v0.36.5 — explicitly inherit the app font so the panel matches the
       rest of the UI on browsers that fall back to a serif default. */
    font-family: inherit;
}
.version-release-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    font-family: inherit;
}
.version-release-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.version-release-tag {
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.version-release-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.version-release-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.version-release-list {
    margin: 0;
    padding-left: 1.3em;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.version-release-list li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
/* v0.16.79 — release-notes inline code spans (literal `<b>`, `**word**`, etc.) */
.release-code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.92em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

/* v0.36.5 — Release-notes search toolbar + admin archive */
.rn-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0 10px;
}
.rn-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.85rem;
}
.rn-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .25);
}
.rn-archive-btn {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.rn-archive-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.rn-archive-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.rn-empty-search {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ─── Difficulty preference labels ───────────────────────────────── */
.diff-level-labels {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: var(--text-secondary);
    margin-top: 2px;
    padding: 0 2px;
}
.settings-range-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.settings-range-row input[type="range"] {
    flex: 1;
}

/* ─── Settings tile wide variant (spans 2 cols) ──────────────────── */
.settings-tile-wide { grid-column: span 2; }
@media (max-width: 700px) { .settings-tile-wide { grid-column: span 1; } }

/* ─── Hint mode previews ─────────────────────────────────────────── */
.hint-preview-auto, .hint-preview-request, .hint-preview-off {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 24px;
}

/* ─── Theme previews ─────────────────────────────────────────────── */
.theme-preview {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 24px;
}

/* ─── Registration mode picker ───────────────────────────────────── */
.reg-mode-picker {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.reg-mode-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-secondary);
    transition: border-color .2s, background .2s;
}
.reg-mode-btn:hover { border-color: var(--accent); }
.reg-mode-btn.selected {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--text-primary);
}
.reg-mode-icon { font-size: 1.5rem; }
.reg-mode-label { font-weight: 600; font-size: .85rem; }
.reg-mode-desc { font-size: .7rem; opacity: .7; text-align: center; }
.reg-invite-create {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
@media (max-width: 600px) {
    .reg-mode-picker { flex-direction: column; }
    .reg-invite-create { flex-direction: column; align-items: stretch; }
}

/* ─── Daily goal progress bar ────────────────────────────────────── */
.daily-goal-progress {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.daily-goal-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
}
.daily-goal-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.3s;
    width: 0%;
}
.daily-goal-fill.goal-complete { background: var(--success); }
.daily-goal-text {
    font-size: .75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 50px;
}

/* ─── Site-wide notification banner ──────────────────────────────── */
.site-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 10px 20px;
    text-align: center;
    font-size: .9rem;
    font-weight: 500;
    color: #fff;
    background: var(--accent);
}
.site-banner.banner-info    { background: #3b82f6; }
.site-banner.banner-warning { background: #f59e0b; color: #1a1a1a; }
.site-banner.banner-error   { background: #ef4444; }
.site-banner.banner-success { background: #10b981; }

/* Custom AI scenario textarea */
.custom-scenario-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    resize: vertical;
    min-height: 90px;
    transition: border-color 0.15s;
}
.custom-scenario-textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.custom-scenario-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.custom-scenario-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}
.custom-scenario-counter {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.custom-scenario-banner {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(108, 124, 247, 0.35);
    background: rgba(108, 124, 247, 0.08);
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.4;
}
.custom-scenario-banner.warn {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
}
[data-theme="light"] .custom-scenario-textarea {
    background: #fff;
    color: #1a1a2e;
}
[data-theme="light"] .custom-scenario-banner {
    color: #1a1a2e;
}


/* ── AI status pill (welcome screen) + banner (settings AI tab) ─────── */
.ai-status-pill {
    position: fixed;
    top: 58px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    z-index: 105;
    transition: all 0.15s;
}
.ai-status-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.ai-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 500;
}
.ai-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-secondary);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 currentColor;
}
.ai-status-loading .ai-status-dot { background: #888; animation: ai-pulse 1.4s ease-in-out infinite; }
.ai-status-ok      { color: #1f8a4c; border-color: rgba(31,138,76,0.4); background: rgba(31,138,76,0.10); }
.ai-status-ok      .ai-status-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
.ai-status-warn    { color: #b66200; border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.10); }
.ai-status-warn    .ai-status-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }
.ai-status-error   { color: #b91c1c; border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.10); }
.ai-status-error   .ai-status-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }
@keyframes ai-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
[data-theme="light"] .ai-status-pill { background: #fff; }
[data-theme="light"] .ai-status-ok    { color: #15803d; }
[data-theme="light"] .ai-status-warn  { color: #92400e; }
[data-theme="light"] .ai-status-error { color: #991b1b; }

/* AI test-connection result */
.ai-test-result {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    border: 1px solid var(--border);
    background: var(--bg-surface);
}
.ai-test-result.ok   { border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.10); color: #22c55e; }
.ai-test-result.fail { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.10); color: #ef4444; }
.security-status.security-warn { color: #f59e0b; }

/* ── AI generation progress overlay (Custom Scenario) ──────────────── */
.ai-progress-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    backdrop-filter: blur(4px);
}
.ai-progress-overlay.hidden { display: none; }
.ai-progress-box {
    width: min(420px, 90vw);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 28px 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    text-align: center;
    color: var(--text-primary);
}
.ai-progress-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 6px;
    animation: ai-prog-spin 2.2s linear infinite;
    display: inline-block;
}
@keyframes ai-prog-spin {
    0%   { transform: rotate(0) scale(1); }
    50%  { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}
.ai-progress-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.ai-progress-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    min-height: 1.2em;
    transition: opacity 0.2s ease;
}
.ai-progress-track {
    width: 100%;
    height: 10px;
    background: var(--bg-surface);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.ai-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #6c7cf7, #a78bfa);
    border-radius: 999px;
    transition: width 0.25s ease-out;
    box-shadow: 0 0 12px rgba(108,124,247,0.45);
}
.ai-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}
[data-theme="light"] .ai-progress-box { background: #fff; color: #1a1a2e; }

/* ── Math Tool panels (Calculator + Scratch Pad) ───────────────────── */
.math-tool-panel {
    position: fixed;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    z-index: 9100;
    user-select: none;
}
.math-tool-panel.hidden { display: none; }
.math-tool-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--bg-surface);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.math-tool-close {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 4px;
}
.math-tool-close:hover { color: var(--text-primary); }
.math-tool-body { padding: 10px 12px 14px; }
/* Calculator */
.calc-display {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.35rem;
    text-align: right;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    margin-bottom: 8px;
}
.calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.calc-grid-sci {
    grid-template-columns: repeat(6, 1fr);
    margin-top: 6px;
}
.calc-key {
    padding: 12px 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.08s, background 0.15s;
}
.calc-key:hover   { background: var(--bg-card); }
.calc-key:active  { transform: translateY(1px); }
.calc-key.calc-op { background: rgba(108,124,247,0.10); border-color: rgba(108,124,247,0.35); }
.calc-key.calc-eq {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}
.calc-key.calc-sci { background: rgba(168,139,250,0.10); border-color: rgba(168,139,250,0.35); font-size: 0.9rem; }
/* Scratch pad */
#scratch-panel {
    width: 484px;
    height: 410px;
    min-width: 320px;
    min-height: 280px;
    max-width: 96vw;
    max-height: 90vh;
    resize: both;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#scratch-panel .math-tool-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#scratch-canvas {
    flex: 1;
    width: 100%;
    min-height: 0;
    background: var(--bg-surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    touch-action: none;
    cursor: crosshair;
    display: block;
}
/* v0.16.79 — when long-press is suppressed, also block iOS callout / native
   text selection / drag so the canvas behaves purely as a drawing surface. */
#scratch-panel[data-long-press="off"] #scratch-canvas {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
.scratch-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.scratch-colors { display: flex; gap: 6px; }
.scratch-color {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer; padding: 0;
}
.scratch-color.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(108,124,247,0.35); }
.scratch-size-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-secondary); }
.scratch-size-wrap input[type=range] { width: 80px; }
.scratch-tool-btn {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.82rem;
}
.scratch-tool-btn:hover { background: var(--bg-card); }
.scratch-tool-btn.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
[data-theme="light"] .math-tool-panel { background: #fff; color: #1a1a2e; }
[data-theme="light"] .calc-display { background: #f5f5f9; }
[data-theme="light"] #scratch-canvas { background: #f9f9fb; }

/* ── Calculator mode picker (Standard / Scientific / Graphing / Fraction) ─ */
#calc-panel { width: 340px; }
.calc-mode-picker {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    padding: 3px;
    background: rgba(108, 124, 247, 0.08);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.calc-mode-btn {
    flex: 1;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.calc-mode-btn:hover { color: var(--text-primary); }
.calc-mode-btn.selected {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(108, 92, 231, 0.25);
}
/* Graphing mode */
.calc-graphing { display: flex; flex-direction: column; gap: 8px; }
.calc-graph-input-row { display: flex; align-items: center; gap: 6px; }
.calc-graph-label { font-family: ui-monospace, monospace; font-weight: 600; color: var(--text-secondary); }
.calc-graph-input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.calc-graph-canvas {
    width: 100%;
    max-width: 100%;
    height: 260px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #1a1d2e;
    display: block;
}
.calc-graph-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.calc-graph-hint code {
    padding: 1px 4px;
    background: rgba(108, 124, 247, 0.12);
    border-radius: 3px;
    font-size: 0.9em;
}
/* Fraction mode */
.calc-fraction { display: flex; flex-direction: column; gap: 10px; }
.calc-frac-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.calc-frac-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.calc-frac-input input {
    width: 56px;
    padding: 6px 8px;
    text-align: center;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: ui-monospace, monospace;
}
.calc-frac-bar {
    width: 52px;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 1px;
}
.calc-frac-op {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
}
.calc-frac-result {
    padding: 10px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    font-family: ui-monospace, monospace;
    text-align: center;
    font-size: 1.05rem;
    color: var(--text-primary);
}
[data-theme="light"] .calc-graph-canvas { background: #f5f5f9; }

/* ── User menu / dropdown — light theme overrides ───────────────────── */
[data-theme="light"] .user-menu-btn {
    background: #ffffff;
    border-color: #d8dbe6;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .user-menu-btn:hover {
    border-color: rgba(108, 92, 231, 0.45);
    box-shadow: 0 4px 14px rgba(108, 92, 231, 0.12), 0 0 0 1px rgba(108, 92, 231, 0.15);
}
[data-theme="light"] .user-dropdown {
    background: #ffffff;
    border-color: #d8dbe6;
    box-shadow: 0 12px 40px rgba(26, 26, 46, 0.12);
    color: var(--text-primary);
}
[data-theme="light"] .dropdown-name  { color: var(--text-primary); }
[data-theme="light"] .dropdown-role  { color: var(--text-muted); }
[data-theme="light"] .dropdown-item  { color: var(--text-primary); }
[data-theme="light"] .dropdown-item:hover        { background: rgba(108, 92, 231, 0.08); }
[data-theme="light"] .dropdown-item-danger       { color: var(--error); }
[data-theme="light"] .dropdown-item-danger:hover { background: rgba(214, 48, 49, 0.08); }
[data-theme="light"] .dropdown-divider           { border-top-color: #e4e7ef; }

/* placeholder-removed */

/* ═══════════════════════════════════════════════════════════════════════
   TRIVIA — dedicated category-driven experience (v0.8.1)
   ═══════════════════════════════════════════════════════════════════════ */

#trivia-screen {
    --trv-accent: #9575cd;
}

.trv-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--trv-accent) 25%, transparent), transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--trv-accent) 35%, transparent);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.trv-streak-badge {
    background: linear-gradient(135deg, #ff8a65, #ff5722);
    color: #fff;
    border: none;
    font-weight: 700;
}
.trv-streak-pulse { animation: trvStreakPulse 0.55s cubic-bezier(.4,2,.5,1); }
@keyframes trvStreakPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.7); }
    50%  { transform: scale(1.25); box-shadow: 0 0 0 14px rgba(255, 87, 34, 0);   }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);      }
}

.trv-progress-fill {
    background: linear-gradient(90deg, var(--trv-accent), color-mix(in srgb, var(--trv-accent) 60%, #fff));
    transition: width 0.4s ease;
}

.trv-card-wrap {
    padding: 1.5rem;
    display: flex;
    justify-content: center;
}
.trv-card {
    position: relative;
    width: 100%;
    max-width: 720px;
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--trv-accent) 14%, transparent),
            color-mix(in srgb, var(--trv-accent) 4%, transparent)),
        var(--surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid color-mix(in srgb, var(--trv-accent) 45%, transparent);
    border-radius: 22px;
    padding: 2rem 1.75rem 1.5rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}
.trv-card-enter { animation: trvCardIn 0.4s ease both; }
@keyframes trvCardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.trv-card-correct {
    border-color: #4caf50 !important;
    box-shadow: 0 18px 50px rgba(76, 175, 80, 0.3), 0 0 0 3px rgba(76, 175, 80, 0.2);
}
.trv-card-wrong {
    border-color: #e57373 !important;
    box-shadow: 0 18px 50px rgba(229, 115, 115, 0.3), 0 0 0 3px rgba(229, 115, 115, 0.2);
    animation: trvShake 0.4s ease;
}
@keyframes trvShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.trv-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: var(--trv-accent);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--trv-accent) 45%, transparent);
}
.trv-cat-pill .trv-cat-icon { font-size: 1.1rem; }

.trv-question {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.4rem;
    color: var(--text-primary, #f5f5f7);
}

.trv-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 560px) {
    .trv-choices { grid-template-columns: 1fr; }
}

.trv-choice {
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid color-mix(in srgb, var(--trv-accent) 30%, transparent);
    border-radius: 14px;
    color: var(--text-primary, #f5f5f7);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1.3;
}
.trv-choice:hover:not(:disabled) {
    background: color-mix(in srgb, var(--trv-accent) 22%, transparent);
    border-color: var(--trv-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--trv-accent) 30%, transparent);
}
.trv-choice:disabled { cursor: default; opacity: 0.7; }
.trv-choice-correct {
    background: rgba(76, 175, 80, 0.22) !important;
    border-color: #4caf50 !important;
    color: #fff !important;
    opacity: 1 !important;
    animation: trvPop 0.35s ease;
}
.trv-choice-wrong {
    background: rgba(229, 115, 115, 0.22) !important;
    border-color: #e57373 !important;
    color: #fff !important;
    opacity: 1 !important;
}
@keyframes trvPop {
    0%   { transform: scale(1);    }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1);    }
}

.trv-reveal {
    margin-top: 1.3rem;
    padding: 1rem 1.1rem;
    background: rgba(0, 0, 0, 0.22);
    border-left: 4px solid var(--trv-accent);
    border-radius: 12px;
    animation: trvRevealIn 0.35s ease both;
}
@keyframes trvRevealIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.trv-reveal-answer {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}
.trv-reveal-status.correct { color: #81c784; }
.trv-reveal-status.wrong   { color: #e57373; }
.trv-reveal-a              { color: var(--text-primary, #f5f5f7); margin-left: 0.2rem; }
.trv-reveal-fact {
    color: var(--text-secondary, #c8c8d0);
    font-size: 0.95rem;
    line-height: 1.45;
    font-style: italic;
}
.trv-reveal-fact::before { content: "💡 "; font-style: normal; }

.trv-controls {
    margin-top: 1.2rem;
    display: flex;
    justify-content: flex-end;
}

/* Category picker */
.trv-picker-card { max-width: 820px; }
.trv-picker-intro {
    color: var(--text-secondary, #c8c8d0);
    font-size: 0.95rem;
    margin: 0 0 0.85rem;
}
.trv-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
}
.trv-cat-chip {
    --cat-color: #9575cd;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem 0.9rem;
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--cat-color) 25%, transparent),
            color-mix(in srgb, var(--cat-color) 8%, transparent));
    border: 1.5px solid color-mix(in srgb, var(--cat-color) 55%, transparent);
    border-radius: 16px;
    color: var(--text-primary, #f5f5f7);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.trv-cat-chip:hover {
    transform: translateY(-3px);
    border-color: var(--cat-color);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--cat-color) 40%, transparent);
}
.trv-cat-chip-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.2rem;
}
.trv-cat-chip-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cat-color);
    filter: brightness(1.25);
}
.trv-cat-chip-desc {
    font-size: 0.85rem;
    color: var(--text-secondary, #c8c8d0);
    line-height: 1.3;
}
.trv-cat-chip-count {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--cat-color) 80%, #fff);
    letter-spacing: 0.02em;
}

/* Light theme tweaks */
[data-theme="light"] .trv-card {
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--trv-accent) 18%, #ffffff),
            #ffffff);
    color: #1a1a2e;
}
[data-theme="light"] .trv-question  { color: #1a1a2e; }
[data-theme="light"] .trv-choice    {
    background: #fff;
    color: #1a1a2e;
}
[data-theme="light"] .trv-reveal    { background: rgba(0, 0, 0, 0.05); }
[data-theme="light"] .trv-reveal-a  { color: #1a1a2e; }
[data-theme="light"] .trv-cat-chip  { color: #1a1a2e; }
[data-theme="light"] .trv-cat-chip-desc { color: #555; }

/* ═══════════════════════════════════════════════════════════════════════
   ASSESSMENT — onboarding diagnostic (v0.9.0)
   ═══════════════════════════════════════════════════════════════════════ */

/* Welcome-screen banner */
.assess-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 0 auto 1.5rem;
    max-width: 720px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.22), rgba(0, 184, 148, 0.15));
    border: 1px solid rgba(108, 92, 231, 0.45);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(108, 92, 231, 0.22);
    animation: assessBannerIn 0.45s ease both;
}
@keyframes assessBannerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.assess-banner-icon { font-size: 2.1rem; line-height: 1; flex: 0 0 auto; }
.assess-banner-body { flex: 1 1 auto; text-align: left; }
.assess-banner-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #f5f5f7);
    margin-bottom: 0.15rem;
}
.assess-banner-sub {
    font-size: 0.9rem;
    color: var(--text-secondary, #c8c8d0);
    line-height: 1.3;
}
.assess-banner-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
@media (max-width: 640px) {
    .assess-banner { flex-direction: column; text-align: center; }
    .assess-banner-body { text-align: center; }
}

/* Assessment screen */
#assessment-screen { --as-accent: #6c5ce7; }
/* v0.18.1 — assessment screen needs explicit flex+scroll layout so the
   completion summary (band breakdown + actions) can scroll on short
   viewports. Without this, content gets clipped by `#app`'s overflow:hidden. */
#assessment-screen:not(.hidden) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
#assessment-screen .fc-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
.as-intro {
    max-width: 620px;
    margin: 2rem auto;
    padding: 2rem 1.75rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(108, 92, 231, 0.35);
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}
.as-intro-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.as-intro-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary, #f5f5f7);
    margin: 0.2rem 0 0.75rem;
}
.as-intro-text {
    color: var(--text-secondary, #c8c8d0);
    line-height: 1.5;
    max-width: 500px;
    margin: 0 auto 1.3rem;
}
.as-subject-picker { margin-bottom: 1.2rem; }
.as-intro-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.as-progress { margin: 0.5rem 0; }

.as-card-wrap { padding: 1.5rem; display: flex; justify-content: center; }
.as-card {
    position: relative;
    width: 100%;
    max-width: 720px;
    background: linear-gradient(160deg, rgba(108, 92, 231, 0.12), rgba(0, 184, 148, 0.05));
    border: 1px solid rgba(108, 92, 231, 0.45);
    border-radius: 20px;
    padding: 2rem 1.75rem 1.5rem;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24);
    animation: assessCardIn 0.35s ease both;
}
@keyframes assessCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.as-band-pill {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--as-accent);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}
.as-band-pill[data-band="elementary"] { background: #4caf50; }
.as-band-pill[data-band="middle"]     { background: #29b6f6; }
.as-band-pill[data-band="high"]       { background: #ffb74d; color: #1a1a2e; }
.as-band-pill[data-band="college"]    { background: #ba68c8; }
.as-band-pill[data-band="adult"]      { background: #ef5350; }

.as-question {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 1.3rem;
    color: var(--text-primary, #f5f5f7);
}
.as-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 560px) {
    .as-choices { grid-template-columns: 1fr; }
}
.as-choice {
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(108, 92, 231, 0.35);
    border-radius: 12px;
    color: var(--text-primary, #f5f5f7);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
}
.as-choice:hover {
    background: rgba(108, 92, 231, 0.2);
    border-color: var(--as-accent);
    transform: translateY(-2px);
}
.as-choice.active {
    background: rgba(108, 92, 231, 0.35) !important;
    border-color: var(--as-accent) !important;
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.4);
}

.as-fr { margin-bottom: 0.75rem; }
.as-fr input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(108, 92, 231, 0.45);
    border-radius: 12px;
    color: var(--text-primary, #f5f5f7);
    font-size: 1rem;
}
.as-fr input:focus {
    outline: none;
    border-color: var(--as-accent);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.25);
}

.as-controls {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Results */
.as-done {
    max-width: 640px;
    margin: 2rem auto;
    padding: 2rem 1.75rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(108, 92, 231, 0.35);
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}
.as-done-icon { font-size: 3.2rem; margin-bottom: 0.5rem; }
.as-done-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0.2rem 0 1rem;
    color: var(--text-primary, #f5f5f7);
}
.as-recommendation {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.22), rgba(0, 184, 148, 0.15));
    border: 1px solid rgba(108, 92, 231, 0.4);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin: 0 auto 1.25rem;
    text-align: left;
}
.as-rec-grade, .as-rec-diff, .as-rec-score {
    font-size: 1rem;
    color: var(--text-primary, #f5f5f7);
    margin: 0.25rem 0;
}
.as-band-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}
.as-band-row {
    display: grid;
    grid-template-columns: 130px 1fr 60px;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}
.as-band-label {
    color: var(--text-secondary, #c8c8d0);
    text-align: left;
    font-weight: 600;
}
.as-band-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    overflow: hidden;
}
.as-band-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--as-accent), #00b894);
    transition: width 0.4s ease;
}
.as-band-score {
    color: var(--text-primary, #f5f5f7);
    font-weight: 700;
    text-align: right;
}
.as-done-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Light theme */
[data-theme="light"] .assess-banner {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(0, 184, 148, 0.1));
    border-color: rgba(108, 92, 231, 0.35);
    color: #1a1a2e;
}
[data-theme="light"] .as-intro,
[data-theme="light"] .as-card,
[data-theme="light"] .as-done {
    background: #fff;
    color: #1a1a2e;
}
[data-theme="light"] .as-question,
[data-theme="light"] .as-rec-grade,
[data-theme="light"] .as-rec-diff,
[data-theme="light"] .as-rec-score,
[data-theme="light"] .as-band-score { color: #1a1a2e; }
[data-theme="light"] .as-choice    { background: #fff; color: #1a1a2e; }
[data-theme="light"] .as-fr input  { background: #fff; color: #1a1a2e; }

/* ═══════════════════════════════════════════════════════════════════════
   PASSAGE ILLUSTRATIONS (v0.10.0 / v0.10.1)
   Real photo (Wikipedia) or AI-generated image per reading passage.
   ═══════════════════════════════════════════════════════════════════════ */
.passage-illustration {
    margin: 0.5rem 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.passage-illus-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 720 / 420;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(0, 184, 148, 0.08));
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.passage-illus-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.passage-illus-frame img.loaded { opacity: 1; }

.passage-illus-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.04) 30%,
        rgba(108, 92, 231, 0.12) 50%,
        rgba(255, 255, 255, 0.04) 70%
    );
    background-size: 220% 100%;
    animation: passageIllusShimmer 2.2s linear infinite;
}
@keyframes passageIllusShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -100% 0; }
}
.passage-illus-loading-inner {
    width: min(82%, 320px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
}
.passage-illus-status {
    font-size: 0.85rem;
    color: var(--text-primary, #f5f5f7);
    opacity: 0.9;
    min-height: 1.2em;
}
.passage-illus-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    overflow: hidden;
}
.passage-illus-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2, #00b894));
    transition: width 0.25s ease;
}

.passage-illus-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #9aa0b4);
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem;
}

.passage-illus-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted, #9aa0b4);
}
.passage-illus-hint { opacity: 0.75; }
.passage-illus-actions { display: inline-flex; gap: 0.4rem; }
.passage-illus-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary, #c8c8d0);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.passage-illus-btn:hover {
    background: rgba(108, 92, 231, 0.2);
    border-color: rgba(108, 92, 231, 0.4);
    color: var(--text-primary, #f5f5f7);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .passage-illus-frame img { transition: none; }
    .passage-illus-loading   { animation: none; }
    .passage-illus-progress-bar { transition: none; }
}

/* Light theme */
[data-theme="light"] .passage-illus-frame {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.08), rgba(0, 184, 148, 0.05));
    border-color: rgba(108, 92, 231, 0.25);
}
[data-theme="light"] .passage-illus-caption,
[data-theme="light"] .passage-illus-error { color: #555; }
[data-theme="light"] .passage-illus-status { color: #1a1a2e; }
[data-theme="light"] .passage-illus-progress-track { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .passage-illus-btn {
    background: #f5f5f7;
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════
   TRIVIA ILLUSTRATIONS + ADMIN LIBRARY (v0.12.0)
   ═══════════════════════════════════════════════════════════════════════ */
.trv-image {
    margin: 0 0 1rem;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--trv-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--trv-accent) 28%, transparent);
}
.trv-image-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--trv-accent) 18%, transparent),
            color-mix(in srgb, var(--trv-accent) 6%, transparent));
    display: flex; align-items: center; justify-content: center;
}
.trv-image img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 0.4s ease;
    display: block;
}
.trv-image img.loaded { opacity: 1; }
.trv-image-loading {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; font-size: 0.82rem; color: var(--text-secondary);
}
.trv-image-spinner {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: var(--accent);
    animation: trvSpin 0.9s linear infinite;
}
@keyframes trvSpin { to { transform: rotate(360deg); } }
.trv-image figcaption {
    padding: 6px 10px; font-size: 0.78rem;
    color: var(--text-muted);
    border-top: 1px solid color-mix(in srgb, var(--trv-accent) 18%, transparent);
}

/* Admin — Trivia Library form */
.trv-custom-form {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}
.trv-custom-form label {
    display: flex; flex-direction: column;
    gap: 4px; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted);
}
.trv-custom-form input,
.trv-custom-form select,
.trv-custom-form textarea {
    font: inherit; font-size: 0.92rem;
    padding: 8px 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-transform: none; letter-spacing: normal;
}
.trv-custom-form textarea { resize: vertical; min-height: 50px; }
.trv-custom-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 700px) {
    .trv-custom-row { grid-template-columns: 1fr; }
}
.trv-custom-actions {
    display: flex; align-items: center; gap: 12px;
    margin-top: 4px;
}
.trv-custom-list {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 8px;
}
.trv-custom-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.trv-custom-item-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4px;
}
.trv-custom-item-cat {
    font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--accent); font-weight: 700;
}
.trv-custom-del {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 1rem;
    padding: 2px 6px; border-radius: 6px;
}
.trv-custom-del:hover { color: var(--danger, #e57373); background: rgba(229,115,115,0.08); }
.trv-custom-item-q { font-weight: 600; margin-bottom: 4px; }
.trv-custom-item-choices { font-size: 0.85rem; color: var(--text-secondary); }
.trv-custom-item-fact {
    font-size: 0.78rem; color: var(--text-muted);
    margin-top: 4px; font-style: italic;
}

/* AI-generate trivia spinner (v0.13.0) */
#trv-ai-generate { display: inline-flex; align-items: center; gap: 8px; }
.trv-ai-gen-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    animation: trvSpin 0.8s linear infinite;
}
.trv-ai-gen-spinner.hidden { display: none; }

/* Settings tab drag-to-reorder (v0.13.0) */
.settings-tab { cursor: grab; user-select: none; }
.settings-tab.dragging { opacity: 0.4; cursor: grabbing; }
.settings-tab.drag-over { box-shadow: inset 3px 0 0 var(--accent); }

/* ─────────────────────────────────────────────────────────────────
   v0.14.0 — Responsive header fixes (mobile/tablet)
   Keeps the user menu + AI status pill readable on narrow screens,
   truncates long usernames, wraps the dashboard header, and makes
   the top-right pills reflow so they don't overlap the welcome title.
   ───────────────────────────────────────────────────────────────── */

/* Prevent long usernames from blowing out the pill button */
.user-menu-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* The AI status pill label should also not wrap */
.ai-status-pill .ai-status-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Dashboard header: allow contents to wrap on small screens instead
   of squashing the title/stats into illegible chunks. */
.screen-header { flex-wrap: wrap; row-gap: 8px; }
.screen-header .header-info { min-width: 0; flex: 1 1 auto; }
.screen-header .header-title,
.screen-header .header-sub {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block; max-width: 100%;
}

/* Keep the dropdown inside the viewport on narrow phones */
.user-dropdown { max-width: calc(100vw - 32px); }

/* ── Tablet (≤1024px) ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .user-menu-name { max-width: 120px; }
}

/* ═══════════════════════════════════════════════════════════════
   TYPING TUTOR  (v0.16.50)
   ═══════════════════════════════════════════════════════════════ */
/* v0.29.6 — make the typing screen scrollable. Parent #app has overflow:hidden,
   so without an explicit height + overflow here the picker gets clipped past
   the viewport (you couldn't scroll down to see lessons 7-16). */
#typing-screen {
    /* v0.36.8 — Make the typing screen a strict flex column that fills
       100dvh exactly so the page itself never scrolls. The header is
       fixed-height; the picker / session areas flex to fill the
       remaining space and only their inner content scrolls if it's too
       tall. The keyboard auto-shrinks via the height-aware clamp below. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding: 0 16px;
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
#typing-screen > .tt-header { flex: 0 0 auto; }
#typing-screen > #tt-picker { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#typing-screen > #tt-session { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
#tt-session > .tt-strip-wrap { flex: 0 1 auto; min-height: 0; overflow: hidden; }
#tt-session > .tt-progress-bar { flex: 0 0 auto; }
#tt-session > #tt-keyboard { flex: 0 0 auto; margin-top: auto; margin-bottom: 4px; }
#tt-session > .tt-session-actions { flex: 0 0 auto; padding-bottom: 4px; }

/* v0.36.9 — When a lesson coach banner is present, put it in a left
   column beside the typing strip + keyboard so the instruction never
   competes with the keyboard for vertical space. The banner column is
   capped so it can't crowd out the keyboard, and it scrolls internally
   if its tip text is long. Falls back to the stacked layout above on
   narrow viewports. */
@media (min-width: 900px) {
    #typing-screen > #tt-session:has(> .tt-lesson-banner:not(.hidden)) {
        display: grid;
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr auto;
        column-gap: 18px;
        row-gap: 10px;
        align-items: start;
    }
    #tt-session:has(> .tt-lesson-banner:not(.hidden)) > .tt-lesson-banner {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: stretch;
        max-height: none;
        margin: 0;
        overflow-y: auto;
    }
    #tt-session:has(> .tt-lesson-banner:not(.hidden)) > .tt-strip-wrap    { grid-column: 2; grid-row: 1; }
    #tt-session:has(> .tt-lesson-banner:not(.hidden)) > .tt-progress-bar  { grid-column: 2; grid-row: 2; }
    #tt-session:has(> .tt-lesson-banner:not(.hidden)) > #tt-keyboard      { grid-column: 2; grid-row: 3; align-self: end; margin-top: 0; }
    #tt-session:has(> .tt-lesson-banner:not(.hidden)) > .tt-session-actions { grid-column: 2; grid-row: 4; margin-top: 0; }
}
.tt-header .header-stats .fc-stat { font-variant-numeric: tabular-nums; }

.tt-picker { display: flex; justify-content: center; padding: 16px 0; }
.tt-picker-card {
    width: 100%; max-width: 720px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    color: var(--text);
}
.tt-picker-title { margin: 0 0 4px; font-size: 1.4rem; }
.tt-picker-sub   { margin: 0 0 16px; opacity: 0.7; font-size: 0.9rem; }
.tt-section { margin: 14px 0; }
.tt-section-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; margin-bottom: 6px; }
.tt-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-pill {
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}
.tt-pill:hover { border-color: var(--accent); color: var(--text); }
.tt-pill.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.tt-level-hint { margin: 8px 0 0; font-size: 0.78rem; opacity: 0.65; line-height: 1.4; }
.tt-picker-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-end; }

/* Live session */
.tt-session { padding: 8px 0; }
.tt-strip-wrap { position: relative; }
.tt-strip {
    font-family: 'Cascadia Code', 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
    font-size: 1.55rem;
    line-height: 1.65;
    letter-spacing: 0.01em;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 26px;
    min-height: 160px;
    max-height: 260px;
    overflow-y: auto;
    color: var(--text-muted);
    user-select: none;
    cursor: text;
    outline: none;
    word-break: break-word;
}
.tt-strip:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.18); }
.tt-ch { transition: color 80ms; }
.tt-pending { color: var(--text-muted); }
.tt-correct { color: var(--text); }
.tt-wrong   { color: #fff; background: #ef4444; border-radius: 3px; }
.tt-current {
    background: rgba(99,102,241,0.22);
    border-radius: 3px;
    box-shadow: inset 0 -2px 0 var(--accent);
}
.tt-space.tt-pending { color: var(--text-muted); opacity: 0.6; }
.tt-space.tt-correct { color: var(--text-muted); opacity: 0.85; }
.tt-space.tt-wrong   { color: #fff; }

.tt-input-hidden {
    position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
    left: -9999px; top: 0;
}

.tt-progress-bar {
    margin: 14px 0;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.tt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #8b5cf6);
    width: 0%;
    transition: width 0.2s;
}

/* Virtual keyboard */
.tt-keyboard {
    display: flex; flex-direction: column;
    gap: var(--tt-kb-gap, 6px);
    margin: 16px auto 4px;
    width: 100%;
    max-width: var(--tt-kb-max, 760px);
    padding: var(--tt-kb-pad, 12px);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    --tt-kb-key: 42px;
    --tt-kb-font: 0.85rem;
}
/* v0.16.58 — size presets */
.tt-keyboard[data-size="auto"]        { --tt-kb-key: clamp(34px, 5.2vw, 64px); --tt-kb-font: clamp(0.8rem, 1.4vw, 1.1rem); --tt-kb-max: min(96vw, 1100px); }
.tt-keyboard[data-size="compact"]     { --tt-kb-key: 36px; --tt-kb-font: 0.78rem; --tt-kb-max: 680px; }
.tt-keyboard[data-size="comfortable"] { --tt-kb-key: 48px; --tt-kb-font: 0.95rem; --tt-kb-max: 880px; --tt-kb-gap: 7px; }
.tt-keyboard[data-size="large"]       { --tt-kb-key: 64px; --tt-kb-font: 1.15rem; --tt-kb-max: 1100px; --tt-kb-gap: 8px; --tt-kb-pad: 16px; }

/* v0.36.5 — Dynamic resizing: clamp the keyboard against viewport height too
   so short windows (laptops, split-screen) don't push the bottom row off
   the screen. The key size and gap shrink together with `min(...)`. */
.tt-keyboard {
    --tt-kb-key: min(var(--tt-kb-key), calc((100dvh - 360px) / 5.4));
}
@media (max-height: 720px) {
    .tt-keyboard { --tt-kb-pad: 8px; --tt-kb-gap: 4px; }
    .tt-strip { min-height: 80px; max-height: 140px; padding: 12px 16px; font-size: 1.2rem; line-height: 1.45; }
    #typing-screen { padding-bottom: 12px; }
}
@media (max-height: 560px) {
    .tt-keyboard { --tt-kb-pad: 6px; --tt-kb-gap: 3px; --tt-kb-font: 0.7rem; }
    .tt-strip { min-height: 60px; max-height: 100px; font-size: 1rem; padding: 8px 12px; }
}

/* v0.16.58 — floating-bottom position */
.tt-keyboard[data-pos="floating-bottom"] {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 90;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}
#typing-screen.tt-has-floating-kb { padding-bottom: clamp(180px, 28vh, 320px); }

.tt-kb-row { display: flex; gap: var(--tt-kb-gap, 5px); justify-content: center; }
.tt-kb-row-2 { padding-left: calc(var(--tt-kb-key) * 0.42); }
.tt-kb-row-3 { padding-left: calc(var(--tt-kb-key) * 0.76); }
.tt-kb-key {
    flex: 1 1 var(--tt-kb-key);
    min-width: calc(var(--tt-kb-key) * 0.6);
    max-width: calc(var(--tt-kb-key) * 1.4);
    height: var(--tt-kb-key);
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cascadia Code', monospace;
    font-size: var(--tt-kb-font);
    color: var(--text);
    transition: all 0.1s;
    user-select: none;
}
[data-theme="light"] .tt-kb-key { background: #f8fafc; }
.tt-kb-space { flex: 4 1 auto; max-width: calc(var(--tt-kb-key) * 9); font-size: 0.7rem; opacity: 0.6; }
/* Touch mode: bigger tap targets + clear pressable feel */
.tt-keyboard.tt-kb-touchmode .tt-kb-key { cursor: pointer; }
.tt-keyboard.tt-kb-touchmode .tt-kb-key:active {
    transform: translateY(1px) scale(0.97);
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.tt-kb-next {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
    transform: translateY(-1px);
}
.tt-kb-hit  { background: #10b981; color: #fff; border-color: #10b981; }
.tt-kb-miss { background: #ef4444; color: #fff; border-color: #ef4444; animation: tt-shake 180ms; }
@keyframes tt-shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .tt-kb-miss { animation: none; }
}

.tt-session-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

/* Done overlay — extends fc-done */
.tt-done-card { max-width: 540px; }
.tt-done-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0;
}
.tt-done-stat {
    display: flex; flex-direction: column; align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 6px;
}
.tt-done-num { font-size: 1.6rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.tt-done-lbl { font-size: 0.72rem; opacity: 0.7; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Heatmap on summary */
.tt-heatmap { margin: 14px 0 4px; }.tt-heatmap-empty { text-align: center; opacity: 0.7; font-size: 0.85rem; padding: 8px; }
.tt-heatmap-legend { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 0.72rem; }
.tt-heatmap-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.tt-heatmap-hint  { opacity: 0.55; }
.tt-heatmap-kb { display: flex; flex-direction: column; gap: 3px; }
.tt-heatmap-row { display: flex; gap: 3px; justify-content: center; }
.tt-heatmap-row-2 { padding-left: 12px; }
.tt-heatmap-row-3 { padding-left: 22px; }
.tt-heatmap-key {
    flex: 0 0 28px; height: 28px;
    border: 1px solid var(--border);
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cascadia Code', monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: pre;
    line-height: 1;
    text-align: center;
}
.tt-heatmap-key-err { color: var(--text); font-weight: 600; }
.tt-heatmap-space { flex: 1 1 auto; max-width: 220px; font-size: 0.62rem; }

/* Tablet/mobile */
@media (max-width: 720px) {
    .tt-strip { font-size: 1.2rem; padding: 16px 18px; }
    .tt-kb-key { flex: 0 0 32px; height: 36px; font-size: 0.78rem; }
    .tt-kb-row-2 { padding-left: 12px; }
    .tt-kb-row-3 { padding-left: 22px; }
    .tt-done-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .tt-keyboard { display: none; } /* hide virtual keyboard on phones — physical keyboard not realistic anyway */
    .tt-keyboard.tt-kb-touchmode { display: flex; } /* v0.16.58 — keep it visible when tap-to-type is active */
    .tt-strip { font-size: 1.05rem; }
}


/* ── Phone (≤640px) ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .user-menu { top: 10px; right: 12px; }
    .user-menu-btn {
        padding: 4px 10px 4px 4px;
        font-size: 0.78rem;
    }
    .user-avatar { width: 26px; height: 26px; font-size: 0.72rem; }
    .user-menu-name { max-width: 90px; }
    .user-menu-chevron { font-size: 0.65rem; }

    .ai-status-pill {
        top: auto;
        bottom: 12px;   /* move out of the crowded top-right on phones */
        right: 12px;
        font-size: 0.72rem;
        padding: 4px 10px;
    }
    .ai-status-pill .ai-status-label { max-width: 130px; }

    /* Dashboard header tightens up */
    .screen-header { padding: 10px 12px; gap: 8px; }
    .screen-header .header-stats { gap: 6px; flex-wrap: wrap; }
}

/* ── Very small (≤380px) ────────────────────────────────────────── */
@media (max-width: 380px) {
    .user-menu-name { display: none; }  /* avatar + chevron only */
    .ai-status-pill .ai-status-label { max-width: 90px; }
}

/* ─────────────────────────────────────────────────────────────────
   v0.15.0 — Theme-aware scrollbars (global)
   ───────────────────────────────────────────────────────────────── */
:root {
    --scroll-thumb: rgba(255,255,255,0.18);
    --scroll-thumb-hover: rgba(255,255,255,0.32);
    --scroll-track: rgba(255,255,255,0.04);
}
[data-theme="light"] {
    --scroll-thumb: rgba(0,0,0,0.22);
    --scroll-thumb-hover: rgba(0,0,0,0.38);
    --scroll-track: rgba(0,0,0,0.04);
}
html { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; }
* { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-corner { background: var(--scroll-track); }

/* ─────────────────────────────────────────────────────────────────
   v0.15.0 — Dictionary tooltip + interactive words
   ───────────────────────────────────────────────────────────────── */
.dict-active .dict-word {
    cursor: help;
    border-bottom: 1px dotted rgba(108,92,231,0.45);
    transition: background 0.12s, color 0.12s;
}
.dict-active .dict-word:hover,
.dict-active .dict-word:focus {
    background: rgba(108,92,231,0.18);
    border-radius: 3px;
}
.dict-tip {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    background: var(--bg-card, #242738);
    color: var(--text-primary, #fff);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.35);
    font-size: 0.82rem;
    line-height: 1.35;
    max-width: 280px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.dict-tip.visible { opacity: 1; transform: translateY(0); }
.dict-tip-word { font-weight: 700; margin-bottom: 4px; color: var(--accent); text-transform: capitalize; }
.dict-tip-pos { font-style: italic; opacity: 0.7; margin-right: 4px; font-size: 0.75rem; }
.dict-tip-def { margin-top: 4px; }
.dict-tip-loading, .dict-tip-empty { opacity: 0.7; font-style: italic; }

/* ─────────────────────────────────────────────────────────────────
   v0.15.0 — Mobile header fix (revert v0.14.0 bottom-pinning)
   Place AI pill inline next to user menu instead of pinning bottom-right.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ai-status-pill {
        top: 10px !important;
        bottom: auto !important;
        right: auto !important;
        left: 12px;     /* sits in the top-LEFT so it never collides with user menu top-right */
        z-index: 105;
        font-size: 0.7rem;
        padding: 3px 9px;
    }
    .ai-status-pill .ai-status-label { max-width: 110px; }
    /* Welcome screen content needs a bit of top padding so it doesn't slide under pills */
    #welcome-screen .welcome-inner { padding-top: 56px; }
}

/* On very small phones, collapse the AI pill to just the dot */
@media (max-width: 380px) {
    .ai-status-pill .ai-status-label { display: none; }
    .ai-status-pill { padding: 4px; }
    .ai-status-pill .ai-status-dot { margin: 0 2px; }
}

/* ─────────────────────────────────────────────────────────────────
   v0.16.0 — Read-aloud transport controls (passage reader)
   ───────────────────────────────────────────────────────────────── */
.read-aloud-bar-v2 {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 10px 14px; margin: 12px 0 6px;
    background: var(--bg-card, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
}
.ra-controls { display: inline-flex; align-items: center; gap: 4px; }
.ra-btn {
    width: 38px; height: 38px; display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary, #fff);
    border-radius: 10px; cursor: pointer;
    font-size: 1.1rem; line-height: 1;
    transition: all 0.12s;
}
.ra-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.ra-btn:active { transform: translateY(0); }
.ra-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.ra-btn-primary { width: 46px; height: 46px; font-size: 1.4rem; background: var(--accent); border-color: var(--accent); color: #fff; }
.ra-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ra-btn-sm { width: 34px; height: 34px; font-size: 0.95rem; }
.ra-progress { font-size: 0.8rem; opacity: 0.75; min-width: 90px; margin-left: 6px; }
.ra-voice-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: nowrap;
}
.ra-inline-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.read-aloud-bar-v2 .ra-voice-row .voice-select {
    max-width: 290px;
}
.read-aloud-bar-v2 .ra-voice-row .tts-rate {
    width: 90px;
}
[data-theme="light"] .ra-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ra-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 640px) {
    .read-aloud-bar-v2 { gap: 8px; padding: 8px 10px; }
    .ra-voice-row { margin-left: 0; flex-wrap: wrap; }
    .ra-progress { min-width: 0; }
    .ra-inline-label { min-width: 40px; }
}

/* ─────────────────────────────────────────────────────────────────
   v0.16.1 — Trivia image size cap + consolidated user menu
   ───────────────────────────────────────────────────────────────── */

/* Cap trivia illustration so options + buttons stay on screen */
.trv-image-media {
    aspect-ratio: auto !important;
    max-height: min(180px, 22vh);
    min-height: 110px;
}
.trv-image img { max-height: min(180px, 22vh); object-fit: cover; }
@media (max-width: 640px) {
    .trv-image-media { max-height: min(140px, 18vh); min-height: 96px; }
    .trv-image img   { max-height: min(140px, 18vh); }
}
@media (max-height: 780px) {
    .trv-image-media { max-height: 18vh; min-height: 96px; }
    .trv-image img   { max-height: 18vh; }
}

/* Consolidated dropdown items */
.dropdown-item-ai {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600;
}
.dropdown-item-ai .ai-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
    background: #888;
}
.dropdown-item-ai.ai-status-loading .ai-status-dot { background: #888; animation: ai-pulse 1.4s ease-in-out infinite; }
.dropdown-item-ai.ai-status-ok      .ai-status-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
.dropdown-item-ai.ai-status-ok      { color: #1f8a4c; }
.dropdown-item-ai.ai-status-warn    .ai-status-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }
.dropdown-item-ai.ai-status-warn    { color: #b66200; }
.dropdown-item-ai.ai-status-error   .ai-status-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }
.dropdown-item-ai.ai-status-error   { color: #b91c1c; }
.dropdown-item-ai .ai-status-label { flex: 1; text-align: left; }

/* ─── Story bookmarks (v0.16.11) ─── */
.icon-btn.story-bookmark {
  background: transparent;
  color: var(--fg, #fff);
  font-size: 1.25rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 8px;
  opacity: 0.85;
  margin-right: 4px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.icon-btn.story-bookmark:hover { transform: scale(1.12); opacity: 1; }
.icon-btn.story-bookmark.active { color: #f5b642; opacity: 1; }

.bookmarks-count-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 0.72rem;
  border-radius: 999px;
  background: var(--accent-soft, rgba(255,255,255,0.1));
  color: var(--fg, #fff);
  vertical-align: middle;
}
.bookmarks-list {
  margin-top: 6px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bookmarks-empty {
  font-size: 0.82rem;
  opacity: 0.7;
  margin: 6px 0 0;
}
.bookmark-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border-radius: 10px;
}
.bookmark-info { flex: 1 1 auto; min-width: 0; }
.bookmark-title {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bookmark-meta { font-size: 0.72rem; opacity: 0.6; margin-top: 2px; }
.bookmark-row .pill-btn.xs {
  padding: 4px 10px;
  font-size: 0.78rem;
}
.bookmark-row .icon-btn { padding: 4px 8px; font-size: 0.95rem; background: transparent; }
.bookmark-row .icon-btn:hover { color: #e06060; }

/* Saved Stories full pane (v0.16.11) */
.bookmarks-list-full {
  max-height: none;
  gap: 8px;
}
.bookmarks-search {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2, rgba(255,255,255,0.04));
  color: var(--text-primary, var(--fg, #fff));
  font-size: 0.88rem;
}
[data-theme="light"] .bookmarks-search {
  background: #fff;
  color: #222;
}

/* Dynamic results CTA (v0.16.11) */
.results-hint {
  margin: 4px 0 10px;
  font-size: 0.88rem;
  opacity: 0.8;
  text-align: center;
  min-height: 1.2em;
}
.results-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.results-actions .hidden { display: none !important; }


/* Typing Tutor caret + size variants (v0.16.52) */
#tt-strip[data-caret="block"] .tt-current { background: var(--accent); color: var(--bg-surface); border-radius: 2px; }
#tt-strip[data-caret="underline"] .tt-current { box-shadow: inset 0 -2px 0 var(--accent); }
#tt-strip[data-caret="line"] .tt-current { box-shadow: inset 2px 0 0 var(--accent); }
#tt-strip[data-size="sm"] { font-size: 1.0rem; }
#tt-strip[data-size="md"] { font-size: 1.25rem; }
#tt-strip[data-size="lg"] { font-size: 1.55rem; }


/* v0.16.53 — Typing Tutor: custom text + mastery + per-key WPM + big mode */
.tt-custom-text {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
}
.tt-custom-text:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.tt-pill-passed { box-shadow: inset 0 0 0 1px rgba(34,197,94,0.55); }
.tt-pill-locked { opacity: 0.45; cursor: not-allowed; }

/* Per-key WPM panel on summary */
.tt-perkey { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.tt-pk-row {
    display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px;
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-surface);
}
.tt-pk-title { font-size: 0.78rem; font-weight: 700; opacity: 0.85; }
.tt-pk-cells { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-pk-cell {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    font-size: 0.78rem;
}
.tt-pk-key { font-family: 'Cascadia Code', monospace; font-weight: 700; color: var(--accent); }
.tt-pk-wpm { font-variant-numeric: tabular-nums; opacity: 0.85; }

/* Big mode: scales the strip + keyboard for visibility / projector use.
   Use real CSS sizing (not transform:scale) so the page layout reflows and
   the action buttons below get pushed down properly. */
.tt-big #tt-strip { font-size: 2.0rem !important; line-height: 1.45; padding: 22px 18px; min-height: 120px; }
.tt-big[data-size] #tt-strip { font-size: 2.0rem !important; }
.tt-big #tt-keyboard { padding: 18px; gap: 8px; max-width: 980px; margin: 14px auto 8px; }
.tt-big .tt-kb-row { gap: 7px; }
.tt-big .tt-kb-row-2 { padding-left: 24px; }
.tt-big .tt-kb-row-3 { padding-left: 42px; }
.tt-big .tt-kb-key { flex: 0 0 56px; height: 56px; font-size: 1.15rem; border-radius: 9px; }
.tt-big .tt-kb-space { max-width: 500px; font-size: 0.95rem; }
.tt-big .tt-progress-bar { height: 10px; }
.tt-big .fc-stat { font-size: 1.1rem; }
.tt-big .tt-session-actions { margin-top: 18px; }
.tt-big .tt-session-actions .pill-btn { font-size: 1.0rem; padding: 10px 18px; }

#tt-bigmode.active { background: var(--accent); color: var(--bg-surface); }

/* v0.16.54 — Typing Tutor done screen as proper centered scrollable modal */
#tt-done.fc-done-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}
#tt-done.fc-done-overlay.hidden { display: none !important; }
#tt-done .fc-done-card {
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    text-align: center;
    /* Smooth inertial scroll on touch devices */
    -webkit-overflow-scrolling: touch;
}
#tt-done .fc-done-card::-webkit-scrollbar { width: 10px; }
#tt-done .fc-done-card::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 5px;
}
#tt-done .fc-done-actions {
    position: sticky;
    bottom: -24px;
    margin: 16px -28px -24px;
    padding: 14px 28px;
    background: linear-gradient(to top, var(--bg-surface) 70%, transparent);
    z-index: 2;
}

/* Make sure heatmap + per-key panels don't get squeezed in narrow widths */
@media (max-width: 560px) {
    #tt-done .fc-done-card { padding: 20px 16px; }
    #tt-done .fc-done-actions { margin: 12px -16px -20px; padding: 12px 16px; }
    .tt-pk-row { grid-template-columns: 1fr; }
}

/* v0.16.56 — Typing Tutor: keyboard finger-tint, labels, home-row pegs */
.tt-kb-tinted .tt-kb-key[data-finger="lp"] { background: rgba(239, 68, 68, 0.16); }
.tt-kb-tinted .tt-kb-key[data-finger="lr"] { background: rgba(245, 158, 11, 0.16); }
.tt-kb-tinted .tt-kb-key[data-finger="lm"] { background: rgba(234, 179, 8, 0.16); }
.tt-kb-tinted .tt-kb-key[data-finger="li"] { background: rgba(34, 197, 94, 0.16); }
.tt-kb-tinted .tt-kb-key[data-finger="ri"] { background: rgba(20, 184, 166, 0.16); }
.tt-kb-tinted .tt-kb-key[data-finger="rm"] { background: rgba(59, 130, 246, 0.16); }
.tt-kb-tinted .tt-kb-key[data-finger="rr"] { background: rgba(139, 92, 246, 0.16); }
.tt-kb-tinted .tt-kb-key[data-finger="rp"] { background: rgba(236, 72, 153, 0.16); }
.tt-kb-tinted .tt-kb-key[data-finger="th"] { background: rgba(148, 163, 184, 0.14); }

[data-theme="light"] .tt-kb-tinted .tt-kb-key[data-finger="lp"] { background: rgba(239, 68, 68, 0.10); }
[data-theme="light"] .tt-kb-tinted .tt-kb-key[data-finger="lr"] { background: rgba(245, 158, 11, 0.10); }
[data-theme="light"] .tt-kb-tinted .tt-kb-key[data-finger="lm"] { background: rgba(234, 179, 8, 0.10); }
[data-theme="light"] .tt-kb-tinted .tt-kb-key[data-finger="li"] { background: rgba(34, 197, 94, 0.10); }
[data-theme="light"] .tt-kb-tinted .tt-kb-key[data-finger="ri"] { background: rgba(20, 184, 166, 0.10); }
[data-theme="light"] .tt-kb-tinted .tt-kb-key[data-finger="rm"] { background: rgba(59, 130, 246, 0.10); }
[data-theme="light"] .tt-kb-tinted .tt-kb-key[data-finger="rr"] { background: rgba(139, 92, 246, 0.10); }
[data-theme="light"] .tt-kb-tinted .tt-kb-key[data-finger="rp"] { background: rgba(236, 72, 153, 0.10); }

/* Finger labels under main letter */
.tt-kb-labeled .tt-kb-key { flex-direction: column; gap: 1px; padding-top: 2px; padding-bottom: 1px; }
.tt-kb-main { font-size: inherit; }
.tt-kb-fingerlbl { font-size: 0.55rem; opacity: 0.55; letter-spacing: 0.04em; text-transform: uppercase; }
.tt-big.tt-kb-labeled .tt-kb-fingerlbl { font-size: 0.7rem; }

/* Home-row pegs (F + J bumps) */
.tt-kb-pegs .tt-kb-peg { position: relative; }
.tt-kb-pegs .tt-kb-peg::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 8px; height: 2px;
    transform: translateX(-50%);
    background: var(--accent);
    border-radius: 1px;
    opacity: 0.85;
}
.tt-big.tt-kb-pegs .tt-kb-peg::after { width: 12px; height: 3px; bottom: 7px; }


/* ============================================================
   v0.16.80 — Learning Timer floating widget
   ============================================================ */
.lt-widget {
    position: fixed;
    z-index: 950;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
    cursor: grab;
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lt-widget.hidden { display: none !important; }
.lt-widget.dragging { cursor: grabbing; opacity: 0.92; transition: none; box-shadow: 0 10px 28px rgba(0,0,0,0.18); }
.lt-widget[data-pos="top-center"]   { top: 12px; left: 50%; transform: translateX(-50%); right: auto; bottom: auto; }
.lt-widget[data-pos="top-left"]     { top: 12px; left: 12px; right: auto; bottom: auto; transform: none; }
.lt-widget[data-pos="top-right"]    { top: 12px; right: 12px; left: auto; bottom: auto; transform: none; }
.lt-widget[data-pos="bottom-right"] { bottom: 16px; right: 16px; top: auto; left: auto; transform: none; }
.lt-widget[data-pos="custom"]       { transform: none; }
.lt-widget[data-running="true"]     { border-color: var(--accent); box-shadow: 0 6px 20px var(--accent-glow); }
.lt-widget[data-overtime="true"]    { border-color: var(--error); color: var(--error); }
.lt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--accent);
}
.lt-widget[data-overtime="true"] .lt-icon { color: var(--error); }
.lt-time {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    min-width: 52px;
    text-align: center;
}
.lt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.lt-btn:hover { transform: scale(1.05); background: var(--accent-hover); }
.lt-btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.lt-btn-secondary:hover { background: var(--bg-surface); color: var(--text-primary); }
.lt-btn svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
    .lt-widget { padding: 6px 10px; font-size: 0.85rem; gap: 6px; }
    .lt-time { min-width: 44px; }
    .lt-btn { width: 22px; height: 22px; }
    .lt-btn svg { width: 12px; height: 12px; }
}

/* Expiry modal */
.lt-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.lt-modal.hidden { display: none !important; }
.lt-modal-card {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 22px 18px;
    max-width: 380px;
    width: 100%;
    box-shadow: var(--shadow);
    text-align: center;
}
.lt-modal-card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.lt-modal-card p { margin: 0 0 16px; color: var(--text-secondary); font-size: 0.92rem; }
.lt-modal-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lt-modal-btn {
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    transition: background 0.15s ease;
}
.lt-modal-btn:hover { background: var(--bg-surface); }
.lt-modal-add { background: var(--accent); color: #fff; border-color: transparent; }
.lt-modal-add:hover { background: var(--accent-hover); }
.lt-modal-stop { color: var(--error); border-color: var(--error); }

/* ═══════════════════════════════════════════════════════════════════════
 * v0.18.7 — Themed alert / confirm / prompt modal
 * Replaces the browser's native dialog chrome (which leaks the Render
 * hostname and ignores our dark theme) with an in-app card that follows
 * the same visual pattern as .lt-modal.
 * ═══════════════════════════════════════════════════════════════════════ */
.tl-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(2px);
    animation: tl-modal-fade 0.12s ease-out;
}
@keyframes tl-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.tl-modal-card {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 22px 18px;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--shadow);
    animation: tl-modal-pop 0.15s ease-out;
}
@keyframes tl-modal-pop {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.tl-modal-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}
.tl-modal-msg {
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.tl-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 14px;
}
.tl-modal-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}
.tl-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.tl-modal-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tl-modal-btn:hover { background: var(--bg-surface); }
.tl-modal-btn:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}
.tl-modal-primary {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
}
.tl-modal-primary:hover { background: var(--accent-hover); }
.tl-modal-danger {
    background: var(--error, #dc2626);
    color: #fff;
    border-color: transparent;
}
.tl-modal-danger:hover { filter: brightness(1.08); }
.tl-modal-cancel { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════
 * v0.19.0 — Tutor Insights
 *   .tutor-rate    — thumbs up/down widget under chat / hint replies.
 *   .insights-*    — admin Insights tab styles (KPIs, sparkline, lists).
 * ═══════════════════════════════════════════════════════════════════════ */
.tutor-rate {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.tutor-rate-label { opacity: 0.85; }
.tutor-rate-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.tutor-rate-btn:hover { background: var(--bg-surface); }
.tutor-rate-btn:active { transform: scale(0.94); }
.tutor-rate-btn.active {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
}
.tutor-rate-status {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.78rem;
}

/* ── Admin Insights tab ─────────────────────────────────────────────── */
.insights-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 12px 0 18px;
}
.insights-kpi {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
}
.insights-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.insights-kpi-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.insights-kpi-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.insights-section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin: 18px 0 8px;
}
.insights-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 60px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface);
}
.insights-spark-bar {
    flex: 1;
    min-width: 6px;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    opacity: 0.85;
}
.insights-spark-bar:hover { opacity: 1; }
.insights-twocol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.insights-list {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.insights-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}
.insights-list-row:last-child { border-bottom: none; }
.insights-list-row strong {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* v0.21.1 — clickable topic rows + drill-down modal */
.insights-list-row.outcomes-row {
    cursor: pointer;
    transition: background-color .12s ease;
}
.insights-list-row.outcomes-row:hover,
.insights-list-row.outcomes-row:focus-visible {
    background: var(--bg-hover, rgba(255,255,255,.04));
    outline: none;
}
.outcomes-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.outcomes-detail-modal.hidden { display: none; }
.outcomes-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}
.outcomes-detail-panel {
    position: relative;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.outcomes-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.outcomes-detail-body {
    padding: 14px 18px;
    overflow-y: auto;
}
.outcomes-detail-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.outcomes-detail-attempt span:first-child { display: flex; gap: 6px; align-items: center; }
.insights-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
    align-items: center;
}
.insights-filter-row select,
.insights-filter-row input {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.insights-settings-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.insights-retention-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.insights-retention-row input[type="number"] {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.insights-row {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}
.insights-row:last-child { border-bottom: none; }
.insights-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 0.78rem;
}
.insights-time {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.insights-kind {
    background: rgba(99, 102, 241, 0.18);
    color: var(--accent);
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}
.insights-chip {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    color: var(--text-secondary);
    font-size: 0.7rem;
}
.insights-rating-up   { color: #4ade80; font-weight: 700; }
.insights-rating-down { color: #f87171; font-weight: 700; }
.insights-refused {
    background: rgba(225, 112, 85, 0.2);
    color: #f0a08a;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}
.insights-msg {
    color: var(--text-primary);
    font-size: 0.88rem;
    margin: 4px 0;
    word-wrap: break-word;
}
.insights-msg em { color: var(--text-muted); font-style: normal; font-weight: 600; margin-right: 4px; }
.insights-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* v0.16.80 — Admin learning-timer suggestions grid */
.lt-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.lt-suggestion-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-primary);
}
.lt-suggestion-grade { flex: 1; font-weight: 600; font-size: 0.85rem; }
.lt-suggestion-cell input { width: 56px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); }
.lt-suggestion-unit { font-size: 0.78rem; color: var(--text-secondary); }

/* v0.16.81 — Proper ruler visual with tick marks */
.ruler-visual-v2 {
    text-align: center;
    margin: 12px auto 14px;
    padding: 12px 8px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    overflow-x: auto;
    max-width: 100%;
    display: inline-block;
}
.ruler-obj-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;
    padding-left: 8px;
}
.ruler-obj-bar {
    height: 18px;
    background: linear-gradient(180deg, var(--accent, #6c5ce7) 0%, color-mix(in srgb, var(--accent, #6c5ce7) 70%, #000) 100%);
    border-radius: 4px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
}
.ruler-scale {
    position: relative;
    height: 36px;
    margin: 4px 0 2px 8px;
    border-top: 2px solid var(--text, #ddd);
}
.ruler-tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 6px;
    background: var(--text, #ddd);
    opacity: 0.55;
}
.ruler-tick-mid {
    height: 10px;
    opacity: 0.8;
}
.ruler-tick-major {
    height: 14px;
    opacity: 1;
    width: 2px;
}
.ruler-tick-major span {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text, #ddd);
}
.ruler-unit {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--muted, #aaa);
}

/* v0.16.81 — Make legacy ruler-bar proportional too (compare variant) */
.ruler-bar {
    background: var(--accent, #6c5ce7);
    height: 12px !important;
    border-radius: 6px;
    margin: 4px auto 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* v0.16.84 — Settings tab drag-to-category drop row */
.settings-cat-droprow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin: 0 0 8px;
    background: var(--bg-surface);
    border: 1px dashed var(--accent);
    border-radius: 10px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.settings-cat-droprow.scd-visible { opacity: 1; transform: none; }
.scd-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}
.settings-cat-dropzone {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: copy;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.settings-cat-dropzone.scd-current {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed;
}
.settings-cat-dropzone.scd-hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: scale(1.05);
}
.settings-cat-reset {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
}
.settings-cat-reset:hover { color: var(--text-primary); border-color: var(--accent); }

/* v0.16.86 — Long-press popup variant */
.settings-cat-droprow.scd-popup .settings-cat-dropzone {
    cursor: pointer;
}
.settings-cat-droprow.scd-popup .settings-cat-dropzone:hover:not(.scd-current) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: scale(1.04);
}
/* Make tab buttons feel "holdable" */
.settings-tab { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ═══════════════════════════════════════════════════════════════════════
   v0.17.0 — Game "Juice" Layer (fx.js partner styles)
   ═══════════════════════════════════════════════════════════════════════ */
.fx-floating-text {
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--success, #10b981);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    z-index: 9998;
    animation: fxFloatUp 1.2s cubic-bezier(.2,.8,.2,1) forwards;
    will-change: transform, opacity;
}
@keyframes fxFloatUp {
    0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
    18%  { opacity: 1; transform: translate(-50%, -60%) scale(1.18); }
    100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

@keyframes fxShakeKf {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px) rotate(-1deg); }
    40%      { transform: translateX(6px) rotate(1deg); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
.fx-shake { animation: fxShakeKf .36s cubic-bezier(.36,.07,.19,.97) both; }

.fx-flash {
    position: relative;
    animation: fxFlashKf var(--fx-flash-ms, 500ms) ease-out;
}
@keyframes fxFlashKf {
    0%   { box-shadow: 0 0 0 0 var(--fx-flash-color, rgba(124,58,237,.25)); background-color: var(--fx-flash-color, rgba(124,58,237,.25)); }
    100% { box-shadow: 0 0 0 24px transparent; }
}

/* Radial pop burst (no canvas) */
.fx-pop-burst {
    position: fixed;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
}
.fx-pop-burst > span {
    position: absolute;
    left: 0; top: 0;
    width: 8px; height: 8px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    animation: fxPopBurst .7s cubic-bezier(.22,.71,.34,1) forwards;
    will-change: transform, opacity;
}
@keyframes fxPopBurst {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4); }
}

/* Game-over overlay glow-up: hero icon, stat counters, accent aura */
.game-over.gameover-celebrate .game-over-emoji {
    animation: fxTrophy 900ms cubic-bezier(.34,1.56,.64,1) both;
    filter: drop-shadow(0 0 18px var(--accent-glow, rgba(124,58,237,.6)));
}
@keyframes fxTrophy {
    0%   { transform: scale(.2) rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.game-over.gameover-celebrate .game-over-stats {
    animation: fxFadeRise 600ms ease-out 200ms both;
}
@keyframes fxFadeRise {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Music control mini-pill in game header */
.game-music-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 4px 10px; border-radius: 999px;
    font-size: .78rem; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.game-music-pill:hover { color: var(--text-primary); border-color: var(--accent); }
.game-music-pill[data-playing="true"] {
    color: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 14px var(--accent-glow, rgba(124,58,237,.4));
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fx-shake, .fx-flash, .fx-floating-text, .fx-pop-burst > span,
    .game-over.gameover-celebrate .game-over-emoji,
    .game-over.gameover-celebrate .game-over-stats {
        animation: none !important;
    }
}


/* ─── v0.18.0: Smart AI Builder ─────────────────────────────────────── */
.builder-beta-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    color: #fff;
    vertical-align: middle;
}
.builder-steps {
    display: flex;
    list-style: none;
    margin: 12px 0 18px;
    padding: 0;
    gap: 8px;
    flex-wrap: wrap;
}
.builder-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: .88rem;
    color: var(--text-muted, #888);
    font-weight: 500;
}
.builder-steps li > span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}
.builder-steps li.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: #6366f1;
    color: #fff;
}
.builder-steps li.active > span {
    background: #fff;
    color: #6366f1;
    border-color: #fff;
}
.builder-steps li.done {
    border-color: #10b981;
    color: #10b981;
}
.builder-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}
.builder-step.hidden { display: none; }
.builder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 14px;
}
.builder-grid > div { display: flex; flex-direction: column; gap: 4px; }
.builder-grid-wide { grid-column: 1 / -1; }
.builder-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
}
.builder-status {
    font-size: .85rem;
    color: var(--text-muted, #888);
    min-height: 1.2em;
}
.builder-status.error { color: #ef4444; }
.builder-status.success { color: #10b981; }
.builder-spec-details summary {
    cursor: pointer;
    padding: 6px 0;
    font-weight: 600;
    color: var(--text-muted, #888);
    user-select: none;
}
.builder-spec-details textarea {
    width: 100%;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .8rem;
    line-height: 1.4;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
    resize: vertical;
}
.builder-preview-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.builder-preview-card {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
}
.builder-preview-card .bp-q {
    font-weight: 600;
    margin: 0 0 6px;
}
.builder-preview-card .bp-meta {
    font-size: .8rem;
    color: var(--text-muted, #888);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.builder-preview-card .bp-hint {
    font-size: .85rem;
    color: var(--text-muted, #888);
    margin: 6px 0 0;
}
.builder-manage-title {
    margin: 28px 0 8px;
    font-size: 1rem;
    font-weight: 600;
}
.builder-manage-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap; /* v0.18.6 — long status messages now wrap below the buttons */
    margin-bottom: 8px;
}
.builder-manage-toolbar > .builder-status {
    /* Force the status indicator onto its own row when text is long
       so it never overlays the Refresh / Import buttons. */
    flex: 1 1 100%;
    min-width: 0;
}

.builder-auth-banner {
    margin: 8px 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(225,112,85,.45);
    background: rgba(225,112,85,.10);
    color: var(--error, #ef4444);
    font-size: .9rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.builder-auth-banner.hidden { display: none; }
.builder-auth-banner .pill-btn {
    color: var(--error, #ef4444);
    border-color: rgba(225,112,85,.55);
}
#settings-builder-section.is-locked .builder-step,
#settings-builder-section.is-locked .builder-manage-toolbar,
#settings-builder-section.is-locked .builder-topic-list {
    opacity: .55;
    pointer-events: none;
    filter: grayscale(.3);
}

.builder-topic-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.builder-topic-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
}
.builder-topic-row.is-archived { opacity: .6; filter: grayscale(.4); }
.builder-topic-row .bt-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.builder-topic-row .bt-actions .pill-btn { padding: 6px 10px; font-size: .8rem; }
.builder-topic-row .bt-enforce {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 600;
    background: rgba(108,92,231,.15);
    color: var(--accent);
    border: 1px solid rgba(108,92,231,.35);
}
.builder-topic-row .bt-icon { font-size: 1.4rem; }
.builder-topic-row .bt-name { font-weight: 600; }
.builder-topic-row .bt-meta {
    font-size: .8rem;
    color: var(--text-muted, #888);
}
.builder-topic-row .bt-status {
    font-size: .7rem;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}
.builder-topic-row .bt-status.published { background: #10b98122; color: #10b981; }
.builder-topic-row .bt-status.draft     { background: #f59e0b22; color: #f59e0b; }
.builder-topic-row .bt-status.disabled  { background: #6b728022; color: #6b7280; }

/* v0.19.3 — Pool manager modal */
.builder-pool-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.builder-pool-chip {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.builder-pool-chip em {
    font-style: normal;
    opacity: .65;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .05em;
}
.builder-pool-chip strong {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.builder-pool-chip.total strong { color: var(--success, #10b981); }
.builder-pool-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.builder-pool-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
}
.builder-pool-form label > span {
    font-size: .78rem;
    opacity: .7;
}
.builder-pool-form label > span em {
    font-style: normal;
    opacity: .8;
}
.builder-pool-form select,
.builder-pool-form input {
    background: var(--bg-elevated, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: .9rem;
}
.builder-pool-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* v0.19.5 — Solid modal panel (was using a non-existent .settings-card,
   which left the content visually transparent). */
.builder-pool-modal {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    width: 640px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cardIn 0.25s ease;
}
.builder-pool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.builder-pool-head h2 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.builder-pool-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    background: var(--bg-secondary);
}
.builder-pool-intro {
    margin: 0;
    color: var(--text-secondary, var(--text-primary));
    font-size: .9rem;
    opacity: .85;
}
.builder-pool-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-tertiary, rgba(255,255,255,.02));
    border: 1px solid var(--border);
    border-radius: 10px;
}
.builder-pool-section-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .7;
    font-weight: 600;
}
.builder-pool-modes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 560px) {
    .builder-pool-modes { grid-template-columns: 1fr 1fr 1fr; }
}
.builder-pool-mode-card {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-elevated, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, transform .08s ease;
    align-items: flex-start;
}
.builder-pool-mode-card:hover { border-color: var(--accent); }
.builder-pool-mode-card.selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent) inset;
}
.builder-pool-mode-card input[type=radio] {
    margin-top: 3px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.builder-pool-mode-card .bpmc-title {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-primary);
}
.builder-pool-mode-card .bpmc-desc {
    font-size: .78rem;
    opacity: .75;
    line-height: 1.35;
    margin-top: 2px;
}

/* Progress bar */
.builder-pool-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.builder-pool-progress.hidden { display: none; }
.builder-pool-progress-bar {
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}
.builder-pool-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
    transition: width .4s ease;
}
.builder-pool-progress.success .builder-pool-progress-fill {
    background: var(--success, #10b981);
}
.builder-pool-progress.error .builder-pool-progress-fill {
    background: var(--error, #ef4444);
}
.builder-pool-progress-stage {
    font-size: .78rem;
    opacity: .8;
}

/* Preview cards */
.builder-pool-preview {
    background: var(--bg-tertiary, rgba(0,0,0,.2));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.builder-pool-preview.hidden { display: none; }
.builder-pool-preview-card {
    background: var(--bg-elevated, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .88rem;
    line-height: 1.4;
}
.builder-pool-preview-card .bpp-q { margin-bottom: 6px; color: var(--text-primary); }
.builder-pool-preview-card .bpp-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0;
    font-size: .82rem;
    opacity: .85;
}
.builder-pool-preview-card .bpp-a {
    margin-top: 4px;
    color: var(--success, #10b981);
    font-size: .82rem;
}
.builder-pool-preview-card .bpp-a-label { opacity: .7; margin-right: 4px; color: var(--text-primary); }
.builder-pool-preview-card .bpp-hint {
    margin-top: 4px;
    font-size: .8rem;
    opacity: .75;
    font-style: italic;
}

/* v0.20.0 — Spec quality pill + breakdown panel */
.bt-quality {
    background: var(--bg-elevated, var(--bg-secondary));
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: transform .08s ease, border-color .12s ease;
    font-variant-numeric: tabular-nums;
}
.bt-quality:hover { transform: scale(1.04); border-color: var(--accent); }
.bt-quality[data-grade="excellent"] { border-color: #10b981; color: #10b981; background: rgba(16,185,129,.1); }
.bt-quality[data-grade="good"]      { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,.08); }
.bt-quality[data-grade="fair"]      { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.10); }
.bt-quality[data-grade="needs_work"]{ border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.10); }
.bt-quality[data-grade="unknown"]   { opacity: .55; }

.builder-quality-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bqs-score {
    font-size: 1.4rem;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.bqs-score strong { font-size: 1.8rem; font-weight: 700; }
.bqs-score .bqs-grade {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .8;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
}
.bqs-score[data-grade="excellent"] .bqs-grade { color: #10b981; border-color: #10b981; background: rgba(16,185,129,.1); }
.bqs-score[data-grade="good"]      .bqs-grade { color: #22c55e; border-color: #22c55e; background: rgba(34,197,94,.08); }
.bqs-score[data-grade="fair"]      .bqs-grade { color: #f59e0b; border-color: #f59e0b; background: rgba(245,158,11,.10); }
.bqs-score[data-grade="needs_work"].bqs-grade,
.bqs-score[data-grade="needs_work"] .bqs-grade { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,.10); }
.bqs-bar {
    height: 8px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}
.bqs-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
    transition: width .4s ease;
}

.builder-quality-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bqb-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-elevated, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .85rem;
}
.bqb-row.fail { border-color: rgba(239,68,68,.4); }
.bqb-row .bqb-icon { font-weight: 700; font-size: 1rem; }
.bqb-row.pass .bqb-icon { color: #10b981; }
.bqb-row.fail .bqb-icon { color: #ef4444; }
.bqb-row .bqb-name { font-weight: 600; }
.bqb-row .bqb-weight { opacity: .55; font-size: .76rem; }
.bqb-row .bqb-hint {
    grid-column: 2 / 4;
    font-size: .78rem;
    opacity: .75;
    line-height: 1.35;
}
.bqb-row.pass .bqb-hint { display: none; }

.builder-quality-self-check {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: auto !important;
    cursor: pointer;
}
.builder-quality-self-check input { accent-color: var(--accent); }

.builder-quality-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.builder-quality-results.hidden { display: none; }
.bqr-card {
    background: var(--bg-elevated, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .88rem;
}
.bqr-card.valid   { border-left: 3px solid #10b981; }
.bqr-card.invalid { border-left: 3px solid #ef4444; }
.bqr-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .8;
    margin-bottom: 4px;
}
.bqr-card.valid   .bqr-status { color: #10b981; }
.bqr-card.invalid .bqr-status { color: #ef4444; }
.bqr-q { color: var(--text-primary); margin-bottom: 4px; }
.bqr-a { color: var(--success, #10b981); font-size: .82rem; }
.bqr-issues {
    margin: 6px 0 0;
    padding-left: 18px;
    color: #ef4444;
    font-size: .8rem;
}

.builder-empty {
    padding: 12px;
    color: var(--text-muted, #888);
    font-style: italic;
    text-align: center;
}
.topic-card .topic-custom-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: .7rem;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}

/* ─── v0.18.1: Builder icon picker + progress + auth notice ─────────── */
.builder-icon-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.builder-icon-row input[type="text"] {
    width: 70px;
    text-align: center;
    font-size: 1.1rem;
}
.builder-icon-preview {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
}
.builder-icon-preview:hover {
    transform: scale(1.05);
    border-color: #6366f1;
}
.builder-icon-preview .icon {
    width: 26px;
    height: 26px;
    color: #6366f1;
}
.builder-icon-picker {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    padding: 12px;
    margin-top: 8px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.builder-icon-picker.hidden { display: none; }
.builder-icon-picker-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.builder-icon-picker-head strong { flex: 0 0 auto; }
.builder-icon-picker-head .refusal-input { flex: 1 1 160px; }
.builder-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
    overflow-y: auto;
    padding: 4px;
    max-height: 240px;
}
.builder-icon-tile {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.builder-icon-tile:hover {
    transform: translateY(-2px);
    border-color: #6366f1;
    background: rgba(99, 102, 241, .08);
}
.builder-icon-tile.selected {
    border-color: #6366f1;
    background: rgba(99, 102, 241, .15);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .35) inset;
}
.builder-icon-tile .icon { width: 24px; height: 24px; }
.builder-icon-tile-label {
    display: none;  /* keep grid clean — name shown via title attr */
}

/* Progress bar (indeterminate) */
.builder-progress {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.builder-progress.hidden { display: none; }
.builder-progress-bar {
    position: relative;
    height: 6px;
    background: var(--bg-card);
    border-radius: 999px;
    overflow: hidden;
}
.builder-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
    border-radius: 999px;
    animation: builder-progress-slide 1.6s ease-in-out infinite;
}
@keyframes builder-progress-slide {
    0%   { left: -35%; width: 35%; }
    50%  { left: 50%;  width: 45%; }
    100% { left: 100%; width: 35%; }
}
.builder-progress-stage {
    font-size: .85rem;
    color: var(--text-muted, #888);
}
.builder-progress.success .builder-progress-fill {
    animation: none;
    width: 100% !important;
    left: 0 !important;
    background: #10b981;
}
.builder-progress.error .builder-progress-fill {
    animation: none;
    width: 100% !important;
    left: 0 !important;
    background: #ef4444;
}

/* Topic card icon container — center the SVG icons */
.topic-card .topic-icon .icon {
    width: 28px;
    height: 28px;
}

/* ═══════════════════════════════════════════════════════════════════
   v0.28.0 — Typing Tutor LESSONS track
   Beginner curriculum UI: lesson card grid + coach banner +
   target-finger highlight on the on-screen keyboard.
   ═══════════════════════════════════════════════════════════════════ */

/* Lesson picker grid (replaces the level pill row when mode === lessons) */
.tt-pills.tt-lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.tt-lesson-card {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-elevated, var(--bg, #fff));
    color: var(--text);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.tt-lesson-card:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--accent, #6366f1);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.16);
}
.tt-lesson-card.active {
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.28);
}
.tt-lesson-card.tt-lesson-passed {
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.06);
}
.tt-lesson-card.tt-lesson-locked {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.5);
}
.tt-lesson-card .tt-lesson-emoji {
    font-size: 1.6rem;
    flex: 0 0 auto;
    line-height: 1;
}
.tt-lesson-card .tt-lesson-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-lesson-card .tt-lesson-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 2px;
    color: var(--text);
}
.tt-lesson-card .tt-lesson-sub {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-lesson-card.tt-lesson-locked .tt-lesson-title,
.tt-lesson-card.tt-lesson-locked .tt-lesson-sub {
    color: var(--text-muted, #64748b);
}

/* Coach banner — sticks to the top of the typing session */
.tt-lesson-banner {
    margin: 0 0 12px 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(34,197,94,0.06));
    color: var(--text);
    /* v0.36.8 — keep banner from pushing keyboard off-screen on short
       viewports; the coach text inside scrolls instead. */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: 38vh;
}
.tt-lesson-banner.hidden { display: none; }
.tt-lesson-banner .tt-lesson-bar {
    width: 100%;
    height: 6px;
    background: rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}
.tt-lesson-banner .tt-lesson-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #6366f1);
    transition: width 0.3s ease;
}
.tt-lesson-banner .tt-lesson-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    margin-bottom: 4px;
}
.tt-lesson-banner .tt-lesson-head .tt-lesson-emoji { font-size: 1.2rem; }
.tt-lesson-banner .tt-lesson-step {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}
.tt-lesson-banner .tt-lesson-coach {
    margin: 6px 0;
    font-size: 0.92rem;
    line-height: 1.4;
    padding: 8px 10px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
}
.tt-lesson-banner .tt-lesson-mascot {
    font-size: 1.2rem;
    margin-right: 4px;
}
.tt-lesson-banner .tt-lesson-tip {
    margin: 4px 0 0 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-muted, #475569);
}
.tt-lesson-banner .tt-lesson-finger {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.14);
    color: var(--accent, #6366f1);
    font-size: 0.78rem;
    font-weight: 600;
}

/* Target finger highlight on the on-screen keyboard */
@keyframes tt-lesson-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}
.tt-kb-key.tt-lesson-target {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 1px;
    animation: tt-lesson-pulse 1.6s ease-in-out infinite;
    z-index: 1;
}

/* Done-overlay lesson actions row sits ABOVE the original (which we hide). */
.fc-done-actions.tt-lesson-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* ═══ v0.29.0 — Agents Hub ═══ */
.agents-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.agents-summary .agt-stat {
    flex: 1 1 160px;
    padding: 10px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: rgba(255,255,255,.02);
}
.agents-summary .agt-stat .agt-stat-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
}
.agents-summary .agt-stat .agt-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2px;
}
.agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.agent-card {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 14px;
    background: rgba(255,255,255,.02);
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.agent-card:hover {
    border-color: var(--accent, #6366f1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.agent-card .agt-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.agent-card .agt-emoji { font-size: 1.6rem; line-height: 1; }
.agent-card .agt-name { font-weight: 700; font-size: 1.02rem; }
.agent-card .agt-cat {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    opacity: .65;
    margin-top: 2px;
}
.agent-card .agt-summary { font-size: .9rem; opacity: .85; line-height: 1.35; }
.agent-card .agt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    font-size: .78rem;
    opacity: .8;
}
.agent-card .agt-meta span {
    padding: 2px 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
}
.agt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-left: auto;
}
.agt-status-badge::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    display: inline-block;
}
.agt-status-badge.running { color: #10b981; border: 1px solid #10b981; background: rgba(16,185,129,.10); }
.agt-status-badge.running::before { background: #10b981; box-shadow: 0 0 6px #10b981; }
.agt-status-badge.ready   { color: #3b82f6; border: 1px solid #3b82f6; background: rgba(59,130,246,.10); }
.agt-status-badge.ready::before { background: #3b82f6; }
.agt-status-badge.paused  { color: #f59e0b; border: 1px solid #f59e0b; background: rgba(245,158,11,.10); }
.agt-status-badge.paused::before { background: #f59e0b; }
.agt-status-badge.error   { color: #ef4444; border: 1px solid #ef4444; background: rgba(239,68,68,.10); }
.agt-status-badge.error::before { background: #ef4444; }
.agents-detail {
    border: 1px solid var(--accent, #6366f1);
    border-radius: 10px;
    padding: 14px;
    background: rgba(99,102,241,.04);
}
.agents-detail .agt-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.agents-detail h4 { margin: 0 0 6px 0; }

/* ═══ v0.29.2 — Default-tab chip + popover ═══ */
.crumb-default-btn {
    margin-left: 14px;
    padding: 3px 10px;
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--border, #e5e7eb);
    background: rgba(255,255,255,.04);
    color: var(--text-secondary, #94a3b8);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.crumb-default-btn:hover {
    background: rgba(99,102,241,.08);
    border-color: var(--accent, #6366f1);
    color: var(--text-primary, #f1f5f9);
}
.crumb-default-btn .crumb-default-label {
    color: var(--accent, #6366f1);
    font-weight: 600;
}
.crumb-default-menu {
    position: fixed;
    z-index: 9999;
    min-width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--border, #334155);
    background: var(--bg-elevated, #1e293b);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.crumb-default-menu .crumb-menu-title {
    padding: 8px 10px 4px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .65;
}
.crumb-default-menu .crumb-menu-subtitle {
    padding: 6px 10px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .55;
}
.crumb-default-menu .crumb-menu-sep {
    height: 1px;
    background: var(--border, #334155);
    margin: 4px 0;
}
.crumb-default-menu .crumb-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary, #f1f5f9);
    font-size: .88rem;
    border-radius: 6px;
    cursor: pointer;
}
.crumb-default-menu .crumb-menu-item.small { font-size: .82rem; padding: 6px 12px; }
.crumb-default-menu .crumb-menu-item:hover { background: rgba(99,102,241,.12); }
.crumb-default-menu .crumb-menu-item.checked {
    background: rgba(99,102,241,.18);
    color: var(--accent, #6366f1);
    font-weight: 600;
}
.crumb-default-menu .crumb-menu-item.checked::before {
    content: "\2713  ";
    margin-right: 4px;
}

/* ═══ v0.29.2 — Agent / Monitor / Validation pane buttons ═══ */
.settings-tab-pane[data-pane="agents"] .btn-primary,
.settings-tab-pane[data-pane="agents"] .btn-secondary,
.settings-tab-pane[data-pane="monitor"] .btn-primary,
.settings-tab-pane[data-pane="monitor"] .btn-secondary,
.settings-tab-pane[data-pane="validation"] .btn-primary,
.settings-tab-pane[data-pane="validation"] .btn-secondary,
.settings-tab-pane[data-pane="simulator"] .btn-primary,
.settings-tab-pane[data-pane="simulator"] .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: .87rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
    border: 1px solid var(--border, #334155);
    line-height: 1.2;
    white-space: nowrap;
}
.settings-tab-pane[data-pane="agents"] .btn-primary,
.settings-tab-pane[data-pane="monitor"] .btn-primary,
.settings-tab-pane[data-pane="validation"] .btn-primary,
.settings-tab-pane[data-pane="simulator"] .btn-primary {
    background: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
    color: #fff;
    box-shadow: 0 1px 2px rgba(99,102,241,.25);
}
.settings-tab-pane[data-pane="agents"] .btn-primary:hover,
.settings-tab-pane[data-pane="monitor"] .btn-primary:hover,
.settings-tab-pane[data-pane="validation"] .btn-primary:hover,
.settings-tab-pane[data-pane="simulator"] .btn-primary:hover {
    background: var(--accent-hover, #4f46e5);
    border-color: var(--accent-hover, #4f46e5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99,102,241,.30);
}
.settings-tab-pane[data-pane="agents"] .btn-secondary,
.settings-tab-pane[data-pane="monitor"] .btn-secondary,
.settings-tab-pane[data-pane="validation"] .btn-secondary,
.settings-tab-pane[data-pane="simulator"] .btn-secondary {
    background: rgba(255,255,255,.04);
    color: var(--text-primary, #f1f5f9);
}
.settings-tab-pane[data-pane="agents"] .btn-secondary:hover,
.settings-tab-pane[data-pane="monitor"] .btn-secondary:hover,
.settings-tab-pane[data-pane="validation"] .btn-secondary:hover,
.settings-tab-pane[data-pane="simulator"] .btn-secondary:hover {
    background: rgba(99,102,241,.10);
    border-color: var(--accent, #6366f1);
    color: var(--text-primary, #f1f5f9);
}
.settings-tab-pane[data-pane="agents"] .btn-primary:disabled,
.settings-tab-pane[data-pane="agents"] .btn-secondary:disabled,
.settings-tab-pane[data-pane="monitor"] .btn-primary:disabled,
.settings-tab-pane[data-pane="monitor"] .btn-secondary:disabled,
.settings-tab-pane[data-pane="validation"] .btn-primary:disabled,
.settings-tab-pane[data-pane="validation"] .btn-secondary:disabled,
.settings-tab-pane[data-pane="simulator"] .btn-primary:disabled,
.settings-tab-pane[data-pane="simulator"] .btn-secondary:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Variant: danger (used for Pause-all). Auto-applied by JS via .btn-danger. */
.settings-tab-pane .btn-danger {
    background: linear-gradient(180deg, #ef4444, #dc2626);
    border: 1px solid #b91c1c;
    color: #fff;
    padding: 7px 14px;
    font-size: .87rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(220,38,38,.25);
    transition: background .15s, transform .08s, box-shadow .15s;
}
.settings-tab-pane .btn-danger:hover {
    background: linear-gradient(180deg, #f05252, #e02e2e);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220,38,38,.35);
}
.settings-tab-pane .btn-danger:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.settings-tab-pane .btn-success {
    background: linear-gradient(180deg, #10b981, #059669);
    border: 1px solid #047857;
    color: #fff;
    padding: 7px 14px;
    font-size: .87rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(5,150,105,.25);
    transition: background .15s, transform .08s, box-shadow .15s;
}
.settings-tab-pane .btn-success:hover {
    background: linear-gradient(180deg, #14c98c, #0a7a55);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5,150,105,.35);
}
.settings-tab-pane .btn-success:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Pause-row container polish (Agents + Monitor share these) */
#agents-pause-row, #monitor-pause-row {
    background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,.02));
    border-radius: 10px !important;
}

.settings-tab-pane[data-pane="simulator"] .sim-run-row {
    width: 100%;
    border: 1px solid var(--border, #334155);
    background: rgba(255,255,255,.03);
    border-radius: 8px;
    cursor: pointer;
}

.settings-tab-pane[data-pane="simulator"] .sim-run-row:hover {
    border-color: var(--accent, #6366f1);
    background: rgba(99,102,241,.08);
}

/* v0.29.3 - Agents detail flash on open */
@keyframes agt-detail-flash-kf {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.55); }
    60%  { box-shadow: 0 0 0 10px rgba(99,102,241,0); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.agt-detail-flash {
    animation: agt-detail-flash-kf .9s ease-out 1;
}

/* v0.29.5 - Hidden tabs chip in breadcrumb */
.crumb-hidden-btn {
    margin-left: 8px;
    padding: 3px 10px;
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--border, #e5e7eb);
    background: rgba(245,158,11,.08);
    color: #f59e0b;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.crumb-hidden-btn:hover {
    background: rgba(245,158,11,.16);
    border-color: #f59e0b;
}
.crumb-hidden-btn .crumb-hidden-count {
    font-weight: 700;
    margin: 0 2px;
}

/* ═══ v0.30.0 — Custom Agent Builder ═══ */

.agt-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000; padding: 24px;
}
.agt-modal.hidden { display: none; }
.agt-modal-card {
    background: var(--bg-surface, #1f2937);
    color: var(--text, #f1f5f9);
    border: 1px solid var(--border, #334155);
    border-radius: 14px;
    width: min(680px, 100%);
    max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.agt-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #334155);
}
.agt-modal-head h3 { margin: 0; font-size: 1.05rem; }
.agt-modal-body {
    padding: 14px 18px;
    overflow-y: auto;
    flex: 1;
}
.agt-modal-body label {
    display: block;
    font-size: .82rem; font-weight: 600;
    margin-bottom: 4px; opacity: .9;
}
.agt-modal-body input[type=text],
.agt-modal-body textarea {
    width: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border, #334155);
    border-radius: 6px;
    padding: 8px 10px;
    color: inherit;
    font-family: inherit;
    font-size: .9rem;
}
.agt-modal-body textarea { font-family: 'Cascadia Code','Consolas',monospace; font-size: .85rem; }
.agt-modal-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 12px 18px;
    border-top: 1px solid var(--border, #334155);
}

.agt-tool-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--border, #334155);
    border-radius: 8px;
    padding: 8px;
    background: rgba(255,255,255,.02);
}
.agt-tool-row {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 6px 8px; border-radius: 6px;
    cursor: pointer; transition: background .12s;
}
.agt-tool-row:hover { background: rgba(99,102,241,.08); }
.agt-tool-row input[type=checkbox] { margin-top: 3px; }
.agt-tool-name { font-weight: 600; font-size: .85rem; }
.agt-tool-desc { font-size: .78rem; opacity: .7; line-height: 1.4; }

.agt-custom-pill {
    display: inline-block; margin-left: 8px;
    background: rgba(99,102,241,.18);
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,.35);
    font-size: .65rem; font-weight: 700;
    letter-spacing: .05em;
    padding: 2px 8px; border-radius: 999px;
    vertical-align: middle;
}

.agt-free-pill {
    display: inline-block; margin-left: 6px;
    background: rgba(34,197,94,.16);
    color: #86efac;
    border: 1px solid rgba(34,197,94,.4);
    font-size: .62rem; font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 8px; border-radius: 999px;
    vertical-align: middle;
}

.ab-kind-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 12px 0 8px;
}
.ab-kind-card {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--border, #334155);
    background: rgba(15,23,42,.4);
    cursor: pointer; transition: border-color .15s, background .15s;
}
.ab-kind-card:hover { border-color: rgba(99,102,241,.5); }
.ab-kind-card.selected {
    border-color: rgba(99,102,241,.85);
    background: rgba(99,102,241,.12);
}
.ab-kind-card input[type=radio] { margin-top: 4px; accent-color: #818cf8; }
.ab-kind-title { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.ab-kind-tag {
    display: inline-block; margin-left: 6px;
    font-size: .6rem; font-weight: 700; letter-spacing: .05em;
    padding: 1px 6px; border-radius: 999px;
    background: rgba(34,197,94,.18); color: #86efac;
    border: 1px solid rgba(34,197,94,.35);
    vertical-align: middle;
}
.ab-kind-tag.warn {
    background: rgba(234,179,8,.18); color: #fde68a;
    border-color: rgba(234,179,8,.35);
}
.ab-kind-desc { font-size: .78rem; opacity: .8; line-height: 1.4; }

/* Proposal inbox */
#agents-proposals-section h4 { font-size: .95rem; }
.agt-prop-filter {
    padding: 4px 12px; font-size: .78rem;
    border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border, #334155);
}
.agt-prop-filter.active {
    background: rgba(99,102,241,.18);
    border-color: rgba(99,102,241,.55);
    color: #a5b4fc;
}
.agt-proposal-card,
.agt-proposal-inline {
    border: 1px solid var(--border, #334155);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: rgba(255,255,255,.02);
}
.agt-proposal-head {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 8px;
}
.agt-status-badge.proposal-pending {
    background: rgba(245,158,11,.18); color: #f59e0b;
    border: 1px solid rgba(245,158,11,.4);
}
.agt-status-badge.proposal-approved {
    background: rgba(16,185,129,.16); color: #10b981;
    border: 1px solid rgba(16,185,129,.4);
}
.agt-status-badge.proposal-rejected {
    background: rgba(239,68,68,.16); color: #ef4444;
    border: 1px solid rgba(239,68,68,.4);
}
.agt-proposal-body {
    font-size: .88rem; line-height: 1.55;
    background: rgba(0,0,0,.18);
    padding: 10px 14px;
    border-radius: 8px;
    margin: 6px 0;
}
.agt-proposal-body p { margin: 0 0 8px; }
.agt-proposal-body ul,
.agt-proposal-body ol { margin: 4px 0 8px; padding-left: 22px; }
.agt-proposal-body code {
    background: rgba(255,255,255,.08);
    padding: 1px 5px; border-radius: 4px;
    font-size: .82em;
}
.agt-proposal-body pre {
    background: rgba(0,0,0,.35);
    padding: 8px 10px; border-radius: 6px;
    overflow-x: auto;
}
.agt-proposal-meta { font-size: .75rem; opacity: .75; margin-top: 4px; }
.agt-proposal-notes {
    background: rgba(255,255,255,.04);
    border-left: 3px solid #6366f1;
    padding: 6px 10px;
    margin: 6px 0;
    font-size: .82rem;
}
.agt-proposal-actions {
    display: flex; gap: 8px; margin-top: 8px;
    flex-wrap: wrap; align-items: center;
}
.agt-proposal-note-input {
    flex: 1 1 220px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border, #334155);
    border-radius: 6px;
    padding: 6px 10px;
    color: inherit;
    font-size: .85rem;
}

/* v0.30.1 — AI assist on the Build-an-agent form */
.ai-suggest-row {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 4px;
}
.ab-prompt-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.btn-link {
    background: none; border: none;
    color: #a5b4fc; cursor: pointer;
    font-size: .8rem; padding: 2px 6px;
    border-radius: 4px;
}
.btn-link:hover { background: rgba(99,102,241,.12); }
.btn-link:disabled { opacity: .55; cursor: progress; }

/* v0.30.1 — AI assist on the Build-an-agent form */
.ai-suggest-row {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 4px;
}
.ab-prompt-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.btn-link {
    background: none; border: none;
    color: #a5b4fc; cursor: pointer;
    font-size: .8rem; padding: 2px 6px;
    border-radius: 4px;
}
.btn-link:hover { background: rgba(99,102,241,.12); }
.btn-link:disabled { opacity: .55; cursor: progress; }

/* v0.30.2 — Builder modal help text + simulated-toolcall warning */
.ab-intro {
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: .85rem;
    line-height: 1.5;
}
.ab-intro p { margin: 0 0 6px; }
.ab-intro p:last-child { margin: 0; }
.ab-help { margin-top: 6px; }
.ab-help summary {
    cursor: pointer;
    color: #a5b4fc;
    font-weight: 600;
    font-size: .82rem;
}
.ab-help[open] summary { margin-bottom: 6px; }
.ab-help ul { margin: 4px 0 0; padding-left: 22px; }
.ab-help li { margin-bottom: 4px; }
.ab-help code {
    background: rgba(255,255,255,.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .82em;
}

/* v0.30.2 — Builder modal help text + simulated-toolcall warning */
.ab-intro {
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: .85rem;
    line-height: 1.5;
}
.ab-intro p { margin: 0 0 6px; }
.ab-intro p:last-child { margin: 0; }
.ab-help { margin-top: 6px; }
.ab-help summary {
    cursor: pointer;
    color: #a5b4fc;
    font-weight: 600;
    font-size: .82rem;
}
.ab-help[open] summary { margin-bottom: 6px; }
.ab-help ul { margin: 4px 0 0; padding-left: 22px; }
.ab-help li { margin-bottom: 4px; }
.ab-help code {
    background: rgba(255,255,255,.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .82em;
}

/* v0.30.5 — friendly simulated-tool-call warning */
.agt-proposal-warn {
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.45);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 6px 0;
    font-size: .9rem;
    line-height: 1.5;
}
.agt-proposal-warn strong { color: #f59e0b; }
.agt-proposal-warn p { margin: 6px 0 0; }
.agt-proposal-warn code {
    background: rgba(255,255,255,.10);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .85em;
}

/* v0.30.6 — model capability verdict pill */
.ab-model-cap {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: .82rem;
    line-height: 1.4;
    border: 1px solid transparent;
}
.ab-model-cap.cap-capable {
    background: rgba(16,185,129,.10);
    border-color: rgba(16,185,129,.40);
    color: #10b981;
}
.ab-model-cap.cap-unknown {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.35);
    color: #f59e0b;
}
.ab-model-cap.cap-incapable {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.45);
    color: #ef4444;
}
.ab-model-cap strong { font-weight: 700; }

/* v0.30.7 — per-agent OpenRouter picker */
.ab-or-picker {
    margin-top: 8px;
    border: 1px solid var(--border, #334155);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255,255,255,.02);
}
.ab-or-tabs {
    display: flex; gap: 6px; margin-bottom: 8px;
}
.ab-or-tab {
    background: transparent;
    border: 1px solid var(--border, #334155);
    color: inherit;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    cursor: pointer;
}
.ab-or-tab.active {
    background: rgba(99,102,241,.18);
    border-color: rgba(99,102,241,.5);
    color: #a5b4fc;
}
.ab-or-models {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border, #334155);
    border-radius: 6px;
    padding: 4px;
}
.ab-or-row {
    display: grid;
    grid-template-columns: 22px 1fr auto 22px;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: .85rem;
}
.ab-or-row:hover { background: rgba(99,102,241,.08); }
.ab-or-row.selected { background: rgba(99,102,241,.18); }
.ab-or-name { font-weight: 600; }
.ab-or-id {
    font-size: .72rem;
    opacity: .65;
    font-family: 'Cascadia Code','Consolas',monospace;
}
.ab-or-cap.cap-capable { color: #10b981; }
.ab-or-cap.cap-unknown { color: #f59e0b; }
.ab-or-cap.cap-incapable { color: #ef4444; }

/* ═══ v0.31.0 — Agents sub-tabs (Library / Build / Inbox) ═══ */
.agt-subtabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border, #334155);
    margin: 14px 0 0;
    padding: 0;
    flex-wrap: wrap;
}
.agt-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    transition: color .15s, border-color .15s, background .15s;
}
.agt-subtab:hover { color: var(--text-primary, #e2e8f0); background: rgba(99,102,241,.06); }
.agt-subtab.active {
    color: var(--accent, #6366f1);
    border-bottom-color: var(--accent, #6366f1);
}
.agt-subtab .agt-subtab-icon {
    display: inline-flex;
    align-items: center;
}
.agt-subtab .agt-subtab-icon svg { width: 16px; height: 16px; }
.agt-subtab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    margin-left: 4px;
    background: var(--accent, #6366f1);
    color: #fff;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}
.agt-subtab-badge.hidden { display: none; }

.agt-subpane { display: none; padding-top: 14px; }
.agt-subpane.active { display: block; }

/* Build sub-pane (formerly modal body) */
.agt-build-head { margin-bottom: 12px; }
.agt-build-body { /* inherits .settings-section text styles */ }
.agt-build-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border, #334155);
}

/* Inline icon helpers */
.btn-icon, .ab-kind-icon, .ab-rule-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: -3px;
}
.btn-icon svg, .ab-kind-icon svg { width: 16px; height: 16px; }
.ab-rule-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(99,102,241,.1);
    color: var(--accent, #6366f1);
    align-items: center; justify-content: center;
    display: inline-flex;
}
.ab-rule-icon svg { width: 18px; height: 18px; }
.ab-rule-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ab-rule-row select { flex: 1; }


/* ── v0.32.0 — Read-only impersonation / demo banner ─────────────────── */
.readonly-banner {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    font-size: .9rem; font-weight: 600;
    color: #1f2937;
    border-bottom: 2px solid rgba(0,0,0,.18);
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.readonly-banner--impersonation { background: linear-gradient(90deg, #fb923c, #f97316); color: #1f2937; }
.readonly-banner--demo          { background: linear-gradient(90deg, #60a5fa, #3b82f6); color: #fff; }
.readonly-banner .rb-icon { font-size: 1.1rem; }
.readonly-banner .rb-text { flex: 1 1 auto; }
.readonly-banner .rb-live {
    font-size: .76rem;
    font-weight: 600;
    opacity: .9;
    margin-right: 4px;
    white-space: nowrap;
}
.readonly-banner .rb-btn {
    padding: 6px 12px; font-weight: 600; font-size: .8rem;
    border-radius: 6px; border: 1px solid rgba(0,0,0,.25);
    background: rgba(255,255,255,.85); color: #111827;
    cursor: pointer; transition: background .15s, transform .08s;
}
.readonly-banner .rb-btn:hover { background: #fff; transform: translateY(-1px); }
.readonly-banner--demo .rb-btn { background: rgba(255,255,255,.92); }
.readonly-banner .rb-mode {
    background: rgba(0,0,0,.18);
    color: inherit;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* v0.33.10 — Banner height is measured at runtime and exposed as
   --readonly-banner-h so the offset always matches the rendered banner
   (which can wrap to 2-3 lines on narrower widths). Falls back to 56px. */
body.read-only { padding-top: var(--readonly-banner-h, 56px); }
body.read-only .user-menu { top: calc(var(--readonly-banner-h, 56px) + 14px); }
body.read-only .site-banner { top: var(--readonly-banner-h, 56px); }

/* OBO mode picker cards */
.obo-mode-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s;
}
.obo-mode-card:hover { border-color: var(--accent, #6366f1); background: rgba(99,102,241,.06); }
.obo-mode-card input[type="radio"] { margin-top: 4px; }
.obo-mode-card:has(input:checked) { border-color: var(--accent, #6366f1); background: rgba(99,102,241,.10); }

.support-inbox {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 9998;
    width: min(360px, calc(100vw - 24px));
}
.support-inbox.hidden { display: none; }
.support-inbox-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    padding: 10px 12px;
}
.support-inbox-title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.support-inbox-time {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 500;
}
.support-inbox-body {
    margin-top: 6px;
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.35;
    white-space: pre-wrap;
}
.support-inbox-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* v0.33.1 — Dedicated User Stats modal layout (fixes clipped content and
   inaccessible topic rows in narrow/short viewports). */
.su-stats-panel {
    width: min(760px, 96vw);
    max-width: 760px;
    height: min(86vh, 760px);
}
.su-stats-body {
    gap: 12px;
}
.su-stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.su-stats-kpi {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}
.su-stats-kpi-label {
    font-size: .7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.su-stats-kpi-value {
    margin-top: 4px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
}
.su-stats-topics-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 2px;
}
.su-stats-topic-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    min-height: 0;
    max-height: 46vh;
    padding-right: 2px;
}
.su-stats-topic-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.su-stats-topic-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.su-stats-topic-meta {
    font-size: .92rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.su-stats-topic-pct {
    margin-left: 8px;
    color: var(--accent);
    font-weight: 700;
}
.su-stats-empty {
    text-align: center;
    padding: 20px 0;
}

/* (v0.33.10 — body.read-only padding is now driven by the dynamic
   --readonly-banner-h variable defined above; the old static 38px rule
   was overriding the proper offset and pushing the user menu under the
   banner.) */

/* v0.33.14 — View mode no longer adds frontend write-blocking. The
   server's _enforce_readonly_or_403 enforces the write policy by mode,
   and the orange banner makes the read-only intent obvious. Letting the
   admin scroll/click/expand menus is the whole point of "view".
   Demo mode keeps its long-standing CSS freeze below. */

/* v0.33.15 — Honest mirror overlay. The heartbeat tells us the user's
   screen + topic but not the per-question content state, so on content
   screens we render a non-blocking explainer card instead of leaving
   the admin staring at an empty problem panel. */
.obo-mirror-overlay {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 9000;
    pointer-events: none;  /* card itself re-enables pointer events */
    width: min(360px, calc(100vw - 28px));
}
.obo-mirror-card {
    pointer-events: auto;
    background: var(--bg-surface, #1f2937);
    color: var(--text, #e5e7eb);
    border: 1px solid var(--border, #374151);
    border-left: 4px solid #f97316;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    display: flex; flex-direction: column; gap: 6px;
}
.obo-mirror-eye { font-size: 1.25rem; }
.obo-mirror-title { font-weight: 700; font-size: 1rem; }
.obo-mirror-where { font-size: .85rem; opacity: .8; }
.obo-mirror-help { font-size: .82rem; opacity: .9; line-height: 1.4; }
.obo-mirror-actions { display: flex; gap: 8px; margin-top: 6px; }

/* Demo-mode freeze (unchanged). In OBO Control/Simulate the admin IS
   allowed to edit profile/preferences on the user's behalf. */
body.read-only-demo button[type="submit"]:not(.rb-btn):not(#rb-end-btn):not(#rb-attest-btn),
body.read-only-demo .pill-btn.accent:not(.rb-btn):not(#rb-end-btn):not(#rb-attest-btn),
body.read-only-demo .btn-primary:not(.rb-btn),
body.read-only-demo .btn-danger:not(.rb-btn),
body.read-only-demo .btn-success:not(.rb-btn) {
    opacity: .5;
    pointer-events: none;
    filter: grayscale(.4);
}

/* Demo-mode chip in user management. */
.su-demo-badge {
    display: inline-block; padding: 1px 6px; margin-left: 6px;
    font-size: .65rem; font-weight: 700; letter-spacing: .02em;
    color: #1e3a8a; background: #dbeafe; border-radius: 6px;
    border: 1px solid #93c5fd; vertical-align: middle;
}

/* ── v0.32.1 — Attestations queue ─────────────────────────────────── */
.su-attest-section { margin-top: 18px; }
.su-attest-list { display: flex; flex-direction: column; gap: 8px; }
.su-attest-row {
    background: var(--card, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 8px;
    padding: 10px 12px;
}
.su-attest-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.su-attest-sev {
    display: inline-block; padding: 2px 8px; font-size: .68rem; font-weight: 700;
    border-radius: 4px; letter-spacing: .03em;
}
.su-attest-sev-low    { background: #1e3a8a; color: #dbeafe; }
.su-attest-sev-medium { background: #92400e; color: #fef3c7; }
.su-attest-sev-high   { background: #7f1d1d; color: #fee2e2; }
.su-attest-route {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: .78rem; color: var(--muted, #94a3b8);
    background: rgba(255,255,255,.04); padding: 1px 6px; border-radius: 4px;
}
.su-attest-when { font-size: .75rem; color: var(--muted, #94a3b8); margin-left: auto; }
.su-attest-body { font-size: .9rem; line-height: 1.4; margin: 4px 0; }
.su-attest-fix { font-size: .82rem; color: var(--muted, #94a3b8); margin: 4px 0; }
.su-attest-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.su-attest-resolved { font-size: .78rem; color: var(--muted, #94a3b8); font-style: italic; }
.pill-btn.small { padding: 4px 10px; font-size: .78rem; }


/* ─── v0.36.7 — Subject Games arena (5 reusable engines) ──────────── */
#game-arena {
    display: flex; flex-direction: column; gap: 14px;
    align-items: stretch; padding: 16px 12px;
    max-width: 760px; margin: 0 auto;
    font: inherit;
}
.sg-header { text-align: center; }
.sg-title { font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 700; color: var(--text-primary); }
.sg-sub   { font-size: 0.86rem; color: var(--text-muted); margin-top: 4px; }
.sg-feedback { text-align: center; font-size: 0.88rem; color: var(--text-muted); min-height: 1.2em; }
.sg-row { display: flex; gap: 10px; justify-content: center; }

/* Pair Match — 4×3 memory grid */
.sg-pair-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.sg-card {
    aspect-ratio: 3 / 2;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
    text-align: center;
    transition: transform .15s ease, background .15s ease;
}
.sg-card:hover { transform: translateY(-2px); }
.sg-card .sg-card-face { opacity: 0; transition: opacity .12s ease; }
.sg-card.flipped { background: var(--bg-surface); color: var(--text-primary); border-color: var(--accent); }
.sg-card.flipped .sg-card-face { opacity: 1; }
.sg-card.matched { background: #16a34a; color: #fff; border-color: #16a34a; cursor: default; }
.sg-card.matched .sg-card-face { opacity: 1; }
@media (max-width: 560px) { .sg-pair-grid { grid-template-columns: repeat(3, 1fr); } }

/* Column Sort */
.sg-current { text-align: center; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.sg-chip {
    display: inline-block;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}
.sg-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.sg-col {
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 22px 12px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.sg-col:hover { border-color: var(--accent); transform: translateY(-1px); }
.sg-col.flash-correct { background: #16a34a; color: #fff; border-color: #16a34a; }
.sg-col.flash-wrong   { background: #ef4444; color: #fff; border-color: #ef4444; }

/* Sequence Order */
.sg-seq-slots, .sg-seq-bank {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    min-height: 56px;
    padding: 10px;
    border-radius: 12px;
}
.sg-seq-slots { background: var(--bg-surface); border: 1px dashed var(--border); }
.sg-tile {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 10px 14px;
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
.sg-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.sg-slot.filled {
    background: var(--accent); color: #fff; border-radius: 10px;
    padding: 10px 14px; font-size: 0.92rem; font-weight: 600;
}

/* Speed Pick */
.sg-speed-q {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px;
    text-align: center;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    font-weight: 600;
    min-height: 72px;
    display: flex; align-items: center; justify-content: center;
}
.sg-speed-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.sg-speed-choice {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 16px 14px;
    font: inherit; font-size: 0.95rem; font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.sg-speed-choice:hover { border-color: var(--accent); transform: translateY(-1px); }
.sg-speed-choice.correct { background: #16a34a; color: #fff; border-color: #16a34a; }
.sg-speed-choice.wrong   { background: #ef4444; color: #fff; border-color: #ef4444; }
.sg-speed-choice[disabled] { cursor: default; opacity: .85; }

/* Estimation Line */
.sg-est-track {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
}
.sg-est-min, .sg-est-max { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }
.sg-est-slider { width: 100%; accent-color: var(--accent); }
.sg-est-readout {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* v0.36.6 - Friendly "service updating" banner shown when /api/topics fails */
.topics-update-banner {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 24px;
    margin: 8px auto;
    max-width: 520px;
    text-align: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-primary);
}
.topics-update-title { font-size: 1.05rem; font-weight: 600; }
.topics-update-sub   { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; max-width: 440px; }