/* ═══════════════════════════════════════════════════════
   THEME VARIABLES
═══════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:        #080c18;
  --bg2:       #0d1326;
  --surface:   #111827;
  --surface2:  #1a2235;
  --surface3:  #1e2d45;
  --border:    #1e2d45;
  --border2:   #263552;
  --text:      #e2e8f0;
  --text2:     #94a3b8;
  --muted:     #64748b;
  --accent:    #3b82f6;
  --accent2:   #06b6d4;
  --accentRgb: 59,130,246;
  --success:   #10b981;
  --danger:    #ef4444;
  --warning:   #f59e0b;
  --gold:      #fbbf24;
  --shadow:    rgba(0,0,0,.5);
  --grid-line: rgba(59,130,246,.04);
  --nav-bg:    rgba(8,12,24,.88);
  --card-hover: rgba(59,130,246,.06);
  --toggle-bg: #1e2d45;
  --toggle-knob: #94a3b8;
}
[data-theme="light"] {
  --bg:        #f0f4ff;
  --bg2:       #e8edf8;
  --surface:   #ffffff;
  --surface2:  #f5f7ff;
  --surface3:  #eef1ff;
  --border:    #dde3f5;
  --border2:   #c8d0ea;
  --text:      #0f172a;
  --text2:     #475569;
  --muted:     #94a3b8;
  --accent:    #2563eb;
  --accent2:   #0891b2;
  --accentRgb: 37,99,235;
  --success:   #059669;
  --danger:    #dc2626;
  --warning:   #d97706;
  --gold:      #d97706;
  --shadow:    rgba(15,23,42,.12);
  --grid-line: rgba(37,99,235,.05);
  --nav-bg:    rgba(240,244,255,.92);
  --card-hover: rgba(37,99,235,.04);
  --toggle-bg: #dde3f5;
  --toggle-knob: #2563eb;
}

/* ═══════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;overflow-x:hidden;
  transition:background .3s,color .3s;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:44px 44px;pointer-events:none;
  transition:background-image .3s;
}

/* ═══════════════════════════════════════════════════════
   GLOW ORBS
═══════════════════════════════════════════════════════ */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;transition:opacity .5s}
.orb-a{width:600px;height:600px;top:-200px;right:-150px;filter:blur(130px);background:rgba(var(--accentRgb),.1)}
.orb-b{width:450px;height:450px;bottom:50px;left:-180px;filter:blur(130px);background:rgba(6,182,212,.07)}
[data-theme="light"] .orb{opacity:.6}

/* ═══════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════ */
nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:var(--nav-bg);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:background .3s,border-color .3s;
}
.nav-logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:1.2rem;
  background:linear-gradient(135deg,#3b82f6,#06b6d4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:-.5px;cursor:pointer;
}
.nav-logo em{-webkit-text-fill-color:var(--gold);font-style:normal}
.nav-center{display:flex;gap:4px}
.nav-tab{
  padding:8px 16px;border-radius:8px;border:none;
  background:transparent;color:var(--muted);cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500;
  transition:all .2s;
}
.nav-tab:hover{background:var(--surface2);color:var(--text)}
.nav-tab.active{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.nav-right{display:flex;align-items:center;gap:12px}

/* DARK/LIGHT TOGGLE */
.theme-toggle{
  width:52px;height:28px;border-radius:14px;
  background:var(--toggle-bg);border:1px solid var(--border2);
  cursor:pointer;position:relative;transition:background .3s;
  flex-shrink:0;
}
.theme-toggle::before{
  content:'';position:absolute;
  top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:var(--toggle-knob);
  transition:transform .3s,background .3s;
}
[data-theme="light"] .theme-toggle::before{transform:translateX(24px)}
.theme-icon{position:absolute;top:50%;font-size:.7rem;transform:translateY(-50%);pointer-events:none}
.icon-moon{left:5px}
.icon-sun{right:5px}

.user-pill{
  display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:100px;padding:5px 14px 5px 5px;
  font-size:.82rem;cursor:pointer;transition:all .2s;
}
.user-pill:hover{border-color:var(--accent)}
.user-avatar{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:#fff;
}

/* ═══════════════════════════════════════════════════════
   PAGES
═══════════════════════════════════════════════════════ */
#app{position:relative;z-index:1}
.page{display:none;animation:fadeUp .4s ease}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════════════
   HOME
═══════════════════════════════════════════════════════ */
.hero{
  max-width:1120px;margin:0 auto;
  padding:60px 28px 36px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;
}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding-top:36px;gap:32px}}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(var(--accentRgb),.1);border:1px solid rgba(var(--accentRgb),.22);
  border-radius:100px;padding:6px 16px;
  font-size:.78rem;color:var(--accent2);font-weight:600;margin-bottom:18px;
  letter-spacing:.3px;
}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}}
h1{
  font-family:'Syne',sans-serif;
  font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:800;
  line-height:1.12;letter-spacing:-1px;margin-bottom:16px;
}
.grad{background:linear-gradient(135deg,#3b82f6 0%,#06b6d4 55%,#a78bfa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{color:var(--text2);font-size:.97rem;line-height:1.75;margin-bottom:28px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:10px;
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:.92rem;
  cursor:pointer;border:none;transition:all .2s;text-decoration:none;
}
.btn-primary{background:linear-gradient(135deg,#3b82f6,#06b6d4);color:#fff;box-shadow:0 4px 20px rgba(var(--accentRgb),.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(var(--accentRgb),.45)}
.btn-ghost{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface3);color:var(--text);border-color:var(--accent)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:8px 16px;font-size:.82rem}

/* SUBJECT GRID */
.subject-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.subject-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:16px;cursor:pointer;
  transition:all .2s;position:relative;overflow:hidden;
}
.subject-card::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s;
  background:var(--card-hover);
}
.subject-card:hover{border-color:rgba(var(--accentRgb),.4);transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow)}
.subject-card:hover::after{opacity:1}
.s-icon{font-size:1.7rem;margin-bottom:8px}
.s-name{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;margin-bottom:3px}
.s-count{font-size:.73rem;color:var(--muted)}
.s-bar{margin-top:8px;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.s-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .6s ease}

