/* ═══════════════════════════════════════════
   TOÁN THÔNG MINH PREMIUM - Styles
   Premium UI with glassmorphism & animations
   ═══════════════════════════════════════════ */

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

/* ── LIGHT THEME (Default - Google White) ── */
:root {
    --primary: #7c3aed; --primary-light: #a78bfa; --primary-dark: #5b21b6;
    --accent: #f59e0b; --accent-light: #fcd34d;
    --success: #10b981; --error: #ef4444; --info: #3b82f6;
    --bg-dark: #f8f9fa; --bg-card: #ffffff; --bg-glass: rgba(255,255,255,0.85);
    --text: #202124; --text-dim: #5f6368; --text-muted: #9aa0a6;
    --border: #dadce0; --radius: 16px; --radius-sm: 10px;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
    --transition: 0.3s cubic-bezier(.4,0,.2,1);
    --font: 'Nunito', sans-serif;
    --nav-height: 64px;
    --bg-body: #f8f9fa;
    --bg-header: rgba(255,255,255,0.92);
    --bg-nav: rgba(255,255,255,0.96);
    --bg-modal: #ffffff;
    --bg-input: #f1f3f4;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --gradient-hero: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(59,130,246,0.05));
    --particles-bg: linear-gradient(135deg, #f8f9fa 0%, #eef1f6 30%, #f0f4ff 60%, #f8f9fa 100%);
    --particles-orb1: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 70%);
    --particles-orb2: radial-gradient(circle, rgba(59,130,246,0.05) 0%, transparent 70%);
    --welcome-title-gradient: linear-gradient(135deg, #202124, var(--primary));
    --hero-name-gradient: linear-gradient(135deg, #202124, var(--primary));
}

/* ── DARK THEME ── */
[data-theme="dark"] {
    --bg-dark: #0f0e17; --bg-card: rgba(255,255,255,0.06); --bg-glass: rgba(255,255,255,0.08);
    --text: #fffffe; --text-dim: rgba(255,255,255,0.6); --text-muted: rgba(255,255,255,0.35);
    --border: rgba(255,255,255,0.1);
    --shadow: 0 8px 32px rgba(0,0,0,0.3);
    --shadow-hover: 0 8px 32px rgba(0,0,0,0.4);
    --bg-body: #0f0e17;
    --bg-header: rgba(15,14,23,0.8);
    --bg-nav: rgba(15,14,23,0.95);
    --bg-modal: #1a1a2e;
    --bg-input: rgba(255,255,255,0.08);
    --card-shadow: none;
    --gradient-hero: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(59,130,246,0.1));
    --particles-bg: linear-gradient(135deg, #0f0e17 0%, #1a1033 30%, #0f172a 60%, #0f0e17 100%);
    --particles-orb1: radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%);
    --particles-orb2: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    --welcome-title-gradient: linear-gradient(135deg, #fffffe, var(--primary-light));
    --hero-name-gradient: linear-gradient(135deg, #fff, var(--primary-light));
}

html { font-size: 16px; }
body { font-family: var(--font); background: var(--bg-body); color: var(--text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background 0.4s ease, color 0.4s ease; }

/* ── Particles Background ── */
#particles-bg { position: fixed; inset: 0; z-index: 0; background: var(--particles-bg); transition: background 0.4s ease; }
#particles-bg::before { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background: var(--particles-orb1); top:10%; left:5%; animation: float 8s ease-in-out infinite; }
#particles-bg::after { content:''; position:absolute; width:250px; height:250px; border-radius:50%; background: var(--particles-orb2); bottom:20%; right:10%; animation: float 10s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.1)} }

/* ── Screens ── */
.screen { display:none; position:relative; z-index:1; min-height:100vh; padding-bottom:calc(var(--nav-height) + 16px); }
.screen.active { display:block; animation: fadeIn 0.35s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.hidden { display:none !important; }

/* ── WELCOME SCREEN ── */
.welcome-container { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:24px; text-align:center; }
.welcome-logo { margin-bottom:24px; }
.logo-icon { position:relative; width:100px; height:100px; border-radius:28px; background:linear-gradient(135deg, var(--primary), var(--info)); display:flex; align-items:center; justify-content:center; font-size:48px; box-shadow: 0 0 40px rgba(124,58,237,0.4); animation: logoPulse 3s ease-in-out infinite; }
.logo-star { position:absolute; top:-8px; right:-8px; font-size:24px; animation: starSpin 4s linear infinite; }
.logo-number { color:white; font-weight:900; font-size:44px; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
@keyframes logoPulse { 0%,100%{box-shadow:0 0 40px rgba(124,58,237,0.4)} 50%{box-shadow:0 0 60px rgba(124,58,237,0.6)} }
@keyframes starSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.welcome-title { font-size:2.5rem; font-weight:900; background:var(--welcome-title-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; }
.welcome-subtitle { color:var(--text-dim); font-size:1rem; margin-bottom:24px; }
.welcome-features { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:32px; }
.feature-tag { background:var(--bg-glass); border:1px solid var(--border); border-radius:20px; padding:6px 16px; font-size:0.85rem; display:flex; align-items:center; gap:6px; backdrop-filter:blur(8px); }
.welcome-form { width:100%; max-width:380px; display:flex; flex-direction:column; gap:16px; }
#google-signin-container { display:flex; justify-content:center; }
.divider { display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:0.85rem; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }
.input-group { position:relative; display:flex; align-items:center; }
.input-icon { position:absolute; left:16px; font-size:1.2rem; z-index:1; }
.input-group input { width:100%; padding:14px 16px 14px 48px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:1rem; font-family:var(--font); outline:none; transition:var(--transition); }
.input-group input:focus { border-color:var(--primary); box-shadow:0 0 20px rgba(124,58,237,0.15); }
.input-group input::placeholder { color:var(--text-muted); }
.welcome-footer { margin-top:32px; color:var(--text-muted); font-size:0.8rem; }

/* ── Buttons ── */
.btn-primary { padding:14px 28px; border:none; border-radius:var(--radius); background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:white; font-size:1rem; font-weight:700; font-family:var(--font); cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,58,237,0.4); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.btn-glow { box-shadow:0 0 20px rgba(124,58,237,0.3); }
.btn-secondary { padding:12px 24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-glass); color:var(--text); font-size:0.95rem; font-weight:600; font-family:var(--font); cursor:pointer; transition:var(--transition); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-secondary:hover { background:rgba(255,255,255,0.12); border-color:var(--primary-light); }
.btn-danger { padding:10px 20px; border:1px solid rgba(239,68,68,0.3); border-radius:var(--radius-sm); background:rgba(239,68,68,0.1); color:#fca5a5; font-size:0.85rem; font-weight:600; font-family:var(--font); cursor:pointer; transition:var(--transition); }
.btn-danger:hover { background:rgba(239,68,68,0.2); }
.btn-icon { width:40px; height:40px; border:none; border-radius:12px; background:var(--bg-glass); color:var(--text); font-size:1.2rem; cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; }
.btn-icon:hover { background:rgba(255,255,255,0.15); transform:scale(1.1); }
.btn-back { width:36px; height:36px; border:none; border-radius:10px; background:var(--bg-glass); color:var(--text); font-size:1.1rem; cursor:pointer; transition:var(--transition); }
.btn-back:hover { background:rgba(255,255,255,0.15); }
.btn-sm { padding:6px 14px; border:1px solid var(--border); border-radius:8px; background:var(--bg-glass); color:var(--text); font-size:0.78rem; font-family:var(--font); cursor:pointer; transition:var(--transition); white-space:nowrap; }
.btn-sm:hover { background:rgba(255,255,255,0.15); border-color:var(--primary-light); }
.btn-icon-text { padding:8px 16px; border:none; background:none; color:var(--text-dim); font-size:0.85rem; font-family:var(--font); cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:6px; }
.btn-icon-text:hover { color:var(--text); }

/* ── App Header ── */
.app-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:var(--bg-header); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; transition: background 0.4s ease; }
.header-left { display:flex; align-items:center; gap:10px; }
.avatar-mini { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--primary), var(--info)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; overflow:hidden; }
.header-info { display:flex; flex-direction:column; }
.header-name { font-weight:700; font-size:0.9rem; }
.header-level { font-size:0.75rem; color:var(--accent); font-weight:600; }
.header-center { display:none; }
.header-right { display:flex; gap:6px; }
.app-logo-small { font-size:0.9rem; font-weight:700; }
.page-title-inline { font-size:1.1rem; font-weight:800; }

/* ── Stats Bar ── */
.dashboard-content { padding:16px; max-width:800px; margin:0 auto; }
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; text-align:center; position:relative; overflow:hidden; box-shadow:var(--card-shadow); transition: background 0.4s ease, border 0.4s ease; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.stat-xp::before { background:linear-gradient(90deg, var(--primary), var(--info)); }
.stat-level::before { background:linear-gradient(90deg, var(--accent), #f97316); }
.stat-streak::before { background:linear-gradient(90deg, #ef4444, #f97316); }
.stat-total::before { background:linear-gradient(90deg, var(--success), #06b6d4); }
.stat-icon { font-size:1.5rem; margin-bottom:4px; }
.stat-value { font-size:1.5rem; font-weight:900; display:block; }
.stat-label { font-size:0.7rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }
.xp-bar-container { height:4px; background:rgba(255,255,255,0.1); border-radius:2px; margin-top:8px; overflow:hidden; }
.xp-bar { height:100%; background:linear-gradient(90deg, var(--primary), var(--info)); border-radius:2px; transition: width 0.5s ease; }

/* ── Daily Challenge ── */
.daily-challenge { background:linear-gradient(135deg, rgba(245,158,11,0.12), rgba(239,68,68,0.08)); border:1px solid rgba(245,158,11,0.25); border-radius:var(--radius); padding:16px; margin-bottom:20px; position:relative; overflow:hidden; }
.daily-badge { font-size:0.75rem; font-weight:800; color:var(--accent); letter-spacing:1px; margin-bottom:6px; }
.daily-text { font-size:0.9rem; color:var(--text-dim); margin-bottom:10px; }
.daily-progress { height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.daily-bar { height:100%; background:linear-gradient(90deg, var(--accent), #f97316); border-radius:3px; transition:width 0.5s ease; }
.daily-count { font-size:0.8rem; color:var(--accent); font-weight:700; margin-top:6px; display:block; text-align:right; }

/* ── Hero Welcome Banner ── */
.hero-banner { display:flex; align-items:center; gap:16px; padding:20px; margin:0 16px 0; background:var(--gradient-hero); border:1px solid rgba(124,58,237,0.15); border-radius:var(--radius); position:relative; overflow:hidden; box-shadow:var(--card-shadow); }
.hero-banner::before { content:''; position:absolute; top:-50%; right:-30%; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(124,58,237,0.15), transparent); }
.hero-avatar { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--info)); display:flex; align-items:center; justify-content:center; font-size:2rem; flex-shrink:0; overflow:hidden; border:3px solid rgba(124,58,237,0.4); }
.hero-info { flex:1; min-width:0; }
.hero-greeting { font-size:0.8rem; color:var(--text-dim); }
.hero-name { font-size:1.5rem; font-weight:900; background:var(--hero-name-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-rank { display:flex; align-items:center; gap:6px; margin-top:4px; }
.rank-icon { font-size:1.1rem; }
.rank-title { font-size:0.85rem; font-weight:800; letter-spacing:0.5px; transition:color 0.3s ease; }
.hero-xp-ring { width:62px; height:62px; position:relative; flex-shrink:0; }
.hero-ring-svg { width:100%; height:100%; transform:rotate(-90deg); }
.hero-ring-bg { fill:none; stroke:rgba(255,255,255,0.1); stroke-width:6; }
.hero-ring-fill { fill:none; stroke:var(--primary); stroke-width:6; stroke-linecap:round; stroke-dasharray:226.195; stroke-dashoffset:226.195; transition:stroke-dashoffset 1s ease, stroke 0.5s ease; }
.hero-ring-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hero-ring-level { font-size:1.3rem; font-weight:900; line-height:1; }
.hero-ring-label { font-size:0.5rem; font-weight:800; color:var(--text-muted); letter-spacing:1px; }

/* ── Section Title ── */
.section-title { font-size:1.1rem; font-weight:800; margin-bottom:6px; }
.section-desc { font-size:0.8rem; color:var(--text-dim); margin-bottom:14px; }

/* ── Difficulty Selector Modal ── */
.modal-difficulty { max-width:420px; }
.difficulty-options { display:flex; flex-direction:column; gap:10px; }
.diff-option { display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:var(--transition); font-family:var(--font); color:var(--text); text-align:left; }
.diff-option:hover { border-color:var(--primary-light); transform:translateX(4px); background:rgba(124,58,237,0.08); }
.diff-option:active { transform:translateX(2px); }
.diff-icon { font-size:1.8rem; flex-shrink:0; }
.diff-name { font-size:1rem; font-weight:800; flex:1; }
.diff-desc { font-size:0.75rem; color:var(--text-dim); display:none; }
.diff-xp { font-size:0.75rem; font-weight:700; color:var(--accent); padding:3px 8px; border-radius:6px; background:rgba(245,158,11,0.12); white-space:nowrap; }
@media (min-width:400px) { .diff-desc { display:inline; } }

/* ── Voice Button ── */
.btn-voice { width:36px; height:36px; border:1px solid var(--border); border-radius:10px; background:var(--bg-glass); color:var(--text); font-size:1.1rem; cursor:pointer; transition:var(--transition); margin-left:10px; vertical-align:middle; }
.btn-voice:hover { background:rgba(124,58,237,0.15); border-color:var(--primary-light); transform:scale(1.1); }

/* ── Topic Grid ── */
.topic-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px; }
.topic-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; cursor:pointer; transition:var(--transition); position:relative; overflow:hidden; box-shadow:var(--card-shadow); }
.topic-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(124,58,237,0.05), transparent); opacity:0; transition:var(--transition); }
.topic-card:hover { transform:translateY(-3px); border-color:var(--primary-light); box-shadow:0 8px 24px rgba(124,58,237,0.15); }
.topic-card:hover::before { opacity:1; }
.topic-card:active { transform:translateY(0); }
.topic-icon { font-size:2rem; margin-bottom:8px; }
.topic-name { font-size:0.9rem; font-weight:700; margin-bottom:4px; }
.topic-desc { font-size:0.75rem; color:var(--text-dim); margin-bottom:8px; }
.topic-difficulty { display:flex; gap:4px; margin-bottom:6px; }
.diff-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.15); transition:var(--transition); }
.diff-dot.active { background:var(--accent); box-shadow:0 0 6px rgba(245,158,11,0.5); }
.topic-stats { display:flex; justify-content:space-between; font-size:0.72rem; color:var(--text-muted); }

/* ── Mix Mode ── */
.btn-mix { width:100%; padding:16px; background:linear-gradient(135deg, rgba(124,58,237,0.12), rgba(59,130,246,0.08)); border:1px solid rgba(124,58,237,0.3); border-radius:var(--radius); color:var(--text); cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:16px; font-family:var(--font); text-align:left; }
.btn-mix:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,58,237,0.2); }
.mix-icon { font-size:2rem; }
.btn-mix strong { display:block; font-size:1rem; }
.btn-mix small { color:var(--text-dim); font-size:0.8rem; }

/* ── BOTTOM NAVIGATION ── */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:var(--nav-height); background:var(--bg-nav); backdrop-filter:blur(20px); border-top:1px solid var(--border); display:flex; justify-content:space-around; align-items:center; z-index:100; padding:0 8px; transition: background 0.4s ease; box-shadow: 0 -1px 4px rgba(0,0,0,0.05); }
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border:none; background:none; color:var(--text-muted); cursor:pointer; transition:var(--transition); font-family:var(--font); position:relative; }
.nav-item.active { color:var(--primary-light); }
.nav-item.active::after { content:''; position:absolute; top:-1px; width:24px; height:3px; border-radius:0 0 3px 3px; background:var(--primary); }
.nav-icon { font-size:1.3rem; }
.nav-label { font-size:0.65rem; font-weight:600; }

/* ── QUIZ SCREEN ── */
#screen-quiz { padding-bottom:0 !important; }
.quiz-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
.quiz-topic-label { font-weight:700; font-size:0.9rem; color:var(--primary-light); }
.quiz-progress-info { font-weight:700; color:var(--text-dim); font-size:0.9rem; }
.quiz-progress-bar { height:4px; background:rgba(255,255,255,0.1); }
.quiz-progress-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--info)); transition:width 0.4s ease; }
.quiz-body { max-width:600px; margin:0 auto; padding:20px 16px; }
.quiz-timer { text-align:center; margin-bottom:16px; }
.timer-icon { margin-right:6px; }
.timer-value { font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; }
.quiz-question-area { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:20px; text-align:center; }
.question-number { font-size:0.8rem; color:var(--primary-light); font-weight:700; margin-bottom:8px; text-transform:uppercase; letter-spacing:1px; }
.question-text { font-size:1.15rem; font-weight:700; line-height:1.6; white-space:pre-line; }
.question-hint { font-size:0.82rem; color:var(--accent); margin-top:10px; }

/* Answer Areas */
.answer-area { margin-bottom:16px; }
.answer-input-group { display:flex; gap:8px; align-items:center; }
.answer-input { flex:1; padding:14px 18px; background:var(--bg-input); border:2px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:1.2rem; font-weight:700; font-family:var(--font); text-align:center; outline:none; transition:var(--transition); }
.answer-input:focus { border-color:var(--primary); box-shadow:0 0 20px rgba(124,58,237,0.2); }
.answer-input.correct { border-color:var(--success); background:rgba(16,185,129,0.1); }
.answer-input.wrong { border-color:var(--error); background:rgba(239,68,68,0.1); }
.answer-unit { color:var(--text-dim); font-size:0.9rem; min-width:40px; }
.choices-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice-btn { padding:14px; background:var(--bg-glass); border:2px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:1rem; font-weight:600; font-family:var(--font); cursor:pointer; transition:var(--transition); text-align:left; display:flex; align-items:center; gap:10px; }
.choice-btn:hover { border-color:var(--primary-light); background:rgba(124,58,237,0.08); }
.choice-btn.selected { border-color:var(--primary); background:rgba(124,58,237,0.15); }
.choice-btn.correct { border-color:var(--success) !important; background:rgba(16,185,129,0.15) !important; }
.choice-btn.wrong { border-color:var(--error) !important; background:rgba(239,68,68,0.1) !important; }
.choice-label { width:28px; height:28px; border-radius:8px; background:var(--bg-glass); display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:800; flex-shrink:0; }
.tf-buttons { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btn-tf { padding:18px; border:2px solid var(--border); border-radius:var(--radius); background:var(--bg-glass); color:var(--text); font-size:1.1rem; font-weight:700; font-family:var(--font); cursor:pointer; transition:var(--transition); }
.btn-tf:hover { border-color:var(--primary-light); }
.btn-tf.selected { border-color:var(--primary); background:rgba(124,58,237,0.15); }
.btn-tf.correct { border-color:var(--success) !important; background:rgba(16,185,129,0.15) !important; }
.btn-tf.wrong { border-color:var(--error) !important; background:rgba(239,68,68,0.1) !important; }
.btn-submit { margin-top:8px; }

/* Feedback */
.feedback-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:50; display:flex; align-items:center; justify-content:center; animation:fadeIn 0.2s ease; padding:20px; }
.feedback-content { background:var(--bg-modal); border:1px solid var(--border); border-radius:var(--radius); padding:32px; text-align:center; max-width:340px; width:100%; box-shadow:var(--shadow); }
.correct-feedback { border-color:rgba(16,185,129,0.3); }
.wrong-feedback { border-color:rgba(239,68,68,0.3); }
.feedback-icon { font-size:3rem; margin-bottom:12px; }
.feedback-text { font-size:1.3rem; font-weight:800; margin-bottom:6px; }
.feedback-detail { font-size:0.9rem; color:var(--text-dim); margin-bottom:8px; }
.feedback-xp { font-size:1rem; font-weight:700; color:var(--accent); margin-bottom:16px; }
.btn-next { width:100%; }

/* ── RESULTS SCREEN ── */
#screen-results { padding-bottom:0 !important; }
.results-container { max-width:500px; margin:0 auto; padding:24px 16px; text-align:center; }
.results-header { margin-bottom:20px; }
.results-emoji { font-size:4rem; animation:bounce 0.6s ease; }
@keyframes bounce { 0%{transform:scale(0)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
.results-title { font-size:2rem; font-weight:900; margin:8px 0 4px; }
.results-subtitle { color:var(--text-dim); }
.results-score-ring { width:140px; height:140px; margin:20px auto; position:relative; }
.score-ring-svg { width:100%; height:100%; transform:rotate(-90deg); }
.score-ring-bg { fill:none; stroke:rgba(255,255,255,0.1); stroke-width:8; }
.score-ring-fill { fill:none; stroke:var(--success); stroke-width:8; stroke-linecap:round; stroke-dasharray:339.292; stroke-dashoffset:339.292; transition:stroke-dashoffset 1s ease, stroke 1s ease; }
.score-ring-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-value { font-size:2.5rem; font-weight:900; }
.score-label { font-size:0.9rem; color:var(--text-dim); }
.results-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0; }
.result-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; }
.result-stat-icon { display:block; font-size:1.3rem; margin-bottom:4px; }
.result-stat-value { display:block; font-size:1.3rem; font-weight:800; }
.result-stat-label { font-size:0.7rem; color:var(--text-dim); }
.level-up-banner, .new-badge-banner { background:linear-gradient(135deg, rgba(245,158,11,0.15), rgba(239,68,68,0.08)); border:1px solid rgba(245,158,11,0.3); border-radius:var(--radius); padding:14px; margin:12px 0; display:flex; align-items:center; gap:12px; animation:slideIn 0.5s ease; }
@keyframes slideIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
.level-up-icon, .badge-earned-icon { font-size:2rem; }
.level-up-text, .badge-earned-text { text-align:left; }
.level-up-text strong, .badge-earned-text strong { display:block; font-size:0.8rem; color:var(--accent); letter-spacing:1px; }
.results-actions { display:flex; gap:12px; margin-top:20px; }
.results-actions button { flex:1; }
#confetti-canvas { position:fixed; inset:0; z-index:200; pointer-events:none; }

/* ── ACHIEVEMENTS SCREEN ── */
.page-header { display:flex; align-items:center; gap:12px; padding:16px 20px; background:var(--bg-header); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.page-header h2 { font-size:1.1rem; font-weight:800; }
.achievements-content, .stats-content { padding:16px; max-width:600px; margin:0 auto; }
.ach-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.ach-summary-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; }
.ach-sum-value { display:block; font-size:1.8rem; font-weight:900; }
.ach-sum-label { font-size:0.75rem; color:var(--text-dim); }
.ach-section-title { font-size:1rem; font-weight:700; margin-bottom:12px; }
.badges-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.badge-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; transition:var(--transition); }
.badge-card.locked { opacity:0.4; filter:grayscale(0.8); }
.badge-card.earned { border-color:rgba(245,158,11,0.3); }
.badge-icon { font-size:2rem; display:block; margin-bottom:6px; }
.badge-name { font-size:0.8rem; font-weight:700; }
.badge-desc { font-size:0.7rem; color:var(--text-dim); margin-top:4px; }

