/* ============================================================
   Design System — 2025/2026 Trends Applied
   Trends: Glassmorphism · Fluid Typography · Vibrant Gradients
           Micro-interactions · Inter Variable Font · OKLCH palette
           prefers-reduced-motion · :focus-visible · Deep Dark Mode
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&display=swap');

/* ── Lucide Icon Sizing ───────────────────────────────── */
.lucide {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    stroke-width: 2;
    flex-shrink: 0;
    display: inline-block;
}

.title-icon {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.2em;
    stroke-width: 2;
}

.tab-button .icon .lucide {
    width: 1.7rem;
    height: 1.7rem;
    vertical-align: middle;
    stroke-width: 1.75;
}

/* ── Design Tokens ──────────────────────────────────────── */
:root {
    /* Brand palette — indigo/violet primary (perceptually vibrant) */
    --primary-color:    #6366f1;
    --primary-hover:    #4f46e5;
    --primary-light:    #a5b4fc;
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

    /* Semantic colours */
    --correct-color:    #22c55e;
    --incorrect-color:  #f43f5e;
    --highlight-color:  #a5b4fc;

    /* Neutrals */
    --bg-color:         #f1f5fb;
    --card-bg:          rgba(255, 255, 255, 0.80);
    --card-bg-solid:    #ffffff;
    --secondary-color:  #f4f6fc;
    --border-color:     rgba(99, 102, 241, 0.15);
    --text-color:       #1e1b4b;
    --text-muted:       #64748b;

    /* Shadows — layered for depth */
    --shadow-sm:  0 1px 2px rgba(99,102,241,.07), 0 1px 1px rgba(0,0,0,.04);
    --shadow-md:  0 4px 6px -1px rgba(99,102,241,.12), 0 2px 4px -2px rgba(0,0,0,.06);
    --shadow-lg:  0 20px 40px -8px rgba(99,102,241,.18), 0 8px 16px -4px rgba(0,0,0,.08);
    --shadow-xl:  0 25px 50px -12px rgba(99,102,241,.25);

    /* Fluid type scale — responds to viewport */
    --text-xs:   clamp(0.70rem, 0.65rem + 0.25vw, 0.80rem);
    --text-sm:   clamp(0.82rem, 0.78rem + 0.22vw, 0.94rem);
    --text-base: clamp(0.94rem, 0.88rem + 0.30vw, 1.10rem);
    --text-md:   clamp(1.10rem, 1.00rem + 0.50vw, 1.30rem);
    --text-lg:   clamp(1.25rem, 1.10rem + 0.75vw, 1.60rem);
    --text-xl:   clamp(1.45rem, 1.25rem + 1.00vw, 1.90rem);
    --text-2xl:  clamp(1.75rem, 1.45rem + 1.50vw, 2.40rem);

    /* Spacing */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;

    /* Radii */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   24px;
    --radius-pill: 9999px;

    /* Timing */
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
}

/* ── Dark Mode Tokens ───────────────────────────────────── */
.dark-mode {
    --primary-color:    #818cf8;
    --primary-hover:    #a5b4fc;
    --primary-light:    #4f46e5;
    --primary-gradient: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);

    --correct-color:    #4ade80;
    --incorrect-color:  #fb7185;

    --bg-color:         #0f0f17;
    --card-bg:          rgba(26, 26, 46, 0.75);
    --card-bg-solid:    #1a1a2e;
    --secondary-color:  #1e1e34;
    --border-color:     rgba(129, 140, 248, 0.20);
    --text-color:       #e2e8f0;
    --text-muted:       #94a3b8;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.25);
    --shadow-md:  0 4px 12px rgba(0,0,0,.35);
    --shadow-lg:  0 20px 40px rgba(0,0,0,.50);
    --shadow-xl:  0 25px 50px rgba(0,0,0,.60);

    background-color: var(--bg-color);
    color: var(--text-color);
}

/* ── Global Reset & Base ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--text-base);
    font-optical-sizing: auto;
    line-height: 1.65;
    text-align: center;
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-8);
    min-height: 100vh;
    background-color: var(--bg-color);
    background-image:
        radial-gradient(ellipse at 20% 0%,  rgba(99,102,241,.12) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 10%, rgba(139,92,246,.10) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%,rgba(99,102,241,.08) 0%, transparent 50%);
    color: var(--text-color);
    transition:
        background-color var(--duration-base) var(--ease-smooth),
        color var(--duration-base) var(--ease-smooth);
}

/* ── Focus Visible ──────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.container {
    max-width: 840px;
    margin: 0 auto;
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition:
        background-color var(--duration-base) var(--ease-smooth),
        box-shadow var(--duration-base) var(--ease-smooth);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.header h1 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.025em;
    transition: color var(--duration-fast);
}

.clickable {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.clickable:hover { color: var(--primary-color); }

.clickable::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background: var(--primary-gradient);
    border-radius: var(--radius-pill);
    transition: all var(--duration-base) var(--ease-smooth);
    transform: translateX(-50%);
}

.clickable:hover::after { width: 100%; }

.dark-mode-toggle {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    font-size: 1.1rem;
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    color: var(--text-color);
    transition:
        background-color var(--duration-fast),
        transform var(--duration-fast) var(--ease-spring),
        box-shadow var(--duration-fast);
}

.dark-mode-toggle:hover {
    background: var(--primary-color);
    color: #fff;
    transform: rotate(20deg) scale(1.1);
    box-shadow: var(--shadow-md);
}

.progress-container { margin-bottom: var(--space-5); }

.progress-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--secondary-color);
    border-radius: var(--radius-pill);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.dark-mode .progress-bar { background: rgba(255,255,255,.08); }

.progress {
    height: 100%;
    width: 0%;
    background: var(--primary-gradient);
    border-radius: var(--radius-pill);
    transition: width var(--duration-slow) var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.card {
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    margin-bottom: var(--space-5);
    transition:
        transform var(--duration-base) var(--ease-smooth),
        box-shadow var(--duration-base) var(--ease-smooth);
    box-shadow: var(--shadow-md);
}

.dark-mode .card { background: rgba(26, 26, 46, 0.85); }

/* .card.shake and @keyframes shake defined in the 2026 animations section */