/* STATS ROW */
.stats-row{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;padding:0 28px 50px;
}
@media(max-width:700px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:18px;text-align:center;
  transition:background .3s,border-color .3s;
}
.stat-num{
  font-family:'Syne',sans-serif;font-size:1.9rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-lbl{font-size:.75rem;color:var(--muted);margin-top:4px}

/* ═══════════════════════════════════════════════════════
   AUTH OVERLAY
═══════════════════════════════════════════════════════ */
.auth-wrap{
  max-width:420px;margin:60px auto;padding:0 20px;
}
.auth-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:36px;
  box-shadow:0 16px 48px var(--shadow);
}
.auth-title{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;margin-bottom:6px}
.auth-sub{color:var(--muted);font-size:.88rem;margin-bottom:28px}
.auth-tabs{display:flex;gap:0;margin-bottom:24px;background:var(--surface2);border-radius:10px;padding:4px}
.auth-tab{flex:1;padding:9px;border:none;background:transparent;border-radius:7px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.88rem;color:var(--muted);transition:all .2s;font-weight:500}
.auth-tab.active{background:var(--surface);color:var(--text);box-shadow:0 2px 8px var(--shadow)}

/* FORM */
.form-group{margin-bottom:16px}
label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px;font-weight:500;letter-spacing:.3px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;background:var(--surface2);border:1.5px solid var(--border);
  color:var(--text);border-radius:10px;padding:12px 16px;
  font-family:'DM Sans',sans-serif;font-size:.93rem;
  outline:none;transition:border-color .2s,background .3s;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accentRgb),.1)}
.form-err{font-size:.8rem;color:var(--danger);margin-top:4px}

/* ── Google Sign-In divider & layout ─────────────────── */
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0 14px;color:var(--muted);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
#google-signin-wrap{width:100%;display:flex;justify-content:center;min-height:44px}
#google-signin-wrap .g_id_signin{width:100%!important}
/* Make the Google button fill the card width */
#google-signin-wrap iframe{width:100%!important;min-width:280px!important}

