/* ════════════════════════════════════════════════════════════
   CERDIKNET — PREMIUM DESIGN SYSTEM v3
   Theme: Deep Ocean × Electric Azure
   Fonts: Sora (display) + Plus Jakarta Sans (body)
   Audience: Malaysian secondary school students + teachers
   ════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  /* Brand palette */
  --navy:        #0a1628;
  --navy-mid:    #132240;
  --blue:        #2563eb;
  --blue-hover:  #1d4ed8;
  --blue-light:  #60a5fa;
  --blue-glow:   rgba(37,99,235,.18);
  --sky:         #eff6ff;
  --sky2:        #dbeafe;
  --cyan:        #0ea5e9;

  /* Vibrant accents */
  --coral:       #f15a38;
  --coral-lt:    #fff1ee;
  --green:       #10b981;
  --green-lt:    #ecfdf5;
  --amber:       #f59e0b;
  --amber-lt:    #fffbeb;
  --purple:      #7c3aed;
  --purple-lt:   #f5f3ff;
  --pink:        #ec4899;
  --pink-lt:     #fdf2f8;
  --teal:        #0d9488;
  --teal-lt:     #f0fdfa;

  /* Surfaces - layered depth */
  --surface:     #ffffff;
  --surface2:    #f6f9ff;
  --surface3:    #edf2fb;
  --surface4:    #e2eaf8;
  --surface-glass: rgba(255,255,255,.75);

  /* Text hierarchy */
  --text:        #080f1e;
  --text-mid:    #334466;
  --text-muted:  #6b80aa;
  --text-subtle: #b0bfd6;
  --text-on-dark: #f0f4ff;

  /* Borders */
  --border:      #dce6f4;
  --border-md:   #c4d2e8;
  --border-focus: rgba(37,99,235,.35);

  /* Premium shadows */
  --shadow-xs:   0 1px 3px rgba(10,22,40,.05);
  --shadow-sm:   0 2px 8px rgba(10,22,40,.07), 0 1px 2px rgba(10,22,40,.04);
  --shadow-md:   0 8px 28px rgba(10,22,40,.09), 0 3px 8px rgba(10,22,40,.05);
  --shadow-lg:   0 20px 56px rgba(10,22,40,.12), 0 6px 16px rgba(10,22,40,.07);
  --shadow-xl:   0 32px 80px rgba(10,22,40,.16), 0 8px 24px rgba(10,22,40,.08);
  --shadow-blue: 0 6px 28px rgba(37,99,235,.28);
  --shadow-glow: 0 0 0 3px rgba(37,99,235,.15);
  --shadow-card: 0 2px 16px rgba(10,22,40,.06), 0 0 0 1px rgba(10,22,40,.04);

  /* Border radii */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-3xl:  36px;

  /* Easing */
  --ease:        cubic-bezier(.16,1,.3,1);
  --ease-in:     cubic-bezier(.7,0,.84,0);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Transitions */
  --t-fast:  .15s var(--ease);
  --t-base:  .22s var(--ease);
  --t-slow:  .35s var(--ease);

/* ── Z-INDEX SCALE ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-tooltip: 2000;
  --z-toast: 9999;
/* ── SPACING SCALE ── */
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
/* ── TYPOGRAPHY SCALE ── */
  --text-xs: .75rem;
  --text-sm: .82rem;
  --text-base: .875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;


}

/* ── DARK MODE ── */
:root.dark {
  --navy:        #e8eeff;
  --navy-mid:    #b8c8e8;
  --blue:        #60a5fa;
  --blue-hover:  #93c5fd;
  --blue-light:  #bfdbfe;
  --blue-glow:   rgba(96,165,250,.15);
  --sky:         #0d1d3d;
  --sky2:        #162244;
  --cyan:        #38bdf8;

  --coral:       #fb7185;
  --coral-lt:    #1e0a10;
  --green:       #34d399;
  --green-lt:    #052e1a;
  --amber:       #fbbf24;
  --amber-lt:    #1c1000;
  --purple:      #a78bfa;
  --purple-lt:   #1a0f30;
  --pink:        #f472b6;
  --pink-lt:     #1a0515;

  --surface:     #0f1b2d;
  --surface2:    #0a1322;
  --surface3:    #071019;
  --surface4:    #0d1a2f;
  --surface-glass: rgba(15,27,45,.82);

  --text:        #e8eeff;
  --text-mid:    #98b0d0;
  --text-muted:  #5a7898;
  --text-subtle: #344d68;
  --text-on-dark: #e8eeff;

  --border:      #1a2e4a;
  --border-md:   #213652;

  --shadow-xs:   0 1px 3px rgba(0,0,0,.4);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.45);
  --shadow-md:   0 8px 28px rgba(0,0,0,.5);
  --shadow-lg:   0 20px 56px rgba(0,0,0,.55);
  --shadow-xl:   0 32px 80px rgba(0,0,0,.6);
  --shadow-blue: 0 6px 28px rgba(96,165,250,.2);
  --shadow-card: 0 2px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  background: var(--surface2);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: 64px;
  transition: background var(--t-slow), color var(--t-slow);
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5 {
  font-family: 'Sora', sans-serif;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -.025em;
}
h1 { font-size: 1.875rem; font-weight: 800; }
h2 { font-size: 1.5rem;   font-weight: 800; }
h3 { font-size: 1.1rem;   font-weight: 700; }
h4 { font-size: .925rem;  font-weight: 700; }
p  { color: var(--text-mid); line-height: 1.7; }