.prompt {
    font-size: var(--text-md);
    font-weight: 500;
    margin-bottom: var(--space-5);
    line-height: 1.5;
}

.feedback {
    font-weight: 600;
    font-size: var(--text-sm);
    margin: var(--space-3) 0;
    min-height: 24px;
    letter-spacing: 0.01em;
}

.incorrect { color: var(--incorrect-color); }
.correct   { color: var(--correct-color); }

input[type="text"] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--text-base);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    background: var(--card-bg-solid);
    color: var(--text-color);
    transition:
        border-color var(--duration-fast),
        box-shadow var(--duration-fast);
    box-sizing: border-box;
}

input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

input[type="file"] {
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    flex: 1;
    min-width: 200px;
    font-family: inherit;
    color: var(--text-color);
    background: var(--card-bg-solid);
    cursor: pointer;
}

.dark-mode input[type="text"],
.dark-mode input[type="file"] {
    background: rgba(26, 26, 46, 0.90);
    color: var(--text-color);
    border-color: rgba(129, 140, 248, 0.25);
}

.dark-mode input[type="text"]:focus {
    box-shadow: 0 0 0 3px rgba(129,140,248,.25);
}

.hint {
    background: linear-gradient(135deg, rgba(99,102,241,.07) 0%, rgba(139,92,246,.07) 100%);
    border: 1px solid rgba(99,102,241,.20);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    text-align: left;
    color: var(--text-muted);
}

.dark-mode .hint {
    background: rgba(129, 140, 248, 0.08);
    border-color: rgba(129, 140, 248, 0.20);
}

/* .hint.visible height/opacity/padding handled in the 2026 animations section */

.buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.button {
    padding: var(--space-2) var(--space-5);
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    min-height: 44px;
    transition:
        background-color var(--duration-fast),
        transform var(--duration-fast) var(--ease-spring),
        box-shadow var(--duration-fast);
    min-width: 100px;
    position: relative;
    overflow: hidden;
}

.button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background var(--duration-fast);
    border-radius: var(--radius-pill);
}

.button:hover::after { background: rgba(255,255,255,.12); }

.button:active { transform: scale(0.96); }

.button-primary {
    background: var(--primary-gradient);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,.40);
}

.button-primary:hover {
    box-shadow: 0 4px 16px rgba(99,102,241,.55);
    transform: translateY(-1px);
}

.button-primary:active {
    transform: scale(0.96) translateY(0);
    box-shadow: 0 1px 4px rgba(99,102,241,.30);
}

.button-secondary {
    background: var(--secondary-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.button-secondary:hover {
    background: var(--border-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.button-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(244,63,94,.35);
}

.button-danger:hover {
    box-shadow: 0 4px 14px rgba(244,63,94,.50);
    transform: translateY(-1px);
}

.button-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    font-size: var(--text-xs);
    min-width: 44px;
    min-height: 44px;
}

.score-display {
    font-size: var(--text-md);
    font-weight: 600;
    margin: var(--space-4) 0;
}

.import-container {
    margin: var(--space-5) 0;
    padding: var(--space-5);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color var(--duration-fast);
}

.import-container:hover { border-color: var(--primary-color); }

.import-container.hidden { display: none; }

.import-container h3 {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-top: 0;
    letter-spacing: -0.015em;
}

.keyboard-shortcuts {
    margin-top: var(--space-8);
    font-size: var(--text-sm);
    color: var(--text-muted);
    background: var(--secondary-color);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary-color);
    text-align: left;
}

.dark-mode .keyboard-shortcuts { background: rgba(255,255,255,.04); }

.keyboard-shortcuts ul {
    padding-left: var(--space-5);
    margin: var(--space-2) 0;
}

.keyboard-shortcuts li { margin-bottom: var(--space-1); }

.keyboard-shortcuts strong {
    display: inline-block;
    padding: 2px var(--space-2);
    background: var(--card-bg-solid);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: var(--text-xs);
    box-shadow: var(--shadow-sm);
}

.dark-mode .keyboard-shortcuts strong {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
}

.tab-container {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-5);
    background: var(--card-bg);
}

.tab-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-4) 0 var(--space-2);
}