/* ═══════════════════════════════════════════════════════
   QUIZ
═══════════════════════════════════════════════════════ */
.quiz-wrap{max-width:760px;margin:0 auto;padding:36px 24px}
.quiz-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.quiz-badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:6px 14px;font-size:.8rem;color:var(--muted);
}
.badge strong{color:var(--text)}
.timer-box{
  font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;
  color:var(--text2);display:flex;align-items:center;gap:6px;
}
.timer-box.warn{color:var(--danger);animation:blink .6s infinite}
@keyframes blink{50%{opacity:.3}}
.progress-track{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:28px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s ease}
.question-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:28px;margin-bottom:18px;
  box-shadow:0 4px 20px var(--shadow);
  transition:background .3s,border-color .3s;
}
.q-label{font-size:.75rem;color:var(--accent2);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.q-text{font-size:1.08rem;line-height:1.7;font-weight:500;white-space:pre-line}

/* OPTIONS */
.options{display:flex;flex-direction:column;gap:9px}
.opt{
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:12px;padding:14px 18px;
  cursor:pointer;transition:all .18s;
  display:flex;align-items:center;gap:12px;
  font-size:.93rem;user-select:none;
}
.opt:hover:not(.locked){border-color:rgba(var(--accentRgb),.5);background:rgba(var(--accentRgb),.05)}
.opt-letter{
  width:30px;height:30px;border-radius:8px;
  background:var(--border);display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:700;font-size:.82rem;flex-shrink:0;
  transition:all .18s;
}
.opt.selected{border-color:var(--accent);background:rgba(var(--accentRgb),.08)}
.opt.selected .opt-letter{background:var(--accent);color:#fff}
.opt.correct{border-color:var(--success);background:rgba(16,185,129,.08)}
.opt.correct .opt-letter{background:var(--success);color:#fff}
.opt.wrong{border-color:var(--danger);background:rgba(239,68,68,.08)}
.opt.wrong .opt-letter{background:var(--danger);color:#fff}
.opt.locked{cursor:default;pointer-events:none}
.explanation-box{
  background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.2);
  border-left:3px solid var(--success);
  border-radius:12px;padding:14px 18px;margin-top:14px;
  font-size:.88rem;color:var(--text2);line-height:1.7;
  display:none;animation:fadeUp .3s ease;
}
.explanation-box.show{display:block}
.explanation-box strong{color:var(--success)}

/* NAV DOTS */
.quiz-footer{display:flex;justify-content:space-between;align-items:center;margin-top:20px;flex-wrap:wrap;gap:12px}
.q-dots{display:flex;gap:5px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--border);transition:all .2s;cursor:pointer}
.dot.cur{background:var(--accent);transform:scale(1.5)}
.dot.ok{background:var(--success)}
.dot.no{background:var(--danger)}
.dot.skip{background:var(--muted)}
.dot.answered{background:var(--accent);opacity:.45} /* exam mode: answered but not revealed */
.quiz-nav{display:flex;gap:8px}

/* ═══════════════════════════════════════════════════════
   RESULT
═══════════════════════════════════════════════════════ */
.result-wrap{max-width:680px;margin:0 auto;padding:48px 24px;text-align:center}
.score-ring{
  width:150px;height:150px;border-radius:50%;margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.score-ring-inner{
  position:absolute;inset:12px;border-radius:50%;
  background:var(--surface);display:flex;align-items:center;justify-content:center;z-index:1;
  transition:background .3s;
}
.score-num{font-family:'Syne',sans-serif;font-size:1.9rem;font-weight:800}
.result-title{font-family:'Syne',sans-serif;font-size:1.7rem;font-weight:800;margin-bottom:8px}
.result-sub{color:var(--muted);margin-bottom:28px}
.result-badges{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.rb{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 18px;text-align:center;min-width:96px;
  transition:background .3s;
}
.rb-v{font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800}
.rb-l{font-size:.73rem;color:var(--muted);margin-top:4px}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}

/* REVIEW */
.review-toggle-btn{background:transparent;border:1px solid var(--border);padding:8px 18px;border-radius:8px;color:var(--muted);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.85rem;transition:all .2s}
.review-toggle-btn:hover{border-color:var(--accent);color:var(--text)}
.review-list{margin-top:24px;text-align:left}
.ri{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px;margin-bottom:10px;
  transition:background .3s;
}
.ri.ri-ok{border-left:3px solid var(--success)}
.ri.ri-no{border-left:3px solid var(--danger)}
.ri-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}
.ri-q{font-size:.88rem;line-height:1.6;flex:1}
.ri-tag{font-size:.7rem;padding:3px 10px;border-radius:100px;font-weight:600;text-transform:uppercase;flex-shrink:0}
.ri-tag.ok{background:rgba(16,185,129,.12);color:var(--success)}
.ri-tag.no{background:rgba(239,68,68,.12);color:var(--danger)}
.ri-ans{font-size:.8rem;color:var(--muted)}
.ri-ans span{display:block;margin-top:3px}
.ri-correct-a{color:var(--success)}
.ri-wrong-a{color:var(--danger);text-decoration:line-through}
.ri-exp{color:var(--text2);margin-top:6px;font-size:.8rem;line-height:1.6}

/* ═══════════════════════════════════════════════════════
   FLASHCARDS
═══════════════════════════════════════════════════════ */
.fc-wrap{max-width:680px;margin:0 auto;padding:40px 24px}
.section-head{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;margin-bottom:6px}
.section-sub{color:var(--muted);font-size:.88rem;margin-bottom:24px}
.fc-controls{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.flashcard{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:48px 40px;text-align:center;
  cursor:pointer;min-height:250px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:box-shadow .2s,background .3s,border-color .3s;
  position:relative;
}
.flashcard:hover{box-shadow:0 0 40px rgba(var(--accentRgb),.12);border-color:rgba(var(--accentRgb),.3)}
.flashcard .fc-front,.flashcard .fc-back{display:flex;flex-direction:column;align-items:center;width:100%}
.flashcard.flipped .fc-front{display:none}
.flashcard:not(.flipped) .fc-back{display:none}
.fc-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:12px;font-weight:600}
.fc-text{font-size:1.08rem;line-height:1.7;white-space:pre-line}
.fc-back .fc-text{color:var(--accent2)}
.fc-hint{margin-top:18px;font-size:.75rem;color:var(--muted)}
.fc-nav{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:20px}
.fc-ctr{font-size:.85rem;color:var(--muted);font-family:'Syne',sans-serif}

/* ═══════════════════════════════════════════════════════
   LEADERBOARD
═══════════════════════════════════════════════════════ */
.lb-wrap{max-width:680px;margin:0 auto;padding:40px 24px}
.lb-row{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 18px;margin-bottom:10px;
  transition:all .2s;
}
.lb-row:hover{border-color:rgba(var(--accentRgb),.3);transform:translateX(4px)}
.lb-rank{font-family:'Syne',sans-serif;font-weight:800;font-size:1.05rem;width:30px;text-align:center;flex-shrink:0}
.r1{color:var(--gold)}.r2{color:#94a3b8}.r3{color:#b45309}
.lb-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff;flex-shrink:0}
.lb-info{flex:1}
.lb-name{font-weight:600;font-size:.92rem}
.lb-meta{font-size:.75rem;color:var(--muted);margin-top:1px}
.lb-score{text-align:right}
.lb-pct{font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:800;color:var(--accent2)}
.lb-pts{font-size:.73rem;color:var(--muted)}

/* ═══════════════════════════════════════════════════════
   HISTORY
═══════════════════════════════════════════════════════ */
.history-wrap{max-width:760px;margin:0 auto;padding:40px 24px}
.history-row{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 18px;margin-bottom:10px;
  transition:background .3s;
}
.hist-icon{font-size:1.5rem;flex-shrink:0}
.hist-info{flex:1}
.hist-subject{font-weight:600;font-size:.92rem}
.hist-meta{font-size:.75rem;color:var(--muted);margin-top:2px}
.hist-score{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:800}

/* ═══════════════════════════════════════════════════════
   ADMIN PANEL
═══════════════════════════════════════════════════════ */
.admin-wrap{max-width:1100px;margin:0 auto;padding:36px 24px}
.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
@media(max-width:700px){.admin-grid{grid-template-columns:repeat(2,1fr)}}
.admin-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:18px;
}
.admin-card-num{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;color:var(--accent)}
.admin-card-lbl{font-size:.78rem;color:var(--muted);margin-top:4px}
.admin-section-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;margin-bottom:14px}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:.85rem}
.admin-table th{font-weight:600;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px}
.admin-table tr:hover td{background:var(--surface2)}
.q-form{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:24px;margin-bottom:24px;
}
.q-form-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;margin-bottom:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.radio-group{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.radio-opt{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.88rem;color:var(--text2)}
.radio-opt input{accent-color:var(--accent)}

/* ═══════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex;animation:fadeUp .3s ease}
.modal{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:32px;max-width:440px;width:100%;
  text-align:center;box-shadow:0 24px 64px var(--shadow);
  transition:background .3s;
}
.modal h2{font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;margin-bottom:8px}
.modal p{color:var(--muted);margin-bottom:22px;line-height:1.7;font-size:.92rem}
.modal-btns{display:flex;gap:10px;justify-content:center}

/* TOAST */
.toast{
  position:fixed;bottom:24px;right:24px;z-index:300;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:13px 18px;
  display:flex;align-items:center;gap:10px;
  font-size:.86rem;max-width:280px;
  animation:slideIn .3s ease;
  box-shadow:0 8px 32px var(--shadow);
  transition:background .3s;
}
@keyframes slideIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
.toast.ok{border-color:var(--success)}.toast.err{border-color:var(--danger)}

/* ── BULK UPLOAD ─────────────────────────────────────────── */
.bulk-zone{
  border:2px dashed var(--border2);border-radius:16px;
  padding:36px 24px;text-align:center;cursor:pointer;
  transition:all .25s;position:relative;background:var(--surface2);
}
.bulk-zone:hover,.bulk-zone.dragover{
  border-color:var(--accent);background:rgba(var(--accentRgb),.06);
}
.bulk-zone input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}
.bulk-zone-icon{font-size:2.4rem;margin-bottom:10px}
.bulk-zone-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;margin-bottom:6px}
.bulk-zone-sub{font-size:.82rem;color:var(--muted)}
.bulk-preview{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;padding:18px;margin-top:16px;
  display:none;
}
.bulk-preview.show{display:block}
.bulk-preview-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.92rem;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.bulk-stats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.bulk-stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:8px 14px;font-size:.8rem;
}
.bulk-stat strong{font-family:'Syne',sans-serif;font-size:1rem;display:block}
.bulk-errors{margin-top:10px}
.bulk-err-item{
  font-size:.8rem;color:var(--danger);
  background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.15);
  border-radius:6px;padding:6px 12px;margin-bottom:4px;
}
.bulk-ok-item{
  font-size:.8rem;color:var(--success);
  background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.15);
  border-radius:6px;padding:6px 12px;margin-bottom:4px;
}
.bulk-progress{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin:12px 0;display:none}
.bulk-progress.show{display:block}
.bulk-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;transition:width .3s}
.json-template{
  background:var(--bg);border:1px solid var(--border);
  border-radius:10px;padding:14px 16px;
  font-family:'Courier New',monospace;font-size:.75rem;
  color:var(--text2);line-height:1.7;overflow-x:auto;
  white-space:pre;margin-top:10px;max-height:260px;overflow-y:auto;
}
.copy-btn{
  background:var(--surface3);border:1px solid var(--border);
  color:var(--muted);border-radius:7px;padding:5px 12px;
  font-size:.78rem;cursor:pointer;transition:all .2s;
}
.copy-btn:hover{border-color:var(--accent);color:var(--accent)}
.format-tabs{display:flex;gap:6px;margin-bottom:14px}
.format-tab{
  padding:7px 14px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--muted);cursor:pointer;
  font-size:.82rem;font-family:'DM Sans',sans-serif;transition:all .2s;
}
.format-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.import-log{
  max-height:200px;overflow-y:auto;margin-top:10px;
  background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;
}