/* ── STATISTICS SCREEN ── */
.stats-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.stats-ov-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; }
.stats-ov-icon { display:block; font-size:1.5rem; margin-bottom:6px; }
.stats-ov-value { display:block; font-size:1.5rem; font-weight:900; }
.stats-ov-label { font-size:0.72rem; color:var(--text-dim); }
.stats-section-title { font-size:1rem; font-weight:700; margin-bottom:12px; }
.topic-progress-item { display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; }
.tp-icon { font-size:1.5rem; }
.tp-info { flex:1; }
.tp-name { font-size:0.85rem; font-weight:700; margin-bottom:4px; }
.tp-bar { height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.tp-bar-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--success)); border-radius:3px; transition:width 0.5s ease; }
.tp-stats { text-align:right; min-width:60px; }
.tp-accuracy { display:block; font-size:0.9rem; font-weight:700; }
.tp-count { font-size:0.72rem; color:var(--text-dim); }

/* ── AI SEARCH SCREEN ── */
.ai-search-content, .library-content, .collection-content { padding:16px; max-width:800px; margin:0 auto; }
.ai-status { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--success); }
.ai-dot { width:8px; height:8px; border-radius:50%; background:var(--success); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.ai-search-box { margin-bottom:16px; }
.search-input-group { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.search-icon { font-size:1.2rem; }
.search-input-group input { flex:1; padding:12px 16px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:0.95rem; font-family:var(--font); outline:none; transition:var(--transition); }
.search-input-group input:focus { border-color:var(--primary); }
.search-input-group input::placeholder { color:var(--text-muted); }
.btn-search { padding:12px 20px; background:linear-gradient(135deg, var(--primary), var(--info)); border:none; border-radius:var(--radius); color:white; font-weight:700; font-family:var(--font); cursor:pointer; transition:var(--transition); white-space:nowrap; }
.btn-search:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(124,58,237,0.3); }
.btn-search:disabled { opacity:0.6; cursor:not-allowed; }
.search-filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter-select { padding:8px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:0.8rem; font-family:var(--font); cursor:pointer; outline:none; }
.filter-select option { background:var(--bg-modal); color:var(--text); }
.rag-stats { display:flex; gap:16px; padding:10px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:16px; font-size:0.82rem; }
.search-results { display:flex; flex-direction:column; gap:12px; }
.search-placeholder { text-align:center; padding:48px 24px; }
.placeholder-icon { font-size:3rem; margin-bottom:12px; }
.search-placeholder h3 { margin-bottom:8px; }
.search-placeholder p { color:var(--text-dim); font-size:0.9rem; }
.loading-state { text-align:center; padding:48px; }
.spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 12px; }
@keyframes spin { to{transform:rotate(360deg)} }
.error-state { text-align:center; padding:24px; color:var(--error); }