.tab-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: var(--space-3) var(--space-3);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    font-family: inherit;
    min-height: 64px;
    transition:
        background-color var(--duration-base) var(--ease-smooth),
        transform var(--duration-base) var(--ease-spring),
        box-shadow var(--duration-base) var(--ease-smooth),
        border-color var(--duration-base);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.tab-button .icon {
    font-size: 1.7rem;
    margin-bottom: var(--space-2);
    transition: transform var(--duration-base) var(--ease-spring);
}

.tab-button .label {
    font-weight: 600;
    font-size: var(--text-sm);
    transition: color var(--duration-base);
}

.tab-button:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.tab-button:hover .icon { transform: scale(1.15); }

.tab-button.active {
    background: var(--primary-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(99,102,241,.45);
}

.tab-button.active .label { color: #fff; }

/* Dark mode tabs */
.dark-mode .tab-button {
    background: rgba(255,255,255,.04);
    border-color: rgba(129,140,248,.18);
    color: var(--text-color);
}

.dark-mode .tab-button .label { color: var(--text-color); }

.dark-mode .tab-button:hover {
    background: rgba(129,140,248,.12);
    border-color: var(--primary-color);
    transform: translateY(-4px);
}

.dark-mode .tab-button.active {
    background: var(--primary-gradient);
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(129,140,248,.35);
    color: #fff;
}

.dark-mode .tab-button.active .label {
    color: #fff;
}

.dark-mode .tab-button.active::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: var(--primary-gradient);
    border-radius: calc(var(--radius-lg) + 3px);
    z-index: -1;
    opacity: 0.5;
    filter: blur(10px);
}

.tab-button:first-child { border-radius: var(--radius-lg); }
.tab-button:last-child  { border-radius: var(--radius-lg); }

.tab-button.active { background: var(--primary-gradient); }

.tab-content {
    display: none;
    padding: var(--space-5);
    animation: fadeSlideUp var(--duration-base) var(--ease-smooth) both;
}

.tab-content.active { display: block; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.form-row input {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-color);
    background: var(--card-bg-solid);
    color: var(--text-color);
    min-height: 44px;
    font-family: inherit;
    font-size: var(--text-base);
    transition:
        border-color var(--duration-fast),
        box-shadow var(--duration-fast);
}

.form-row input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

/* Row 1: Term spans full width by default (hint hidden) */
#termInput       { grid-column: 1 / -1; }
#hintInput       { grid-column: 2; }
/* Row 2: Definition spans full width */
#definitionInput { grid-column: 1 / -1; }

/* When hint is toggled on: term goes back to col 1 */
.form-row.show-hint #termInput { grid-column: 1; }
.form-row.show-hint #hintInput { display: block; }

.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    justify-content: space-between;
}

.form-actions-right {
    display: flex;
    gap: var(--space-2);
}

.hint-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
    min-height: 44px;
    transition: color var(--duration-fast);
}
.hint-toggle:hover { color: var(--primary-color); }

/* Set name banner */
.create-tab-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.2);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}
.create-tab-banner > i { color: var(--primary-color); flex-shrink: 0; }
.create-tab-banner span { color: var(--text-muted); }
.create-tab-banner strong {
    font-weight: 700;
    color: var(--primary-color);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.banner-new-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    min-height: 44px;
    min-width: 44px;
    transition: color var(--duration-fast), border-color var(--duration-fast);
}
.banner-new-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }

.creator-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

#termsList {
    margin: var(--space-3) 0;
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.terms-header {
    display: grid;
    grid-template-columns: 2.5ch 1fr 1.5fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--card-bg-solid);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: sticky;
    top: 0;
    z-index: 1;
}

.terms-col-num  { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.terms-col-term { font-weight: 600; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terms-col-def  { font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: var(--space-1); }
.terms-col-actions { display: flex; justify-content: flex-end; gap: var(--space-1); }

.hint-tag {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    opacity: 0.55;
    flex-shrink: 0;
    cursor: default;
}
.hint-tag svg { width: 12px; height: 12px; }

.term-item {
    display: grid;
    grid-template-columns: 2.5ch 1fr 1.5fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color var(--duration-fast);
}

.term-item:last-child { border-bottom: none; }

.term-item .term-actions {
    display: flex;
    gap: var(--space-1);
    justify-content: flex-end;
}

.term-item .term-actions button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast), background-color var(--duration-fast);
    flex-shrink: 0;
}

.term-item .term-actions button:hover {
    color: var(--primary-color);
    background: rgba(99,102,241,.08);
}

.term-item .term-actions .delete-btn:hover {
    color: #e11d48;
    background: rgba(244,63,94,.08);
}

.term-item:hover { background: rgba(99,102,241,.05); }

.dark-mode .term-item:hover { background: rgba(129,140,248,.06); }

.quiz-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.round-summary {
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-lg);
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideUp 0.5s var(--ease-smooth) forwards;
}

.dark-mode .round-summary { background: rgba(26, 26, 46, 0.85); }

.round-summary h2 {
    margin-top: 0;
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark-mode .round-summary h2 {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
}

.round-summary .stats {
    margin: var(--space-4) 0;
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--text-muted);
}

.round-summary .stats p { margin: var(--space-2) 0; }

