/* ============================================================
   Bodhira LMS — Web App Stylesheet
   Reuses brand tokens from app-screens/styles.css design system.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@600;700;800;900&display=swap');

:root {
  --primary:        #C49560;
  --primary-dark:   #A87840;
  --primary-light:  #FDF4E8;
  --brand:          #2A0E13;
  --brand-mid:      #3D1520;
  --brand-lift:     #52202E;
  --brand-glow:     rgba(196,149,96,.22);
  --bg:             #FEFAF6;
  --bg-2:           #F7F0E6;
  --card:           #FFFFFF;
  --page-bg:        #F4ECE0;
  --text:           #1A0A0C;
  --text-2:         #6B4A38;
  --text-3:         #A8896A;
  --border:         #E8D4B8;
  --border-2:       #F3E9D8;
  --success:        #1A7A48;
  --success-light:  #EDFAF4;
  --warning:        #C47A20;
  --warning-light:  #FFF8ED;
  --danger:         #C42020;
  --danger-light:   #FEF2F2;
  --info:           #1E3A8A;
  --shadow-sm:  0 1px 2px rgba(42,14,19,.05), 0 0 0 1px rgba(42,14,19,.04);
  --shadow-md:  0 4px 14px rgba(42,14,19,.09), 0 1px 4px rgba(42,14,19,.05);
  --shadow-lg:  0 18px 40px rgba(42,14,19,.13), 0 4px 12px rgba(42,14,19,.07);
  --sidebar-w:  248px;
}

/* ── Dark mode (toggled via html[data-theme="dark"]) ── */
html[data-theme="dark"] {
  --bg:            #1B1216;
  --bg-2:          #241820;
  --card:          #271A22;
  --page-bg:       #140D11;
  --text:          #F6ECE0;
  --text-2:        #CDBBAE;
  --text-3:        #9B8779;
  --border:        #3D2C34;
  --border-2:      #32232B;
  --primary-light: #2E1D24;
  --success-light: #112A1E;
  --warning-light: #2B2113;
  --danger-light:  #2B1517;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-md: 0 4px 14px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
}
html[data-theme="dark"] body { background: var(--page-bg); color: var(--text); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .ccard,
html[data-theme="dark"] .sx-stat,
html[data-theme="dark"] .pm-card { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.04); }
html[data-theme="dark"] .skeleton { background: linear-gradient(90deg,#241820 8%,#2f2129 18%,#241820 33%); }

/* ── Cool Light mode (toggled via html[data-theme="light"]) ── */
html[data-theme="light"] {
  --bg:            #FFFFFF;
  --bg-2:          #F1F5F9;
  --card:          #FFFFFF;
  --page-bg:       #F6F8FB;
  --text:          #0F172A;
  --text-2:        #475569;
  --text-3:        #94A3B8;
  --border:        #E2E8F0;
  --border-2:      #EDF1F6;
  --primary-light: #FFF7EB;
}
html[data-theme="light"] body { background: var(--page-bg); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--page-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── App Shell ── */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  background: linear-gradient(180deg, #1A0A0C 0%, #2A0E13 50%, #3D1520 100%);
  color: #F5E0C0;
  padding: 24px 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  align-self: start; /* prevent grid from stretching it so sticky actually sticks */
  border-right: 1px solid rgba(196,149,96,.15);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 8px 24px;
}
.sidebar-brand .mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(196,149,96,.4), rgba(196,149,96,.15));
  border: 1px solid rgba(196,149,96,.3);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 18px rgba(196,149,96,.2);
}
.sidebar-brand .title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.sidebar-brand .sub { font-size: 10px; letter-spacing: 2px; opacity: 0.65; }

.nav-group { margin-bottom: 18px; }
.nav-group .label {
  font-size: 10px; letter-spacing: 1.4px; font-weight: 700;
  color: rgba(245,224,192,.55); padding: 0 12px 8px;
}
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: rgba(245,224,192,.85);
  transition: background .15s, color .15s, transform .12s;
  margin-bottom: 2px;
}
.nav-link .ico { font-size: 16px; width: 20px; text-align: center; }
.nav-link:hover { background: rgba(226,184,115,.10); color: var(--gold-accent); }
.nav-link.active {
  background: linear-gradient(135deg, rgba(226,184,115,.20), rgba(226,184,115,.06));
  color: var(--gold-accent);
  box-shadow: inset 0 0 0 1px rgba(226,184,115,.25);
}