/* ── Exercise Cards ── */
.exercise-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; transition:var(--transition); cursor:pointer; }
.exercise-card:hover { border-color:var(--primary-light); transform:translateY(-2px); box-shadow: 0 4px 16px rgba(124,58,237,0.1); }
.exercise-card-compact { padding:12px; }
.ex-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.ex-source-badge { font-size:0.72rem; padding:3px 8px; border-radius:6px; background:rgba(124,58,237,0.15); color:var(--primary-light); font-weight:600; }
.ex-diff { font-size:0.8rem; }
.ex-card-question { font-size:0.9rem; font-weight:600; line-height:1.5; margin-bottom:8px; white-space:pre-line; }
.ex-card-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.ex-tag { font-size:0.72rem; padding:2px 8px; border-radius:6px; background:var(--bg-glass); border:1px solid var(--border); color:var(--text-dim); }
.ex-card-actions { display:flex; gap:8px; }
.collection-note { font-size:0.82rem; color:var(--accent); margin-bottom:8px; padding:8px; background:rgba(245,158,11,0.08); border-radius:8px; }

/* ── Library ── */
.textbook-tabs { display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; padding:2px 0; }
.textbook-tab { padding:10px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-glass); color:var(--text); font-family:var(--font); font-size:0.85rem; font-weight:600; cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0; }
.textbook-tab:hover { border-color:var(--primary-light); }
.textbook-tab.active { background:linear-gradient(135deg, rgba(124,58,237,0.2), rgba(59,130,246,0.1)); border-color:var(--primary); color:var(--primary-light); }
.tab-icon { font-size:1.1rem; }
.library-chapter { margin-bottom:20px; }
.chapter-title { font-size:0.95rem; font-weight:700; margin-bottom:10px; color:var(--primary-light); }
.library-exercises { display:flex; flex-direction:column; gap:8px; }