.round-summary .buttons {
    margin-top: var(--space-5);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

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

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

.round-summary .stats p {
    margin: 8px 0;
}

.round-summary .buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

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

@media (max-width: 600px) {
    .round-summary .buttons {
        flex-direction: column;
        align-items: center;
    }
    .round-summary .buttons button { width: 100%; }
}

@media (max-width: 540px) {
    .container { padding: var(--space-4); }
    .button    { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
    .button-small { padding: var(--space-2); font-size: var(--text-xs); min-width: 44px; width: auto; }
    .form-row  { grid-template-columns: 1fr; }
    .form-row #termInput,
    .form-row #hintInput,
    .form-row #definitionInput,
    .form-row.show-hint #termInput { grid-column: 1; }
    .form-actions { flex-wrap: wrap; }
    .form-actions-right { flex: 1; }
    .form-actions-right .button { flex: 1; }
    .tab-button { padding: var(--space-2) var(--space-2); min-height: 56px; }
    .tab-button .label { font-size: var(--text-xs); }
    .tab-button .icon { font-size: 1.3rem; margin-bottom: var(--space-1); }
    .creator-controls { flex-direction: column; }
    .creator-controls .button { width: 100%; }
}

/* ── Drop Zone ──────────────────────────────────────── */
.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(99,102,241,.04) 0%, rgba(139,92,246,.04) 100%);
    cursor: pointer;
    transition:
        border-color var(--duration-base),
        background var(--duration-base),
        transform var(--duration-base) var(--ease-spring);
    text-align: center;
    position: relative;
}

.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(99,102,241,.09) 0%, rgba(139,92,246,.08) 100%);
    transform: scale(1.01);
}

.drop-zone.drag-over {
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(99,102,241,.15);
}

.drop-zone.drop-accepted {
    border-color: var(--correct-color);
    background: linear-gradient(135deg, rgba(34,197,94,.07) 0%, rgba(34,197,94,.04) 100%);
    animation: correct-pop 0.4s var(--ease-spring) both;
}

.drop-zone-icon {
    width: 2.8rem;
    height: 2.8rem;
    stroke: var(--primary-color);
    opacity: 0.75;
    transition: transform var(--duration-base) var(--ease-spring), opacity var(--duration-fast);
    flex-shrink: 0;
}

.drop-zone:hover .drop-zone-icon,
.drop-zone.drag-over .drop-zone-icon {
    transform: translateY(-4px) scale(1.1);
    opacity: 1;
}

.drop-zone-text {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-color);
}

.drop-zone-sub {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.drop-zone-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    margin: var(--space-1) 0;
}

.drop-zone-btn input { display: none; }

.drop-zone-formats {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

.drop-zone-filename {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--correct-color);
    background: rgba(34,197,94,.08);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(34,197,94,.25);
}

.dark-mode .drop-zone {
    background: linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(139,92,246,.06) 100%);
}

/* ── Saved Sets Grid ────────────────────────────────── */
/* ── Saved Sets: shared + view toggle ─────────────────── */
.saved-sets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    min-height: 32px;
}

.saved-sets-count {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.view-toggle {
    display: flex;
    gap: var(--space-1);
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2px;
}

.view-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: var(--space-1) var(--space-2);
    border-radius: calc(var(--radius-md) - 2px);
    display: flex;
    align-items: center;
    transition:
        background-color var(--duration-fast),
        color var(--duration-fast);
    line-height: 1;
}

.view-toggle-btn .lucide { width: 1rem; height: 1rem; }

.view-toggle-btn.active {
    background: var(--card-bg-solid);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.dark-mode .view-toggle-btn.active {
    background: rgba(99,102,241,.18);
}

.saved-sets-container {
    margin-top: 0;
}

.saved-sets-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-5);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.saved-sets-empty .lucide {
    width: 2.4rem;
    height: 2.4rem;
    stroke: var(--border-color);
}

/* ── Grid view (default) ────────────────────────────── */
.saved-sets-container.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}

.grid-view .saved-set-item {
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    gap: var(--space-3);
    justify-content: space-between;
    min-height: 110px;
    transition:
        transform var(--duration-base) var(--ease-smooth),
        box-shadow var(--duration-base),
        border-color var(--duration-base);
}

.grid-view .saved-set-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.grid-view .saved-set-info { text-align: left; }

.grid-view .saved-set-info h4 {
    margin: 0 0 var(--space-1) 0;
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-view .saved-set-info p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.grid-view .saved-set-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.grid-view .primary-actions {
    display: flex;
    gap: var(--space-2);
}

.grid-view .primary-actions .button-primary {
    flex: 1;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
}

.grid-view .secondary-actions {
    display: flex;
    gap: var(--space-2);
}

.grid-view .secondary-actions .button {
    flex: 1;
    justify-content: center;
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
}

/* ── List view (compact) ───────────────────────────── */
.saved-sets-container.list-view {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.list-view .saved-set-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    gap: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: none;
    transition:
        background-color var(--duration-fast),
        border-color var(--duration-fast);
    min-height: 0;
}

.list-view .saved-set-item:hover {
    background: rgba(99,102,241,.06);
    border-color: var(--border-color);
    transform: none;
    box-shadow: none;
}

.dark-mode .list-view .saved-set-item:hover {
    background: rgba(99,102,241,.10);
}

/* Separator lines between rows */
.list-view .saved-set-item + .saved-set-item {
    border-top: 1px solid var(--border-color);
    border-radius: 0;
}

.list-view .saved-set-item:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.list-view .saved-set-item:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.list-view .saved-set-item:only-child  { border-radius: var(--radius-md); }

.list-view .saved-set-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    min-width: 0;
    text-align: left;
}