/* ══════════════════════════════════════════════════════
   NAVBAR — frosted glass, premium
   ══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
   NAVBAR — Premium v2
   ══════════════════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 56px;
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem 0 1.15rem;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid rgba(220,230,244,.5);
  box-shadow: 0 1px 8px rgba(10,22,40,.04), 0 0 0 1px rgba(10,22,40,.02);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
:root.dark .navbar {
  background: rgba(8,14,28,.92);
  border-bottom-color: rgba(30,48,80,.6);
  box-shadow: 0 1px 8px rgba(0,0,0,.2);
}

/* Brand */
.nav-brand, .logo {
  font-family: 'Sora', sans-serif;
  font-size: 1.08rem; font-weight: 900;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #0ea5e9 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.04em;
  text-decoration: none;
  display: flex; align-items: center; gap: .4rem;
  flex-shrink: 0;
}
:root.dark .nav-brand, :root.dark .logo {
  background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 50%, #7dd3fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-brand-icon {
  width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(135deg, #1e40af, #2563eb);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; -webkit-text-fill-color: initial;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.nav-role-badge {
  font-size: .55rem; font-weight: 800;
  background: linear-gradient(135deg, #059669, #10b981);
  -webkit-text-fill-color: initial; color: white;
  padding: .12rem .5rem; border-radius: 100px;
  letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(16,185,129,.3);
  line-height: 1.3;
}

/* Links */
.nav-links {
  display: flex; align-items: center; gap: .15rem;
  list-style: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  flex: 1; min-width: 0; padding: 0 .25rem;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links li { list-style: none; }

.nav-links li a, .nav-links a {
  display: flex; align-items: center; gap: .2rem;
  padding: .34rem .58rem;
  border-radius: 8px;
  font-size: .72rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; white-space: nowrap;
  transition: all .15s ease;
  position: relative;
  line-height: 1.2;
}
.nav-links li a:hover, .nav-links a:hover {
  background: var(--sky); color: var(--blue);
  transform: translateY(-1px);
}
.nav-links li a.active, .nav-links a.active {
  background: var(--sky);
  color: var(--blue); font-weight: 700;
  box-shadow: 0 1px 6px rgba(37,99,235,.15);
  border-bottom: 2.5px solid var(--blue);
  padding-bottom: calc(.34rem - 2.5px);
}
.nav-links li a.active::after {
  display: none;
}
:root.dark .nav-links li a.active, :root.dark .nav-links a.active {
  background: rgba(37,99,235,.18);
  color: #93c5fd;
}
:root.dark .nav-links li a.active::after, :root.dark .nav-links a.active::after { display: none; }
  background: #60a5fa;
}

/* AI-tagged links */
.nav-links a.nav-ai {
  color: var(--purple);
}
.nav-links a.nav-ai:hover {
  background: rgba(139,92,246,.08); color: #7c3aed;
}
.nav-links a.nav-ai.active {
  background: rgba(139,92,246,.1); color: #7c3aed;
}
.nav-links a.nav-ai.active { border-bottom: 2.5px solid #7c3aed; padding-bottom: calc(.34rem - 2.5px); }
.nav-links a.nav-ai.active::after { display: none; }

/* Games link */
.nav-links a.nav-games { color: #ea580c; }
.nav-links a.nav-games:hover { background: rgba(234,88,12,.08); }
.nav-links a.nav-games.active { background: rgba(234,88,12,.1); color: #ea580c; }
.nav-links a.nav-games.active { border-bottom: 2.5px solid #ea580c; padding-bottom: calc(.34rem - 2.5px); }
.nav-links a.nav-games.active::after { display: none; }

/* Divider between groups */
.nav-divider {
  width: 1px; height: 20px; background: var(--border);
  margin: 0 .2rem; flex-shrink: 0; opacity: .6;
}
:root.dark .nav-divider { background: rgba(255,255,255,.08); }

/* Group label */
.nav-group-label {
  font-size: .62rem; font-weight: 800; color: #7c3aed;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .1rem .4rem; flex-shrink: 0;
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 5px;
  line-height: 1.7;
}
:root.dark .nav-group-label {
  color: #a78bfa;
  background: rgba(139,92,246,.15);
  border-color: rgba(139,92,246,.25);
}

/* Actions */
.nav-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; margin-left: .25rem; }

/* CTA button (teacher "Kuiz Baru") */
.nav-cta-btn {
  display: flex; align-items: center; gap: .35rem;
  padding: .38rem .85rem; border-radius: 10px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: white; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .73rem; font-weight: 700; border: none; cursor: pointer;
  box-shadow: 0 2px 10px rgba(37,99,235,.35);
  transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.nav-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,.45); }
.nav-cta-btn:active { transform: scale(.97); }
.nav-cta-btn svg { stroke: white; }

/* Profile avatar button */
.nav-profile-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: transparent; cursor: pointer; padding: 0;
  transition: transform .15s;
}
.nav-profile-btn:hover { transform: scale(1.08); }
.nav-profile-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: #ffffff; font-family: 'Sora', sans-serif;
  font-size: .8rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(37,99,235,.35);
  border: 2.5px solid rgba(255,255,255,.25);
  letter-spacing: 0;
}
:root.dark .nav-profile-avatar {
  background: linear-gradient(135deg, #1d4ed8, #60a5fa);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 2px 12px rgba(37,99,235,.4);
}

/* Logout button */
.nav-logout-btn {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: transparent; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.nav-logout-btn:hover {
  background: rgba(239,68,68,.1); color: #ef4444;
}
:root.dark .nav-logout-btn { color: var(--text-muted); }
:root.dark .nav-logout-btn:hover { background: rgba(239,68,68,.15); color: #f87171; }

/* Dark mode */
:root.dark .nav-links li a:hover { background: rgba(37,99,235,.1); }
:root.dark .nav-links li a.active { background: rgba(37,99,235,.15); }
:root.dark .nav-links a.nav-ai:hover { background: rgba(139,92,246,.12); }
:root.dark .nav-links a.nav-games:hover { background: rgba(234,88,12,.1); }
:root.dark .nav-group-label { background: rgba(139,92,246,.12); }
:root.dark .nav-profile-avatar { border-color: rgba(59,130,246,.3); }
:root.dark .nav-logout-btn:hover { background: rgba(239,68,68,.12); }

/* ═══ Responsive ═══ */
@media (max-width: 900px) {
  .navbar { padding: 0 .75rem; gap: .5rem; }
  .nav-links { gap: .08rem; }
  .nav-links li a { padding: .32rem .4rem; font-size: .68rem; }
  .nav-divider { margin: 0 .1rem; height: 16px; }
  .nav-group-label { display: none; }
  .nav-cta-btn span { display: none; }
  .nav-cta-btn { padding: .38rem; border-radius: 8px; }
  .nav-role-badge { display: none; }
  .nav-brand-icon { width: 26px; height: 26px; font-size: .75rem; }
}
@media (max-width: 640px) {
  .nav-links li a span { display: none; }
  .nav-links li a { font-size: .85rem; padding: .35rem .4rem; }
  .nav-brand { font-size: .95rem; }
}

/* ══════════════════════════════════════════════════════
   PAGES & TRANSITIONS
   ══════════════════════════════════════════════════════ */
.page { display: none; }
.page.active {
  display: block;
  animation: pageEnter .3s cubic-bezier(.16,1,.3,1) both;
  min-height: calc(100vh - 56px);
}

/* ── SECTION WRAPPER ── */
.section {
  max-width: 1200px; margin: 0 auto;
  padding: 2rem;
}
@media (max-width: 768px) { .section { padding: 1.25rem 1rem; } }

/* ══════════════════════════════════════════════════════
   CARDS — premium layered
   ══════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-md);
}

/* ── STAT CARDS with accent bar ── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  transition: all var(--t-base);
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 3px 3px 0 0;
}
.stat-card.blue::before  { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
.stat-card.green::before { background: linear-gradient(90deg, #059669, #34d399); }
.stat-card.amber::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
.stat-card.red::before   { background: linear-gradient(90deg, #dc2626, #f87171); }
.stat-card.purple::before{ background: linear-gradient(90deg, #6d28d9, #a78bfa); }
.stat-card.coral::before { background: linear-gradient(90deg, #e84d2a, #fb8c78); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.stat-icon {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: .9rem;
}
.stat-icon.blue   { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.stat-icon.green  { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.stat-icon.amber  { background: linear-gradient(135deg, #fffbeb, #fef3c7); }
.stat-icon.coral  { background: linear-gradient(135deg, #fff1ee, #ffd6cc); }
.stat-icon.purple { background: linear-gradient(135deg, #f5f3ff, #ede9fe); }

.stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 2rem; font-weight: 900;
  color: var(--text); line-height: 1; margin-bottom: .25rem;
  letter-spacing: -.04em;
}
.stat-label { font-size: .775rem; color: var(--text-muted); font-weight: 600; letter-spacing: .01em; }
.stat-sub   { font-size: .72rem;  color: var(--text-subtle); margin-top: .35rem; }

/* ══════════════════════════════════════════════════════
   BUTTONS — premium with micro-animation
   ══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: .845rem; font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: none; cursor: pointer; white-space: nowrap;
  transition: all var(--t-fast);
  text-decoration: none; line-height: 1;
  letter-spacing: -.005em;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.0);
  transition: background var(--t-fast);
  border-radius: inherit;
}
.btn:hover::after { background: rgba(255,255,255,.06); }
.btn:active { transform: scale(.97); }

.btn-primary {
  background: linear-gradient(135deg, #1d4ed8 0%, var(--blue) 50%, #3b82f6 100%);
  color: white;
  box-shadow: 0 3px 12px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  background: var(--sky); border-color: var(--blue-light);
  color: var(--blue); transform: translateY(-1px);
}

.btn-ghost {
  background: transparent; color: var(--text-mid);
  border: 1.5px solid transparent;
}
.btn-ghost:hover { background: var(--surface3); color: var(--text); }

.btn-danger {
  background: #fef2f2; color: #b91c1c;
  border: 1.5px solid #fecaca;
}
.btn-danger:hover { background: #fee2e2; }

.btn-success {
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  box-shadow: 0 3px 12px rgba(16,185,129,.3);
}
.btn-success:hover { box-shadow: 0 6px 20px rgba(16,185,129,.4); transform: translateY(-1px); }

.btn-sm  { padding: .4rem .85rem; font-size: .78rem; border-radius: var(--radius-sm); }
.btn-lg  { padding: .85rem 2rem;  font-size: .95rem; border-radius: var(--radius-lg); letter-spacing: -.01em; }
.btn-xl  { padding: 1.05rem 2.5rem; font-size: 1rem; border-radius: var(--radius-xl); }
.btn-pill{ border-radius: 100px; }
.btn-icon{ width: 38px; height: 38px; padding: 0; border-radius: var(--radius-md); }

/* ── Dark mode buttons ── */
:root.dark .btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
:root.dark .btn-secondary:hover { background: var(--surface4); border-color: var(--border-md); color: var(--blue); }
:root.dark .btn-danger { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.2); }

/* ══════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .65rem; border-radius: 100px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.badge-blue   { background: var(--sky2);    color: #1d4ed8; }
.badge-green  { background: #d1fae5;        color: #065f46; }
.badge-amber  { background: #fef3c7;        color: #92400e; }
.badge-red    { background: #fee2e2;        color: #b91c1c; }
.badge-purple { background: var(--purple-lt); color: var(--purple); }
.badge-gray   { background: var(--surface3); color: var(--text-muted); }
.badge-teal   { background: #ccfbf1;        color: #0f766e; }
.badge-pink   { background: #fce7f3;        color: #9d174d; }
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
:root.dark .badge-blue   { background: rgba(37,99,235,.18);  color: #93c5fd; }
:root.dark .badge-green  { background: rgba(16,185,129,.15); color: #34d399; }
:root.dark .badge-amber  { background: rgba(245,158,11,.15); color: #fbbf24; }
:root.dark .badge-red    { background: rgba(239,68,68,.15);  color: #f87171; }
:root.dark .badge-purple { background: rgba(124,58,237,.15); color: #a78bfa; }
:root.dark .badge-gray   { background: var(--surface4);      color: var(--text-muted); }

/* ══════════════════════════════════════════════════════
   FORMS — polished inputs
   ══════════════════════════════════════════════════════ */
input, textarea, select {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem; color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: .68rem .95rem;
  width: 100%; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3.5px rgba(37,99,235,.1);
  background: var(--surface);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
:root.dark input, :root.dark textarea, :root.dark select {
  background: var(--surface); border-color: var(--border); color: var(--text);
}
:root.dark input:focus, :root.dark textarea:focus, :root.dark select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3.5px var(--blue-glow);
}
label, .form-label {
  font-size: .75rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .055em;
  display: block; margin-bottom: .4rem;
}
.form-group { margin-bottom: 1.1rem; }
.form-control { /* alias */ }
.form-hint { font-size: .75rem; color: var(--text-subtle); margin-top: .3rem; }

/* ══════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; font-size: .855rem; }
thead th {
  padding: .7rem 1rem; text-align: left;
  font-size: .71rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em;
  background: var(--surface2); border-bottom: 1.5px solid var(--border);
}
tbody td {
  padding: .875rem 1rem; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover td { background: var(--sky); }
:root.dark tbody tr:hover td { background: var(--surface4); }

/* ══════════════════════════════════════════════════════
   TABS — pill style
   ══════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: .25rem;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 1.5rem;
  overflow-x: auto; padding-bottom: 0;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: .6rem 1rem; font-size: .82rem; font-weight: 600;
  color: var(--text-muted); background: transparent; border: none;
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  cursor: pointer; white-space: nowrap;
  transition: all var(--t-fast);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 700; }
:root.dark .tab-btn.active { color: var(--blue-light); border-bottom-color: var(--blue-light); }

/* Pill tabs variant */
.tabs-pill {
  display: flex; gap: .35rem; flex-wrap: wrap;
  background: var(--surface2); border-radius: var(--radius-xl);
  padding: .35rem; margin-bottom: 1.25rem;
  border: 1px solid var(--border);
}
.tab-pill-btn {
  flex: 1; padding: .55rem .75rem;
  border-radius: var(--radius-lg);
  font-size: .78rem; font-weight: 600; color: var(--text-muted);
  background: transparent; border: none; cursor: pointer; text-align: center;
  transition: all var(--t-fast); white-space: nowrap; min-width: 60px;
}
.tab-pill-btn:hover { color: var(--text); }
.tab-pill-btn.active {
  background: var(--surface); color: var(--text); font-weight: 700;
  box-shadow: 0 1px 6px rgba(10,22,40,.08), 0 0 0 1px var(--border);
}
:root.dark .tabs-pill { background: var(--surface3); border-color: var(--border); }
:root.dark .tab-pill-btn.active { background: var(--surface4); box-shadow: 0 1px 6px rgba(0,0,0,.3), 0 0 0 1px var(--border-md); }

/* ══════════════════════════════════════════════════════
   MODALS — premium with spring animation
   ══════════════════════════════════════════════════════ */
.modal {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(8,15,30,.6);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 1.5rem;
}
.modal.show { display: flex; animation: overlayIn .2s var(--ease); }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
  background: var(--surface);
  border-radius: var(--radius-2xl);
  padding: 2.25rem;
  width: 100%; max-width: 500px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--border);
  animation: modalSpring .32s var(--ease-spring);
  position: relative;
}
:root.dark .modal-content { background: var(--surface); box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.06); }
@keyframes modalSpring {
  from { transform: scale(.92) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem; font-weight: 800; color: var(--text);
}
.btn-close, .modal-close {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--surface2); border: 1px solid var(--border);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1rem;
  transition: all var(--t-fast); flex-shrink: 0;
}
.btn-close:hover, .modal-close:hover { background: var(--surface3); color: var(--text); transform: rotate(90deg); }

/* ══════════════════════════════════════════════════════
   EMPTY STATES — engaging
   ══════════════════════════════════════════════════════ */
.empty-state {
  text-align: center; padding: 4rem 2rem;
  display: flex; flex-direction: column; align-items: center;
}
.empty-icon {
  width: 80px; height: 80px; border-radius: 24px;
  background: linear-gradient(135deg, var(--sky), var(--sky2));
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin-bottom: 1.25rem;
  box-shadow: 0 8px 24px rgba(37,99,235,.15);
}
.empty-state h4 {
  font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 800;
  color: var(--text); margin-bottom: .4rem;
}
.empty-state p {
  font-size: .875rem; color: var(--text-muted);
  max-width: 300px; margin: 0 auto .5rem;
}

.u-empty-sm {
  text-align: center; padding: 2.5rem 1rem;
  color: var(--text-muted); font-size: .875rem;
}

/* ══════════════════════════════════════════════════════
   NOTIFICATION TOASTS
   ══════════════════════════════════════════════════════ */
.notification-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  padding: .85rem 1.25rem;
  background: var(--navy); color: white;
  border-radius: var(--radius-lg);
  font-size: .865rem; font-weight: 600;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: .65rem;
  animation: toastSlide .3s var(--ease-spring);
  max-width: 360px; min-width: 240px;
  border: 1px solid rgba(255,255,255,.06);
}
:root.dark .notification-toast { background: var(--surface4); border-color: var(--border-md); }
@keyframes toastSlide {
  from { transform: translateX(24px) scale(.94); opacity: 0; }
  to   { transform: translateX(0) scale(1);   opacity: 1; }
}
.notification-toast.success { border-left: 3px solid var(--green); }
.notification-toast.error   { border-left: 3px solid #ef4444; }
.notification-toast.info    { border-left: 3px solid var(--blue); }
.notification-toast.warning { border-left: 3px solid var(--amber); }

/* ══════════════════════════════════════════════════════
   CLASS CARDS
   ══════════════════════════════════════════════════════ */
.class-card-new {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  cursor: pointer;
}
.class-card-new:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-md);
}
.class-card-banner {
  height: 106px; position: relative;
  display: flex; align-items: flex-end; padding: 1rem;
}
.class-card-icon {
  width: 54px; height: 54px; border-radius: var(--radius-md);
  background: white; display: flex; align-items: center;
  justify-content: center; font-size: 1.6rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.class-card-body { padding: 1.25rem 1.25rem 1rem; }
.class-card-name { font-family: 'Sora', sans-serif; font-weight: 800; font-size: .95rem; color: var(--text); margin-bottom: .3rem; line-height: 1.3; }
.class-card-meta { font-size: .75rem; color: var(--text-muted); margin-bottom: .9rem; }
.class-card-stats { display: flex; gap: .5rem; margin-bottom: .9rem; }
.class-card-stat {
  flex: 1; text-align: center; padding: .6rem .4rem;
  background: var(--surface2); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: all var(--t-fast);
}
.class-card-stat:hover { background: var(--sky); border-color: var(--sky2); }
.class-card-stat .n { font-family: 'Sora', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--text); line-height: 1; }
.class-card-stat .l { font-size: .62rem; color: var(--text-muted); font-weight: 600; margin-top: .15rem; }
.class-card-actions { display: flex; gap: .5rem; }