/* ── Collection ── */
.collection-count { font-size:0.85rem; color:var(--text-dim); }
.collection-empty { text-align:center; padding:48px 24px; }
.empty-icon { font-size:3rem; margin-bottom:12px; }
.collection-list { display:flex; flex-direction:column; gap:10px; }

/* ── Modals ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn 0.2s ease; }
.modal-content { background:var(--bg-modal); border:1px solid var(--border); border-radius:var(--radius); max-width:480px; width:100%; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow); }
.modal-small { max-width:380px; }
.modal-exercise { max-width:520px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-header h3 { font-size:1.05rem; font-weight:700; }
.btn-close-modal { width:32px; height:32px; border:none; border-radius:8px; background:var(--bg-glass); color:var(--text); font-size:1rem; cursor:pointer; }
.modal-body { padding:20px; }
.modal-actions { display:flex; gap:12px; margin-top:16px; }
.modal-actions button { flex:1; }

/* Settings */
.setting-item { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); }
.setting-item label { font-size:0.9rem; font-weight:600; }
.setting-item select { padding:8px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:var(--font); }
.setting-item select option { background:var(--bg-modal); color:var(--text); }
.setting-divider { height:1px; background:var(--border); margin:8px 0; }
.setting-user-info { font-size:0.8rem; color:var(--text-dim); }
.setting-danger { display:flex; gap:12px; border:none; padding-top:16px; }
.toggle { position:relative; width:48px; height:26px; cursor:pointer; }
.toggle input { display:none; }
.toggle-slider { position:absolute; inset:0; border-radius:13px; background:var(--border); transition:var(--transition); }
.toggle-slider::before { content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:white; transition:var(--transition); }
.toggle input:checked + .toggle-slider { background:var(--primary); }
.toggle input:checked + .toggle-slider::before { transform:translateX(22px); }