/* ═══════════════════════════════════════════════════════
   USER DASHBOARD
═══════════════════════════════════════════════════════ */
.dash-wrap{ max-width:900px; margin:0 auto; padding:36px 24px; }

/* Profile card */
.dash-profile{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:28px;margin-bottom:20px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.dash-profile::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accentRgb),.15),transparent 70%);
  pointer-events:none;
}
.dash-avatar-big{
  width:72px;height:72px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;color:#fff;
  box-shadow:0 4px 16px rgba(var(--accentRgb),.4);
}
.dash-profile-info{ flex:1;min-width:160px; }
.dash-name{
  font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;
  margin-bottom:4px;
}
.dash-role{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(var(--accentRgb),.12);border:1px solid rgba(var(--accentRgb),.2);
  color:var(--accent2);font-size:.75rem;font-weight:600;
  border-radius:100px;padding:3px 12px;margin-bottom:8px;
}
.dash-email{ font-size:.83rem;color:var(--muted); }
.dash-badges{ display:flex;gap:10px;flex-wrap:wrap;margin-top:10px; }
.dash-badge{
  display:flex;align-items:center;gap:6px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:5px 12px;font-size:.78rem;color:var(--text2);
}
.dash-badge strong{ color:var(--text);font-family:'Syne',sans-serif; }
.dash-profile-actions{ display:flex;flex-direction:column;gap:8px; }