.list-view .saved-set-info h4 {
    margin: 0;
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.list-view .saved-set-info p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.list-view .saved-set-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.list-view .primary-actions,
.list-view .secondary-actions {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.list-view .primary-actions .button {
    padding: 4px var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
}

.list-view .secondary-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    font-size: var(--text-xs);
    min-width: 44px;
    min-height: 44px;
    width: auto;
}

/* Badge shown in both views */
.saved-set-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(99,102,241,.10);
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    flex-shrink: 0;
}

.saved-set-badge .lucide { width: 0.7rem; height: 0.7rem; }

.dark-mode .saved-set-item { background: transparent; }
.dark-mode .grid-view .saved-set-item { background: rgba(26,26,46,0.85); }
.dark-mode .grid-view .saved-set-item:hover { box-shadow: var(--shadow-md); }
.dark-mode .saved-set-info p { color: var(--text-muted); }

    /* already replaced above by new grid rules */

.example-format {
    background: var(--secondary-color);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
    border: 1px solid var(--border-color);
}

.dark-mode .example-format { background: rgba(255,255,255,.04); }

.example-format pre {
    margin: 0;
    overflow-x: auto;
    padding: var(--space-3);
    background: rgba(99,102,241,.06);
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: var(--text-sm);
    text-align: left;
}

.dark-mode .example-format pre { background: rgba(0,0,0,.25); }

.hidden { display: none; }

@media (max-width: 600px) {
    .form-row  { flex-direction: column; }
    .tab-buttons { flex-wrap: wrap; }

    /* Grid view collapses to single column on small screens */
    .grid-view.saved-sets-container {
        grid-template-columns: 1fr;
    }

    /* List view actions condense on very narrow viewports */
    .list-view .saved-set-info p { display: none; }
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 23, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--duration-base) var(--ease-smooth),
        visibility var(--duration-base);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-dialog {
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 420px;
    padding: var(--space-6);
    transform: translateY(-16px) scale(0.98);
    transition: transform var(--duration-base) var(--ease-spring);
    color: var(--text-color);
}

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

.modal-header { margin-bottom: var(--space-4); }

.modal-header h3 {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-body { margin-bottom: var(--space-5); }

.modal-body p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-muted);
}

.modal-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--text-base);
    background: var(--card-bg-solid);
    color: var(--text-color);
    transition:
        border-color var(--duration-fast),
        box-shadow var(--duration-fast);
}

.modal-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.toast-container {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.toast {
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    color: var(--text-color);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    width: 300px;
    display: flex;
    align-items: center;
    transform: translateX(120%);
    transition: transform var(--duration-base) var(--ease-spring);
}

.toast.visible { transform: translateX(0); }

.toast.success { border-left: 4px solid var(--correct-color); }
.toast.error   { border-left: 4px solid var(--incorrect-color); }

.toast.info { border-left: 4px solid var(--primary-color); }

.toast-message {
    flex: 1;
    margin-right: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
}

.continue-session {
    background: var(--primary-gradient);
    color: #fff;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    box-shadow: 0 4px 20px rgba(99,102,241,.40);
    text-align: center;
    animation: subtlePulse 3s infinite;
    border: 1px solid rgba(255,255,255,.15);
}

.dark-mode .continue-session {
    box-shadow: 0 4px 20px rgba(99,102,241,.30);
}

.dark-mode .continue-session .button {
    background: rgba(255,255,255,.92);
    color: var(--primary-light);  /* dark mode: #4f46e5 — deep indigo, readable on white */
}

.dark-mode .continue-session .button:hover {
    background: #fff;
    color: var(--primary-light);
}

.continue-session .button {
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    background: rgba(255,255,255,.95);
    color: var(--primary-hover);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    border: none;
    font-weight: 700;
}

.continue-session .button:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.continue-session-info {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    opacity: 0.85;
}

@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(99,102,241,.40); }
    50%       { box-shadow: 0 6px 28px rgba(99,102,241,.55); }
}

.button-share {
    background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-shadow: 0 2px 8px rgba(59,130,246,.35);
}