/* Exercise Detail */
.exercise-detail-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.ex-detail-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ex-badge-textbook, .ex-badge-topic, .ex-badge-difficulty { font-size:0.78rem; padding:4px 10px; border-radius:6px; font-weight:600; }
.ex-badge-textbook { background:rgba(59,130,246,0.15); color:var(--info); }
.ex-badge-topic { background:rgba(124,58,237,0.15); color:var(--primary-light); }
.ex-badge-difficulty { background:rgba(245,158,11,0.15); color:var(--accent); }
.ex-detail-question { font-size:1.05rem; font-weight:700; line-height:1.6; white-space:pre-line; margin-bottom:12px; }
.ex-detail-answer { padding:12px; background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.2); border-radius:var(--radius-sm); margin-bottom:12px; }
.ex-detail-hint { font-size:0.85rem; color:var(--accent); }
.ex-detail-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ex-detail-actions button { font-size:0.85rem; }
.ai-rewrite-result { background:linear-gradient(135deg, rgba(124,58,237,0.08), rgba(59,130,246,0.05)); border:1px solid rgba(124,58,237,0.2); border-radius:var(--radius); padding:16px; margin-top:16px; }
.rewrite-header { font-size:0.85rem; font-weight:700; color:var(--primary-light); margin-bottom:8px; }
.rewrite-question { font-size:0.95rem; line-height:1.6; margin-bottom:8px; white-space:pre-line; }
.rewrite-context { font-size:0.8rem; color:var(--text-dim); margin-bottom:12px; }
.similar-exercises { margin-top:16px; }
.similar-exercises h4 { font-size:0.9rem; margin-bottom:10px; }
.similar-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; margin-bottom:8px; }
.similar-card p { font-size:0.9rem; margin-bottom:4px; }
.similar-card small { color:var(--text-dim); font-size:0.8rem; }