/* Stats grid */
.dash-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;margin-bottom:20px;
}
@media(max-width:700px){ .dash-stats{grid-template-columns:repeat(2,1fr)} }
.dash-stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:18px;text-align:center;
  transition:transform .2s,box-shadow .2s;
}
.dash-stat-card:hover{ transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow); }
.dash-stat-icon{ font-size:1.4rem;margin-bottom:6px; }
.dash-stat-val{
  font-family:'Syne',sans-serif;font-size:1.7rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.dash-stat-lbl{ font-size:.73rem;color:var(--muted);margin-top:4px; }

/* Two column layout */
.dash-cols{ display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px; }
@media(max-width:700px){ .dash-cols{grid-template-columns:1fr} }

/* Subject performance */
.dash-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:20px;
}
.dash-card-title{
  font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;
  margin-bottom:16px;display:flex;align-items:center;gap:8px;
}
.subj-bar-row{ margin-bottom:12px; }
.subj-bar-top{ display:flex;justify-content:space-between;align-items:center;margin-bottom:5px; }
.subj-bar-name{ font-size:.82rem;color:var(--text2); }
.subj-bar-pct{ font-size:.78rem;font-family:'Syne',sans-serif;font-weight:700;color:var(--accent2); }
.subj-bar-track{ height:6px;background:var(--border);border-radius:3px;overflow:hidden; }
.subj-bar-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .8s cubic-bezier(.4,0,.2,1);
}