.button-share:hover {
    box-shadow: 0 4px 14px rgba(59,130,246,.50);
    transform: translateY(-1px);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.bounce { animation: bounce 0.8s var(--ease-smooth); }

.import-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.import-method {
    background: var(--card-bg);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    text-align: left;
    transition: border-color var(--duration-fast);
}

.import-method:hover { border-color: var(--primary-color); }

.import-method h4 {
    margin: 0 0 var(--space-3) 0;
    color: var(--primary-color);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.link-import {
    display: flex;
    gap: var(--space-3);
}

.link-import input { flex: 1; }

@media (max-width: 600px) {
    .link-import { flex-direction: column; }
}

.copyable {
    cursor: pointer;
    position: relative;
    transition: color var(--duration-fast);
}

.copyable:hover { color: var(--primary-color); }

.term-number {
    color: var(--primary-color);
    margin-right: var(--space-2);
    font-weight: 700;
    min-width: 24px;
    display: inline-block;
    font-size: var(--text-sm);
}

.term-content {
    display: flex;
    align-items: center;
}

.format-help {
    margin-top: var(--space-5);
    text-align: left;
}

.info-button {
    background: none;
    border: 1.5px solid var(--border-color);
    color: var(--primary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    transition:
        background-color var(--duration-fast),
        border-color var(--duration-fast);
}

.info-button:hover {
    background: rgba(99,102,241,.08);
    border-color: var(--primary-color);
}

.info-content {
    margin-top: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--secondary-color);
    border-left: 4px solid var(--primary-color);
}

.dark-mode .info-content { background: rgba(255,255,255,.04); }

.info-content pre {
    background: rgba(99,102,241,.06);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: var(--text-sm);
}

.dark-mode .info-content pre { background: rgba(0,0,0,.25); }

/* ── Utility ──────────────────────────────────────────────── */
.hidden { display: none; }

/* ════════════════════════════════════════════════════════════
   2026 ANIMATION TRENDS
   ─────────────────────────────────────────────────────────
   1. @property  — animatable custom properties
   2. interpolate-size — animate to height: auto
   3. @view-transition — cross-document transitions
   4. @starting-style — entry effects without JS
   5. Scroll-Driven Animations — narrative pacing
   6. Ambient Background Motion — atmospheric depth
   7. 3D Tilt System — perspective depth on cards
   8. Animated Typography — gradient angle, counter
   9. SVG Stroke Draw — icon reveal on state change
  10. Stagger System — cascading entrance delays
  11. Spotlight / Ripple — cursor-tracked glows
  12. Motion-blur Shake — kinetic feedback
  13. Correct/Incorrect Pop — meaningful feedback
  14. Minimal Elegant Entrances — everything fades in
   ════════════════════════════════════════════════════════════ */

/* ── 1. @property — Animatable Custom Properties ─────────── */
@property --gradient-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 135deg;
}

@property --glow-opacity {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --card-glow {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --btn-spotlight-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
}

@property --btn-spotlight-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
}

@property --count-val {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

/* ── 2. interpolate-size: allow keywords ─────────────────── */
:root {
    interpolate-size: allow-keywords;
}

/* ── 3. @view-transition (cross-document) ────────────────── */
@view-transition {
    navigation: auto;
}

.container       { view-transition-name: app-container; }
#questionCard    { view-transition-name: question-card; }
#roundSummary    { view-transition-name: round-summary; }
#importSection   { view-transition-name: import-section; }
#quizSection     { view-transition-name: quiz-section; }

::view-transition-old(question-card) {
    animation: vt-slide-out var(--duration-base) var(--ease-smooth) both;
}

::view-transition-new(question-card) {
    animation: vt-slide-in var(--duration-base) var(--ease-smooth) both;
}

::view-transition-old(round-summary),
::view-transition-old(quiz-section) {
    animation: vt-fade-out var(--duration-base) var(--ease-smooth) both;
}

::view-transition-new(round-summary),
::view-transition-new(quiz-section) {
    animation: vt-fade-in var(--duration-base) var(--ease-smooth) both;
}

@keyframes vt-slide-out {
    to { opacity: 0; transform: translateX(-20px) scale(0.98); }
}
@keyframes vt-slide-in {
    from { opacity: 0; transform: translateX(20px) scale(0.98); }
}
@keyframes vt-fade-out {
    to { opacity: 0; transform: translateY(8px); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
}

/* ── 4. @starting-style — Entry Effects ─────────────────── */

/* Card enters from below */
.card {
    transition:
        opacity var(--duration-base) var(--ease-smooth),
        transform var(--duration-base) var(--ease-smooth),
        box-shadow var(--duration-base) var(--ease-smooth),
        border-color var(--duration-base);
}

@starting-style {
    .card { opacity: 0; transform: translateY(14px) scale(0.99); }
}

/* Round summary enters from below */
@starting-style {
    .round-summary { opacity: 0; transform: translateY(24px); }
}

/* Modal enters with scale */
@starting-style {
    .modal-overlay.active .modal-dialog {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
}

/* Toast enters from right */
@starting-style {
    .toast.visible { transform: translateX(120%); opacity: 0; }
}

/* Tab content enters on activation */
@starting-style {
    .tab-content.active { opacity: 0; transform: translateY(8px); }
}

/* ── 5. Scroll-Driven Animations ─────────────────────────── */
@keyframes scroll-reveal {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes scroll-reveal-left {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes scroll-reveal-right {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

.saved-set-item {
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
}

.term-item {
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
}

.import-method {
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
}

/* Scroll-progress indicator on the body */
@keyframes scroll-progress-advance {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
    transform-origin: left center;
    z-index: 9999;
    animation: scroll-progress-advance linear both;
    animation-timeline: scroll();
    animation-range: 0% 100%;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* ── 6. Ambient Background Motion ────────────────────────── */
@keyframes ambient-drift-1 {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(22px, -15px) scale(1.06); }
    66%  { transform: translate(-12px, 10px) scale(0.97); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes ambient-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    40%  { transform: translate(-18px, 22px) scale(1.05); }
    80%  { transform: translate(14px, -8px) scale(0.98); }
    100% { transform: translate(0, 0) scale(1); }
}

body::after {
    content: '';
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.07) 0%, transparent 70%);
    bottom: -60px;
    right: -60px;
    pointer-events: none;
    z-index: -1;
    animation: ambient-drift-1 18s ease-in-out infinite;
}

/* 2nd ambient blob via container pseudo */
.container::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.06) 0%, transparent 70%);
    top: -80px;
    left: -60px;
    pointer-events: none;
    z-index: -1;
    animation: ambient-drift-2 22s ease-in-out infinite;
}

.container { position: relative; overflow: visible; }

/* ── 7. 3D Card Tilt System ──────────────────────────────── */
.card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform:
        perspective(900px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        translateZ(0);
    will-change: transform;
    transform-style: preserve-3d;
}

/* Inner card content lifts slightly above surface */
.card .prompt,
.card .hint,
.card .buttons {
    transform: translateZ(4px);
}

.card:hover {
    box-shadow: var(--shadow-xl);
}

/* Tab button 3D lift */
.tab-button {
    transform-style: preserve-3d;
}

.tab-button:hover {
    transform: translateY(-4px) perspective(600px) rotateX(3deg);
}

/* ── 8. Animated Typography ──────────────────────────────── */

/* Rotating gradient text on round summary heading */
@keyframes rotate-gradient {
    to { --gradient-angle: 495deg; }
}

.round-summary h2 {
    background: linear-gradient(var(--gradient-angle), #6366f1 0%, #8b5cf6 45%, #a78bfa 70%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: rotate-gradient 6s linear infinite;
}

/* Score display number counter animation */
@keyframes count-up {
    from { --count-val: 0; }
}

.score-display {
    font-variant-numeric: tabular-nums;
    transition: color var(--duration-base) var(--ease-smooth);
}

/* Animated bold emphasis on feedback text */
.feedback.correct {
    animation: text-pop 0.35s var(--ease-spring) both;
}

.feedback.incorrect {
    animation: text-shake-in 0.35s var(--ease-smooth) both;
}

@keyframes text-pop {
    0%   { transform: scale(0.85); opacity: 0; }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1);   opacity: 1; }
}

@keyframes text-shake-in {
    0%   { opacity: 0; transform: translateX(-6px); }
    60%  { transform: translateX(3px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Typing cursor on the answer input label */
.prompt strong::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 0.9em;
    background: var(--primary-color);
    margin-left: 3px;
    vertical-align: text-bottom;
    animation: cursor-blink 1.1s step-end infinite;
    border-radius: 1px;
    opacity: 0;
    transition: opacity var(--duration-base);
}

/* Cursor only shows when there is active input nearby */
.card:focus-within .prompt strong::after {
    opacity: 1;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── 9. SVG / Icon Stroke Draw Animation ──────────────────── */
@keyframes stroke-draw {
    from { stroke-dashoffset: 60; opacity: 0.5; }
    to   { stroke-dashoffset: 0;  opacity: 1; }
}

/* Subtle icon scale on button hover (replaces unreliable stroke-draw) */
.button:hover .lucide {
    transform: scale(1.15);
    transition: transform var(--duration-fast) var(--ease-spring);
}

/* Icon spin on dark mode toggle */
@keyframes icon-spin-once {
    from { transform: rotate(0deg) scale(0.8); opacity: 0.4; }
    to   { transform: rotate(360deg) scale(1); opacity: 1; }
}

.dark-mode-toggle.transitioning .lucide {
    animation: icon-spin-once 0.45s var(--ease-spring) both;
}

/* Success icon draw for correct answers */
@keyframes check-draw {
    from { stroke-dashoffset: 40; }
    to   { stroke-dashoffset: 0; }
}

.correct-answer-icon .lucide path {
    stroke-dasharray: 40;
    animation: check-draw 0.5s var(--ease-smooth) 0.1s both;
}

/* ── 10. Stagger Entrance System ─────────────────────────── */
@keyframes stagger-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Tab content children stagger in when tab becomes active */
.tab-content.active .import-method:nth-child(1)  { animation: stagger-in 0.3s var(--ease-spring) 0ms   both; }
.tab-content.active .import-method:nth-child(2)  { animation: stagger-in 0.3s var(--ease-spring) 70ms  both; }
.tab-content.active .import-method:nth-child(3)  { animation: stagger-in 0.3s var(--ease-spring) 140ms both; }

/* Tab buttons themselves stagger on load */
.tab-button:nth-child(1) { animation: stagger-in 0.4s var(--ease-spring) 50ms  both; }
.tab-button:nth-child(2) { animation: stagger-in 0.4s var(--ease-spring) 120ms both; }
.tab-button:nth-child(3) { animation: stagger-in 0.4s var(--ease-spring) 190ms both; }
.tab-button:nth-child(4) { animation: stagger-in 0.4s var(--ease-spring) 260ms both; }

/* Round summary stats lines stagger */
.round-summary .stats p:nth-child(1) { animation: stagger-in 0.35s var(--ease-spring) 80ms  both; }
.round-summary .stats p:nth-child(2) { animation: stagger-in 0.35s var(--ease-spring) 150ms both; }
.round-summary .stats p:nth-child(3) { animation: stagger-in 0.35s var(--ease-spring) 220ms both; }
.round-summary .stats p:nth-child(4) { animation: stagger-in 0.35s var(--ease-spring) 290ms both; }

/* Buttons inside round summary stagger */
.round-summary .buttons .button:nth-child(1) { animation: stagger-in 0.35s var(--ease-spring) 320ms both; }
.round-summary .buttons .button:nth-child(2) { animation: stagger-in 0.35s var(--ease-spring) 390ms both; }
.round-summary .buttons .button:nth-child(3) { animation: stagger-in 0.35s var(--ease-spring) 460ms both; }

/* ── 11. Spotlight Cursor Glow on Buttons ────────────────── */
.button {
    --btn-spotlight-x: 50%;
    --btn-spotlight-y: 50%;
    --glow-opacity: 0;
}

.button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--btn-spotlight-x) var(--btn-spotlight-y),
        rgba(255, 255, 255, 0.28) 0%,
        transparent 65%
    );
    opacity: var(--glow-opacity);
    transition: opacity var(--duration-fast);
    pointer-events: none;
    z-index: 0;
}

.button:hover {
    --glow-opacity: 1;
}

/* Ripple effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.32);
    animation: ripple-expand 0.55s linear both;
    pointer-events: none;
    z-index: 1;
}

@keyframes ripple-expand {
    to { transform: scale(4); opacity: 0; }
}

/* ── 12. Motion-Blur Shake (incorrect feedback) ───────────── */
@keyframes shake {
    0%, 100% { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateX(0);    filter: blur(0px); }
    15%, 75%  { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateX(-7px); filter: blur(0.5px); }
    30%, 60%  { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateX(7px);  filter: blur(0.5px); }
    45%       { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateX(-4px); filter: blur(0.3px); }
    90%       { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateX(2px);  filter: blur(0.1px); }
}

.card.shake { animation: shake 0.48s var(--ease-smooth) both; }

/* ── 13. Correct / Incorrect Pop Feedback ────────────────── */
@keyframes correct-pop {
    0%   { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1); }
    30%  { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.025); }
    65%  { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(0.995); }
    100% { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1); }
}