:root.dark .class-card-new  { background: var(--surface); border-color: var(--border); }
:root.dark .class-card-icon { background: var(--surface3); }
:root.dark .class-card-stat { background: var(--surface3); border-color: var(--border); }
:root.dark .class-card-stat:hover { background: var(--surface4); border-color: var(--border-md); }

/* ── RESPONSIVE GRID ── */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.25rem; }
@media (max-width: 640px) { .class-grid { grid-template-columns: 1fr; } }

/* ── Create class card (+ button) ── */
.create-class-card {
  background: var(--surface);
  border: 2px dashed var(--border-md);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  cursor: pointer;
  transition: all var(--t-base);
  text-align: center;
  padding: 2rem;
}
.create-class-card:hover {
  border-color: var(--blue);
  background: var(--sky);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
:root.dark .create-class-card { background: var(--surface); border-color: var(--border); }
:root.dark .create-class-card:hover { background: var(--surface3); border-color: var(--blue); }

/* ══════════════════════════════════════════════════════
   STUDENT ITEMS (member list)
   ══════════════════════════════════════════════════════ */
.student-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface);
  transition: all var(--t-fast);
}
.student-item:hover { background: var(--sky); border-color: var(--sky2); transform: translateX(2px); }
.student-info-inline { display: flex; align-items: center; gap: .75rem; }
.student-avatar-small {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #1e40af, #2563eb, #0ea5e9);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: .8rem; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.student-name-inline { font-weight: 700; font-size: .875rem; color: var(--text); display: block; }
.student-id { font-size: .72rem; color: var(--text-muted); }
:root.dark .student-item:hover { background: var(--surface4); border-color: var(--border-md); }

/* ══════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════ */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;
}
.page-title {
  font-family: 'Sora', sans-serif; font-size: 1.3rem; font-weight: 800;
  color: var(--text); display: flex; align-items: center; gap: .5rem;
}

/* ══════════════════════════════════════════════════════
   LOADING — skeleton shimmer
   ══════════════════════════════════════════════════════ */
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--blue);
  animation: spin .65s linear infinite;
}
.u-spinner-c { margin: 0 auto .5rem; }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--surface3) 25%, var(--surface2) 50%, var(--surface3) 75%);
  background-size: 200% 100%;
  animation: shimmerBg 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmerBg { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ══════════════════════════════════════════════════════
   HERO BANNERS — common gradient pattern
   ══════════════════════════════════════════════════════ */
.hero-banner {
  border-radius: var(--radius-2xl);
  padding: 2rem 2.25rem;
  margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
  color: white;
}
.hero-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 90% at 85% 50%, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}
.hero-banner::after {
  content: ''; position: absolute; top: -80px; right: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.04); pointer-events: none;
}
.hero-banner-inner { position: relative; z-index: 1; }
.hero-banner-label {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  padding: .25rem .8rem; border-radius: 100px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
  margin-bottom: .8rem;
}
.hero-banner-label .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════════════════ */
.section-header {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem;
}
.section-header-bar {
  width: 3.5px; height: 18px; background: var(--blue);
  border-radius: 100px; flex-shrink: 0;
}
.section-header-title {
  font-family: 'Sora', sans-serif; font-size: .78rem; font-weight: 800;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em;
}

/* ══════════════════════════════════════════════════════
   INVITE / CODE ELEMENTS
   ══════════════════════════════════════════════════════ */