/* ── Toast ── */
.toast-container { position:fixed; top:16px; right:16px; z-index:300; display:flex; flex-direction:column; gap:8px; }
.toast { padding:12px 20px; border-radius:var(--radius-sm); font-size:0.85rem; font-weight:600; font-family:var(--font); transform:translateX(120%); transition:transform 0.3s ease; max-width:320px; }
.toast.show { transform:translateX(0); }
.toast-info { background:rgba(59,130,246,0.9); color:white; }
.toast-success { background:rgba(16,185,129,0.9); color:white; }
.toast-error { background:rgba(239,68,68,0.9); color:white; }

/* ── EXAM SETUP SCREEN ── */
.exam-setup-content { padding:16px; max-width:600px; margin:0 auto; }
.exam-setup-hero { text-align:center; padding:24px 0 16px; }
.exam-hero-icon { font-size:3rem; margin-bottom:8px; }
.exam-setup-hero h2 { font-size:1.5rem; font-weight:900; margin-bottom:4px; }
.exam-setup-hero p { color:var(--text-dim); font-size:0.9rem; }
.exam-config-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:14px; box-shadow:var(--card-shadow); }
.exam-config-card h3 { font-size:0.95rem; font-weight:700; margin-bottom:12px; }
.exam-topic-options { display:flex; flex-wrap:wrap; gap:8px; }
.exam-topic-check { display:flex; align-items:center; gap:6px; padding:8px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; font-size:0.82rem; font-weight:600; transition:var(--transition); }
.exam-topic-check:has(input:checked) { border-color:var(--primary); background:rgba(124,58,237,0.1); color:var(--primary); }
.exam-topic-check input { display:none; }
.exam-count-options, .exam-time-options, .exam-diff-options { display:flex; flex-wrap:wrap; gap:8px; }
.exam-count-btn, .exam-time-btn, .exam-diff-btn { padding:10px 18px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-input); color:var(--text); font-family:var(--font); font-size:0.85rem; font-weight:600; cursor:pointer; transition:var(--transition); }
.exam-count-btn:hover, .exam-time-btn:hover, .exam-diff-btn:hover { border-color:var(--primary-light); }
.exam-count-btn.active, .exam-time-btn.active, .exam-diff-btn.active { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:white; border-color:var(--primary); }
.btn-start-exam { margin-top:8px; font-size:1.1rem; padding:16px; }