.card.correct-answer {
    animation: correct-pop 0.5s var(--ease-spring) both;
    border-color: var(--correct-color);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22), var(--shadow-md);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.card.incorrect-answer {
    border-color: var(--incorrect-color);
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.18), var(--shadow-md);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

/* ── 14. Minimal Elegant Entrance — Container & Header ───── */
@keyframes elegant-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.container {
    animation: elegant-fade-up 0.6s var(--ease-smooth) both;
}

.header {
    animation: elegant-fade-up 0.5s var(--ease-smooth) 80ms both;
}

.progress-container {
    animation: elegant-fade-up 0.45s var(--ease-smooth) 60ms both;
}

/* Smoothly animate to height: auto for hint reveal */
.hint {
    overflow: hidden;
    height: 0;
    transition:
        height  var(--duration-slow) var(--ease-smooth),
        opacity var(--duration-base) var(--ease-smooth),
        padding var(--duration-base) var(--ease-smooth);
    opacity: 0;
    padding: 0 var(--space-4);
    display: block;
}

.hint.visible {
    height: auto;
    opacity: 1;
    padding: var(--space-3) var(--space-4);
}

/* Smooth custom scrollbar (Performance-First / Cross-Platform) */
#termsList {
    scrollbar-color: var(--primary-color) transparent;
    scrollbar-width: thin;
}