.sidebar-user {
  margin-top: 18px; padding: 14px;
  border: 1px solid rgba(196,149,96,.18);
  border-radius: 14px;
  background: rgba(196,149,96,.05);
  display: flex; align-items: center; gap: 12px;
}
.sidebar-user .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--brand); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-user .name { font-size: 13px; font-weight: 700; color: #fff; }
.sidebar-user .role { font-size: 11px; color: rgba(245,224,192,.6); letter-spacing: .5px; }
.sidebar-user .logout {
  margin-left: auto; background: rgba(196,32,32,.15); color: #FCA5A5;
  padding: 6px 10px; border-radius: 8px; font-size: 11px; font-weight: 700;
  border: none; cursor: pointer; font-family: inherit;
}
.sidebar-user .logout:hover { background: rgba(196,32,32,.25); }

/* ── Rich sidebar user card (avatar photo + XP / level progress) ── */
.sidebar-user.su-rich { flex-direction: column; align-items: stretch; gap: 12px; }
.su-rich .su-top { display: flex; align-items: center; gap: 11px; }
.su-rich img.avatar { object-fit: cover; }
.su-rich .su-id { flex: 1; min-width: 0; }
.su-rich .su-top form { margin-left: auto; }
.su-xp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.su-xp { font-size: 13px; font-weight: 800; color: #F5E6CE; display: inline-flex; align-items: center; gap: 6px; }
.su-xp .su-star { color: var(--gold-accent, #E2B873); filter: drop-shadow(0 0 4px var(--brand-glow)); }
.su-frac { font-size: 11px; color: rgba(245,224,192,.6); font-weight: 600; white-space: nowrap; }
.su-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.su-bar > i { display: block; height: 100%; border-radius: 999px; transform-origin: left;
  background: linear-gradient(90deg, #E2B873, #C49560); box-shadow: 0 0 10px rgba(226,184,115,.55);
  animation: pmBarX 1s var(--ease-out) both; }
.su-level { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  color: var(--gold-accent, #E2B873); background: rgba(226,184,115,.15); border: 1px solid rgba(226,184,115,.28);
  padding: 4px 12px; border-radius: 999px; }

/* ── Main ── */
.main { padding: 28px 36px 60px; max-width: 1400px; width: 100%; }
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.page-head .title { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.page-head .sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }

.breadcrumbs { font-size: 12px; color: var(--text-2); margin-bottom: 14px; }
.breadcrumbs a { color: var(--primary-dark); font-weight: 600; }
.breadcrumbs .sep { margin: 0 8px; color: var(--text-3); }

/* ── Cards ── */
.card {
  background: var(--card); border: 1px solid var(--border-2);
  border-radius: 18px; padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card.hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border); }
.card-pad-lg { padding: 28px; }

.hero-card {
  background: linear-gradient(135deg, #1A0A0C 0%, #2A0E13 50%, #3D1520 100%);
  color: #fff; border-radius: 22px; padding: 32px;
  position: relative; overflow: hidden;
  box-shadow: 0 24px 60px rgba(42,14,19,.22), 0 6px 16px rgba(42,14,19,.12);
  margin-bottom: 24px;
}
.hero-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, rgba(196,149,96,.35), transparent 55%);
  pointer-events: none;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card .greet { font-size: 13px; opacity: 0.7; letter-spacing: 1px; font-weight: 600; }
.hero-card .name { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 800; margin-top: 4px; }
.hero-card .tagline { opacity: 0.8; margin-top: 8px; max-width: 460px; line-height: 1.5; }

/* ── Stat Grid ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 22px; }
.stat-cell {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 16px 18px;
  backdrop-filter: blur(8px);
}
.stat-cell .label { font-size: 11px; letter-spacing: 1px; opacity: 0.7; font-weight: 600; }
.stat-cell .value { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 800; margin-top: 4px; }
.stat-cell.light { background: var(--card); border-color: var(--border-2); color: var(--text); }
.stat-cell.light .label { color: var(--text-3); opacity: 1; }
.stat-cell.light .value { color: var(--text); }

/* ── Section header ── */
.section { margin-top: 28px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 14px; }
.section-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.section-head .see-all { font-size: 12px; font-weight: 700; color: var(--primary-dark); }

/* ── Grids ── */
.grid { display: grid; gap: 16px; }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-list { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Subject Card ── */
.subject-card {
  background: var(--card); border: 1px solid var(--border-2);
  border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.subject-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.subject-card .icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.subject-card .name { font-size: 16px; font-weight: 800; }
.subject-card .meta { font-size: 12px; color: var(--text-3); font-weight: 600; letter-spacing: .3px; }
.subject-card .pill {
  display: inline-flex; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-2);
  font-size: 11px; font-weight: 700; letter-spacing: .3px; align-self: flex-start;
}

/* ── Lesson Row ── */
.lesson-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--card);
  border: 1px solid var(--border-2); border-radius: 14px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.lesson-row:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.lesson-row .type-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-light), #F5E0C0);
}
.lesson-row .body { flex: 1; min-width: 0; }
.lesson-row .title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-row .sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.lesson-row .right { font-size: 12px; color: var(--text-3); font-weight: 600; }

/* ── Progress bar ── */
.progress-wrap { width: 100%; height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s; }
.progress-fill.success { background: var(--success); }
.progress-fill.warning { background: var(--warning); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 11px;
  font-size: 13px; font-weight: 700; letter-spacing: .1px;
  cursor: pointer; border: none; min-height: 42px;
  text-decoration: none; transition: background .15s, transform .1s, box-shadow .15s;
  font-family: inherit;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: var(--brand); box-shadow: 0 4px 14px rgba(196,149,96,.3); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-brand { background: var(--brand); color: var(--primary); }
.btn-brand:hover { background: var(--brand-mid); }
.btn-outline { background: #fff; color: var(--brand); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-ghost { background: var(--bg-2); color: var(--text); }
.btn-ghost:hover { background: var(--border-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 12px; min-height: 34px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Inputs ── */
.input-group { display: block; margin-bottom: 14px; }
.input-group label { display: block; font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .6px; margin-bottom: 6px; text-transform: uppercase; }
.input-group input, .input-group select, .input-group textarea {
  width: 100%; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 14px; font-family: inherit; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.input-group input:focus, .input-group select:focus, .input-group textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(196,149,96,.15);
}
.input-group .err { font-size: 12px; color: var(--danger); margin-top: 6px; font-weight: 600; }
.checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--primary); }

/* ── Auth Layout ── */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }
.auth-side {
  background: linear-gradient(135deg, #1A0A0C 0%, #2A0E13 50%, #3D1520 100%);
  color: #fff; padding: 64px 56px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-side::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 80% 20%, rgba(196,149,96,.4), transparent 60%);
}
.auth-side > * { position: relative; z-index: 1; }
.auth-side .head h1 { font-family: 'Poppins', sans-serif; font-size: 42px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
.auth-side .head p { margin-top: 14px; max-width: 380px; line-height: 1.6; opacity: .85; }
.auth-side .badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(196,149,96,.18); border: 1px solid rgba(196,149,96,.3);
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  color: var(--primary); margin-bottom: 28px;
}
.auth-side .demo {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  padding: 18px; border-radius: 14px;
}
.auth-side .demo .label { font-size: 11px; opacity: 0.6; letter-spacing: 1px; font-weight: 700; }
.auth-side .demo .row { display: flex; justify-content: space-between; font-size: 13px; margin-top: 8px; font-family: monospace; }
.auth-form {
  padding: 64px 56px; display: flex; flex-direction: column; justify-content: center;
  background: var(--bg);
}
.auth-form .head h2 { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.auth-form .head p { color: var(--text-2); margin-bottom: 28px; }
.auth-form { max-width: 460px; width: 100%; margin: 0 auto; }

/* ── Lesson view ── */
.media-wrap { background: #000; border-radius: 18px; overflow: hidden; aspect-ratio: 16/9; }
.media-wrap video, .media-wrap iframe { width: 100%; height: 100%; display: block; }
.pdf-frame { width: 100%; height: 70vh; border: 1px solid var(--border-2); border-radius: 14px; }

/* ── Quiz ── */
.quiz-q { background: var(--card); border: 1px solid var(--border-2); border-radius: 16px; padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.quiz-q .q-num { font-size: 11px; font-weight: 700; color: var(--primary-dark); letter-spacing: 1px; }
.quiz-q .q-body { font-size: 16px; font-weight: 700; margin: 6px 0 16px; line-height: 1.4; }
.opt {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
  background: #fff;
}
.opt:hover { border-color: var(--primary); background: var(--primary-light); }
.opt input { margin-top: 3px; accent-color: var(--primary); }
.opt .key { font-weight: 800; color: var(--primary-dark); width: 18px; }

.result-hero {
  background: linear-gradient(135deg, #1A0A0C, #3D1520);
  color: #fff; padding: 36px; border-radius: 22px; text-align: center;
  margin-bottom: 24px;
}
.result-hero .score { font-family: 'Poppins', sans-serif; font-size: 60px; font-weight: 900; letter-spacing: -0.03em; }
.result-hero .label { letter-spacing: 2px; font-size: 12px; opacity: 0.7; }
.result-hero .pass { color: #86EFAC; font-weight: 800; margin-top: 6px; }
.result-hero .fail { color: #FCA5A5; font-weight: 800; margin-top: 6px; }

.alert-success { background: var(--success-light); color: var(--success); border: 1px solid #BBF7D0; padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.alert-error { background: var(--danger-light); color: var(--danger); border: 1px solid #FECACA; padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }

/* ── Notification Bell ── */
.notif-bell { position: relative; }
.notif-bell .notif-badge {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.notif-bell .notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; background: var(--card);
  border: 1px solid var(--border-2); border-radius: 14px;
  box-shadow: var(--shadow-lg); display: none; z-index: 100;
  overflow: hidden;
}
.notif-bell.open .notif-panel { display: block; }
.notif-float {
  position: absolute; top: 22px; right: 28px; z-index: 30;
  background: var(--card); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 4px 6px;
  box-shadow: var(--shadow-sm);
}
.notif-float button { color: var(--text) !important; }
/* Reserve a right gutter on the top row so the floating bell never overlaps
   page-head action buttons (Mark Attendance, + New, etc.). */
.app-shell .main .page-head { padding-right: 64px; }
@media (max-width: 900px) {
  .notif-float { top: 16px; right: 16px; }
  .app-shell .main .page-head { padding-right: 48px; }
}

/* Mobile responsive */
/* Off-canvas drawer toggle (markup: partials/app-drawer-toggle) */
.nav-burger, .app-backdrop { display: none; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  /* sidebar becomes a slide-in drawer instead of stacking on top */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-w);
    z-index: 60; transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto;
  }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.45); }
  .app-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 55; opacity: 0; visibility: hidden; transition: opacity .2s;
  }
  body.nav-open .app-backdrop { opacity: 1; visibility: visible; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 14px; left: 14px; z-index: 61; width: 42px; height: 42px;
    border-radius: 12px; border: 1px solid var(--border-2); background: var(--card);
    color: var(--text); font-size: 20px; box-shadow: var(--shadow-sm); cursor: pointer;
  }
  .main { padding: 64px 18px 80px; }
  .hero-card { padding: 22px; }
  .hero-card .name { font-size: 22px; }
  .auth-form, .auth-side { padding: 36px 24px; }
}

/* Reusable 3-column card grid + cards (replaces full-width progress-bar rows) */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .card-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid-3 { grid-template-columns: 1fr; } }

.metric-card {
  display: flex; flex-direction: column; gap: 6px; min-height: 138px;
  padding: 16px; border-radius: 16px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--border-2); box-shadow: var(--shadow-sm);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.metric-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.metric-card .mc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-card .mc-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 21px; background: var(--bg-2);
}
.metric-card .mc-pct { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 800; color: var(--primary-dark); }
.metric-card .mc-score { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.metric-card .mc-title { font-size: 14px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.metric-card .mc-sub { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-card .progress-wrap { margin-top: auto; }

/* Chapter quiz unlock CTA — used on the chapter lessons list and lesson page */
.quiz-cta {
  display: flex; align-items: center; gap: 16px; margin-top: 22px;
  padding: 18px 20px; border-radius: 18px; border: 1px solid var(--border-2);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.quiz-cta.is-ready { background: linear-gradient(135deg, #FFFBEB, #FDF4E8); border-color: var(--primary); }
.quiz-cta.is-done { background: var(--success-light); border-color: #86EFAC; }
.quiz-cta.is-locked { opacity: .92; }
.quiz-cta-icon {
  width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--bg-2);
}
.quiz-cta-body { flex: 1; min-width: 0; }
.quiz-cta-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--primary-dark); }
.quiz-cta-title { font-size: 16px; font-weight: 800; margin-top: 2px; }
.quiz-cta-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.quiz-cta-action { flex-shrink: 0; }
@media (max-width: 640px) {
  .quiz-cta { flex-wrap: wrap; }
  .quiz-cta-action { width: 100%; }
  .quiz-cta-action .btn { width: 100%; text-align: center; }
}

/* ============================================================
   ENTERPRISE GLOSSY UPGRADE  (additive, visual-only)
   Mirrors /bodhira-web-screens.html. Safe to remove this whole
   block to revert to the flat look — no markup depends on it.
   ============================================================ */

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(168,120,64,.35); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(168,120,64,.55); background-clip: content-box; }
::selection { background: rgba(196,149,96,.3); }

/* ── Animated flat nav icons (Lucide-style, inherit colour) ── */
.nav-ico { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 2; transition: transform .28s var(--ease-spring); }
.nav-link:hover .nav-ico, .pm-navlink:hover .nav-ico { transform: scale(1.16) rotate(-4deg); }
.nav-link.active .nav-ico, .pm-navlink.is-active .nav-ico { animation: navIcoPop .55s var(--ease-spring) both; }
@keyframes navIcoPop {
  0% { transform: scale(.8); opacity: .5; }
  45% { transform: scale(1.28) rotate(-7deg); }
  72% { transform: scale(.95) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ── Glossy sidebar finish (glass sheen + edge highlight + top glow) ── */
/* NOTE: do NOT set position here — the base rule's `position: sticky` must win
   so the sidebar stays fixed while the page scrolls. sticky is already a
   positioning context for the ::after gloss below. */
.sidebar { box-shadow: inset -1px 0 0 rgba(255,255,255,.06), 8px 0 28px rgba(0,0,0,.28); }
.sidebar::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 8%, transparent 20%),
    radial-gradient(95% 24% at 50% 0%, rgba(226,184,115,.16), transparent 64%),
    linear-gradient(115deg, rgba(255,255,255,.05), transparent 38%);
  mix-blend-mode: screen;
}
.sidebar > * { position: relative; z-index: 1; }

/* ── Sidebar promo / illustration card ── */
.sidebar-promo {
  margin-top: 16px; padding: 16px 15px; border-radius: 16px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(226,184,115,.16), rgba(42,14,19,.4));
  border: 1px solid rgba(226,184,115,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.sidebar-promo::before {
  content: ""; position: absolute; right: -22px; top: -22px; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,184,115,.4), transparent 70%); pointer-events: none;
}
.sidebar-promo > * { position: relative; z-index: 1; }
.sidebar-promo .art { font-size: 30px; display: inline-block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); animation: pmFloat 4s ease-in-out infinite; }
.sidebar-promo .pt { font-size: 12.5px; font-weight: 800; color: #fff; margin-top: 9px; line-height: 1.3; letter-spacing: -.01em; }
.sidebar-promo .ps { font-size: 11px; color: rgba(245,224,192,.72); margin-top: 4px; line-height: 1.45; }

/* Sidebar nav — hover slide + active glow strip */
.nav-link { position: relative; }
.nav-link:hover { transform: translateX(2px); }
.nav-link.active::before {
  content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 4px 4px 0; background: var(--gold-accent); box-shadow: 0 0 12px var(--gold-accent);
}
.sidebar-user .avatar { box-shadow: 0 0 0 3px rgba(196,149,96,.18); }

/* Glossy buttons — gradient fill + top sheen */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 50%); pointer-events: none; }
.btn-primary { background: linear-gradient(135deg, #D8A86C, var(--primary)); box-shadow: 0 6px 16px rgba(196,149,96,.4); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.btn-brand { background: linear-gradient(135deg, var(--brand-lift), var(--brand)); box-shadow: 0 6px 16px rgba(42,14,19,.25); }
.btn-brand:hover { filter: brightness(1.12); background: linear-gradient(135deg, var(--brand-lift), var(--brand)); }
.btn-danger { background: linear-gradient(135deg, #D83A3A, var(--danger)); }

/* Cards — subtle top highlight + smoother hover lift */
.card { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.55); }
.card.hover:hover, .metric-card:hover, .subject-card:hover, .lesson-row:hover { transform: translateY(-3px); }
.metric-card, .subject-card { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.55); }

/* Icon chips get an inset gloss everywhere */
.subject-card .icon, .lesson-row .type-icon, .metric-card .mc-icon, .quiz-cta-icon, .stat-cell .ico {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(42,14,19,.08);
}

/* Progress bars — gradient fill + soft glow */
.progress-fill { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); box-shadow: 0 0 8px rgba(196,149,96,.4); }
.progress-fill.success { background: linear-gradient(90deg, #34D399, var(--success)); box-shadow: 0 0 8px rgba(26,122,72,.35); }
.progress-fill.warning { background: linear-gradient(90deg, #FBBF24, var(--warning)); box-shadow: 0 0 8px rgba(196,122,32,.35); }

/* Hero / result hero — add a second ambient glow */
.hero-card::after {
  content: ""; position: absolute; right: -40px; bottom: -60px; width: 240px; height: 240px;
  border-radius: 50%; background: radial-gradient(circle, rgba(196,149,96,.18), transparent 70%); pointer-events: none;
}
.hero-card { box-shadow: 0 24px 60px rgba(42,14,19,.24), 0 6px 16px rgba(42,14,19,.12); }

/* Stat cells — glass refinement */
.stat-cell { border-color: rgba(255,255,255,.1); }

/* Pills / section see-all polish */
.section-head .see-all:hover { text-decoration: underline; }

/* Inputs — slightly softer focus ring already present; add hover */
.input-group input:hover, .input-group select:hover, .input-group textarea:hover { border-color: var(--primary); }

/* ============================================================
   PREMIUM MOTION + DEPTH LAYER  (additive, visual-only)
   World-class AI-LMS uplift: glass depth, gradient accents,
   scroll reveal, animated charts, shimmer skeletons, micro-
   interactions. Pure CSS — zero markup dependencies. Safe to
   delete this whole block to revert.
   ============================================================ */

:root {
  /* AI / accent system (used for AI surfaces, progress, focus glow) */
  --gold-accent: #E2B873;   /* fixed gold for selection/active — NOT overridden by school theme */
  --ai:          #7C3AED;
  --ai-2:        #6D28D9;
  --ai-soft:     #EDE9FE;
  --ai-glow:     rgba(124, 58, 237, .35);
  --accent-grad: linear-gradient(135deg, #8B5CF6, #6D28D9);
  --gold-grad:   linear-gradient(135deg, #E2B873, var(--primary));
  --brand-grad:  linear-gradient(135deg, #1A0A0C 0%, #2A0E13 50%, #3D1520 100%);
  --glass:       rgba(255, 255, 255, .65);
  --glass-brd:   rgba(255, 255, 255, .55);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-xl:   0 32px 70px rgba(42,14,19,.18), 0 10px 24px rgba(42,14,19,.10);
}

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes pmFadeUp   { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
@keyframes pmFadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes pmScaleIn  { from { opacity:0; transform: scale(.94); } to { opacity:1; transform:none; } }
@keyframes pmPop      { 0%{ opacity:0; transform: scale(.8);} 60%{ transform: scale(1.04);} 100%{ opacity:1; transform: scale(1);} }
@keyframes pmBarX     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pmBarY     { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pmShimmer  { 0%{ background-position: -468px 0; } 100%{ background-position: 468px 0; } }
@keyframes pmFloat    { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }
@keyframes pmGlow     { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes pmSpin     { to { transform: rotate(360deg); } }
@keyframes pmSheen    { 0%{ transform: translateX(-130%) skewX(-18deg);} 60%,100%{ transform: translateX(230%) skewX(-18deg);} }
@keyframes pmRing     { from { stroke-dashoffset: 326.726; } }
@keyframes pmDrift    { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(14px,-12px) scale(1.06); } }

/* ── Page entrance: staggered reveal of content blocks ──── */
.main > *,
.tw-main > main > *,
.tw-main main.flex-1 > * {
  animation: pmFadeUp .6s var(--ease-out) both;
}
.main > *:nth-child(1),  .tw-main main.flex-1 > *:nth-child(1)  { animation-delay: .02s; }
.main > *:nth-child(2),  .tw-main main.flex-1 > *:nth-child(2)  { animation-delay: .07s; }
.main > *:nth-child(3),  .tw-main main.flex-1 > *:nth-child(3)  { animation-delay: .12s; }
.main > *:nth-child(4),  .tw-main main.flex-1 > *:nth-child(4)  { animation-delay: .17s; }
.main > *:nth-child(5),  .tw-main main.flex-1 > *:nth-child(5)  { animation-delay: .22s; }
.main > *:nth-child(6),  .tw-main main.flex-1 > *:nth-child(6)  { animation-delay: .27s; }
.main > *:nth-child(n+7) { animation-delay: .3s; }

/* Stagger grid children (subject cards, stat cells, metric cards) */
.grid-cards > *, .stat-grid > *, .card-grid-3 > *,
.s4grid > *, .pov-mini > *, .grid-wide > * {
  animation: pmFadeUp .55s var(--ease-out) both;
}
.grid-cards > *:nth-child(2), .stat-grid > *:nth-child(2), .card-grid-3 > *:nth-child(2), .s4grid > *:nth-child(2), .pov-mini > *:nth-child(2) { animation-delay: .06s; }
.grid-cards > *:nth-child(3), .stat-grid > *:nth-child(3), .card-grid-3 > *:nth-child(3), .s4grid > *:nth-child(3), .pov-mini > *:nth-child(3) { animation-delay: .12s; }
.grid-cards > *:nth-child(4), .stat-grid > *:nth-child(4), .s4grid > *:nth-child(4) { animation-delay: .18s; }
.grid-cards > *:nth-child(5) { animation-delay: .24s; }
.grid-cards > *:nth-child(6) { animation-delay: .30s; }

/* Sidebar slides in + nav links cascade */
.sidebar { animation: pmFadeIn .5s ease both; }
.nav-link { animation: pmFadeUp .45s var(--ease-out) both; }
.nav-group:nth-child(2) .nav-link:nth-child(2){ animation-delay:.04s; }
.nav-group:nth-child(2) .nav-link:nth-child(3){ animation-delay:.08s; }
.nav-group:nth-child(2) .nav-link:nth-child(4){ animation-delay:.12s; }
.nav-group:nth-child(2) .nav-link:nth-child(5){ animation-delay:.16s; }
.nav-group:nth-child(2) .nav-link:nth-child(6){ animation-delay:.20s; }
.nav-group:nth-child(2) .nav-link:nth-child(7){ animation-delay:.24s; }

/* ── Scroll reveal (JS adds .reveal then .in) ───────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* ── Cards: richer depth + glass top sheen + smooth lift ── */
.card, .metric-card, .subject-card, .pm-card, .pside-card, .ach-card, .pb-card, .pov-card, .quiz-q {
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.card:hover, .pov-card:hover, .pb-card:hover { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6); }
.subject-card, .metric-card { position: relative; overflow: hidden; }
/* Diagonal sheen sweep across cards on hover */
.subject-card::after, .metric-card::after {
  content:""; position:absolute; top:0; left:0; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-150%) skewX(-18deg); pointer-events:none; z-index:2;
}
.subject-card:hover::after, .metric-card:hover::after { animation: pmSheen .9s var(--ease-out); }

/* ── Hero: floating ambient orbs + drifting glow ────────── */
.hero-card, .result-hero { position: relative; }
.hero-card::after { animation: pmDrift 9s ease-in-out infinite; }
.hero-card::before { animation: pmGlow 6s ease-in-out infinite; }

/* ── Sidebar brand mark: soft float + glow ──────────────── */
.sidebar-brand .mark, .lx-logo .m { transition: transform .4s var(--ease-spring); }
.sidebar-brand:hover .mark { transform: rotate(-6deg) scale(1.06); }
.nav-link.active .ico { animation: pmPop .4s var(--ease-spring) both; }

/* ── Buttons: sheen sweep on hover + spring press ───────── */
.btn, .btn-violet, .lx-submit { position: relative; overflow: hidden; isolation: isolate; }
.btn::before, .btn-violet::before, .lx-submit::before {
  content:""; position:absolute; top:0; left:0; width:40%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-160%) skewX(-20deg); z-index:1; pointer-events:none;
}
.btn:hover::before, .btn-violet:hover::before, .lx-submit:hover::before { animation: pmSheen .8s var(--ease-out); }
.btn:hover, .btn-violet:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
/* Ripple injected by enhance.js */
.pm-ripple { position:absolute; border-radius:50%; transform: scale(0); background: rgba(255,255,255,.5); pointer-events:none; z-index:0; animation: pmRipple .6s var(--ease-out); }
@keyframes pmRipple { to { transform: scale(2.6); opacity:0; } }

/* ── Animated progress bars (grow from left on first paint) ─ */
.progress-fill { transform-origin: left center; animation: pmBarX 1s var(--ease-out) both; }
/* Animated vertical bars (subject scores + sparklines grow up) */
.vbar-fill { transform-origin: bottom center; animation: pmBarY .9s var(--ease-out) both; }
.s4bar     { transform-origin: bottom center; animation: pmBarY .8s var(--ease-out) both; }
.vbars > *:nth-child(2) .vbar-fill { animation-delay:.07s; }
.vbars > *:nth-child(3) .vbar-fill { animation-delay:.14s; }
.vbars > *:nth-child(4) .vbar-fill { animation-delay:.21s; }
.vbars > *:nth-child(5) .vbar-fill { animation-delay:.28s; }
.vbars > *:nth-child(6) .vbar-fill { animation-delay:.35s; }
.s4spark .s4bar:nth-child(2){animation-delay:.05s} .s4spark .s4bar:nth-child(3){animation-delay:.1s}
.s4spark .s4bar:nth-child(4){animation-delay:.15s} .s4spark .s4bar:nth-child(5){animation-delay:.2s}
.s4spark .s4bar:nth-child(6){animation-delay:.25s} .s4spark .s4bar:nth-child(7){animation-delay:.3s}

/* ── Donut + profile ring: animated draw-in ─────────────── */
.donut { animation: pmPop .8s var(--ease-spring) both; }
.donut-hole { animation: pmFadeIn .9s .25s ease both; }
.pcomp svg circle:last-child { animation: pmRing 1.3s var(--ease-out) both; }

/* ── Stat / sparkline cards: subtle hover lift ──────────── */
.s4card { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); position: relative; overflow: hidden; }
.s4card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(42,14,19,.28); }
.s4card::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(70% 60% at 100% 0%, var(--brand-glow), transparent 60%);
  opacity:0; transition: opacity .3s; pointer-events:none;
}
.s4card:hover::before { opacity:1; }

/* ── Continue-learning / achievement rows: slide on hover ─ */
.cl-row, .ach-row, .lesson-row { transition: transform .2s var(--ease-out), background .2s, box-shadow .2s; }
.cl-row:hover { transform: translateX(4px); }

/* ── AI surfaces: animated gradient aura ────────────────── */
.ai-aura, .nav-link[href*="ai"].active {
  position: relative;
}
.nav-link[href*="ai"]:hover .ico { filter: drop-shadow(0 0 6px var(--ai-glow)); }

/* ── Notification panel: smooth drop-in ─────────────────── */
.notif-bell .notif-panel { transform-origin: top right; }
.notif-bell.open .notif-panel { animation: pmScaleIn .22s var(--ease-out) both; }
.notif-bell .notif-badge { animation: pmPop .5s var(--ease-spring) both; }
.notif-float { transition: transform .2s var(--ease-out), box-shadow .2s; }
.notif-float:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Skeleton shimmer (use .skeleton on placeholder blocks) ─ */
.skeleton {
  background: linear-gradient(90deg, #efe6d6 8%, #f7f0e4 18%, #efe6d6 33%);
  background-size: 936px 100%; border-radius: 10px;
  animation: pmShimmer 1.3s linear infinite; color: transparent !important;
}
.skeleton * { visibility: hidden; }

/* ── Toast system (enhance.js mounts #pm-toasts) ────────── */
#pm-toasts { position: fixed; top: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.pm-toast {
  pointer-events: auto; display:flex; align-items:center; gap:11px;
  min-width: 240px; max-width: 360px; padding: 13px 16px; border-radius: 14px;
  background: var(--glass); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-brd); box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 600; color: var(--text);
  animation: pmToastIn .4s var(--ease-spring) both;
}
.pm-toast.out { animation: pmToastOut .3s var(--ease-out) both; }
.pm-toast .ic { font-size: 18px; }
.pm-toast.ok  { border-left: 4px solid var(--success); }
.pm-toast.err { border-left: 4px solid var(--danger); }
.pm-toast.ai  { border-left: 4px solid var(--ai); }
@keyframes pmToastIn  { from { opacity:0; transform: translateX(40px) scale(.95);} to { opacity:1; transform:none;} }
@keyframes pmToastOut { to { opacity:0; transform: translateX(40px) scale(.95);} }

/* In-page alerts become animated banners */
.alert-success, .alert-error { animation: pmFadeUp .5s var(--ease-out) both; position: relative; overflow: hidden; }
.alert-success::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--success); }
.alert-error::before   { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--danger); }

/* ── Tilt hover for interactive cards (JS adds .tilt) ───── */
.tilt { transform-style: preserve-3d; transition: transform .18s var(--ease-out); }

/* ── Floating action / parallax helpers ─────────────────── */
.float-soft { animation: pmFloat 5s ease-in-out infinite; }

/* ── Empty states: gentle float on the emoji ────────────── */
.ach-empty .e, .pov-empty::before { display:inline-block; animation: pmFloat 4s ease-in-out infinite; }

/* ── Inputs: animated focus aura ────────────────────────── */
.input-group input:focus, .input-group select:focus, .input-group textarea:focus,
.lx-input:focus-within { transition: box-shadow .25s var(--ease-out), border-color .25s; }

/* ── Tab switching helper (smooth underline) ────────────── */
.lx-tab { transition: color .2s, background .3s var(--ease-out), box-shadow .3s, transform .15s; }
.lx-tab:hover:not(.active) { transform: translateY(-1px); color: var(--text); }

/* ── Login cinematic motion ─────────────────────────────── */
.lx-book   { animation: pmFloat 4.5s ease-in-out infinite; }
.lx-beam   { animation: pmGlow 3.5s ease-in-out infinite; }
.lx-node   { animation: pmFadeUp .7s var(--ease-out) both; }
.lx-n1 { animation-delay:.25s; } .lx-n2 { animation-delay:.45s; }
.lx-n3 { animation-delay:.65s; } .lx-n4 { animation-delay:.85s; }
.lx-node .ic { transition: transform .3s var(--ease-spring), box-shadow .3s; }
.lx-node:hover .ic { transform: scale(1.12); box-shadow: 0 0 26px rgba(226,168,87,.7); }
.lx-left::before { animation: pmGlow 7s ease-in-out infinite; }
.lx-pill { transition: transform .25s var(--ease-out), border-color .25s; }
.lx-pill:hover { transform: translateY(-3px); border-color: rgba(226,168,87,.5); }

/* ── Smooth scroll for in-page anchors ──────────────────── */
html { scroll-behavior: smooth; }

/* ── Count-up numbers get a subtle settle ───────────────── */
.s4value, .dh-num, .pm-val, .mc-score, .pcomp-lbl .n { transition: transform .2s var(--ease-out); }

/* ── Respect reduced-motion: disable all motion, keep state ─ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   PREMIUM PAGE KIT  (reusable across every inner page)
   Gradient hero · overview stats · colorful depth cards · chips
   Markup uses these classes; pages set per-card color via the
   --c-soft / --c-mid / --c-grad / --c-glow custom properties.
   ============================================================ */

/* ── Gradient hero banner ── */
.sx-hero {
  position: relative; overflow: hidden; border-radius: 24px;
  margin-bottom: 22px; padding: 30px 34px; color: #fff;
  background: linear-gradient(120deg, #1A0A0C 0%, #2A0E13 50%, #3D1520 100%);
  box-shadow: 0 28px 64px rgba(42,14,19,.28), 0 8px 18px rgba(42,14,19,.14);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sx-hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(70% 120% at 100% 0%, rgba(196,149,96,.40), transparent 55%); }
.sx-hero::after { content:""; position:absolute; right:24px; top:20px; width:150px; height:76px; opacity:.5; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.55) 1.4px, transparent 1.4px); background-size:15px 15px;
  -webkit-mask-image: linear-gradient(120deg, transparent, #000); mask-image: linear-gradient(120deg, transparent, #000); }
.sx-hero > * { position: relative; z-index: 1; }
.sx-hero .eyebrow { font-size:11px; font-weight:800; letter-spacing:1.6px; color:#E2B873; text-transform:uppercase; }
.sx-hero .h1 { font-family:'Poppins',sans-serif; font-size:30px; font-weight:900; letter-spacing:-.02em; line-height:1.06; margin-top:3px; }
.sx-hero .hsub { font-size:14px; color:rgba(251,241,226,.82); margin-top:7px; max-width:520px; line-height:1.5; }
.sx-hero .hl { display:flex; align-items:center; gap:18px; min-width:0; }
.sx-hero .hicon { width:70px; height:70px; border-radius:19px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:36px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px rgba(0,0,0,.25); }
.sx-hero .hchips { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.sx-hero .hchip { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:#FBF1E2;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); padding:7px 13px; border-radius:999px; backdrop-filter:blur(6px); }
.sx-hero .art { flex-shrink:0; filter: drop-shadow(0 14px 22px rgba(0,0,0,.4)); white-space:nowrap; }
.sx-hero .art span { display:inline-block; }
.sx-hero .art .a1 { font-size:46px; transform:rotate(-10deg) translateY(4px); opacity:.92; }
.sx-hero .art .a2 { font-size:64px; margin:0 -6px; }
.sx-hero .art .a3 { font-size:46px; transform:rotate(10deg) translateY(4px); opacity:.92; }
/* in-hero progress */
.sx-hero .hbar { max-width:340px; height:8px; border-radius:999px; margin-top:14px; overflow:hidden;
  background:rgba(255,255,255,.16); }
.sx-hero .hbar > i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#E2B873,#F5D9A8);
  transform-origin:left; animation: pmBarX 1s var(--ease-out) both; box-shadow:0 0 10px rgba(226,184,115,.6); }
@media (max-width:720px){ .sx-hero{ padding:24px; } .sx-hero .h1{ font-size:24px; } .sx-hero .art{ display:none; } }

/* ── Overview stat strip ── */
.sx-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:24px; }
.sx-stat { background:var(--card); border:1px solid var(--border-2); border-radius:18px; padding:18px 20px;
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6); display:flex; align-items:center; gap:14px;
  transition:transform .25s var(--ease-out), box-shadow .25s, border-color .25s; }
.sx-stat:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border); }
.sx-stat .ic { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:23px; flex-shrink:0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.sx-stat .v { font-family:'Poppins',sans-serif; font-size:24px; font-weight:900; letter-spacing:-.02em; line-height:1; }
.sx-stat .l { font-size:12px; color:var(--text-2); font-weight:600; margin-top:3px; }

/* ── Section heading ── */
.sx-sec { display:flex; align-items:center; justify-content:space-between; margin:4px 2px 14px; gap:12px; flex-wrap:wrap; }
.sx-sec h2 { font-size:19px; font-weight:800; letter-spacing:-.01em; }
.sx-sec .c { font-size:12px; font-weight:700; color:var(--text-3); background:var(--bg-2); padding:6px 12px; border-radius:999px; }

/* ── Colorful depth card (generic) ── */
.pcard { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:22px; border-radius:20px;
  background:var(--card); border:1px solid var(--border-2); text-decoration:none; color:var(--text);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .28s var(--ease-out), box-shadow .28s, border-color .28s; }
.pcard::after { content:""; position:absolute; top:0; left:0; width:60%; height:100%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:translateX(-160%) skewX(-18deg); }
.pcard:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--c-mid, var(--primary)); }
.pcard:hover::after { animation: pmSheen .9s var(--ease-out); }
.pcard .accent { position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:0 4px 4px 0; background:var(--c-grad, var(--primary)); }
.pcard .num { width:58px; height:58px; border-radius:17px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-size:21px; font-weight:900; color:#fff; background:var(--c-grad, var(--primary));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px var(--c-glow, rgba(196,149,96,.3)); }
.pcard .tile { width:60px; height:60px; border-radius:17px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:30px;
  background:var(--c-soft, var(--bg-2)); color:var(--c-mid, var(--primary));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px var(--c-glow, rgba(196,149,96,.25)); }
.pcard .eyebrow { font-size:11px; font-weight:800; letter-spacing:.6px; color:var(--c-mid, var(--primary-dark)); text-transform:uppercase; }
.pchip { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--c-mid, var(--primary-dark));
  background:var(--c-soft, var(--bg-2)); padding:7px 13px; border-radius:999px; }
.pgo { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:13px;
  font-size:13px; font-weight:800; color:#fff; background:var(--c-grad, var(--primary)); box-shadow:0 8px 18px var(--c-glow, rgba(196,149,96,.3));
  transition:filter .15s, transform .15s var(--ease-out); }
.pcard:hover .pgo { filter:brightness(1.05); }

/* ============================================================
   GLASSMORPHISM  — frosted cards + ambient background
   The blurred backdrop needs something to blur, so the main
   content area gets soft colour blobs; cards become frosted
   glass over them. Admin/super (.tw-main) override with their
   own !important card bg, so they're unaffected.
   ============================================================ */
.main {
  background:
    radial-gradient(46% 38% at 14% 10%, rgba(124,58,237,.09), transparent 56%),
    radial-gradient(42% 36% at 90% 6%,  rgba(226,184,115,.16), transparent 56%),
    radial-gradient(48% 44% at 86% 92%, rgba(20,122,72,.08), transparent 56%),
    radial-gradient(42% 40% at 8% 94%,  rgba(196,32,80,.07), transparent 56%),
    var(--page-bg);
  background-attachment: fixed;
}

.card, .metric-card, .subject-card, .ccard, .sx-stat, .pm-card,
.pside-card, .ach-card, .pb-card, .pov-card, .quiz-q, .qa-card, .lesson-row {
  background: rgba(255,255,255,.58);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  backdrop-filter: blur(14px) saturate(165%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow:
    0 10px 32px rgba(42,14,19,.10),
    0 2px 8px rgba(42,14,19,.06),
    inset 0 1px 0 rgba(255,255,255,.75);
}
.card:hover, .pov-card:hover, .pb-card:hover {
  box-shadow: 0 18px 44px rgba(42,14,19,.14), 0 4px 12px rgba(42,14,19,.08), inset 0 1px 0 rgba(255,255,255,.8);
}

/* Dark mode glass */
html[data-theme="dark"] .main {
  background:
    radial-gradient(46% 38% at 14% 10%, rgba(124,58,237,.16), transparent 56%),
    radial-gradient(42% 36% at 90% 6%,  rgba(226,184,115,.14), transparent 56%),
    radial-gradient(48% 44% at 86% 92%, rgba(20,122,72,.12), transparent 56%),
    var(--page-bg);
  background-attachment: fixed;
}
html[data-theme="dark"] .card, html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .subject-card, html[data-theme="dark"] .ccard,
html[data-theme="dark"] .sx-stat, html[data-theme="dark"] .pm-card,
html[data-theme="dark"] .pside-card, html[data-theme="dark"] .ach-card,
html[data-theme="dark"] .pb-card, html[data-theme="dark"] .pov-card,
html[data-theme="dark"] .quiz-q, html[data-theme="dark"] .qa-card, html[data-theme="dark"] .lesson-row {
  background: rgba(40,26,33,.5);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 10px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── 4-up responsive card grid (compact cards, not long rows) ── */
.sx-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1240px){ .sx-grid4 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px) { .sx-grid4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .sx-grid4 { grid-template-columns:1fr; } }
.sx-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1000px){ .sx-grid3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .sx-grid3 { grid-template-columns:1fr; } }

/* ── Compact premium card (vertical, fits 4-up) ── */
.ccard { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:11px; padding:18px; border-radius:18px;
  background:var(--card); border:1px solid var(--border-2); text-decoration:none; color:var(--text); min-height:100%;
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .26s var(--ease-out), box-shadow .26s, border-color .26s; }
.ccard::after { content:""; position:absolute; top:0; left:0; width:60%; height:100%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:translateX(-160%) skewX(-18deg); }
.ccard:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--c-mid, var(--primary)); }
.ccard:hover::after { animation:pmSheen .9s var(--ease-out); }
.ccard .accent { position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:0 4px 4px 0; background:var(--c-grad, var(--primary)); }
.ccard .ctop { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ccard .ctile { width:48px; height:48px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:24px;
  background:var(--c-soft, var(--bg-2)); color:var(--c-mid, var(--primary));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px var(--c-glow, rgba(196,149,96,.22)); }
.ccard .cnum { width:46px; height:46px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-size:17px; font-weight:900; color:#fff; background:var(--c-grad, var(--primary));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px var(--c-glow, rgba(196,149,96,.28)); }
.ccard .ceyebrow { font-size:10px; font-weight:800; letter-spacing:.6px; color:var(--c-mid, var(--primary-dark)); text-transform:uppercase; }
.ccard .ctitle { font-size:15px; font-weight:800; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ccard .cdesc { font-size:12.5px; color:var(--text-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ccard .cmeta { font-size:12px; color:var(--text-3); font-weight:600; display:flex; flex-wrap:wrap; gap:8px 12px; }
.ccard .cchip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--c-mid, var(--primary-dark));
  background:var(--c-soft, var(--bg-2)); padding:5px 11px; border-radius:999px; }
.ccard .cgo { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:auto; padding:10px; border-radius:11px;
  font-size:12.5px; font-weight:800; color:#fff; background:var(--c-grad, var(--primary)); box-shadow:0 6px 14px var(--c-glow, rgba(196,149,96,.25));
  transition:filter .15s, transform .15s var(--ease-out); }
.ccard:hover .cgo { filter:brightness(1.05); }
.ccard .cbadge { font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; white-space:nowrap; }

/* ── Card color mode ─────────────────────────────────────
   PLAIN (default): every card shares ONE brand-gold scheme.
   COLORFUL: set html[data-cards="colorful"] and cards use
   their own per-subject palette. Toggled from Settings →
   Appearance → Card Style. Status/meaning badges (assignment
   status, live LIVE/Ended, lesson Done) keep their color in
   BOTH modes; only the generic grade/"NEW" badges follow it.
   --------------------------------------------------------- */
html:not([data-cards="colorful"]) .ccard .accent { background: linear-gradient(160deg,#E2B873,#A87840) !important; }
html:not([data-cards="colorful"]) .ccard .cnum,
html:not([data-cards="colorful"]) .ccard .cgo {
  background: linear-gradient(135deg,#E2B873,#A87840) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(168,120,64,.30) !important;
}
html:not([data-cards="colorful"]) .ccard .ctile {
  background: #F7ECD9 !important; color: #A87840 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px rgba(168,120,64,.18) !important;
}
html:not([data-cards="colorful"]) .ccard .cchip,
html:not([data-cards="colorful"]) .ccard .gen-badge { background: #F7ECD9 !important; color: #A87840 !important; }
html:not([data-cards="colorful"]) .ccard .qc-new { background: linear-gradient(135deg,#E2B873,#A87840) !important; }
html:not([data-cards="colorful"]) .ccard .ceyebrow,
html:not([data-cards="colorful"]) .ccard .qc-xp { color: #A87840 !important; }
html:not([data-cards="colorful"]) .ccard:hover  { border-color: #C49560 !important; }

/* ── Premium empty state ── */
.sx-empty { text-align:center; padding:56px 24px; border-radius:22px; border:1px dashed var(--border);
  background:linear-gradient(160deg, #fff, var(--bg-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.sx-empty .e { font-size:60px; display:inline-block; animation: pmFloat 4s ease-in-out infinite; }
.sx-empty .t { font-size:18px; font-weight:800; margin-top:10px; }
.sx-empty .s { font-size:13px; color:var(--text-2); margin-top:6px; }

/* ── Segmented filter (premium) ── */
.sx-seg { display:inline-flex; background:var(--bg-2); border-radius:13px; padding:5px; gap:3px; }
.sx-seg button { border:none; background:transparent; padding:9px 18px; border-radius:9px; font-size:13px; font-weight:700;
  color:var(--text-2); font-family:inherit; cursor:pointer; transition:.18s var(--ease-out); }
.sx-seg button.active { background:#fff; color:var(--text); box-shadow:var(--shadow-sm); }
.sx-seg button:hover:not(.active) { color:var(--text); }

/* ============================================================
   GLOBAL MOBILE RESPONSIVENESS SAFETY NET  (added for phones)
   - Collapses dashboard card / stat / quick-action grids to a
     single column on small phones (many per-view grids only went
     down to 2 columns).
   - Lets wide data tables scroll horizontally instead of
     overflowing / squeezing the viewport.
   Calendar grids (.cal-week/.cal-grid) are intentionally excluded.
   ============================================================ */
.tbl-wrap, .table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .qa-grid, .metric-grid, .stat-grid, .grid-3, .sub-grid, .subject-grid,
  .s4grid, .pov-mini, .sx-grid, .sx-stats, .sx-grid3, .sx-grid4,
  .card-grid-3, .grant-grid, .grid-2, .t-twin, .pf-stats {
    grid-template-columns: 1fr !important;
  }
  .ai-chips { grid-template-columns: repeat(2, 1fr) !important; }
  /* wide tables scroll rather than break the layout */
  .main table, .tw-main table, main table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  /* page heads / toolbars wrap instead of overflowing */
  .page-head, .section-head, .toolbar, .filters { flex-wrap: wrap; }
}