/* ── EXAM TAKING SCREEN ── */
#screen-exam { padding-bottom:0 !important; }
.exam-top-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--bg-header); border-bottom:1px solid var(--border); }
.exam-countdown { display:flex; align-items:center; gap:6px; }
.countdown-value { font-size:1.3rem; font-weight:900; font-variant-numeric:tabular-nums; color:var(--primary); }
.exam-countdown.warning .countdown-value { color:var(--accent); }
.exam-countdown.danger .countdown-value { color:var(--error); animation:pulse 1s ease-in-out infinite; }
.exam-progress-text { font-weight:700; font-size:0.9rem; color:var(--text-dim); }
.exam-progress-bar { height:4px; background:var(--border); }
.exam-progress-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--success)); transition:width 0.3s ease; }
.exam-body { max-width:600px; margin:0 auto; padding:16px; }
.exam-question-area { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px; text-align:center; box-shadow:var(--card-shadow); }
.exam-q-number { font-size:0.8rem; color:var(--primary); font-weight:700; margin-bottom:8px; letter-spacing:1px; text-transform:uppercase; }
.exam-q-text { font-size:1.1rem; font-weight:700; line-height:1.6; white-space:pre-line; }
.exam-q-hint { font-size:0.82rem; color:var(--accent); margin-top:8px; }
.exam-answer-area { margin-bottom:12px; }
.exam-nav-actions { display:flex; gap:10px; margin-top:12px; }
.exam-nav-actions button { flex:1; }
.exam-nav-grid-container { padding:16px; max-width:600px; margin:0 auto; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:80px; box-shadow:var(--card-shadow); }
.exam-nav-grid-container h4 { font-size:0.9rem; font-weight:700; margin-bottom:10px; }
.exam-nav-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin-bottom:14px; }
.exam-nav-cell { width:100%; aspect-ratio:1; border:1px solid var(--border); border-radius:8px; background:var(--bg-input); color:var(--text); font-size:0.75rem; font-weight:700; cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; }
.exam-nav-cell.current { border-color:var(--primary); background:rgba(124,58,237,0.15); color:var(--primary); }
.exam-nav-cell.answered { background:var(--success); color:white; border-color:var(--success); }
.exam-nav-cell.skipped { background:var(--accent); color:white; border-color:var(--accent); }
.btn-submit-exam { width:100%; font-size:1rem; }

