/* EduSpark Student Dashboard — Main Stylesheet */
/* Design tokens inherited from css/vars.css */

/* ── Badge card description & status tags ── */
.bdg-desc-hint {
  font-size: 0.68rem;
  color: var(--text3, #94a3b8);
  line-height: 1.4;
  text-align: center;
  padding: 0 0.25rem;
  flex: 1;
}
.bdg-card.unlocked .bdg-desc-hint {
  color: var(--text2, #64748b);
}
.bdg-unlocked-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  border-radius: 20px;
  padding: 0.2rem 0.6rem;
  margin-top: 0.15rem;
}
.bdg-locked-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text3, #94a3b8);
  background: var(--surface2, #f8fafc);
  border-radius: 20px;
  padding: 0.2rem 0.6rem;
  margin-top: 0.15rem;
}


/* ── Settings modal scrollbar — dark mode ── */
.stg-modal-fields::-webkit-scrollbar,
.stg-avatar-grid::-webkit-scrollbar { width: 5px; }
.stg-modal-fields::-webkit-scrollbar-track,
.stg-avatar-grid::-webkit-scrollbar-track { background: transparent; }
.stg-modal-fields::-webkit-scrollbar-thumb,
.stg-avatar-grid::-webkit-scrollbar-thumb {
  background: var(--border2, #cdd5e8);
  border-radius: 10px;
}
.stg-modal-fields::-webkit-scrollbar-thumb:hover,
.stg-avatar-grid::-webkit-scrollbar-thumb:hover { background: var(--text3, #94a3b8); }
[data-theme="dark"] .stg-modal-fields::-webkit-scrollbar-thumb,
[data-theme="dark"] .stg-avatar-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .stg-modal-fields::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .stg-avatar-grid::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:       #0f1117;
    --white:    #1a1d27;
    --card:     #1a1d27;
    --panel:    #1e2130;
    --border:   #2d3148;
    --border2:  #3a3f5c;
    --text:     #e2e8f0;
    --text2:    #94a3b8;
    --text3:    #94a3b8;
    --nav-bg:   #13151f;
    --nav-text: #e2e8f0;
    --input-bg: #1e2130;
    --accent-l: #1e2f5e;
    --green-l:  #052e1b;
    --red-l:    #2d0e0e;
    --orange-l: #2d1500;
    --yellow-l: #2d2000;
    --violet-l: #1e1040;
    --cyan-l:   #0a1f2d;
    --shadow:   0 1px 4px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md:0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg:0 16px 50px rgba(0,0,0,0.5);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); display: flex; min-height: 100vh; }
button { cursor: pointer; font-family: var(--sans); }
a { text-decoration: none; color: inherit; }

/* ── SIDEBAR NAV ── */
.nav {
  width: var(--nav-w);
  background: var(--white);
  border-right: 1px solid var(--border);
  min-height: 100vh;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
}

.nav-brand {
  padding: 1.4rem 1.4rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* Override layout.css hardcoded #fff — student nav bg is var(--white) which is white in light mode */
.nav-brand .brand-name { color: var(--text); }
.nav-brand .brand-name span { color: var(--accent); }

.brand-mark {
  width: 34px; height: 34px;
  background: var(--accent);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(37,99,235,0.3);
}

.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.brand-name span { color: var(--accent); }

/* Student profile mini */
.nav-profile {
  padding: 0.75rem 1.2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.profile-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.profile-av img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.online-ring {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--white);
}

.profile-info {}
.profile-name { font-weight: 600; font-size: 0.88rem; letter-spacing: -0.01em; }
.profile-grade { font-size: 0.72rem; color: var(--text3); margin-top: 0.1rem; }

.profile-streak {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.streak-num { font-family: var(--mono); font-size: 0.95rem; font-weight: 600; color: var(--orange); line-height: 1; }
.streak-label { font-size: 0.6rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; }

/* Nav items */
nav { flex: 1; padding: 0.5rem 0; }

.nav-section {
  padding: 0.55rem 1.2rem 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
  font-family: var(--display);
}

.ni {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.52rem 1.2rem;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.88rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  margin: 1px 0;
}
.ni:hover { color: var(--text); background: var(--panel); }
.ni.active { color: var(--accent); background: var(--accent-l); border-left-color: var(--accent); font-weight: 600; }
[data-theme="dark"] .ni.active { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ni.active { color: #fff; }
}
.ni-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.ni-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  border-radius: 50px;
  font-family: var(--mono);
}
.ni-new {
  margin-left: auto;
  background: var(--green-l);
  color: var(--green);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  letter-spacing: 0.02em;
  font-family: var(--mono);
}

/* XP bar */
.nav-xp {
  padding: 0.55rem 1.2rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.xp-row { display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 0.4rem; }
.xp-label { color: var(--text3); font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.xp-val { font-family: var(--mono); color: var(--violet); font-weight: 600; }
.xp-track { height: 6px; background: var(--panel); border-radius: 99px; overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(to right, var(--violet), #a78bfa); border-radius: 99px; width: 68%; }


/* ── MAIN ── */
.main { margin-left: var(--nav-w); flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.alt-section { flex: 1; overflow-y: auto; padding: 2rem 2.2rem 3rem; }

/* TOPBAR */
.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow);
}

.tb-greeting {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tb-greeting span { color: var(--accent); }

.tb-right { display: flex; align-items: center; gap: 0.8rem; }

.tb-logout-btn {
  padding: 0.48rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  transition: all 0.2s;
  cursor: pointer;
  font-family: var(--sans);
}
.tb-logout-btn:hover {
  background: var(--red-l);
  border-color: rgba(220,38,38,0.25);
  color: var(--red);
}

.tb-icon-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  color: var(--text2);
  position: relative;
  cursor: pointer;
  transition: all 0.15s;
}
.tb-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }
.notif-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 1.5px solid var(--white); }
.tb-notif-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 1.5px solid var(--white); pointer-events: none; }

/* ── PAGE ── */
.content { padding: 2rem; flex: 1; }

/* ════ DASHBOARD PAGE ════ */

/* Hero welcome card */
.welcome-card {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
  border-radius: 20px;
  padding: 1.8rem 2rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(37,99,235,0.25);
}

.welcome-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.welcome-card::after {
  content: '';
  position: absolute;
  bottom: -40px; right: 80px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}

.wc-left { position: relative; z-index: 1; }
.wc-tag {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 50px;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.7rem;
}
.wc-name {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.wc-sub {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}

.wc-right {
  display: flex;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.wc-stat { text-align: center; }
.wcs-val {
  font-family: var(--mono);
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  display: block;
}
.wcs-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.3rem;
  display: block;
}

.wc-divider { width: 1px; background: rgba(255,255,255,0.15); align-self: stretch; }

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 50%;
  transform: translate(30px, -30px);
  opacity: 0.07;
}
.sc-blue::after  { background: var(--accent); }
.sc-green::after { background: var(--green); }
.sc-violet::after{ background: var(--violet); }
.sc-orange::after{ background: var(--orange); }

.sc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }

.sc-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}

.sc-delta {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--mono);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}
.delta-up   { background: var(--green-l); color: var(--green); }
.delta-down { background: var(--red-l);   color: var(--red); }

.sc-val {
  font-family: var(--mono);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.sc-label { font-size: 0.78rem; color: var(--text2); font-weight: 500; }
.sc-sub { font-size: 0.7rem; color: var(--text2); margin-top: 0.1rem; font-family: var(--mono); }

/* Content row */
.content-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.card-h {
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card-link {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  font-family: var(--display);
  cursor: pointer;
  transition: opacity 0.2s;
}
.card-link:hover { opacity: 0.7; }

.card-b { padding: 1.2rem; }

/* Recent exams table */
.exams-list { display: flex; flex-direction: column; gap: 0; }

.exam-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
  cursor: pointer;
}
.exam-row:last-child { border-bottom: none; }
.exam-row:hover { background: var(--panel); }

.exam-subject-dot {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.exam-info { flex: 1; min-width: 0; }
.exam-name {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exam-meta { font-size: 0.72rem; color: var(--text3); margin-top: 0.15rem; font-family: var(--mono); }

.exam-score-wrap { text-align: right; flex-shrink: 0; }
.exam-score {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
}
.exam-grade { font-size: 0.7rem; font-weight: 700; font-family: var(--display); margin-top: 0.1rem; }

.score-a { color: var(--green); }
.score-b { color: var(--accent); }
.score-c { color: var(--yellow); }
.score-f { color: var(--red); }

.score-bar-mini {
  width: 60px;
  height: 4px;
  background: var(--panel);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.sbm-fill { height: 100%; border-radius: 99px; }

/* Subject performance */
.subject-perf { display: flex; flex-direction: column; gap: 0.8rem; }

.sp-row { }
.sp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
.sp-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  font-weight: 600;
}
.sp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sp-pct { font-family: var(--mono); font-size: 0.82rem; font-weight: 600; }
.sp-track { height: 7px; background: var(--panel); border-radius: 99px; overflow: hidden; }
.sp-fill { height: 100%; border-radius: 99px; }
.sp-attempts { font-size: 0.7rem; color: var(--text3); margin-top: 0.15rem; text-align: right; font-family: var(--mono); }

/* Bottom row */
.bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}

/* Activity heatmap */
.heatmap {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 3px;
  margin-bottom: 0.5rem;
}

.hm-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--panel);
  cursor: pointer;
  transition: transform 0.1s;
}
.hm-cell:hover { transform: scale(1.3); }
.hm-0  { background: var(--panel); }
.hm-1  { background: #bfdbfe; }
.hm-2  { background: #60a5fa; }
.hm-3  { background: var(--accent); }
.hm-4  { background: #1e40af; }

.hm-months {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 3px;
}
.hm-month { font-size: 0.6rem; color: var(--text3); font-family: var(--mono); text-align: center; }

/* Badges */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 0.4rem;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  transition: all 0.2s;
  cursor: pointer;
}
.badge-item:hover { border-color: var(--accent); background: var(--accent-l); }
.badge-item.locked { opacity: 0.4; }

.badge-icon { font-size: 1.5rem; }
.badge-name { font-size: 0.65rem; font-weight: 600; font-family: var(--display); text-align: center; color: var(--text2); letter-spacing: 0.01em; }

/* Leaderboard */
.lb-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1.2rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--panel); }
.lb-row.me { background: var(--accent-l); border-left: 3px solid var(--accent); }

.lb-rank {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  width: 24px;
  flex-shrink: 0;
  text-align: center;
}
.rank-1 { color: #f59e0b; }
.rank-2 { color: #94a3b8; }
.rank-3 { color: #d97706; }

.lb-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  font-family: var(--display);
  color: #fff;
  flex-shrink: 0;
}

.lb-name { font-size: 0.84rem; font-weight: 600; flex: 1; }
.lb-score { font-family: var(--mono); font-size: 0.82rem; font-weight: 600; color: var(--accent); }

/* Available papers */
.papers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}

.paper-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  background: var(--white);
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.paper-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.paper-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
}

.pc-bio::before  { background: var(--green); }
.pc-math::before { background: var(--accent); }
.pc-chem::before { background: var(--violet); }
.pc-phys::before { background: var(--orange); }
.pc-eng::before  { background: var(--cyan); }

.pc-tag {
  font-size: 0.67rem;
  font-weight: 700;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.pc-name {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.pc-meta {
  display: flex;
  gap: 0.8rem;
  font-size: 0.7rem;
  color: var(--text3);
  font-family: var(--mono);
}

.pc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}

.pc-attempts { font-size: 0.7rem; color: var(--text3); font-family: var(--mono); }
.pc-teacher { font-size: 0.72rem; color: var(--text3); margin: 0.25rem 0 0; }
.pc-diff { font-size: 0.62rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 20px; text-transform: capitalize; }

/* ── Games section ── */
.gm-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.gm-tab {
  background: var(--card,#fff);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 0.9rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.gm-tab:hover  { border-color: var(--accent); }
.gm-tab.active { border-color: var(--accent); background: var(--accent-l); }
.gm-tab-icon { font-size: 1.6rem; margin-bottom: 0.3rem; }
.gm-tab-name { font-family: var(--display); font-size: 0.8rem; font-weight: 800; color: var(--text); }
.gm-tab-sub  { font-size: 0.65rem; color: var(--text3); margin-top: 2px; }

.gm-picker {
  display: flex; gap: 0.7rem; align-items: center;
  margin-bottom: 1.2rem; flex-wrap: wrap;
}
.gm-start-btn {
  background: var(--accent); color: #fff;
  border: none; border-radius: 10px;
  padding: 0.6rem 1.4rem;
  font-size: 0.85rem; font-weight: 700;
  font-family: var(--sans); cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.gm-start-btn:hover    { background: var(--accent-h); }
.gm-start-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.gm-panel { }
.gm-idle {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--card,#fff);
  border: 1.5px dashed var(--border);
  border-radius: 16px;
}
.gm-idle-icon  { font-size: 3rem; margin-bottom: 0.75rem; }
.gm-idle-title { font-family: var(--display); font-size: 1.3rem; font-weight: 800; margin-bottom: 0.5rem; }
.gm-idle-desc  { font-size: 0.85rem; color: var(--text2); line-height: 1.6; max-width: 480px; margin: 0 auto; }

/* Question card shared across games */
.gm-question-card {
  background: var(--card,#fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1rem;
}
.gm-q-text {
  font-size: 1rem; font-weight: 600; color: var(--text);
  line-height: 1.6; margin-bottom: 1.2rem;
}
.gm-choices { display: flex; flex-direction: column; gap: 0.6rem; }
.gm-choice {
  padding: 0.75rem 1rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.88rem;
  transition: all 0.12s;
  background: var(--card,#fff);
  color: var(--text);
  text-align: left;
  font-family: var(--sans);
}
.gm-choice:hover:not(:disabled)  { border-color: var(--accent); background: var(--accent-l); }
.gm-choice.correct  { border-color: var(--green); background: var(--green-l); color: var(--green); font-weight: 700; }
.gm-choice.wrong    { border-color: var(--red);   background: var(--red-l);   color: var(--red);   }
.gm-choice.reveal   { border-color: var(--green); background: var(--green-l); opacity: 0.7; }
.gm-choice:disabled { cursor: not-allowed; }

/* Quick Fire */
.qf-header {
  display: flex; align-items: center; gap: 1rem;
  background: var(--card,#fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
}
.qf-timer {
  font-family: var(--display); font-size: 2rem; font-weight: 800;
  color: var(--accent); flex-shrink: 0; min-width: 52px;
}
.qf-timer.urgent { color: var(--red); animation: pulse 0.5s infinite alternate; }
@keyframes pulse { from { opacity:1 } to { opacity:0.5 } }
.qf-progress { font-size: 0.85rem; font-weight: 600; flex-shrink: 0; }
.qf-bar-wrap { flex: 1; height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; }
.qf-bar { height: 100%; background: var(--accent); border-radius: 99px; transition: width 1s linear; }

/* Flashcards */
.fc-progress-row {
  display: flex; justify-content: space-between;
  font-size: 0.82rem; color: var(--text2);
  margin-bottom: 1rem;
}
.fc-card-wrap { perspective: 1000px; }
.fc-card {
  position: relative; width: 100%; min-height: 260px;
  cursor: pointer; transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  border-radius: 20px;
}
.fc-card.flipped { transform: rotateY(180deg); }
.fc-front, .fc-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background: var(--card,#fff);
}
.fc-back { transform: rotateY(180deg); border-color: var(--green); background: var(--green-l); }
.fc-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 0.8rem; }
.fc-text  { font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.6; }
.fc-hint  { font-size: 0.72rem; color: var(--text3); margin-top: 1.2rem; }
.fc-explanation { font-size: 0.78rem; color: var(--text2); margin-top: 0.8rem; line-height: 1.5; font-style: italic; }
.fc-actions { display: flex; gap: 0.8rem; margin-top: 1rem; justify-content: center; }
.fc-btn { padding: 0.7rem 1.6rem; border-radius: 12px; font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: var(--sans); border: none; }
.fc-btn-again { background: var(--red-l); color: var(--red); }
.fc-btn-known { background: var(--green-l); color: var(--green); }
.fc-btn:hover { filter: brightness(0.95); }
.fc-nav { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.8rem; }
.gm-nav-btn { padding: 0.5rem 1.2rem; border-radius: 10px; border: 1.5px solid var(--border); background: transparent; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: var(--sans); color: var(--text2); transition: all 0.15s; }
.gm-nav-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Streak */
.sk-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.sk-streak { font-family: var(--display); font-size: 2.2rem; font-weight: 800; }
.sk-best   { font-size: 0.8rem; color: var(--text3); }

/* Duel */
.dl-scoreboard {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; margin-bottom: 1rem;
  background: var(--card,#fff); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.2rem;
}
.dl-score-col { text-align: center; flex: 1; }
.dl-sub-label { font-size: 0.75rem; font-weight: 700; color: var(--text2); margin-bottom: 0.3rem; }
.dl-score-val { font-family: var(--display); font-size: 2.5rem; font-weight: 800; color: var(--accent); }
.dl-vs { font-family: var(--display); font-size: 1.2rem; font-weight: 800; color: var(--text3); }
.dl-phase-label { text-align: center; font-size: 0.82rem; font-weight: 700; color: var(--text3); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: .06em; }
.dl-col-a.active .dl-score-val { color: var(--accent); }
.dl-col-b.active .dl-score-val { color: var(--violet); }

/* Result screen */
.gm-result {
  text-align: center; padding: 2.5rem 1.5rem;
  background: var(--card,#fff); border: 1px solid var(--border);
  border-radius: 20px;
}
.gm-result-icon  { font-size: 3.5rem; margin-bottom: 0.5rem; }
.gm-result-title { font-family: var(--display); font-size: 1.5rem; font-weight: 800; margin-bottom: 0.3rem; }
.gm-result-score { font-size: 3rem; font-weight: 800; font-family: var(--display); margin: 0.5rem 0; }
.gm-result-sub   { font-size: 0.85rem; color: var(--text2); margin-bottom: 1.2rem; }
.gm-result-xp    { display: inline-block; background: var(--accent-l); color: var(--accent); font-weight: 700; font-size: 0.9rem; padding: 0.4rem 1rem; border-radius: 20px; margin-bottom: 1.2rem; }
.gm-play-again   { background: var(--accent); color: #fff; border: none; border-radius: 12px; padding: 0.75rem 2rem; font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: var(--sans); transition: background 0.15s; }
.gm-play-again:hover { background: var(--accent-h); }

/* XP toast */
.gm-xp-toast {
  position: fixed; bottom: 2rem; right: 2rem;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  color: #fff; font-weight: 700; font-size: 1rem;
  padding: 0.75rem 1.5rem; border-radius: 14px;
  box-shadow: 0 8px 32px rgba(37,99,235,0.3);
  z-index: 999; animation: slideUp 0.4s ease;
}

/* Simulators */
.gm-end-btn {
  display: none;
  background: var(--red-l); color: var(--red);
  border: 1.5px solid #fecaca; border-radius: 10px;
  padding: 0.5rem 1.1rem; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; font-family: var(--sans);
  transition: all 0.15s; margin-bottom: 0.8rem;
}
.gm-end-btn:hover { background: var(--red); color: #fff; }
/* Source tabs (PhET / GeoGebra / Desmos / Scratch) */
.gm-source-tabs {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0.6rem; margin-bottom: 1.2rem;
}
.gm-src-tab {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.8rem 0.5rem; border-radius: 14px;
  border: 2px solid var(--border); background: var(--card,#fff);
  cursor: pointer; transition: all 0.15s; gap: 0.15rem;
}
.gm-src-tab:hover  { border-color: var(--accent); }
.gm-src-tab.active { border-color: var(--accent); background: var(--accent-l); }
.gm-src-icon  { font-size: 1.5rem; }
.gm-src-name  { font-family: var(--display); font-size: 0.82rem; font-weight: 800; color: var(--text); }
.gm-src-count { font-size: 0.65rem; color: var(--text3); }
.gm-src-desc  { font-size: 0.82rem; color: var(--text2); margin-bottom: 0.9rem; line-height: 1.5; }

.gm-sim-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.gm-sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem;
}
.gm-sim-card {
  background: var(--card,#fff);
  border: 1.5px solid var(--border);
  border-radius: 14px; padding: 1.1rem;
  cursor: pointer; transition: all 0.15s;
}
.gm-sim-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }
.gm-sim-emoji { font-size: 2rem; margin-bottom: 0.5rem; }
.gm-sim-name  { font-size: 0.85rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; }
.gm-sim-badge { font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 20px; background: var(--accent-l); color: var(--accent); display: inline-block; }
.gm-sim-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.gm-sim-modal-inner {
  width: 100%; max-width: 1000px; height: 90vh;
  background: #fff; border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
}
.gm-sim-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem 1.2rem; border-bottom: 1px solid #e5e7eb;
  font-weight: 700; font-size: 0.95rem;
}
.gm-sim-close { background: #f3f4f6; border: none; border-radius: 8px; padding: 0.4rem 0.9rem; cursor: pointer; font-weight: 600; font-size: 0.82rem; }
.gm-sim-close:hover { background: #e5e7eb; }
.gm-sim-iframe { flex: 1; border: none; width: 100%; }

/* ── Mini Games ── */
.gm-minigame-tabs { display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.gm-mg-tab {
  padding:0.4rem 1rem; border-radius:20px; border:1.5px solid var(--border);
  background:transparent; font-size:0.82rem; font-weight:600;
  color:var(--text2); cursor:pointer; transition:all .15s; font-family:var(--sans);
}
.gm-mg-tab.active, .gm-mg-tab:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-l); }

/* Sudoku */
.sdk-controls { display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; margin-bottom:0.8rem; }
.sdk-board {
  display:grid; grid-template-columns:repeat(9,1fr);
  gap:1px; background:#555; border:3px solid #333;
  border-radius:8px; overflow:hidden; max-width:400px;
}
.sdk-cell {
  background:var(--card,#fff); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(0.8rem,2.5vw,1.1rem); font-weight:600;
  cursor:pointer; border:none; outline:none;
  transition:background .1s; color:var(--text);
  font-family:var(--mono);
}
.sdk-cell:nth-child(3n):not(:nth-child(9n)) { border-right:2px solid #333; }
.sdk-row-border { border-bottom:2px solid #333; }
.sdk-cell.given    { color:var(--text); font-weight:800; background:var(--panel); }
.sdk-cell.selected { background:var(--accent-l) !important; }
.sdk-cell.highlight{ background:#e8f4fd !important; }
.sdk-cell.error    { color:var(--red) !important; }
.sdk-cell.correct  { color:var(--accent); }
.sdk-numpad {
  display:flex; gap:0.4rem; margin-top:0.6rem; flex-wrap:wrap; max-width:400px;
}
.sdk-num-btn {
  width:38px; height:38px; border-radius:8px;
  border:1.5px solid var(--border); background:var(--card,#fff);
  font-size:1rem; font-weight:700; cursor:pointer;
  font-family:var(--mono); color:var(--text);
  transition:all .15s;
}
.sdk-num-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-l); }
.sdk-num-btn.erase { font-size:0.75rem; color:var(--red); border-color:var(--red-l); }

/* Word Search */
.ws-wrap { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:flex-start; }
.ws-grid {
  display:grid;
  font-family:var(--mono); font-size:clamp(0.7rem,1.8vw,1rem);
  font-weight:700; line-height:1;
  border:2px solid var(--border); border-radius:10px;
  overflow:hidden; flex-shrink:0; user-select:none;
}
.ws-cell {
  width:2em; height:2em;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:1px solid var(--border);
  color:var(--text); transition:background .1s;
  background:var(--card,#fff);
}
.ws-cell:hover { background:var(--accent-l); }
.ws-cell.selecting { background:var(--accent-l); }
.ws-cell.found { background:var(--green-l); color:var(--green); }
.ws-wordlist {
  display:flex; flex-direction:column; gap:0.35rem; min-width:140px;
}
.ws-word {
  font-size:0.82rem; font-weight:600; color:var(--text2);
  padding:0.25rem 0.5rem; border-radius:6px; transition:all .2s;
}
.ws-word.found { text-decoration:line-through; color:var(--green); background:var(--green-l); }
/* ── Notifications section ── */
.nf-mark-all-btn {
  font-size: 0.78rem; font-weight: 600;
  padding: 0.4rem 1rem; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent; color: var(--text3);
  cursor: pointer; transition: all 0.15s;
}
.nf-mark-all-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }

.nf-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 0.5rem;
  transition: box-shadow 0.15s;
  cursor: default;
  position: relative;
}
.nf-row.unread {
  border-left: 4px solid var(--accent);
  background: var(--accent-l);
}
.nf-row:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
.nf-icon {
  font-size: 1.6rem; flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border-radius: 12px;
}
.nf-body { flex: 1; min-width: 0; }
.nf-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.nf-text  { font-size: 0.78rem; color: var(--text2); line-height: 1.5; }
.nf-time  { font-size: 0.68rem; color: var(--text3); margin-top: 0.3rem; font-family: var(--mono); }
.nf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  margin-top: 6px;
}
.nf-link-btn {
  font-size: 0.72rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
  padding: 0.2rem 0.6rem; border-radius: 20px;
  border: 1px solid var(--accent);
  cursor: pointer; transition: background 0.15s;
  white-space: nowrap; flex-shrink: 0;
  background: transparent;
  margin-top: 2px;
}
.nf-link-btn:hover { background: var(--accent-l); }

/* ── Settings section ── */

/* ── Profile view card ── */
.stg-profile-view {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
  position: relative;
}
.stg-pv-avatar-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.6rem; flex-shrink: 0;
}
.stg-pv-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; font-weight: 800;
  font-family: var(--display); border: 3px solid var(--border);
  overflow: hidden;
}
.stg-pv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.stg-pv-edit-btn {
  font-size: 0.75rem; font-weight: 700;
  padding: 0.35rem 0.9rem; border-radius: 20px;
  border: 1.5px solid var(--accent); color: var(--accent);
  background: var(--accent-l); cursor: pointer;
  white-space: nowrap; transition: all .15s;
  font-family: var(--sans);
}
.stg-pv-edit-btn:hover { background: var(--accent); color: #fff; }
.stg-pv-info { flex: 1; min-width: 0; }
.stg-pv-name  { font-family: var(--display); font-size: 1.2rem; font-weight: 800; margin-bottom: 0.2rem; }
.stg-pv-email { font-size: 0.8rem; color: var(--text2); margin-bottom: 0.5rem; }
.stg-pv-meta  { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.stg-pv-chip  {
  font-size: 0.72rem; font-weight: 600; color: var(--text2);
  background: var(--panel); border-radius: 20px;
  padding: 0.2rem 0.65rem; border: 1px solid var(--border);
}
.stg-pv-chip-accent { color: var(--accent); background: var(--accent-l); border-color: transparent; }
.stg-pv-chip:empty  { display: none; }
.stg-pv-id {
  font-family: var(--mono); font-size: 0.72rem; color: var(--text3);
  letter-spacing: 0.05em;
}
.stg-pw-trigger-btn {
  margin-left: auto; align-self: flex-start;
  font-size: 0.78rem; font-weight: 700;
  padding: 0.45rem 1rem; border-radius: 20px;
  border: 1.5px solid var(--border); color: var(--text2);
  background: transparent; cursor: pointer;
  white-space: nowrap; transition: all .15s;
  font-family: var(--sans);
}
.stg-pw-trigger-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-l); }

/* ── Appearance section card ── */
.stg-section-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.4rem 1.8rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.2rem;
}
.stg-section-title {
  font-family: var(--display); font-size: 0.95rem; font-weight: 800;
  margin-bottom: 1rem; color: var(--text);
}

/* ── Full-screen modal overlay ── */
.stg-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.stg-modal-overlay[style*="flex"],
.stg-modal-overlay.open { display: flex !important; }
.stg-modal {
  background: var(--white);
  border-radius: 20px;
  width: 100%; max-width: 540px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: fadeInModal 0.25s ease;
}
@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.stg-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.stg-modal-title {
  font-family: var(--display); font-size: 1rem; font-weight: 800;
  color: var(--text);
}
.stg-modal-back {
  font-size: 0.8rem; font-weight: 600; color: var(--text3);
  background: none; border: none; cursor: pointer;
  padding: 0.3rem 0.5rem; font-family: var(--sans);
  transition: color .15s;
}
.stg-modal-back:hover { color: var(--accent); }
.stg-modal-done-btn {
  font-size: 0.8rem; font-weight: 700; color: var(--accent);
  background: var(--accent-l); border: 1.5px solid var(--accent);
  border-radius: 20px; padding: 0.3rem 0.8rem;
  cursor: pointer; font-family: var(--sans);
}
.stg-modal-done-btn:hover { background: var(--accent); color: #fff; }
.stg-modal-fields {
  flex: 1; overflow-y: auto;
  padding: 1.2rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.stg-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Avatar row inside edit modal ── */
.stg-modal-avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  text-align: center;
}
.stg-modal-avatar-info {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.4rem;
}
.stg-modal-avatar-name {
  font-weight: 700; font-size: 0.95rem; color: var(--text);
}
.stg-av-preview {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff; font-weight: 800;
  font-family: var(--display); flex-shrink: 0;
  overflow: hidden;
  border: 3px solid var(--border);
}
.stg-av-preview img { width: 100%; height: 100%; object-fit: cover; }
.stg-change-av-btn {
  font-size: 0.78rem; font-weight: 700;
  padding: 0.35rem 0.85rem; border-radius: 20px;
  border: 1.5px solid var(--border); color: var(--text2);
  background: var(--panel); cursor: pointer;
  font-family: var(--sans); transition: all .15s;
  align-self: flex-start;
}
.stg-change-av-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }

/* ── Avatar picker modal ── */
.stg-avatar-overlay { z-index: 350; }
.stg-avatar-modal-inner { border-radius: 24px 24px 0 0; max-height: 85vh; }
.stg-upload-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.stg-upload-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  padding: 0.45rem 1rem; border-radius: 20px;
  border: 1.5px dashed var(--border); color: var(--text2);
  background: var(--panel); transition: all .15s;
  font-family: var(--sans);
}
.stg-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.stg-upload-preview-img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--accent);
}
.stg-upload-remove {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red-l); color: var(--red);
  border: none; cursor: pointer; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}
.stg-av-section-label {
  font-size: 0.72rem; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 0.8rem 1.5rem 0.4rem;
}
.stg-avatar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem; padding: 0.5rem 1.5rem 1.5rem;
  overflow-y: auto; flex: 1;
}
.stg-av-opt {
  aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; cursor: pointer;
  border: 2.5px solid var(--border);
  background: var(--panel); transition: all .15s;
}
.stg-av-opt:hover    { border-color: var(--accent); transform: scale(1.08); }
.stg-av-opt.selected { border-color: var(--accent); background: var(--accent-l); }

/* ── Password modal ── */
.stg-pw-modal-inner { max-height: 70vh; }

/* ── Shared field styles (still used inside modals) ── */
.stg-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.stg-field  { display: flex; flex-direction: column; gap: 0.3rem; }
.stg-label  { font-size: 0.75rem; font-weight: 600; color: var(--text2); }
.stg-input  {
  background: var(--panel); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 0.6rem 0.8rem;
  font-size: 0.88rem; font-family: var(--sans); color: var(--text);
  outline: none; transition: border-color .15s; width: 100%;
}
.stg-input:focus  { border-color: var(--accent); }
.stg-input option { background: var(--card); color: var(--text); }
.stg-save-btn {
  width: 100%; background: var(--accent); color: #fff;
  border: none; border-radius: 12px; padding: 0.75rem;
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
  font-family: var(--sans); transition: background .15s;
}
.stg-save-btn:hover    { background: var(--accent-h); }
.stg-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.stg-msg {
  padding: 0.6rem 0.9rem; border-radius: 10px;
  font-size: 0.82rem; font-weight: 600; display: none;
}
.stg-msg.success { background: var(--green-l); color: var(--green); }
.stg-msg.error   { background: var(--red-l);   color: var(--red); }
.stg-id-box {
  background: var(--panel); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 0.6rem 0.8rem;
  font-size: 0.85rem; font-family: var(--mono); font-weight: 700;
  color: var(--text2);
}
.stg-pw-strength {
  height: 5px; background: var(--border); border-radius: 99px;
  overflow: hidden; margin-top: 4px;
}
.stg-pw-fill { height: 100%; border-radius: 99px; transition: width 0.3s, background 0.3s; }

/* Theme options (reused in appearance card) */
.stg-theme-opts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem;
}
.stg-theme-opt {
  padding: 0.9rem 0.5rem; border-radius: 14px;
  border: 2px solid var(--border); background: var(--panel);
  cursor: pointer; text-align: center; transition: all .15s;
  font-family: var(--sans);
}
.stg-theme-opt:hover  { border-color: var(--accent); }
.stg-theme-opt.active { border-color: var(--accent); background: var(--accent-l); }
.stg-theme-icon { font-size: 1.5rem; margin-bottom: 0.25rem; }
.stg-theme-name { font-size: 0.8rem; font-weight: 700; color: var(--text); }
.stg-theme-sub  { font-size: 0.65rem; color: var(--text2); margin-top: 1px; }

/* ── Notifications section ── */
.nf-mark-all-btn {
  font-size: 0.78rem; font-weight: 600;
  padding: 0.4rem 1rem; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent; color: var(--text3);
  cursor: pointer; transition: all 0.15s;
}
.nf-mark-all-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }

.nf-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 0.5rem;
  transition: box-shadow 0.15s;
  cursor: default;
  position: relative;
}
.nf-row.unread {
  border-left: 4px solid var(--accent);
  background: var(--accent-l);
}
.nf-row:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
.nf-icon {
  font-size: 1.6rem; flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border-radius: 12px;
}
.nf-body { flex: 1; min-width: 0; }
.nf-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.nf-text  { font-size: 0.78rem; color: var(--text2); line-height: 1.5; }
.nf-time  { font-size: 0.68rem; color: var(--text3); margin-top: 0.3rem; font-family: var(--mono); }
.nf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  margin-top: 6px;
}
.nf-link-btn {
  font-size: 0.72rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
  padding: 0.2rem 0.6rem; border-radius: 20px;
  border: 1px solid var(--accent);
  cursor: pointer; transition: background 0.15s;
  white-space: nowrap; flex-shrink: 0;
  background: transparent;
  margin-top: 2px;
}
.nf-link-btn:hover { background: var(--accent-l); }