.invite-link-box {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); padding: .6rem .9rem;
  font-size: .8rem; font-family: 'DM Mono', monospace;
}
.invite-code-badge {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, var(--navy-mid), var(--blue));
  color: white; padding: .2rem .75rem;
  border-radius: var(--radius-sm); font-weight: 800; font-size: .82rem;
  letter-spacing: .05em;
}
.invite-share-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.invite-share-btn {
  flex: 1; min-width: 100px; padding: .55rem .75rem;
  border-radius: var(--radius-md); font-size: .8rem; font-weight: 700;
  cursor: pointer; border: 1.5px solid; text-align: center;
  transition: all var(--t-fast);
}
.invite-share-btn.copy   { background: var(--sky); border-color: var(--sky2); color: var(--blue); }
.invite-share-btn.copy:hover { background: var(--blue); color: white; border-color: var(--blue); }
.invite-share-btn.wa     { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.invite-share-btn.wa:hover { background: #16a34a; color: white; border-color: #16a34a; }
.invite-share-btn.regen  { background: var(--amber-lt); border-color: #fef3c7; color: #d97706; }
.invite-share-btn.regen:hover { background: var(--amber); color: white; border-color: var(--amber); }

/* ══════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════ */
.u-mb-4 { margin-bottom: 1rem; }
.u-mb-6 { margin-bottom: 1.5rem; }
.u-mt-4 { margin-top: 1rem; }
.u-mt-6 { margin-top: 1.5rem; }
.u-meta { font-size: .78rem; color: var(--text-muted); }
.u-meta-sm { font-size: .72rem; color: var(--text-muted); }
.u-label { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.u-body-lg { font-size: .925rem; color: var(--text-mid); }
.u-divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.u-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.u-flex-gap3 { display: flex; gap: .75rem; }
.u-text-center { text-align: center; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.u-title-md { font-family: 'Sora', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--text); }
.u-icon-xl { font-size: 3rem; margin-bottom: .75rem; display: block; text-align: center; }

/* ══════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ══════════════════════════════════════════════════════ */
:root.dark .card       { background: var(--surface); border-color: var(--border); }
:root.dark .stat-card  { background: var(--surface); border-color: var(--border); }
:root.dark h1, :root.dark h2, :root.dark h3, :root.dark h4 { color: var(--text); }
:root.dark .modal-content { background: var(--surface); }

/* ══════════════════════════════════════════════════════
   SCROLLBAR — thin and elegant
   ══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ══════════════════════════════════════════════════════
   PREMIUM ACCENTS & DETAILS
   ══════════════════════════════════════════════════════ */
/* Glow card variant */
.card-glow {
  position: relative;
}
.card-glow::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: calc(var(--radius-xl) + 1px);
  background: linear-gradient(135deg, rgba(37,99,235,.3), rgba(14,165,233,.2), transparent 60%);
  z-index: -1; opacity: 0;
  transition: opacity var(--t-base);
}
.card-glow:hover::before { opacity: 1; }

/* Section accent */
.accent-section {
  position: relative; padding-left: 1rem;
}
.accent-section::before {
  content: ''; position: absolute; left: 0; top: .2rem; bottom: .2rem;
  width: 3px; background: linear-gradient(180deg, var(--blue), var(--cyan));
  border-radius: 100px;
}

/* Progress bar */
.progress-bar-wrap {
  height: 8px; background: var(--surface3);
  border-radius: 100px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width .8s var(--ease);
}
.progress-bar-fill.green { background: linear-gradient(90deg, #059669, #34d399); }
.progress-bar-fill.amber { background: linear-gradient(90deg, #d97706, #fbbf24); }
.progress-bar-fill.red   { background: linear-gradient(90deg, #dc2626, #f87171); }

/* Icon container */
.icon-box {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.icon-box-lg { width: 56px; height: 56px; border-radius: var(--radius-lg); font-size: 1.5rem; }
.icon-box-sm { width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: 1rem; }
.icon-box.blue   { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.icon-box.green  { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.icon-box.amber  { background: linear-gradient(135deg, #fffbeb, #fef3c7); }
.icon-box.coral  { background: linear-gradient(135deg, #fff1ee, #ffd6cc); }
.icon-box.purple { background: linear-gradient(135deg, #f5f3ff, #ede9fe); }
.icon-box.teal   { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); }
.icon-box.glass  { background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,.2); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Highlight / alert boxes */
.alert-box {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.25rem; border-radius: var(--radius-lg);
  border-left: 3.5px solid; margin-bottom: 1rem;
}
.alert-box.info    { background: var(--sky); border-color: var(--blue); }
.alert-box.success { background: #f0fdf4; border-color: var(--green); }
.alert-box.warning { background: #fffbeb; border-color: var(--amber); }
.alert-box.danger  { background: #fef2f2; border-color: #ef4444; }
:root.dark .alert-box.info    { background: rgba(37,99,235,.08); }
:root.dark .alert-box.success { background: rgba(16,185,129,.08); }
:root.dark .alert-box.warning { background: rgba(245,158,11,.08); }
:root.dark .alert-box.danger  { background: rgba(239,68,68,.08); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE HELPERS
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .u-grid-2 { grid-template-columns: 1fr; }
  .u-grid-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .navbar { padding: 0 1rem; }
  .nav-links { gap: .08rem; }
  .nav-links a { padding: .38rem .45rem; font-size: .7rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .u-flex-gap3 { flex-direction: column; }
}

/* Legacy compat */
.logo { font-family:'Sora',sans-serif;font-size:1.18rem;font-weight:900;background:linear-gradient(135deg,#1d4ed8,#2563eb,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.04em; }
/* ════════════════════════════════════════════════════════════
   CERDIKNET — UNIFIED COMPONENTS (Student + Teacher shared)
   Added to shared.css
   ════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   NAVBAR — fully standardised
   ══════════════════════════════════════════════════════ */
.navbar {
  height: 56px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(220,230,244,.4);
  box-shadow: 0 1px 3px rgba(10,22,40,.03);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.navbar.scrolled {
  background: rgba(255,255,255,.88);
  box-shadow: 0 4px 20px rgba(10,22,40,.06);
}
:root.dark .navbar {
  background: rgba(9,17,30,.78);
  border-bottom-color: rgba(26,46,74,.5);
  box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
}
:root.dark .navbar.scrolled {
  background: rgba(9,17,30,.92);
  box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
}
.nav-brand, .logo {
  font-family: 'Sora', sans-serif;
  font-size: 1.18rem; font-weight: 900;
  background: linear-gradient(135deg, #1d4ed8, #2563eb, #0ea5e9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: -.04em; text-decoration: none; cursor: pointer;
  user-select: none;
}
.nav-links {
  display: flex; align-items: center; gap: .1rem;
  list-style: none; overflow: hidden; flex-wrap: nowrap;
}
.nav-links li { list-style: none; }
.nav-links li a, .nav-links a {
  display: flex; align-items: center; gap: .25rem;
  padding: .38rem .55rem; border-radius: 9px;
  font-size: .73rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-links li a:hover, .nav-links a:hover { background: var(--sky); color: var(--blue); }
.nav-links li a.active, .nav-links a.active {
  background: linear-gradient(135deg, var(--sky), #dbeafe);
  color: var(--blue); font-weight: 700;
}
.nav-actions {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
}
/* Settings gear — unified */
#cerdikSettingsBtn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; color: var(--text-muted);
  transition: all .18s; flex-shrink: 0;
}
#cerdikSettingsBtn:hover { background: var(--sky); color: var(--blue); border-color: var(--blue-light); transform: rotate(20deg); }
:root.dark #cerdikSettingsBtn { background: var(--surface3); border-color: var(--border); color: var(--text-muted); }

/* ══════════════════════════════════════════════════════
   DASHBOARD HERO — unified base, role-specific accent via modifier
   ══════════════════════════════════════════════════════ */
.dash-hero {
  border-radius: 26px;
  padding: 2.25rem 2.5rem;
  margin-bottom: 1.75rem;
  position: relative; overflow: hidden;
  box-shadow: 0 12px 40px rgba(7,16,32,.3);
  color: white;
}
/* Student — blue ocean */
.dash-hero.student {
  background: linear-gradient(135deg, #071020 0%, #0d2060 28%, #1a50b8 60%, #0d8fbf 85%, #06b0d8 100%);
}
/* Teacher — blue to teal/emerald */
.dash-hero.teacher {
  background: linear-gradient(135deg, #071020 0%, #0c2060 25%, #1a50b8 50%, #0d8a7a 78%, #059669 100%);
}
.dash-hero::before {
  content: ''; position: absolute; top: -70px; right: -50px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.07), transparent 70%);
  pointer-events: none;
}
.dash-hero::after {
  content: ''; position: absolute; bottom: -90px; right: 130px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.04); pointer-events: none;
}
.dash-hero-inner {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1.5rem;
}
.dash-hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  padding: .28rem .85rem; border-radius: 100px;
  font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.9);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: .8rem;
}
.dash-hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; flex-shrink: 0; }
.dash-hero-title {
  font-family: 'Sora', sans-serif; font-size: 1.8rem; font-weight: 900;
  color: white; margin-bottom: .35rem; line-height: 1.15; letter-spacing: -.03em;
}
.dash-hero-sub { color: rgba(255,255,255,.7); font-size: .88rem; line-height: 1.55; }

/* Hero right — glass action buttons */
.dash-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.dash-hero-btn-white {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1.35rem; border-radius: 13px;
  background: white; color: var(--navy);
  border: none; font-weight: 700; font-size: .85rem;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.15);
  transition: transform .15s, box-shadow .15s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.dash-hero-btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.dash-hero-btn-glass {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1.35rem; border-radius: 13px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
  color: white; border: 1.5px solid rgba(255,255,255,.28);
  font-weight: 700; font-size: .85rem; cursor: pointer;
  transition: background .15s; font-family: 'Plus Jakarta Sans', sans-serif;
}
.dash-hero-btn-glass:hover { background: rgba(255,255,255,.22); }

/* Streak badge (student) */
.dash-streak {
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 18px;
  padding: 1.1rem 1.5rem; text-align: center; flex-shrink: 0;
}
.dash-streak-count {
  font-family: 'Sora', sans-serif; font-size: 1.75rem; font-weight: 900;
  color: white; line-height: 1;
}
.dash-streak-label { font-size: .7rem; color: rgba(255,255,255,.7); font-weight: 600; margin-top: .2rem; }

/* ══════════════════════════════════════════════════════
   STAT CARDS — unified, identical structure
   ══════════════════════════════════════════════════════ */
.dash-stat-grid {
  display: grid; gap: 1rem; margin-bottom: 1.75rem;
}
.dash-stat-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.dash-stat-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
@media(max-width:900px) {
  .dash-stat-grid.cols-4,
  .dash-stat-grid.cols-3 { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:480px) {
  .dash-stat-grid.cols-4,
  .dash-stat-grid.cols-3 { grid-template-columns: repeat(2,1fr); gap: .75rem; }
}
.dash-stat {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 1.25rem 1.3rem;
  box-shadow: 0 2px 12px rgba(10,22,40,.06);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  cursor: default; position: relative; overflow: hidden;
}
.dash-stat.clickable { cursor: pointer; }
.dash-stat.clickable:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(10,22,40,.1);
  border-color: var(--border-md);
}
.dash-stat-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; margin-bottom: .75rem;
}
.dash-stat-icon.blue   { background: linear-gradient(135deg,#eff6ff,#dbeafe); }
.dash-stat-icon.green  { background: linear-gradient(135deg,#f0fdf4,#dcfce7); }
.dash-stat-icon.amber  { background: linear-gradient(135deg,#fffbeb,#fef3c7); }
.dash-stat-icon.red    { background: linear-gradient(135deg,#fef2f2,#fee2e2); }
.dash-stat-icon.purple { background: linear-gradient(135deg,#f5f3ff,#ede9fe); }
.dash-stat-icon.teal   { background: linear-gradient(135deg,#f0fdfa,#ccfbf1); }
.dash-stat-icon.yellow { background: linear-gradient(135deg,#fefce8,#fef9c3); }
.dash-stat-badge {
  position: absolute; top: 1rem; right: 1rem;
  padding: .2rem .6rem; border-radius: 100px;
  font-size: .65rem; font-weight: 700; letter-spacing: .03em;
}
.dash-stat-val {
  font-family: 'Sora', sans-serif; font-size: 1.9rem; font-weight: 900;
  color: var(--text); line-height: 1; margin-bottom: .25rem; letter-spacing: -.04em;
}
.dash-stat-label { font-size: .775rem; color: var(--text-muted); font-weight: 600; }
:root.dark .dash-stat { background: var(--surface); border-color: var(--border); }
:root.dark .dash-stat.clickable:hover { border-color: var(--border-md); box-shadow: 0 10px 32px rgba(0,0,0,.3); }

/* ══════════════════════════════════════════════════════
   SECTION HEADER — unified
   ══════════════════════════════════════════════════════ */
.dash-section-header {
  display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem;
}
.dash-section-bar {
  width: 3.5px; height: 18px; border-radius: 100px; flex-shrink: 0;
}
.dash-section-bar.blue   { background: var(--blue); }
.dash-section-bar.coral  { background: var(--coral); }
.dash-section-bar.green  { background: var(--green); }
.dash-section-bar.purple { background: var(--purple); }
.dash-section-title {
  font-family: 'Sora', sans-serif; font-size: .8rem; font-weight: 800;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em;
}

/* ══════════════════════════════════════════════════════
   QUICK ACTION CARDS (teacher dashboard)
   ══════════════════════════════════════════════════════ */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.qa-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 18px; padding: 1.25rem;
  cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: 0 2px 12px rgba(10,22,40,.06);
}
.qa-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(10,22,40,.1); }
.qa-icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: .9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.qa-icon.blue   { background: linear-gradient(135deg,#1d4ed8,#60a5fa); }
.qa-icon.purple { background: linear-gradient(135deg,#7c3aed,#a78bfa); }
.qa-icon.orange { background: linear-gradient(135deg,#f97316,#fb923c); }
.qa-icon.green  { background: linear-gradient(135deg,#16a34a,#4ade80); }
.qa-title { font-family:'Sora',sans-serif; font-weight:700; font-size:.9rem; color:var(--text); margin-bottom:.2rem; }
.qa-sub   { font-size:.77rem; color:var(--text-muted); }
:root.dark .qa-card { background: var(--surface); border-color: var(--border); }

/* ══════════════════════════════════════════════════════
   NAV SHORTCUT LIST — unified (student features, teacher nav)
   ══════════════════════════════════════════════════════ */
.nav-shortcuts {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(10,22,40,.06);
}
.nav-shortcut-item {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
  text-decoration: none;
}
.nav-shortcut-item:last-child { border-bottom: none; }
.nav-shortcut-item:hover { background: var(--sky); }
:root.dark .nav-shortcut-item:hover { background: var(--surface4); }
.nav-shortcut-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0;
}
.nav-shortcut-name { font-weight: 700; color: var(--text); font-size: .875rem; line-height: 1.2; }
.nav-shortcut-sub  { font-size: .74rem; color: var(--text-muted); margin-top: .08rem; }
.nav-shortcut-arrow { margin-left: auto; font-weight: 800; font-size: .85rem; flex-shrink: 0; }
:root.dark .nav-shortcuts { background: var(--surface); border-color: var(--border); }

/* ══════════════════════════════════════════════════════
   JOIN CLASS BANNER (student only)
   ══════════════════════════════════════════════════════ */
.join-class-banner {
  background: var(--sky); border: 1.5px solid var(--blue-light);
  border-radius: 18px; padding: 1.15rem 1.4rem;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap;
}
.join-class-icon {
  width: 44px; height: 44px; background: var(--blue);
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 1.3rem; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.join-class-title { font-family:'Sora',sans-serif; font-weight:700; color:var(--navy); font-size:.9rem; margin-bottom:.12rem; }
.join-class-sub   { color:var(--text-muted); font-size:.82rem; }
:root.dark .join-class-banner { background: var(--sky); border-color: var(--sky2); }

/* ══════════════════════════════════════════════════════
   NOTIFICATION ITEMS — unified
   ══════════════════════════════════════════════════════ */
.notif-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: .9rem 1.1rem;
  display: flex; gap: .85rem; align-items: flex-start;
  transition: background .15s, border-color .15s;
}
.notif-card:hover { background: var(--sky); border-color: var(--sky2); }
.notif-card.unread { border-left: 3px solid var(--blue); }
.notif-card-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1rem;
}
.notif-card-title { font-weight: 700; font-size: .85rem; color: var(--text); line-height: 1.3; }
.notif-card-sub   { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
:root.dark .notif-card { background: var(--surface); border-color: var(--border); }
:root.dark .notif-card:hover { background: var(--surface4); border-color: var(--border-md); }

/* ══════════════════════════════════════════════════════
   INTERACTIVE UI — Premium Animations & Micro-interactions
   v2 — Added on top of existing design system
   ══════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeUp        { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes fadeIn        { from { opacity:0; } to { opacity:1; } }
@keyframes scalePop      { 0%{transform:scale(.88);opacity:0} 70%{transform:scale(1.04)} 100%{transform:scale(1);opacity:1} }
@keyframes slideRight    { from { opacity:0; transform:translateX(-14px); } to { opacity:1; transform:none; } }
@keyframes slideLeft     { from { opacity:0; transform:translateX(14px);  } to { opacity:1; transform:none; } }
@keyframes pulseGlow     { 0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.25)} 50%{box-shadow:0 0 0 8px rgba(37,99,235,0)} }
@keyframes wiggle        { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-6deg)} 75%{transform:rotate(6deg)} }
@keyframes float         { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes rippleOut     { to { transform:scale(3); opacity:0; } }
@keyframes countUp       { from { opacity:0; transform:translateY(8px) scale(.9); } to { opacity:1; transform:none; } }
@keyframes borderDash    { to { background-position: 100% 0; } }
@keyframes checkmark     { 0%{stroke-dashoffset:50} 100%{stroke-dashoffset:0} }
@keyframes successBounce { 0%{transform:scale(0)} 60%{transform:scale(1.18)} 80%{transform:scale(.94)} 100%{transform:scale(1)} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes dotBlink      { 0%,80%,100%{opacity:0;transform:scale(.5)} 40%{opacity:1;transform:scale(1)} }
@keyframes navActiveBar  { from{width:0;opacity:0} to{width:100%;opacity:1} }

/* ── Page enter animations ── */
.page.active            { animation: pageEnter .3s cubic-bezier(.16,1,.3,1) both; }
.page.active .stat-card { animation: fadeUp .4s var(--ease) both; }
.page.active .stat-card:nth-child(1) { animation-delay:.04s; }
.page.active .stat-card:nth-child(2) { animation-delay:.08s; }
.page.active .stat-card:nth-child(3) { animation-delay:.12s; }
.page.active .stat-card:nth-child(4) { animation-delay:.16s; }

/* ── Navbar active indicator (handled by border-bottom on .active) ── */
/* .nav-links li a.active::after — disabled, using border-bottom instead */
.nav-links li a { position: relative; }

/* ── Ripple effect on buttons ── */
.btn { overflow: hidden; position: relative; }
.btn .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.28);
  transform: scale(0); animation: rippleOut .55s ease-out forwards;
  pointer-events: none;
}

/* ── Card hover lift (enhanced) ── */
.card:hover,
.stat-card:hover,
.class-card-new:hover,
.note-card:hover,
.home-feat-card:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow: var(--shadow-md);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

/* ── Input focus ring animation ── */
input:focus, textarea:focus, select:focus {
  animation: none; /* reset */
  transition: border-color .15s, box-shadow .2s var(--ease-spring);
}

/* ── Floating label style for forms ── */
.form-float { position: relative; margin-bottom: 1.1rem; }
.form-float input, .form-float textarea {
  padding-top: 1.4rem; padding-bottom: .5rem;
}
.form-float label {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  font-size: .875rem; color: var(--text-subtle); font-weight: 500;
  transition: all .18s var(--ease); pointer-events: none; text-transform: none; letter-spacing: 0;
}
.form-float input:focus ~ label,
.form-float input:not(:placeholder-shown) ~ label,
.form-float textarea:focus ~ label,
.form-float textarea:not(:placeholder-shown) ~ label {
  top: .55rem; transform: none; font-size: .68rem;
  color: var(--blue); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* ── Skeleton loader ── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: shimmerBg 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-line  { height: .85rem; margin-bottom: .5rem; }
.skeleton-title { height: 1.2rem; width: 60%; margin-bottom: .85rem; }
.skeleton-avatar{ width: 38px; height: 38px; border-radius: 50%; }

/* ── Count-up number animation ── */
.stat-value[data-count] { animation: countUp .5s var(--ease-spring) both; }

/* ── Dot typing indicator ── */
.typing-dots span {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); margin: 0 2px;
  animation: dotBlink 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }

/* ── Success checkmark animation ── */
.success-check {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #34d399);
  display: flex; align-items: center; justify-content: center;
  animation: successBounce .5s var(--ease-spring) both;
  box-shadow: 0 8px 24px rgba(16,185,129,.3);
}

/* ── Animated gradient badge ── */
.badge-animated {
  background: linear-gradient(270deg, #2563eb, #7c3aed, #ec4899, #2563eb);
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
  color: white; border: none;
}

/* ── Progress bar animated fill ── */
.progress-bar-track { background: var(--surface3); border-radius: 100px; overflow: hidden; }
.progress-bar-fill  {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width .65s var(--ease);
  position: relative; overflow: hidden;
}
.progress-bar-fill::after {
  content: ''; position: absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: shimmer 2s ease-in-out infinite;
}

/* ── Pulse dot (live indicator) ── */
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.5);
  animation: pulseGlow 2s ease-in-out infinite;
  display: inline-block;
}

/* ── Stagger children ── */
.stagger > * { opacity: 0; animation: fadeUp .4s var(--ease) forwards; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .10s; }
.stagger > *:nth-child(3) { animation-delay: .15s; }
.stagger > *:nth-child(4) { animation-delay: .20s; }
.stagger > *:nth-child(5) { animation-delay: .25s; }
.stagger > *:nth-child(6) { animation-delay: .30s; }

/* ── Floating action button ── */
.fab {
  position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 200;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8, var(--blue));
  border: none; color: white; font-size: 1.4rem; cursor: pointer;
  box-shadow: var(--shadow-blue); display: flex; align-items: center; justify-content: center;
  transition: transform .22s var(--ease-spring), box-shadow .22s;
  animation: scalePop .4s var(--ease-spring) both .3s;
}
.fab:hover  { transform: scale(1.12) rotate(10deg); box-shadow: 0 12px 36px rgba(37,99,235,.4); }
.fab:active { transform: scale(.96); }

/* ── Tooltip ── */
[data-tip] { position: relative; }
[data-tip]::before {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) scale(.85);
  background: var(--navy); color: white; font-size: .72rem; font-weight: 600;
  padding: .3rem .75rem; border-radius: var(--radius-xs); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s var(--ease);
  z-index: 100;
}
[data-tip]::after {
  content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%) scale(.85);
  border: 5px solid transparent; border-top-color: var(--navy);
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s var(--ease);
}
[data-tip]:hover::before, [data-tip]:hover::after {
  opacity: 1; transform: translateX(-50%) scale(1);
}

/* ── Scroll reveal (class added by JS) ── */
.reveal       { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ── Tab switch animation ── */
.tab-content { animation: fadeUp .22s var(--ease) both; }

/* ── Toast/notification ── */
.toast-enter { animation: toastSlide .3s var(--ease-spring) both; }
.toast-exit  { animation: toastSlide .25s var(--ease-in) reverse both; }

/* ── Drag handle ── */
.drag-handle {
  cursor: grab; color: var(--text-subtle); font-size: 1rem;
  transition: color .15s;
}
.drag-handle:hover { color: var(--text-muted); }
.drag-handle:active { cursor: grabbing; }

/* ── Interactive quiz option hover ── */
.quiz-opt2 {
  transition: border-color .15s, background .15s, transform .15s var(--ease-spring);
}
.quiz-opt2:hover:not(.selected) {
  border-color: var(--blue-light);
  background: var(--sky);
  transform: translateX(4px);
}
.quiz-opt2.selected {
  animation: scalePop .25s var(--ease-spring);
}

/* ── Like button pulse ── */
.like-anim { animation: heartPop .35s var(--ease-spring); }

/* ── Smooth page section transitions ── */
.section { animation: fadeUp .35s var(--ease) both; }

/* ── Hero banner gradient shift ── */
.home-hero, .forum-header-banner, .dash-hero {
  background-size: 200% 200% !important;
  animation: gradientShift 12s ease infinite;
}

/* ── Input shake on error ── */
@keyframes shakeX { 0%,100%{transform:none} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.input-error { animation: shakeX .4s var(--ease) both; border-color: var(--coral); }

/* ── Score counter animation ── */
.score-anim {
  display: inline-block;
  animation: scalePop .4s var(--ease-spring) both;
}

/* ── Dark mode transition ── */
:root { transition: background .3s, color .3s; }
:root *, :root *::before, :root *::after {
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
/* Exclude transforms from the blanket transition */
.btn, .card, .stat-card, .fab, .quiz-opt2, .home-feat-card {
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .22s var(--ease), transform .22s var(--ease);
}

/* ── Responsive motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@keyframes dotPulse { 0%,80%,100%{opacity:0;transform:scale(.5)} 40%{opacity:1;transform:scale(1)} }


/* ══════════════════════════════════════════════════════
   UI ENHANCEMENTS — Premium Polish v2
   ══════════════════════════════════════════════════════ */

/* ── Empty state (dark mode) ── */
:root.dark .empty-state { color: var(--text-muted); }
:root.dark .empty-state h4 { color: var(--text); }
:root.dark .empty-state p { color: var(--text-muted); }

/* ── Admin sidebar (dark mode already in admin page CSS) ── */
:root.dark .admin-sidebar { background: linear-gradient(180deg, #020810, #04101e, #060e28); }

/* ── Premium button enhancements ── */
.btn {
  letter-spacing: .01em;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.btn-primary {
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition: left .4s ease;
}
.btn-primary:hover::before { left: 100%; }

/* ── Card hover micro-animation ── */
.stat-card, .class-card-new, .note-card {
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), border-color .2s;
}
.stat-card:hover, .class-card-new:hover, .note-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(10,22,40,.12);
  border-color: var(--blue-light);
}

/* ── Premium form focus ring ── */
input:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3.5px rgba(37,99,235,.12) !important;
  outline: none !important;
}
:root.dark input:focus, :root.dark textarea:focus, :root.dark select:focus {
  box-shadow: 0 0 0 3.5px rgba(37,99,235,.2) !important;
}

/* ── Enhanced badge pill ── */
.badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .02em;
  line-height: 1.3;
}

/* ── Home hero shimmer effect ── */
.home-hero::before, .dash-hero::before {
  content: ''; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.04) 0%, transparent 70%);
  animation: heroShimmer 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroShimmer {
  0% { transform: translate(-5%, -5%) rotate(0deg); }
  100% { transform: translate(5%, 5%) rotate(3deg); }
}

/* ── Enhanced progress bars ── */
.progress-bar-fill {
  position: relative;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

/* ── Table row hover ── */
table tbody tr {
  transition: background .12s ease;
}
table tbody tr:hover {
  background: var(--sky);
}
:root.dark table tbody tr:hover {
  background: var(--surface3);
}

/* ── Premium scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 100px;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-md); }
:root.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }
:root.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* ── Link styling within content ── */
.message-content a, .note-content a, .forum-body a {
  color: var(--blue); text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.message-content a:hover { color: var(--blue2); }

/* ── Premium select dropdown ── */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-right: 2.2rem !important;
}
:root.dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a7898' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ── Loading skeleton pulse ── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size: 200% 100% !important;
}

/* ── Smooth page content fade ── */
.page.active {
  animation: pageFade .25s ease both;
}
@keyframes pageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Focus visible for keyboard nav ── */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Text selection color ── */
::selection {
  background: rgba(37,99,235,.2);
  color: var(--text);
}
:root.dark ::selection {
  background: rgba(59,130,246,.3);
}


/* ── Planner dark mode ── */
:root.dark .planner-task, :root.dark .task-item {
  background: var(--surface); border-color: var(--border); color: var(--text);
}
:root.dark .planner-task:hover, :root.dark .task-item:hover {
  background: var(--surface3);
}
:root.dark .planner-header { border-color: var(--border); }

/* ── Ensure user chat bubble text is always white ── */
.message.user .message-content,
.message.user .message-content *,
.message.user .message-content p,
.message.user .message-content strong,
.message.user .message-content span,
.message.user .message-content a,
.message.user .message-content code {
  color: #ffffff;
}

/* ── Forum content dark readability ── */
:root.dark .forum-body, :root.dark .forum-post-body { color: var(--text); }
:root.dark .forum-meta { color: var(--text-muted); }

/* ── Bank soalan dark readability ── */
:root.dark .bank-card-name { color: var(--text); }
:root.dark .bank-card-meta { color: var(--text-muted); }
:root.dark .bank-card-footer { color: var(--text-muted); }

/* ── Quiz option dark mode readability ── */
:root.dark .quiz-opt2 {
  background: var(--surface3); border-color: var(--border); color: var(--text);
}
:root.dark .quiz-opt2:hover:not(.selected) {
  background: var(--sky); border-color: var(--blue-light); color: var(--blue);
}
:root.dark .quiz-opt2.selected {
  background: rgba(37,99,235,.15); border-color: var(--blue); color: var(--blue);
}

/* ══════════════════════════════════════════════════════
   MISSING DARK MODE — Final comprehensive coverage
   ══════════════════════════════════════════════════════ */

/* ── btn-ghost dark mode ── */
:root.dark .btn-ghost {
  color: var(--text-muted);
  border-color: var(--border);
  background: transparent;
}
:root.dark .btn-ghost:hover {
  background: var(--surface3);
  color: var(--text);
}

/* ── Modal overlay + content ── */
.modal-overlay {
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
}
:root.dark .modal-overlay { background: rgba(0,0,0,.7); }
:root.dark .modal-content  { background: var(--surface); border-color: var(--border); }
:root.dark .modal-header   { border-color: var(--border); }
:root.dark .modal-footer   { border-color: var(--border); }

/* ── Analytics chart cards ── */
:root.dark .an-chart-card {
  background: var(--surface);
  border-color: var(--border);
}
:root.dark .an-chart-title { color: var(--text); }
:root.dark .an-chart-sub   { color: var(--text-muted); }

/* ── Score circle (quiz result) ── */
.score-circle {
  width: 120px; height: 120px; border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif;
  background: var(--surface);
  border: 4px solid var(--blue);
}
.score-circle .score-pct {
  font-size: 2rem; font-weight: 900; color: var(--blue); line-height: 1;
}
.score-circle .score-grade {
  font-size: .8rem; color: var(--text-muted); font-weight: 700;
}
:root.dark .score-circle { background: var(--surface); border-color: var(--blue); }

/* ── Admin table dark ── */
:root.dark .admin-table { color: var(--text); }
:root.dark .admin-table th {
  background: var(--surface3);
  color: var(--text-muted);
  border-color: var(--border);
}
:root.dark .admin-table td { border-color: var(--border); color: var(--text); }
:root.dark .admin-table tbody tr:hover td { background: var(--surface3); }

/* ── Planner dark complete ── */
:root.dark .planner-day-col { background: var(--surface); border-color: var(--border); }
:root.dark .planner-day-header { color: var(--text); border-color: var(--border); }
:root.dark .planner-task {
  background: var(--surface3); border-color: var(--border);
  color: var(--text);
}
:root.dark .planner-task:hover { background: var(--surface2); }

/* ── Forum post dark readability ── */
:root.dark .forum-post-card { background: var(--surface); border-color: var(--border); }
:root.dark .forum-post-title { color: var(--text); }
:root.dark .forum-post-body, :root.dark .forum-body { color: var(--text); }
:root.dark .forum-post-meta, :root.dark .forum-meta { color: var(--text-muted); }
:root.dark .forum-reply-card { background: var(--surface2); border-color: var(--border); }

/* ── Notes dark ── */
:root.dark .note-card { background: var(--surface); border-color: var(--border); }
:root.dark .note-title { color: var(--text); }
:root.dark .note-content { color: var(--text); }
:root.dark .note-meta { color: var(--text-muted); }

/* ── Quiz builder dark ── */
:root.dark .qb-question-card { background: var(--surface); border-color: var(--border); }
:root.dark .qb-q-text { color: var(--text); border-bottom-color: var(--border); }
:root.dark .qb-opt-input { color: var(--text); }
:root.dark .qb-option-row { background: var(--surface3); border-color: var(--border); }
:root.dark .qb-option-row:hover { background: var(--sky); border-color: var(--blue-light); }
:root.dark .qb-opt-letter { background: var(--surface2); color: var(--text-muted); }

/* ── Class card dark ── */
:root.dark .class-card-new { background: var(--surface); border-color: var(--border); }
:root.dark .class-card-name { color: var(--text); }
:root.dark .class-card-meta { color: var(--text-muted); }

/* ── Notification toast dark ── */
:root.dark .notification-toast {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
:root.dark .notification-toast.success { border-left-color: var(--green); }
:root.dark .notification-toast.error   { border-left-color: #ef4444; }
:root.dark .notification-toast.info    { border-left-color: var(--blue); }
:root.dark .notification-toast.warning { border-left-color: var(--amber); }

/* ── Community notes dark ── */
:root.dark .community-note-card { background: var(--surface); border-color: var(--border); }

/* ── Increase tiny fonts to minimum readable size ── */
.nav-role-badge { font-size: .62rem !important; }
.stat-label     { font-size: .75rem !important; }

/* ── Loading shimmer dark ── */
:root.dark .skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
}

/* ── Fix any remaining inline white backgrounds via class ── */
:root.dark [style*="background:white"],
:root.dark [style*="background: white"],
:root.dark [style*="background:#fff"],
:root.dark [style*="background: #fff"],
:root.dark [style*="background:#ffffff"],
:root.dark [style*="background: #ffffff"] {
  background: var(--surface);
}

/* Force dark text readable in dark mode for any remaining hardcoded dark text */
:root.dark [style*="color:#0b1736"],
:root.dark [style*="color: #0b1736"],
:root.dark [style*="color:#1e293b"],
:root.dark [style*="color: #1e293b"],
:root.dark [style*="color:#334155"],
:root.dark [style*="color: #334155"] {
  color: var(--text);
}

/* ══════════════════════════════════════════════════════
   PREMIUM POLISH — v3 Enhancements
   ══════════════════════════════════════════════════════ */

/* ── Glassmorphism cards ── */
.glass {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.25) !important;
}
:root.dark .glass {
  background: rgba(15,23,42,.6);
  border-color: rgba(255,255,255,.08);
}

/* ── Gradient accent top border on cards ── */
.accent-top {
  position: relative; overflow: hidden;
}
.accent-top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--purple));
  border-radius: 3px 3px 0 0;
}

/* ── Better empty states ── */
.empty-state {
  text-align: center; padding: 4rem 2rem;
}
.empty-state .empty-icon {
  font-size: 3.5rem; margin-bottom: 1rem;
  animation: float 3s ease-in-out infinite;
}
.empty-state h4 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 1.1rem; color: var(--text); margin-bottom: .5rem;
}
.empty-state p {
  color: var(--text-muted); font-size: .875rem; max-width: 320px; margin: 0 auto;
  line-height: 1.65;
}

/* ── Stat card premium style ── */
.stat-card {
  position: relative; overflow: hidden;
}
.stat-card::after {
  content: ''; position: absolute; top: -30%; right: -20%;
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.06) 0%, transparent 70%);
  pointer-events: none;
}
.stat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: .75rem;
}
:root.dark .stat-card::after {
  background: radial-gradient(circle, rgba(59,130,246,.08) 0%, transparent 70%);
}

/* ── Dashboard hero polish ── */
.dash-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-2xl); padding: 2rem 2.25rem;
  border: none; box-shadow: 0 8px 32px rgba(10,22,40,.12);
}
.dash-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none; opacity: .5;
}

/* ── Hover glow effect on interactive cards ── */
.home-feat-card::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit; opacity: 0;
  background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(14,165,233,.1), rgba(139,92,246,.1));
  transition: opacity .3s;
  z-index: 0; pointer-events: none;
}
.home-feat-card:hover::after { opacity: 1; }
.home-feat-card > * { position: relative; z-index: 1; }

/* ── Chat input glow on focus ── */
.chat-input-row:focus-within {
  box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 4px 16px rgba(37,99,235,.08) !important;
}

/* ── Quiz answer option — satisfying click ── */
.quiz-opt2:active, .bank-subject-card:active, .home-feat-card:active {
  transform: scale(.97) !important;
  transition: transform .08s !important;
}

/* ── Smooth number counting ── */
.count-up {
  display: inline-block;
  animation: countPop .4s cubic-bezier(.4,0,.2,1) both;
}
@keyframes countPop { from{opacity:0;transform:translateY(6px) scale(.9)} to{opacity:1;transform:none} }

/* ── Badge glow ── */
.badge-green { box-shadow: 0 0 8px rgba(16,185,129,.2); }
.badge-blue  { box-shadow: 0 0 8px rgba(37,99,235,.2); }

/* ── Gradient text utility ── */
.text-gradient {
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
:root.dark .text-gradient {
  background: linear-gradient(135deg, #60a5fa, #38bdf8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Premium divider ── */
.section-divider {
  height: 1px; margin: 2rem 0;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ── Tooltip upgrade ── */
[data-tip]::before {
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  padding: .35rem .85rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.08);
}

/* ── Better code blocks in chat ── */
.message-content pre, .message-content code {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .15rem .45rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .82rem;
}
.message-content pre {
  padding: .85rem 1rem; margin: .5rem 0;
  overflow-x: auto; display: block;
  max-height: 300px;
}
.message-content pre code {
  background: none; border: none; padding: 0;
}
:root.dark .message-content pre, :root.dark .message-content code {
  background: #0d1117;
  border-color: #21262d;
  color: #c9d1d9;
}

/* ── Forum image preview rounded ── */
.forum-image-preview {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}

/* ── Smooth dark mode transition ── */
:root {
  transition: background-color .35s ease, color .35s ease;
}
.navbar, .btn, .card, .stat-card, .page,
input, textarea, select, .modal-content {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* ══════════════════════════════════════════════════════
   HIGH IMPACT #1 — CONFETTI CELEBRATION
   ══════════════════════════════════════════════════════ */
.confetti-container {
  position: fixed; inset: 0; z-index: 99998; pointer-events: none; overflow: hidden;
}
.confetti-piece {
  position: absolute; top: -20px;
  width: 10px; height: 10px; border-radius: 2px;
  animation: confettiFall var(--fall-time, 3s) ease-in forwards;
  opacity: 0;
}
@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(.3); }
}

/* ══════════════════════════════════════════════════════
   HIGH IMPACT #2 — SKELETON LOADERS (enhanced)
   ══════════════════════════════════════════════════════ */
.skel-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.skel-circle { width: 40px; height: 40px; border-radius: 50%; }
.skel-block  { border-radius: var(--radius-sm); }
.skel-card {
  border-radius: var(--radius-xl); padding: 1.25rem;
  border: 1.5px solid var(--border); background: var(--surface);
  margin-bottom: .75rem;
}
.skel-card-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: .75rem; }

/* ══════════════════════════════════════════════════════
   HIGH IMPACT #3 — BACK TO TOP BUTTON
   ══════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 900;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.back-to-top.visible {
  opacity: 1; visibility: visible; transform: none;
}
.back-to-top:hover {
  background: var(--blue); color: white; border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,99,235,.35);
}
:root.dark .back-to-top {
  background: var(--surface3); border-color: var(--border);
}
:root.dark .back-to-top:hover { background: var(--blue); border-color: var(--blue); }

/* ══════════════════════════════════════════════════════
   HIGH IMPACT #4 — IMAGE LIGHTBOX
   ══════════════════════════════════════════════════════ */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 99990;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
  cursor: zoom-out;
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: 90vw; max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 16px 60px rgba(0,0,0,.5);
  transform: scale(.9); transition: transform .3s cubic-bezier(.4,0,.2,1);
  object-fit: contain;
}
.lightbox-overlay.active .lightbox-img { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: white; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.2); }

/* Clickable images indicator */
.forum-image-preview img, .message-content img, .note-content img,
.community-note-card img, .question-image img {
  cursor: zoom-in; border-radius: 8px;
  transition: transform .15s, box-shadow .15s;
}
.forum-image-preview img:hover, .message-content img:hover, .note-content img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

/* ══════════════════════════════════════════════════════
   HIGH IMPACT #5 — PREMIUM EMPTY STATES
   ══════════════════════════════════════════════════════ */
.empty-premium {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4rem 2rem; min-height: 40vh;
}
.empty-premium .empty-visual {
  width: 120px; height: 120px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--sky2));
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; margin-bottom: 1.5rem;
  animation: float 4s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(37,99,235,.1);
}
:root.dark .empty-premium .empty-visual {
  background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(14,165,233,.08));
}
.empty-premium h4 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 1.15rem; color: var(--text); margin-bottom: .5rem;
}
.empty-premium p {
  color: var(--text-muted); font-size: .875rem;
  max-width: 340px; line-height: 1.7; margin-bottom: 1.5rem;
}
.empty-premium .empty-action {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
}

/* ══════════════════════════════════════════════════════
   PREMIUM FEATURES CSS — Cursor glow, lightbox, badges
   ══════════════════════════════════════════════════════ */

/* ── Cursor glow on hoverable cards ── */
.home-feat-card,
.stat-card,
.class-card-new,
.bank-subject-card,
.note-card {
  position: relative; overflow: hidden;
}
.home-feat-card::before,
.stat-card::before,
.class-card-new::before,
.bank-subject-card::before,
.note-card::before {
  content: ''; position: absolute;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 70%);
  top: var(--mouse-y, 50%); left: var(--mouse-x, 50%);
  transform: translate(-50%, -50%);
  pointer-events: none; opacity: 0;
  transition: opacity .3s;
}
.home-feat-card:hover::before,
.stat-card:hover::before,
.class-card-new:hover::before,
.bank-subject-card:hover::before,
.note-card:hover::before {
  opacity: 1;
}
:root.dark .home-feat-card::before,
:root.dark .stat-card::before,
:root.dark .class-card-new::before,
:root.dark .bank-subject-card::before,
:root.dark .note-card::before {
  background: radial-gradient(circle, rgba(59,130,246,.12) 0%, transparent 70%);
}

/* ── Lightbox overlay ── */
#lightboxOverlay { backdrop-filter: blur(12px); }
#lightboxImg { border: 2px solid rgba(255,255,255,.1); }

/* ── Achievement popup ── */
@keyframes achievePop {
  0% { transform: translateX(-50%) translateY(-20px) scale(.9); opacity: 0; }
  60% { transform: translateX(-50%) translateY(0) scale(1.03); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

/* ── Scroll progress bar ── */
#scrollProgressBar {
  box-shadow: 0 0 12px rgba(37,99,235,.5), 0 0 4px rgba(37,99,235,.3);
}

/* ── Back to top button ── */
#backToTopBtn {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
:root.dark #backToTopBtn {
  background: var(--surface3);
  border-color: var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

/* ── Confetti canvas ── */
#confettiCanvas { pointer-events: none !important; }

/* ── Breadcrumb bar ── */
#breadcrumbBar a:hover { text-decoration: underline !important; }

/* ── Quiz correct answer flash ── */
.correct-flash {
  animation: correctFlash .5s ease both;
}
@keyframes correctFlash {
  0%   { background: rgba(34,197,94,.25); }
  50%  { background: rgba(34,197,94,.15); }
  100% { background: transparent; }
}

/* ── Nav emoji icon wrapper (prevents double-emoji from cache) ── */
.nav-ico {
  display: inline-block;
  font-size: .92em;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════
   OFFLINE BANNER & GLOBAL UX IMPROVEMENTS
   ══════════════════════════════════════════════════════ */
.offline-banner {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white; text-align: center; padding: .6rem 1rem;
  font-size: .82rem; font-weight: 700;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
  animation: slideUpBanner .3s ease;
}
@keyframes slideUpBanner { from { transform: translateY(100%); } to { transform: none; } }
.offline-banner.show { display: block; }
.offline-banner button {
  margin-left: .75rem; padding: .3rem .8rem;
  background: rgba(255,255,255,.2); color: white; border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px; cursor: pointer; font-size: .75rem; font-weight: 700;
}

/* Loading timeout retry button */
.retry-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .9rem; background: var(--blue); color: white;
  border: none; border-radius: 8px; cursor: pointer;
  font-size: .78rem; font-weight: 700; margin-top: .5rem;
}
.retry-btn:hover { opacity: .9; }

/* Image lazy loading placeholder */
img[loading="lazy"] { background: var(--surface2); }

/* Focus styles for interactive elements */
.chat-chip:focus-visible,
.chat-intro-item:focus-visible,
.chat-send-btn:focus-visible,
.chat-attach-btn:focus-visible,
.btn:focus-visible,
button:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════
   NAV — Mobile overflow fix (13 items)
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-menu {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; flex-wrap: nowrap !important;
  }
  .nav-menu::-webkit-scrollbar { display: none; }
  .nav-menu li a { white-space: nowrap; padding: .35rem .55rem; font-size: .72rem; }
  .nav-menu li a span:not(.nav-ico) { display: none; }
  .nav-menu li a .nav-ico { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .nav-menu li a { padding: .3rem .4rem; }
}

/* ══════════════════════════════════════════════════════
   PAGE TRANSITIONS — SPA-like smooth page swaps
   ══════════════════════════════════════════════════════ */
/* pageEnter animation — applied via .page.active rule above */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.page-exit {
  animation: pageExit .15s ease both !important;
}
@keyframes pageExit {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* ══════════════════════════════════════════════════════
   SKELETON SHIMMER — Premium Loading States
   ══════════════════════════════════════════════════════ */
.skel {
  background: var(--surface2);
  border-radius: 10px;
  position: relative; overflow: hidden;
}
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  animation: shimmer 1.5s ease-in-out infinite;
  transform: translateX(-100%);
}
:root.dark .skel::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
}
@keyframes shimmer { to { transform: translateX(100%); } }

.skel-text   { height: 14px; border-radius: 6px; }
.skel-title  { height: 20px; width: 60%; border-radius: 6px; }
.skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skel-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 1rem; position: relative; overflow: hidden;
}
.skel-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
  animation: shimmer 1.5s ease-in-out infinite;
  transform: translateX(-100%);
}
:root.dark .skel-card::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 50%, transparent 100%);
}
:root.dark .skel { background: var(--surface3); }
:root.dark .skel-card { background: var(--surface3); border-color: var(--border); }

/* Stat card skeleton */
.skel-stat { text-align: center; }
.skel-stat .skel { margin: 0 auto; }

/* Row skeleton (quiz list, class list) */
.skel-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1rem; border: 1.5px solid var(--border);
  border-radius: 12px; margin-bottom: .5rem; background: var(--surface);
}
:root.dark .skel-row { background: var(--surface3); border-color: var(--border); }

/* ══════════════════════════════════════════════════════════════
   FORUM STYLES (shared between student + teacher)
   ══════════════════════════════════════════════════════════════ */
.forum-section { max-width: 860px; }
.forum-header-banner {
  background:linear-gradient(135deg,#1e3a8a 0%,#4f46e5 60%,#7c3aed 100%);
  border-radius:var(--radius-xl); padding:2.5rem 2rem; margin-bottom:1.5rem;
  position:relative; overflow:hidden; color:white;
}
.forum-header-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.1) 0%, transparent 50%),
             radial-gradient(circle at 20% 80%, rgba(255,255,255,.06) 0%, transparent 40%);
}
.forum-header-inner { display:flex; align-items:center; gap:1rem; position:relative; z-index:1; flex-wrap:wrap; }
.forum-header-info { flex:1; }
.forum-header-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.15); backdrop-filter:blur(4px);
  padding:.28rem .85rem; border-radius:100px; font-size:.75rem; font-weight:700;
  margin-bottom:.45rem; border:1px solid rgba(255,255,255,.2);
}
.forum-header-badge .dot {
  width:8px; height:8px; border-radius:50%; background:#34d399;
  box-shadow:0 0 6px #34d399; animation:livePulse 2s infinite;
}
.forum-header-title {
  font-family:'Sora',sans-serif; font-size:1.65rem; font-weight:900;
  margin:0 0 .25rem; text-shadow:0 2px 8px rgba(0,0,0,.2);
  color:white !important;
}
.forum-header-sub { color:rgba(255,255,255,.7); font-size:.875rem; margin:0; }

.forum-post-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.65rem 1.25rem; border-radius:12px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  color:white; font-weight:800; font-size:.88rem;
  border:1.5px solid rgba(255,255,255,.25); cursor:pointer;
  transition:all .2s var(--ease-spring); white-space:nowrap;
}
.forum-post-btn:hover  { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.28); }
.forum-post-btn:active { transform:scale(.97); }
.forum-post-btn.active {
  background:rgba(255,255,255,.3); border-color:rgba(255,255,255,.5);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}

.forum-compose-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-xl); padding:1.75rem;
  margin-bottom:1.25rem; box-shadow:var(--shadow-card);
  display:none; animation:fadeSlideDown .3s var(--ease-spring);
}
.forum-compose-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem; padding-bottom:.85rem; border-bottom:1px solid var(--border);
}
.forum-compose-header-icon {
  display:flex; align-items:center; gap:.5rem;
  font-family:'Sora',sans-serif; font-weight:800; font-size:1rem; color:var(--navy);
}
.forum-compose-close {
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--border);
  background:var(--surface2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s; color:var(--text-muted); font-size:.9rem;
}
.forum-compose-close:hover { background:#fef2f2; color:#ef4444; border-color:#fca5a5; transform:rotate(90deg); }

.forum-input {
  width:100%; padding:.75rem 1rem; border:1.5px solid var(--border);
  border-radius:12px; font-size:.88rem; background:var(--surface2);
  color:var(--text); transition:all .15s; font-family:inherit; box-sizing:border-box;
}
.forum-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.1); outline:none; }
.forum-input-area {
  min-height:120px; resize:vertical; line-height:1.6;
}
.forum-submit-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.65rem 1.5rem; border-radius:12px; font-weight:800;
  background:linear-gradient(135deg,#1e3a8a,#3b82f6); color:white;
  border:none; cursor:pointer; transition:all .2s; font-size:.88rem;
}
.forum-submit-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(59,130,246,.35); }

/* ── Post card ── */
.forum-post-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-xl); padding:1.35rem 1.5rem;
  margin-bottom:.85rem;
  transition:box-shadow .2s, border-color .2s, transform .2s;
  box-shadow:var(--shadow-card);
}
.forum-post-card:hover {
  box-shadow:var(--shadow-md); border-color:var(--border-md);
  transform:translateY(-2px);
}
.forum-author-row { display:flex; align-items:center; gap:.65rem; margin-bottom:.85rem; }
.forum-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:800; font-size:.875rem;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.forum-avatar.student  { background:linear-gradient(135deg,#1d4ed8,#0ea5e9); }
.forum-avatar.reply    { background:linear-gradient(135deg,#7c3aed,#8b5cf6); }
.forum-avatar.teacher  { background:linear-gradient(135deg,#1e3a8a,#2563eb); }
.forum-author-name     { font-size:.875rem; font-weight:700; color:var(--text); }
.forum-author-time     { font-size:.72rem; color:var(--text-muted); margin-top:.05rem; }
.forum-post-title {
  font-family:'Sora',sans-serif; font-size:.975rem; font-weight:800;
  color:var(--text); margin-bottom:.4rem; line-height:1.4;
  cursor:pointer; transition:color .15s;
}
.forum-post-title:hover { color:var(--blue); }
.forum-post-preview {
  color:var(--text-mid); font-size:.875rem; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; cursor:pointer; margin-bottom:.75rem;
}
.forum-post-image {
  width:100%; max-height:280px; object-fit:cover;
  border-radius:var(--radius-lg); margin-bottom:.85rem;
  border:1px solid var(--border); cursor:zoom-in;
  transition:opacity .15s, transform .2s; display:block;
}
.forum-post-image:hover { opacity:.92; transform:scale(1.005); }
.forum-action-bar {
  display:flex; align-items:center; gap:.5rem;
  padding-top:.85rem; border-top:1px solid var(--border); flex-wrap:wrap;
}
.forum-action-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.38rem .9rem; border-radius:100px;
  border:1.5px solid var(--border); background:var(--surface2);
  color:var(--text-muted); font-size:.79rem; font-weight:700;
  cursor:pointer; transition:all .18s;
  font-family:'Plus Jakarta Sans',sans-serif; white-space:nowrap;
  position:relative; overflow:hidden;
}
.forum-action-btn:hover {
  background:var(--sky); color:var(--blue);
  border-color:var(--blue-light); transform:translateY(-1px);
}
.forum-action-btn:active  { transform:scale(.97); }
.forum-action-btn.liked   { background:rgba(34,197,94,.1); color:var(--green); border-color:#86efac; }
.forum-action-btn.liked:hover { background:rgba(34,197,94,.16); }
@keyframes heartPop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.35); }
  70%  { transform:scale(.9); }
  100% { transform:scale(1); }
}
.forum-action-btn.like-anim { animation:heartPop .35s var(--ease-spring); }
.forum-detail-card {
  background:var(--surface); border-radius:var(--radius-xl);
  border:1.5px solid var(--border); padding:1.75rem;
  margin-bottom:1.25rem; box-shadow:var(--shadow-sm);
}
.forum-detail-title {
  font-family:'Sora',sans-serif; font-size:1.3rem; font-weight:900;
  color:var(--text); margin-bottom:.85rem; line-height:1.3;
}
.forum-detail-body {
  color:var(--text-mid); line-height:1.8; font-size:.95rem; margin-bottom:1.25rem;
  white-space:pre-wrap; word-break:break-word;
}
.forum-reply-composer {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-xl); padding:1.25rem; margin-top:1rem;
}
:root.dark .forum-post-card    { background:var(--surface); border-color:var(--border); }
:root.dark .forum-compose-card { background:var(--surface); border-color:var(--border); }
:root.dark .forum-reply-composer { background:var(--surface); border-color:var(--border); }
:root.dark .forum-input          { background:var(--surface); border-color:var(--border); color:var(--text); }
:root.dark .forum-input:focus    { background:var(--surface4); border-color:var(--blue); }
:root.dark .forum-action-btn     { background:var(--surface3); border-color:var(--border); }
:root.dark .forum-action-btn:hover { background:var(--surface4); }
:root.dark .forum-detail-card    { background:var(--surface); border-color:var(--border); }


/* ── UI UTILITY CLASSES ── */
.u-center { text-align:center; }
.u-flex { display:flex; align-items:center; }
.u-flex-between { display:flex; align-items:center; justify-content:space-between; }
.u-flex-wrap { display:flex; flex-wrap:wrap; gap:var(--space-sm); }
.u-gap-sm { gap:var(--space-sm); }
.u-gap-md { gap:var(--space-md); }
.u-muted { color:var(--text-muted); font-size:var(--text-sm); }
.u-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-md); transition:box-shadow .15s; }
.u-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.06); }
.u-section-title { font-family:'Sora',sans-serif; font-size:var(--text-md); font-weight:700; color:var(--navy); margin-bottom:var(--space-sm); }
.u-empty { text-align:center; padding:var(--space-2xl) var(--space-lg); }
.u-empty-icon { font-size:2.5rem; margin-bottom:var(--space-sm); }
.u-badge { display:inline-flex; align-items:center; padding:.2rem .6rem; border-radius:100px; font-size:var(--text-xs); font-weight:600; }
.u-badge-success { background:rgba(34,197,94,.1); color:#16a34a; }
.u-badge-warning { background:rgba(245,158,11,.1); color:#d97706; }
.u-badge-danger { background:rgba(239,68,68,.1); color:#dc2626; }
.u-badge-info { background:rgba(59,130,246,.1); color:#2563eb; }

/* ── GLOBAL TRANSITIONS ── */
button, .btn, a, input, select, textarea { transition: all .15s ease; }
button:active, .btn:active { transform: scale(.97); }