/* ── EXAM RESULT SCREEN ── */
#screen-exam-result { padding-bottom:0 !important; }
.exam-result-container { max-width:600px; margin:0 auto; padding:20px 16px; }
.exam-result-header { text-align:center; margin-bottom:16px; }
.exam-result-emoji { font-size:3.5rem; animation:bounce 0.6s ease; }
.exam-result-title { font-size:1.5rem; font-weight:900; margin-top:8px; }
.exam-score-display { text-align:center; margin:20px 0; padding:24px; background:var(--gradient-hero); border:1px solid rgba(124,58,237,0.15); border-radius:var(--radius); box-shadow:var(--card-shadow); }
.exam-score-big { font-size:4rem; font-weight:900; background:var(--welcome-title-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.exam-score-label { font-size:1.1rem; color:var(--text-dim); font-weight:700; margin-top:4px; }
.exam-result-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.exam-r-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; text-align:center; box-shadow:var(--card-shadow); }
.exam-r-icon { display:block; font-size:1.3rem; margin-bottom:4px; }
.exam-r-value { display:block; font-size:1.3rem; font-weight:800; }
.exam-r-label { font-size:0.7rem; color:var(--text-dim); }
.exam-detail-title { font-size:1rem; font-weight:700; margin-bottom:12px; }
.exam-detail-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.exam-detail-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; box-shadow:var(--card-shadow); }
.exam-detail-item.correct-item { border-left:4px solid var(--success); }
.exam-detail-item.wrong-item { border-left:4px solid var(--error); }
.exam-detail-item.skipped-item { border-left:4px solid var(--accent); }
.exam-detail-q { font-size:0.85rem; font-weight:600; margin-bottom:6px; white-space:pre-line; }
.exam-detail-answer { font-size:0.78rem; color:var(--text-dim); }
.exam-detail-answer .correct-ans { color:var(--success); font-weight:700; }
.exam-detail-answer .user-ans { color:var(--error); font-weight:600; }
.exam-result-actions { display:flex; gap:12px; }
.exam-result-actions button { flex:1; }

/* ── Responsive ── */
@media (max-width:480px) {
    .stats-bar { grid-template-columns:repeat(2,1fr); }
    .topic-grid { grid-template-columns:1fr; }
    .choices-grid { grid-template-columns:1fr; }
    .results-stats-grid { grid-template-columns:repeat(2,1fr); }
    .badges-grid { grid-template-columns:repeat(2,1fr); }
    .welcome-title { font-size:2rem; }
    .search-filters { flex-direction:column; }
}
@media (min-width:768px) {
    .header-center { display:block; }
    .stats-bar { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1024px) {
    .topic-grid { grid-template-columns:repeat(4,1fr); }
    .bottom-nav { max-width:600px; left:50%; transform:translateX(-50%); border-radius:var(--radius) var(--radius) 0 0; }
}