/* ── Settings section ── */
.stg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.stg-card {
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
}
.stg-card-title {
  font-family: var(--display);
  font-size: 0.95rem; font-weight: 800;
  color: var(--text); margin-bottom: 1.1rem;
}
.stg-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.stg-field  { display: flex; flex-direction: column; gap: 0.3rem; }
.stg-label  { font-size: 0.75rem; font-weight: 600; color: var(--text2); }
.stg-input  {
  background: var(--input-bg, var(--panel));
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  font-size: 0.85rem;
  font-family: var(--sans);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.stg-input:focus  { border-color: var(--accent); }
.stg-input option { background: var(--card); color: var(--text); }

.stg-save-btn {
  margin-top: 1.1rem; width: 100%;
  background: var(--accent); color: #fff;
  border: none; border-radius: 10px;
  padding: 0.65rem; font-size: 0.85rem;
  font-weight: 700; font-family: var(--sans);
  cursor: pointer; transition: background 0.15s, opacity 0.15s;
}
.stg-save-btn:hover    { background: var(--accent-h); }
.stg-save-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.stg-msg {
  font-size: 0.78rem; padding: 0.5rem 0.8rem;
  border-radius: 8px; margin-bottom: 0.8rem;
  font-weight: 500;
}
.stg-msg.success { background: var(--green-l); color: var(--green); }
.stg-id-box {
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  font-size: 0.85rem;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
  user-select: all;
}
.stg-msg.error   { background: var(--red-l);   color: var(--red); }

/* Password strength */
.stg-pw-strength {
  height: 4px; background: var(--border);
  border-radius: 99px; overflow: hidden; margin-top: 4px;
}
.stg-pw-fill { height: 100%; border-radius: 99px; transition: width 0.3s, background 0.3s; }

/* Avatar picker */
.stg-av-preview {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto;
  border: 3px solid var(--border);
}
.stg-avatar-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem;
}
.stg-av-opt {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; cursor: pointer;
  border: 2.5px solid var(--border);
  background: var(--panel);
  transition: border-color 0.15s, transform 0.1s;
}
.stg-av-opt:hover    { border-color: var(--accent); transform: scale(1.08); }
.stg-av-opt.selected { border-color: var(--accent); background: var(--accent-l); }