/* Import section card hover lift */
.import-method {
    transition:
        border-color var(--duration-fast),
        transform var(--duration-base) var(--ease-spring),
        box-shadow var(--duration-base);
}

.import-method:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ── Scroll-reveal fallback (IntersectionObserver for non-scroll-driven browsers) */
.saved-set-item,
.term-item,
.import-method {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    transition:
        opacity 0.45s var(--ease-smooth),
        transform 0.45s var(--ease-smooth);
}

/* When scroll-driven is supported, CSS animation takes over immediately */
@supports (animation-timeline: scroll()) {
    .saved-set-item,
    .term-item,
    .import-method {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.scroll-revealed {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Reduced Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }

    /* Disable scroll-driven animations */
    .saved-set-item,
    .term-item,
    .import-method {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable ambient blobs */
    body::after, .container::before { animation: none !important; }

    /* Disable gradient rotation */
    .round-summary h2 { animation: none !important; }

    /* Disable scroll progress bar animation */
    body::before { animation: none !important; }

    /* Keep shimmer off */
    .progress::after { display: none; }

    /* Disable 3D tilt */
    .card {
        transform: none !important;
        transition:
            box-shadow var(--duration-base),
            border-color var(--duration-base) !important;
    }

    /* Disable spotlight */
    .button::before { display: none; }

    /* Disable stagger */
    .tab-button,
    .tab-button:nth-child(1),
    .tab-button:nth-child(2),
    .tab-button:nth-child(3),
    .tab-button:nth-child(4),
    .round-summary .stats p,
    .round-summary .buttons .button { animation: none !important; }

    /* Restore hint visibility simply */
    .hint { transition: none !important; }

    /* Show all scroll-reveal targets immediately */
    .saved-set-item,
    .term-item,
    .import-method {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}