/* Activity timeline */
.activity-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.activity-item:last-child{ border-bottom:none; }
.act-dot{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  margin-top:1px;
}
.act-dot.pass{ background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.2); }
.act-dot.fail{ background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.2); }
.act-info{ flex:1; }
.act-subject{ font-size:.85rem;font-weight:600; }
.act-meta{ font-size:.75rem;color:var(--muted);margin-top:2px; }
.act-score{
  font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;
  flex-shrink:0;
}

/* Edit profile modal */
.edit-form .form-group{ margin-bottom:14px; }
.avatar-picker{ display:flex;gap:10px;flex-wrap:wrap;margin-top:8px; }
.av-opt{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;cursor:pointer;border:2px solid transparent;
  background:var(--surface2);transition:all .2s;
}
.av-opt:hover,.av-opt.selected{ border-color:var(--accent);transform:scale(1.1); }

/* ═══════════════════════════════════════════════════════
   ERROR IDENTIFICATION QUESTION TYPE
═══════════════════════════════════════════════════════ */
.ei-sentence{
  font-size:1.05rem;line-height:2.2;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;padding:20px 22px;margin-bottom:18px;
  letter-spacing:.01em;
}
.ei-part{
  display:inline;cursor:pointer;
  border-bottom:2px solid var(--accent2);
  padding:1px 3px;border-radius:3px;
  transition:background .15s,border-color .15s;
  white-space:nowrap;
}
.ei-part:hover:not(.ei-locked){ background:rgba(var(--accentRgb),.12); }
.ei-part.ei-selected{
  background:rgba(var(--accentRgb),.18);
  border-bottom-color:var(--accent);
  font-weight:600;
}
.ei-part.ei-correct{
  background:rgba(16,185,129,.15);
  border-bottom-color:var(--success);
  font-weight:600;
}
.ei-part.ei-wrong{
  background:rgba(239,68,68,.15);
  border-bottom-color:var(--danger);
  font-weight:600;
}
.ei-part.ei-locked{ cursor:default; }
.ei-num{
  font-size:.65rem;vertical-align:super;
  color:var(--muted);margin-left:1px;font-family:'Syne',sans-serif;font-weight:700;
}
.ei-choices{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;
}
.ei-choice{
  display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:10px;padding:11px 16px;cursor:pointer;
  font-size:.9rem;transition:all .15s;flex:1;min-width:120px;
}
.ei-choice:hover:not(.ei-locked){ border-color:rgba(var(--accentRgb),.5);background:rgba(var(--accentRgb),.05); }
.ei-choice.ei-selected{ border-color:var(--accent);background:rgba(var(--accentRgb),.1); }
.ei-choice.ei-correct{ border-color:var(--success);background:rgba(16,185,129,.08); }
.ei-choice.ei-wrong{ border-color:var(--danger);background:rgba(239,68,68,.08); }
.ei-choice.ei-locked{ cursor:default;pointer-events:none; }
.ei-choice-num{
  width:28px;height:28px;border-radius:7px;
  background:var(--border);display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:700;font-size:.82rem;flex-shrink:0;
  transition:background .15s,color .15s;
}
.ei-choice.ei-selected .ei-choice-num{ background:var(--accent);color:#fff; }
.ei-choice.ei-correct  .ei-choice-num{ background:var(--success);color:#fff; }
.ei-choice.ei-wrong    .ei-choice-num{ background:var(--danger);color:#fff; }
.ei-no-error{
  width:100%;justify-content:center;
  background:var(--surface3)!important;
  font-style:italic;color:var(--text2);
}

/* SPINNER */
.spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--accent);
  animation:spin .7s linear infinite;margin:40px auto;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* UTILS */
.hidden{display:none!important}
.text-center{text-align:center}
.mt16{margin-top:16px}.mt24{margin-top:24px}
.color-green{color:var(--success)}.color-red{color:var(--danger)}.color-gold{color:var(--gold)}
hr.div{border:none;border-top:1px solid var(--border);margin:24px 0}
/* ═══════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   HAMBURGER + MOBILE DRAWER NAV
═══════════════════════════════════════════════════════ */
.hamburger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:38px;height:38px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;cursor:pointer;flex-shrink:0;
  transition:background .2s,border-color .2s;
}
.hamburger:hover{ background:var(--surface3);border-color:var(--accent); }
.hamburger span{
  display:block;width:18px;height:2px;
  background:var(--text2);border-radius:2px;
  transition:transform .3s,opacity .3s,background .2s;
}
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Drawer overlay */
.drawer-overlay{
  display:none;
  position:fixed;inset:0;z-index:150;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);
  animation:fadeIn .2s ease;
}
.drawer-overlay.open{ display:block; }
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Drawer panel */
.drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:160;
  width:260px;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:8px 0 32px var(--shadow);
}
.drawer.open{ transform:translateX(0); }

.drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
}
.drawer-logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:1.1rem;
  background:linear-gradient(135deg,#3b82f6,#06b6d4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.drawer-logo em{ -webkit-text-fill-color:var(--gold);font-style:normal; }
.drawer-close{
  width:30px;height:30px;border-radius:7px;
  background:var(--surface2);border:1px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--muted);transition:all .2s;
}
.drawer-close:hover{ background:var(--danger);color:#fff;border-color:var(--danger); }

.drawer-nav{
  flex:1;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;gap:4px;
}
.drawer-tab{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;
  border:none;background:transparent;
  color:var(--text2);font-family:'DM Sans',sans-serif;
  font-size:.92rem;font-weight:500;cursor:pointer;
  text-align:left;width:100%;
  transition:background .15s,color .15s;
}
.drawer-tab:hover{ background:var(--surface2);color:var(--text); }
.drawer-tab.active{
  background:rgba(var(--accentRgb),.12);
  color:var(--accent);font-weight:600;
}
.drawer-tab .d-icon{ font-size:1.15rem;flex-shrink:0;width:22px;text-align:center; }

.drawer-footer{
  padding:14px 16px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:10px;
}
.drawer-user{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:var(--surface2);
  border-radius:10px;border:1px solid var(--border);
}
.drawer-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:#fff;
}
.drawer-username{ font-size:.85rem;font-weight:600;flex:1; }
.drawer-logout{
  font-size:.75rem;color:var(--danger);cursor:pointer;
  background:none;border:none;font-family:'DM Sans',sans-serif;
}

.mobile-nav{ display:none; }

@media(max-width:600px){
  .hamburger{ display:flex; }
  nav .nav-center{ display:none; }
  nav { padding:10px 14px; gap:8px; }
  .nav-logo { font-size:1rem; }
  #auth-btn-area { display:none; }
  .user-pill { display:none; }

  .quiz-wrap,.fc-wrap,.lb-wrap,.history-wrap,.admin-wrap{ padding:16px 14px 24px; }
  .question-card{ padding:18px 16px; }
  .hero{ padding:24px 14px 16px; }
  .stats-row{ padding:0 14px 24px; }
}

/* ── LIVE VISITOR STATS ─────────────────────────────────── */
.live-stat-pill{
  display:flex;align-items:center;gap:5px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:100px;padding:4px 12px;
  font-size:.75rem;color:var(--text2);
  transition:all .3s;
}
.live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--success);
  animation:pulse 2s infinite;
  flex-shrink:0;
}
@media(max-width:600px){
  .live-stat-pill{ display:none!important; }
}