/* Theme picker */
.stg-theme-opts {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0.6rem;
}
.stg-theme-opt {
  border: 2px solid var(--border);
  border-radius: 12px; padding: 0.8rem 0.5rem;
  text-align: center; cursor: pointer;
  background: var(--panel);
  transition: border-color 0.15s, background 0.15s;
}
.stg-theme-opt:hover      { border-color: var(--accent); }
.stg-theme-opt.active     { border-color: var(--accent); background: var(--accent-l); }
.stg-theme-icon { font-size: 1.5rem; margin-bottom: 0.25rem; }
.stg-theme-name { font-size: 0.8rem; font-weight: 700; color: var(--text); }
.stg-theme-sub  { font-size: 0.65rem; color: var(--text2); margin-top: 1px; }

/* ── Badges section ── */
.bdg-xp-bar {
  background: var(--card,#fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  display: flex; align-items: center; gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.bdg-xp-left  { flex-shrink: 0; }
.bdg-level    { font-family: var(--display); font-size: 1rem; font-weight: 800; color: var(--accent); }
.bdg-xp-label { font-size: 0.7rem; color: var(--text3); margin-top: 2px; }
.bdg-xp-track { flex: 1; height: 10px; background: var(--border); border-radius: 99px; overflow: hidden; }
.bdg-xp-fill  { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #6366f1); transition: width 0.8s cubic-bezier(.4,0,.2,1); }
.bdg-xp-right { flex-shrink: 0; text-align: right; }
.bdg-xp-total { font-family: var(--display); font-size: 1rem; font-weight: 800; color: var(--text); }

.bdg-tabs {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.bdg-tab {
  font-size: 0.78rem; font-weight: 600;
  padding: 0.35rem 0.9rem; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent; color: var(--text3);
  cursor: pointer; transition: all 0.15s;
}
.bdg-tab.active, .bdg-tab:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-l);
}

.bdg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem;
}

.bdg-card {
  background: var(--card,#fff);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.1rem 1rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.4rem;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
  position: relative; overflow: hidden;
}
.bdg-card.unlocked {
  border-color: var(--bdg-color, var(--accent));
  background: var(--card,#fff);
}
.bdg-card.unlocked:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.bdg-card.locked {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.bdg-card.locked:hover { opacity: 0.75; }

/* Shiny top border for unlocked */
.bdg-card.unlocked::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--bdg-color, var(--accent));
  border-radius: 16px 16px 0 0;
}

.bdg-emoji  { font-size: 2.4rem; line-height: 1; margin-bottom: 0.1rem; }
.bdg-name   { font-family: var(--display); font-size: 0.82rem; font-weight: 800; color: var(--text); }
.bdg-desc   { font-size: 0.7rem; color: var(--text3); line-height: 1.4; }
.bdg-req    { font-size: 0.68rem; font-weight: 600; margin-top: 0.2rem; }
.bdg-card.unlocked .bdg-req { color: var(--bdg-color, var(--accent)); }
.bdg-card.locked   .bdg-req { color: var(--text3); }

.bdg-unlock-date {
  font-size: 0.62rem; color: var(--text3);
  font-family: var(--mono); margin-top: 0.1rem;
}

/* Rarity glow for rare/epic/legendary */
.bdg-card.rarity-rare.unlocked     { box-shadow: 0 0 0 2px #60a5fa33; }
.bdg-card.rarity-epic.unlocked     { box-shadow: 0 0 0 2px #a78bfa44; }
.bdg-card.rarity-legendary.unlocked{ box-shadow: 0 0 16px 2px #fbbf2444; border-color: #f59e0b; }

.bdg-rarity {
  font-size: 0.58rem; font-weight: 700; padding: 0.1rem 0.45rem;
  border-radius: 20px; letter-spacing: 0.06em; text-transform: uppercase;
}
.rarity-common    .bdg-rarity { background: #f1f5f9; color: #64748b; }
.rarity-uncommon  .bdg-rarity { background: #dcfce7; color: #16a34a; }
.rarity-rare      .bdg-rarity { background: #dbeafe; color: #2563eb; }
.rarity-epic      .bdg-rarity { background: #f3e8ff; color: #7c3aed; }
.rarity-legendary .bdg-rarity { background: #fef3c7; color: #d97706; }

/* Category section headers */
.bdg-cat-header {
  grid-column: 1/-1;
  font-family: var(--display);
  font-size: 0.75rem; font-weight: 800;
  color: var(--text3); text-transform: uppercase;
  letter-spacing: 0.07em; padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  margin-top: 0.4rem;
}

/* ── Leaderboard section ── */
.lb-my-card {
  background: linear-gradient(135deg, var(--accent) 0%, #6366f1 100%);
  border-radius: 16px;
  padding: 1rem 1.4rem;
  display: flex; align-items: center; gap: 1.2rem;
  color: #fff;
}
.lb-my-left  { text-align: center; flex-shrink: 0; min-width: 52px; }
.lb-my-rank  { font-family: var(--display); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.lb-my-label { font-size: 0.65rem; opacity: 0.75; text-transform: uppercase; letter-spacing: .06em; }
.lb-my-mid   { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.lb-my-av    {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; flex-shrink: 0;
}
.lb-my-name    { font-weight: 700; font-size: 0.95rem; }
.lb-my-school  { font-size: 0.72rem; opacity: 0.72; margin-top: 1px; }
.lb-my-right   { text-align: right; flex-shrink: 0; }
.lb-my-score   { font-family: var(--display); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.lb-my-score-lbl { font-size: 0.62rem; opacity: 0.7; text-transform: uppercase; letter-spacing: .05em; }
.lb-my-attempts  { font-size: 0.7rem; opacity: 0.72; margin-top: 2px; }

/* Podium */
.lb-podium-wrap {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0.5rem; padding: 0 1rem;
}
.lb-pod { display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 160px; }
.lb-pod-crown { font-size: 1.4rem; margin-bottom: 0.2rem; }
.lb-pod-av {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; color: #fff;
  margin-bottom: 0.4rem;
}
.lb-pod-1 .lb-pod-av { background: linear-gradient(135deg,#f59e0b,#d97706); width:62px; height:62px; font-size:1.3rem; }
.lb-pod-2 .lb-pod-av { background: linear-gradient(135deg,#94a3b8,#64748b); }
.lb-pod-3 .lb-pod-av { background: linear-gradient(135deg,#d97706,#b45309); }
.lb-pod-name  { font-size: 0.78rem; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 0.2rem; }
.lb-pod-score { font-family: var(--display); font-size: 1rem; font-weight: 800; margin-bottom: 0.4rem; }
.lb-pod-plinth {
  width: 100%; border-radius: 10px 10px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; padding: 0.5rem 0;
}
.lb-plinth-1 { background: linear-gradient(135deg,#fef3c7,#fde68a); height: 72px; }
.lb-plinth-2 { background: linear-gradient(135deg,#f1f5f9,#e2e8f0); height: 52px; }
.lb-plinth-3 { background: linear-gradient(135deg,#fff7ed,#fed7aa); height: 42px; }

/* Ranked list rows */
.lb-row-full {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  margin-bottom: 0.35rem;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  transition: box-shadow .15s;
}
.lb-row-full:hover  { box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.lb-row-full.lb-me  { border-color: var(--accent); background: var(--accent-l); }
.lb-row-full.lb-top3 { border-color: transparent; background: var(--panel); }
.lb-rank-num {
  font-family: var(--display); font-size: 1rem; font-weight: 800;
  width: 32px; text-align: center; flex-shrink: 0; color: var(--text3);
}
.lb-rank-num.gold   { color: #d97706; }
.lb-rank-num.silver { color: #64748b; }
.lb-rank-num.bronze { color: #b45309; }
.lb-av-sm {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.lb-info      { flex: 1; min-width: 0; }
.lb-info-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.lb-info-sub  { font-size: 0.7rem; color: var(--text3); }
.lb-score-col { text-align: right; flex-shrink: 0; }
.lb-score-val { font-family: var(--display); font-size: 1rem; font-weight: 800; }
.lb-score-att { font-size: 0.65rem; color: var(--text3); }

/* ── Analytics section ── */
.an-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}
.an-card {
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
}
.an-card-wide { grid-column: auto; }
.an-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.an-card-title {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
}
.an-tabs { display: flex; gap: 0.3rem; }
.an-tab {
  font-size: 0.72rem; font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  transition: all 0.15s;
}
.an-tab.active, .an-tab:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }
.an-trend-filters {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.an-trend-filters .pp-select { flex: 1; min-width: 110px; font-size: 0.78rem; padding: 0.35rem 0.6rem; color: var(--text); background: var(--white); border: 1px solid var(--border2); border-radius: 8px; }
.an-single-box {
  text-align: center; padding: 1.8rem 1rem;
  background: var(--accent-l); border-radius: 14px;
  border: 1.5px dashed #93c5fd;
}
.an-single-score {
  font-family: var(--display); font-size: 3rem; font-weight: 800;
  line-height: 1; margin-bottom: 0.4rem;
}
.an-single-label {
  font-size: 0.82rem; font-weight: 700; color: var(--accent); margin-bottom: 0.25rem;
}
.an-single-tip { font-size: 0.78rem; color: var(--text3); }
.an-chart-wrap { position: relative; width: 100%; }
.an-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.5rem;
  padding: 2rem;
  font-size: 0.82rem; color: var(--text3); text-align: center;
}
.an-empty div:first-child { font-size: 2rem; }
/* Subject bars */
.an-subject-list { display: flex; flex-direction: column; gap: 0.75rem; }
.an-sub-row {}
.an-sub-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.an-sub-name { font-size: 0.8rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 0.4rem; }
.an-sub-pct  { font-size: 0.8rem; font-weight: 700; }
.an-sub-track { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; }
.an-sub-fill  { height: 100%; border-radius: 99px; transition: width 0.7s cubic-bezier(.4,0,.2,1); }
.an-sub-meta  { font-size: 0.68rem; color: var(--text3); margin-top: 0.2rem; }
/* Heatmap in analytics */
.an-heatmap-wrap { display: flex; gap: 0.4rem; }
.an-heatmap-days {
  display: grid; grid-template-rows: repeat(7, 12px);
  gap: 2px; font-size: 0.6rem; color: var(--text3);
  align-items: center; padding-top: 2px;
}
.hm-legend { width: 12px; height: 12px; border-radius: 3px; background: var(--border); display: inline-block; }
.hm-legend.hm-l1 { background: #bfdbfe; }
.hm-legend.hm-l2 { background: #60a5fa; }
.hm-legend.hm-l3 { background: #2563eb; }
.hm-legend.hm-l4 { background: #1e40af; }
/* Personal bests */
.an-best-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.an-best-row:last-child { border-bottom: none; }
.an-best-icon { font-size: 1.3rem; flex-shrink: 0; }
.an-best-info { flex: 1; min-width: 0; }
.an-best-subject { font-size: 0.8rem; font-weight: 700; color: var(--text); }
.an-best-paper   { font-size: 0.7rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-best-score   { font-family: var(--display); font-size: 1.2rem; font-weight: 800; flex-shrink: 0; }


/* ── My Results list rows ── */
.mr-row {
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.mr-row:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.08); border-color: var(--accent); }
.mr-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: var(--mr-color, var(--accent));
}
.mr-subject-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  background: var(--mr-color-l, var(--accent-l));
}
.mr-main { flex: 1; min-width: 0; }
.mr-paper-title {
  font-weight: 700; font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 0.2rem;
}
.mr-meta { font-size: 0.73rem; color: var(--text3); display: flex; gap: 0.7rem; flex-wrap: wrap; }
.mr-score-col { text-align: right; flex-shrink: 0; }
.mr-score-pct { font-family: var(--display); font-size: 1.4rem; font-weight: 800; line-height: 1; }
.mr-score-bar-wrap { width: 80px; height: 4px; background: var(--border); border-radius: 4px; margin-top: 4px; overflow: hidden; }
.mr-score-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.mr-badge {
  font-size: 0.6rem; font-weight: 700; padding: 0.18rem 0.5rem;
  border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase;
  flex-shrink: 0;
}
.mr-badge.pass { background: var(--green-l); color: var(--green); }
.mr-badge.fail { background: var(--red-l); color: var(--red); }
.mr-badge.auto { background: var(--yellow-l); color: var(--yellow); }
.mr-arrow { color: var(--text3); font-size: 1rem; flex-shrink: 0; }


.start-paper-btn {
  padding: 0.3rem 0.8rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--display);
  transition: all 0.15s;
}
.start-paper-btn:hover { background: var(--accent-h); transform: scale(1.04); }

/* Notification dot badge */
.ni-count {
  margin-left: auto;
  background: var(--red-l);
  color: var(--red);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  border-radius: 50px;
  font-family: var(--mono);
}

/* Section header */
.sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.sec-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sec-link {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  font-family: var(--display);
  cursor: pointer;
}
.sec-link:hover { text-decoration: underline; }

/* Tabs */
.tab-row { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.2rem; }
.tab {
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--display);
  color: var(--text3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab:hover:not(.active) { color: var(--text2); }

/* Progress summary */
.progress-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}

.ps-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: var(--shadow);
}

.ps-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.ps-icon { font-size: 1.1rem; }
.ps-title { font-family: var(--display); font-size: 0.82rem; font-weight: 700; color: var(--text2); }

.ps-big {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.2rem;
}
.ps-sub { font-size: 0.72rem; color: var(--text3); }

/* Tiny sparkline bars */
.sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  margin-top: 0.8rem;
}
.spark-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

/* Upcoming exams */
.upcoming-list { display: flex; flex-direction: column; gap: 0; }

.upcoming-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.upcoming-row:last-child { border-bottom: none; }
.upcoming-row:hover { background: var(--panel); }

.upcoming-date-box {
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}
.udb-day { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; line-height: 1; }
.udb-month { font-size: 0.62rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--display); }

.upcoming-info { flex: 1; }
.upcoming-name { font-size: 0.86rem; font-weight: 600; margin-bottom: 0.1rem; }
.upcoming-meta { font-size: 0.72rem; color: var(--text3); font-family: var(--mono); }

.upcoming-action {
  padding: 0.3rem 0.7rem;
  background: var(--accent-l);
  color: var(--accent);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--display);
  transition: all 0.15s;
}
.upcoming-action:hover { background: var(--accent); color: #fff; }

/* Animations */
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation: fadeUp 0.4s ease both; }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.1s; }
.d3 { animation-delay: 0.15s; }
.d4 { animation-delay: 0.2s; }

/* ══ PAPERS PAGE ══════════════════════════════════════════ */
.pp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.pp-title {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pp-subtitle { font-size: 0.82rem; color: var(--text3); margin-top: 0.2rem; }

/* Search bar */
.pp-search-wrap {
  position: relative;
  flex: 1;
  max-width: 320px;
  min-width: 180px;
}
.pp-search-wrap input {
  width: 100%;
  padding: 0.55rem 0.85rem 0.55rem 2.2rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
  font-family: var(--sans);
  background: var(--white);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.pp-search-wrap input:focus { border-color: var(--accent); }
.pp-search-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: 0.9rem;
  pointer-events: none;
}

/* Filter bar */
.pp-filters {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.pp-select {
  padding: 0.45rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: var(--sans);
  background: var(--card);
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.pp-select option { background: var(--card); color: var(--text); }
.pp-select:focus { border-color: var(--accent); }

/* Subject pills */
.pp-pills {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.pp-pill {
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--display);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.pp-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }
.pp-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Stats strip */
.pp-stats-strip {
  display: flex;
  gap: 1.5rem;
  padding: 0.9rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}
.pp-stat { text-align: center; }
.pp-stat-val {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.pp-stat-lbl { font-size: 0.68rem; color: var(--text3); margin-top: 1px; }

/* Results meta */
.pp-results-meta {
  font-size: 0.78rem;
  color: var(--text3);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pp-sort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text2);
}
.pp-sort select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: var(--sans);
  background: var(--white);
  outline: none;
  cursor: pointer;
}

/* Paper card enhancements for papers page */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}

/* Attempted badge on card */
.pc-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.18rem 0.45rem;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pc-badge.done { background: var(--green-l); color: var(--green); }
.pc-badge.new  { background: var(--accent-l); color: var(--accent); }

/* ── Availability badge ── */
.pc-avail {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.67rem;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
  border-radius: 20px;
  margin-bottom: 0.1rem;
}
.pc-avail-upcoming { background: var(--yellow-l); color: var(--yellow); }
.pc-avail-active   { background: var(--green-l);  color: var(--green);  }
.pc-avail-expired  { background: var(--red-l);    color: var(--red);    }

/* Unavailable button state */
.start-paper-btn.pc-btn-unavail {
  background: var(--bg);
  color: var(--text3);
  border: 1.5px solid var(--border);
  cursor: default;
  transform: none !important;
}
.start-paper-btn.pc-btn-unavail:hover {
  background: var(--bg);
  color: var(--text3);
  transform: none;
}

.pc-medium-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 20px;
  margin-top: 0.25rem;
  letter-spacing: 0.03em;
}
.pc-medium-si {
  background: rgba(34,197,94,0.12);
  color: var(--green);
}
.pc-medium-ta {
  background: rgba(249,115,22,0.12);
  color: var(--accent);
}

/* Best score bar */
.pc-score-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  margin-top: 0.5rem;
  overflow: hidden;
}
.pc-score-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* Empty state */
.pp-empty {
  grid-column: 1/-1;
  padding: 4rem 2rem;
  text-align: center;
}
.pp-empty-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.pp-empty-title { font-family: var(--display); font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; }
.pp-empty-sub { font-size: 0.82rem; color: var(--text3); }

/* Load more */
.pp-load-more {
  text-align: center;
  margin-top: 1.5rem;
}
.pp-load-btn {
  padding: 0.65rem 2rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.2s;
}
.pp-load-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }
.pp-load-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — dashboard.html
   ═══════════════════════════════════════════════════════════ */

/* ── Hamburger (always in DOM, hidden on desktop) ── */
.mob-hamburger {
  display: none;
  flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none;
  cursor: pointer; padding: 6px; margin-right: 0.4rem;
  flex-shrink: 0;
}
.mob-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: all 0.25s;
}
.mob-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mob-hamburger.open span:nth-child(2) { opacity: 0; }
.mob-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Overlay ── */
.mob-nav-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 49;
}
.mob-nav-overlay.open { display: block; }

/* ══════════════════════════════════════
   768px — tablets & large phones (landscape)
   ══════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Sidebar: slide-in drawer ── */
  :root { --nav-w: 0px; }
  .nav {
    width: 272px !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    z-index: 50;
    box-shadow: 4px 0 24px rgba(0,0,0,0.2);
  }
  .nav.open { transform: translateX(0); }
  .mob-hamburger { display: flex; }
  .main { margin-left: 0 !important; }

  /* ── Topbar ── */
  .topbar {
    padding: 0 0.8rem;
    height: 54px;
    gap: 0.3rem;
  }
  /* Hide greeting text — no room on small screens */
  .tb-greeting { display: none; }
  .topbar-user-name { display: none; }
  .topbar-right { gap: 0.3rem; }
  .topbar-btn { padding: 0.35rem 0.55rem; font-size: 0.72rem; }
  .tb-logout-btn { display: none; }

  /* ── Page padding — contain all overflow ── */
  .page-content {
    padding: 0.9rem;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .alt-section {
    padding: 0.9rem;
    max-width: 100%;
    overflow-x: hidden;
  }
  .main {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ── Section headers ── */
  .pp-header { flex-wrap: wrap; gap: 0.5rem; }
  .pp-title  { font-size: 1.05rem; }
  .pp-subtitle { font-size: 0.78rem; }

  /* ════════════════════════════════
     HOME DASHBOARD
     ════════════════════════════════ */

  /* Welcome card: stack vertically, hide stats panel */
  .welcome-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1rem 1.1rem !important;
    gap: 0.6rem;
    margin-bottom: 1rem;
  }
  .wc-right { display: none; }  /* hide Attempts/Avg/Rank — shown in stat cards below */
  .wc-name  { font-size: 1.2rem; }
  .wc-sub   { font-size: 0.8rem; }
  .wc-tag   { font-size: 0.68rem; padding: 0.2rem 0.5rem; margin-bottom: 0.3rem; }
  .wc-tags  { flex-wrap: wrap; gap: 0.3rem; }

  /* Stat cards: 2×2 grid */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem;
    margin-bottom: 1rem;
  }
  .stat-card { padding: 0.85rem 0.9rem; }
  .sc-val    { font-size: 1.5rem; }
  .sc-label  { font-size: 0.72rem; }
  .sc-sub    { display: none; }
  .sc-icon   { width: 32px; height: 32px; font-size: 0.95rem; }

  /* Progress summary (Current Streak, XP, etc): single column */
  .progress-summary {
    grid-template-columns: 1fr !important;
    gap: 0.7rem;
    margin-bottom: 1rem;
  }
  .ps-card   { padding: 0.9rem 1rem; }
  .ps-big    { font-size: 1.6rem; }
  .ps-header { margin-bottom: 0.5rem; }
  /* Sparklines hidden to save vertical space */
  .sparkline { display: none; }

  /* Recent exams + Subject perf: stack vertically */
  .content-row {
    grid-template-columns: 1fr !important;
    gap: 0.8rem;
    margin-bottom: 1rem;
  }
  /* Hide subject perf on mobile — too narrow */
  .content-row > .card:last-child { display: none; }

  /* Bottom row (heatmap / badges / leaderboard): full stack */
  .bottom-row {
    grid-template-columns: 1fr !important;
    gap: 0.8rem;
    margin-bottom: 1rem;
  }

  /* Heatmap: smaller cells, horizontal scroll */
  .heatmap {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 2px;
    padding-bottom: 0.3rem;
  }
  .hm-cell { width: 10px !important; height: 10px !important; flex-shrink: 0; }
  .hm-months { display: none; } /* hide month labels on mobile */

  /* Mini badges on home: 4 cols max */
  .bottom-row .bdg-grid { grid-template-columns: repeat(4,1fr) !important; }

  /* Mini leaderboard on home: hide rank column */
  .lb-row-rank { display: none; }

  /* Papers grid: single column, cards have breathing room */
  .pp-grid { grid-template-columns: 1fr !important; gap: 0.7rem; }
  /* Home papers grid: single column on mobile — no lonely wide last card */
  .papers-grid {
    grid-template-columns: 1fr !important;
  }
  .pp-card { padding: 1rem !important; }
  .pp-filters { flex-wrap: wrap; gap: 0.4rem; }
  .pp-select  { font-size: 0.78rem; }

  /* Paper card — fix overflow clipping the footer/button */
  .paper-card {
    padding: 1rem !important;
    overflow: visible !important;  /* remove hidden so button isn't clipped */
  }
  .pc-name     { font-size: 0.88rem; line-height: 1.4; margin-bottom: 0.45rem; }
  .pc-tag      { font-size: 0.65rem; margin-bottom: 0.3rem; }
  .pc-meta     { font-size: 0.72rem; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
  .pc-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
  .pc-attempts {
    font-size: 0.7rem;
    white-space: normal;
    word-break: break-word;
  }
  .start-paper-btn {
    font-size: 0.78rem;
    padding: 0.4rem 1rem;
    align-self: flex-start;
    width: auto;
  }

  /* ════════════════════════════════
     MY RESULTS
     ════════════════════════════════ */

  /* Stats strip: 3 cols top row + 2 bottom — fits all 5 on screen */
  .pp-stats-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.7rem !important;
    padding: 0.8rem !important;
  }
  .pp-stat-val { font-size: 1.1rem; }
  .pp-stat-lbl { font-size: 0.62rem; }

  .mr-item { padding: 0.7rem 0.9rem !important; gap: 0.5rem; }
  .mr-item-title  { font-size: 0.82rem; }
  .mr-item-meta   { flex-wrap: wrap; font-size: 0.7rem; }
  .mr-item-score  { font-size: 1rem; }

  /* ════════════════════════════════
     ANALYTICS
     ════════════════════════════════ */

  /* Both an-grid variants: always single column on mobile */
  .an-grid,
  .an-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 0.8rem;
  }

  /* Stats strip in analytics: 3-col grid same as My Results */
  .an-stats-strip,
  .pp-stats-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.7rem !important;
    padding: 0.8rem !important;
  }

  /* Score trend chart: scrollable */
  .an-chart-wrap { overflow-x: auto; min-height: 180px; }
  .an-trend-filters { gap: 0.4rem; }
  .an-trend-filters .pp-select { min-width: 90px; font-size: 0.72rem; }

  /* Subject bars: readable */
  .an-subject-list { gap: 0.6rem; }

  /* Heatmap: horizontal scroll with day labels */
  .an-heatmap-wrap {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 0.3rem;
    gap: 0.3rem;
  }
  .an-heatmap-days {
    flex-shrink: 0;
    grid-template-rows: repeat(7, 10px);
    gap: 2px;
  }
  .hm-cell { width: 10px !important; height: 10px !important; }

  /* Personal bests: readable single column */
  .an-personal-bests { grid-template-columns: 1fr !important; }
  .an-best-row  { padding: 0.5rem 0; gap: 0.6rem; }
  .an-best-score{ font-size: 1rem; }
  .an-best-subject { font-size: 0.78rem; }

  /* Insight banner */
  .an-insight-banner { padding: 0.7rem 0.9rem !important; font-size: 0.8rem; }

  /* Card: contain overflow so heatmap/bests don't bleed out */
  .an-card {
    padding: 0.9rem 1rem !important;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }
  .an-card-title { font-size: 0.85rem; }

  /* Heatmap wrap: scroll inside the card */
  .an-heatmap-wrap {
    overflow-x: auto !important;
    overflow-y: hidden;
    max-width: 100%;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  /* The heatmap grid itself must not overflow */
  #an-heatmap, .heatmap {
    min-width: 0;
    flex-shrink: 1;
  }

  /* Personal bests: ensure text doesn't overflow */
  .an-best-paper {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }

  /* Tabs: smaller */
  .an-tab { font-size: 0.68rem; padding: 0.2rem 0.5rem; }

  /* ════════════════════════════════
     LEADERBOARD
     ════════════════════════════════ */
  .lb-filters { flex-wrap: wrap; gap: 0.4rem; }
  .lb-podium  { gap: 0.4rem; }
  .lb-pod     { max-width: 100px; }
  .lb-pod-av  { width: 46px !important; height: 46px !important; font-size: 1rem !important; }
  .lb-pod-1 .lb-pod-av { width: 56px !important; height: 56px !important; }
  .lb-pod-name  { font-size: 0.65rem; }
  .lb-pod-score { font-size: 0.85rem; }
  .lb-row { padding: 0.55rem 0.8rem; gap: 0.4rem; }
  .lb-row-name { font-size: 0.82rem; }

  /* ════════════════════════════════
     BADGES
     ════════════════════════════════ */
  .bdg-tabs { gap: 0.3rem; }
  .bdg-tab  { font-size: 0.72rem; padding: 0.3rem 0.6rem; }
  .bdg-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem; }
  .bdg-card { padding: 0.65rem 0.3rem; }
  .bdg-emoji { font-size: 1.5rem; }
  .bdg-name  { font-size: 0.58rem; }
  .bdg-xp-bar-wrap { margin: 0.5rem 0.9rem; }

  /* ════════════════════════════════
     SETTINGS
     ════════════════════════════════ */

  /* Profile view card: stack vertically */
  .stg-profile-view {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1rem !important;
    gap: 0.75rem;
  }
  /* Avatar + edit button: row on mobile */
  .stg-pv-avatar-wrap {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.8rem;
  }
  .stg-pv-info { width: 100%; min-width: 0; overflow: hidden; }
  .stg-pv-name  { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stg-pv-email { font-size: 0.72rem; word-break: break-all; white-space: normal; }
  .stg-pv-meta  { gap: 0.3rem; }
  .stg-pv-chip  { font-size: 0.65rem; padding: 0.15rem 0.45rem; }
  /* Change password button: full width, below info */
  .stg-pw-trigger-btn {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center;
    justify-content: center;
  }
  .stg-section-card { padding: 1rem 1rem !important; }
  .stg-theme-opts   { gap: 0.5rem; }
  .ts-grid { grid-template-columns: 1fr !important; }
  .stg-avatar-grid { grid-template-columns: repeat(6, 1fr) !important; }
  .ts-theme-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* ════════════════════════════════
     NOTIFICATIONS
     ════════════════════════════════ */
  .nf-row   { padding: 0.75rem; gap: 0.5rem; }
  .nf-icon  { width: 34px; height: 34px; font-size: 1.2rem; }
  .nf-title { font-size: 0.82rem; }
  .nf-text  { font-size: 0.72rem; }

  /* ════════════════════════════════
     GAMES (embedded section)
     ════════════════════════════════ */
  .gm-tabs { grid-template-columns: repeat(2, 1fr) !important; }
  .gm-tab  { padding: 0.65rem 0.3rem; }
  .gm-tab-sub { display: none; }
  .gm-source-tabs { grid-template-columns: repeat(2, 1fr) !important; }
  .gm-sim-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .gm-picker      { flex-wrap: wrap; gap: 0.4rem; }
}

/* ══════════════════════════════════════
   480px — small phones (portrait)
   ══════════════════════════════════════ */
@media (max-width: 480px) {

  /* Stat cards: single column on very small screens */
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .sc-val { font-size: 1.3rem; }

  /* Badges: 2 columns */
  .bdg-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Leaderboard podium: compact */
  .lb-pod-1 .lb-pod-av { width: 48px !important; height: 48px !important; }

  /* Papers: ensure no overflow */
  .pp-card-title { font-size: 0.85rem; }

  /* Analytics chart: scrollable */
  .an-chart-wrap { overflow-x: auto; }
}

/* ══ Language Switcher ══════════════════════════════════════ */
.lang-switcher {
  display: flex;
  gap: 0.2rem;
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 0.2rem;
}
.lang-btn {
  border: none;
  background: none;
  border-radius: 7px;
  padding: 0.28rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.lang-btn:hover { background: var(--border2); color: var(--text); }
.lang-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 4px rgba(37,99,235,0.25);
}
/* Noto fonts apply to whole page when active */
:root[lang="si"] { font-family: 'Noto Sans Sinhala', var(--font-sans), sans-serif; }
:root[lang="ta"] { font-family: 'Noto Sans Tamil',   var(--font-sans), sans-serif; }

/* ── Revision Section ─────────────────────────────────── */
#sec-revision { padding: 1.5rem; }
#sec-revision .pp-header { margin-bottom: 1.25rem; }

#rev-syllabus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
}

.rev-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.rev-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.rev-card-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}
.rev-card-body { padding: 1.25rem; }

.rev-change-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text2);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.rev-change-btn:hover { border-color: var(--accent); color: var(--accent); }

#rev-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .75rem;
}
.rev-subject-card {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem .75rem;
  text-align: center;
  cursor: pointer;
  transition: all .18s;
}
.rev-subject-card:hover {
  border-color: var(--accent);
  background: var(--accent-l);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(37,99,235,.1);
}
.rev-subject-card.selected {
  border-color: var(--accent);
  background: var(--accent-l);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.rev-subject-icon { font-size: 1.8rem; margin-bottom: .45rem; }
.rev-subject-name { font-size: .8rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.rev-subject-sub  { font-size: .68rem; color: var(--text3); margin-top: .2rem; line-height: 1.3; }

.rev-unit-block {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.rev-unit-header {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem;
  background: var(--bg);
  cursor: pointer; user-select: none;
  transition: background .12s;
}
.rev-unit-header:hover { background: var(--accent-l); }
.rev-unit-name  { flex: 1; font-weight: 600; font-size: .85rem; color: var(--text); }
.rev-unit-count {
  font-size: .7rem; color: var(--muted);
  background: var(--border); padding: .15rem .5rem; border-radius: 10px; flex-shrink: 0;
}
.rev-unit-chevron { font-size: .7rem; color: var(--muted); flex-shrink: 0; }

.rev-subtopics {
  flex-direction: column; padding: .4rem .65rem;
  gap: 0; border-top: 1px solid var(--border); background: var(--card);
}
.rev-subtopic-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .45rem .75rem; border-radius: 7px;
  cursor: pointer; font-size: .82rem; transition: background .12s;
}
.rev-subtopic-row:hover { background: var(--accent-l); }
.rev-subtopic-name { flex: 1; color: var(--text2); }
.rev-subtopic-count {
  font-size: .68rem; color: var(--muted);
  background: var(--bg); padding: .12rem .45rem; border-radius: 10px;
}
.rev-unit-check input,
.rev-subtopic-row input {
  width: 15px; height: 15px; cursor: pointer;
  accent-color: var(--accent); flex-shrink: 0;
}
.rev-q-preset {
  padding: .38rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 8px; background: var(--bg);
  color: var(--text); font-size: .82rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .12s;
}
.rev-q-preset:hover, .rev-q-preset.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}