/* ══════════════════════════════════════════════════════════════════════
   NDA_Platform.css
   New Dimension Academy — Shared Platform Stylesheet
   All design tokens, layout, components, animations & responsive rules
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════
   1. DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  /* Backgrounds — warmer, better depth between layers */
  --bg:       #060c18;
  --surface:  #0e1a2d;
  --surface2: #121f38;
  --surface3: #182a48;
  --border:   #1e3558;

  /* Primary accent — refined electric blue */
  --accent:   #00c8f0;
  --accent2:  #0094bf;

  /* Secondary accents — more refined, less neon */
  --accent3:  #00e09a;
  --accent4:  #f06830;
  --accent5:  #9b4deb;

  /* Text — improved contrast hierarchy */
  --text:     #e6f0f9;
  --text2:    #8aafc8;
  --text3:    #506d88;

  /* Functional */
  --warn:     #f0c800;
  --danger:   #f04060;
  --grid:     rgba(0,200,240,0.03);
  --glow:     0 0 20px rgba(0,200,240,0.10);

  /* Spacing scale */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  /* Border radius scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Font size scale */
  --fs-xs:   10px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
}


/* ══════════════════════════════════════════
   2. RESET & BODY (dark theme, grid background)
══════════════════════════════════════════ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;
}


/* ══════════════════════════════════════════
   3. LAYOUT (.app-wrap)
══════════════════════════════════════════ */
.app-wrap { display:flex; min-height:100vh; }


/* ══════════════════════════════════════════
   4. SIDEBAR
══════════════════════════════════════════ */
.sidebar {
  width:260px; min-height:100vh;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; left:0; top:0; z-index:50;
  transition:transform 0.3s ease;
}
.sidebar-top {
  padding:20px 18px 14px;
  border-bottom:1px solid var(--border);
}
.sidebar-back-links {
  display:flex; align-items:center; gap:6px;
  margin-bottom:10px;
}
.sidebar-back-link {
  font-size:11px; color:var(--text3);
  text-decoration:none; padding:3px 8px;
  border-radius:6px; border:1px solid var(--border);
  background:var(--surface2); transition:all 0.2s;
  font-family:'Space Mono',monospace;
}
.sidebar-back-link:hover {
  color:var(--accent); border-color:var(--accent);
  background:rgba(0,200,240,0.06);
}
.sidebar-back-sep {
  font-size:10px; color:var(--text3);
}
.sidebar-academy {
  font-family:'Orbitron',sans-serif;
  font-size:9px; letter-spacing:2px;
  color:var(--accent); text-transform:uppercase;
  margin-bottom:4px;
}
.sidebar-day {
  font-family:'Orbitron',sans-serif;
  font-size:19px; font-weight:800;
  color:var(--text); line-height:1.1;
}
.sidebar-sub {
  font-size:11px; color:var(--text3);
  margin-top:4px; letter-spacing:0.5px;
}
.sidebar-badge {
  display:inline-block; margin-top:8px;
  background:rgba(0,200,240,0.1);
  border:1px solid rgba(0,200,240,0.3);
  border-radius:6px; padding:3px 10px;
  font-size:10px; color:var(--accent);
  font-family:'Space Mono',monospace;
}

/* Student info */
.sidebar-student {
  padding:12px 18px;
  border-bottom:1px solid var(--border);
  display:none;
}
.sidebar-student.visible { display:flex; align-items:center; gap:10px; }
.student-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent5));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#0a0e1a; flex-shrink:0;
}
.student-name { font-size:12px; font-weight:700; color:var(--text); }
.student-email { font-size:10px; color:var(--text3); }

/* Nav items */
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 0; }
.nav-section-title {
  padding:4px 18px 6px;
  font-size:9px; letter-spacing:2px; color:var(--text3);
  text-transform:uppercase; font-weight:700;
  font-family:'Space Mono',monospace;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 18px; cursor:pointer;
  transition:all 0.2s; border-left:3px solid transparent;
  font-size:13px; color:var(--text2);
}
.nav-item:hover { background:rgba(0,200,240,0.05); color:var(--text); }
.nav-item.active {
  background:rgba(0,200,240,0.08);
  border-left-color:var(--accent);
  color:var(--accent);
}
.nav-item.completed { color:var(--accent3); }
.nav-item.completed .nav-check { opacity:1; }
.nav-num {
  width:22px; height:22px; border-radius:50%;
  background:var(--surface2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-family:'Space Mono',monospace;
  flex-shrink:0; font-weight:700;
}
.nav-item.active .nav-num { background:var(--accent); color:#0a0e1a; border-color:var(--accent); }
.nav-item.completed .nav-num { background:var(--accent3); color:#0a0e1a; border-color:var(--accent3); }
.nav-label { flex:1; line-height:1.2; }
.nav-sub { font-size:9px; color:var(--text3); display:block; margin-top:1px; }
.nav-check { opacity:0; font-size:12px; }

.sidebar-footer {
  padding:14px 18px;
  border-top:1px solid var(--border);
  font-size:10px; color:var(--text3); text-align:center;
}


/* ══════════════════════════════════════════
   5. MAIN CONTENT
══════════════════════════════════════════ */
.main {
  margin-left:260px;
  width:calc(100vw - 260px);
  min-height:100vh;
  box-sizing:border-box;
}

/* Page header */
.page-header {
  padding:0;
  border-bottom:1px solid var(--border);
  background:rgba(13,27,46,0.8);
  backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:40;
  width:100%;
}
.page-header-inner {
  max-width:1000px;
  margin:0 auto;
  padding:20px 40px 18px;
  display:flex; align-items:center; gap:20px;
}
.page-header-left { flex:1; min-width:0; }
.page-module-tag {
  font-size:10px; font-family:'Space Mono',monospace;
  color:var(--accent3); letter-spacing:2px; text-transform:uppercase;
  margin-bottom:4px;
}
.page-title {
  font-family:'Orbitron',sans-serif;
  font-size:20px; font-weight:800;
  color:var(--text); line-height:1.2;
}
.page-subtitle { font-size:12px; color:var(--text3); margin-top:3px; }

/* Progress bar */
.progress-bar-outer {
  height:3px; background:var(--surface3);
  border-radius:2px; margin-top:10px; overflow:hidden;
}
.progress-bar-inner {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent3));
  border-radius:2px; transition:width 0.5s ease;
}

/* Page content area */
.page-body {
  max-width:1000px;
  margin:0 auto;
  padding:0 40px 80px;
  box-sizing:border-box;
}


/* ══════════════════════════════════════════
   6. LESSON PAGES
══════════════════════════════════════════ */
.lesson-page { display:none; padding-top:32px; }
.lesson-page.active { display:block; }

/* Lesson title card */
.lesson-title-card {
  background:linear-gradient(135deg,var(--surface),var(--surface2));
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:12px; padding:24px 28px 20px;
  margin-bottom:28px;
  position:relative; overflow:hidden;
}
.lesson-title-card::before {
  content:''; position:absolute; top:0; right:0;
  width:200px; height:100%;
  background:radial-gradient(ellipse at right center,rgba(0,200,240,0.06),transparent 70%);
}
.lesson-num {
  font-family:'Space Mono',monospace;
  font-size:11px; color:var(--accent); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:6px;
}
.lesson-title-text {
  font-family:'Orbitron',sans-serif;
  font-size:22px; font-weight:800; color:var(--text);
  line-height:1.2; margin-bottom:6px;
}
.lesson-duration {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,255,170,0.08); border:1px solid rgba(0,255,170,0.2);
  border-radius:6px; padding:4px 12px;
  font-size:11px; color:var(--accent3);
  font-family:'Space Mono',monospace; margin-top:4px;
}


/* ══════════════════════════════════════════
   7. LESSON CONTENT TYPOGRAPHY
══════════════════════════════════════════ */
.lesson-content h3 {
  font-family:'Orbitron',sans-serif;
  font-size:14px; font-weight:600; color:var(--accent);
  margin:28px 0 10px; letter-spacing:1px;
  text-transform:uppercase;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.lesson-content h4 {
  font-size:15px; font-weight:700; color:var(--text);
  margin:20px 0 8px;
}
.lesson-content p {
  font-size:14px; line-height:1.8; color:var(--text2);
  margin-bottom:14px;
}
.lesson-content p strong { color:var(--text); font-weight:700; }
.lesson-content ul, .lesson-content ol {
  padding-left:20px; margin-bottom:14px;
}
.lesson-content li {
  font-size:14px; line-height:1.7; color:var(--text2);
  margin-bottom:5px;
}
.lesson-content li strong { color:var(--text); }


/* ══════════════════════════════════════════
   8. INFO BOXES
══════════════════════════════════════════ */
.info-box {
  border-radius:10px; padding:16px 20px;
  margin:20px 0; border-left:3px solid;
}
.info-box.cyan {
  background:rgba(0,200,240,0.06);
  border-color:var(--accent);
}
.info-box.green {
  background:rgba(0,255,170,0.06);
  border-color:var(--accent3);
}
.info-box.orange {
  background:rgba(255,107,53,0.06);
  border-color:var(--accent4);
}
.info-box.purple {
  background:rgba(168,85,247,0.06);
  border-color:var(--accent5);
}
.info-box.yellow {
  background:rgba(255,215,0,0.06);
  border-color:var(--warn);
}
.info-box-title {
  font-size:10px; letter-spacing:2px; font-weight:700;
  text-transform:uppercase; margin-bottom:8px;
  font-family:'Space Mono',monospace;
}
.info-box.cyan .info-box-title   { color:var(--accent); }
.info-box.green .info-box-title  { color:var(--accent3); }
.info-box.orange .info-box-title { color:var(--accent4); }
.info-box.purple .info-box-title { color:var(--accent5); }
.info-box.yellow .info-box-title { color:var(--warn); }
.info-box p { margin-bottom:0 !important; font-size:13px; }
.info-box ul { margin-bottom:0; }
.info-box li { font-size:13px; }


/* ══════════════════════════════════════════
   9. DIAGRAM / CODE BLOCK
══════════════════════════════════════════ */
.diagram {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px; padding:16px 20px;
  font-family:'Space Mono',monospace;
  font-size:12px; color:var(--accent);
  margin:16px 0; overflow-x:auto;
  line-height:1.7; white-space:pre;
}


/* ══════════════════════════════════════════
   10. TERM GRID
══════════════════════════════════════════ */
.term-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px; margin:16px 0;
}
.term-card {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px;
}
.term-word {
  font-family:'Space Mono',monospace;
  font-size:12px; color:var(--accent);
  font-weight:700; margin-bottom:4px;
}
.term-def { font-size:12px; color:var(--text2); line-height:1.5; }


/* ══════════════════════════════════════════
   11. COMPARE GRID (Electrical vs Electronic)
══════════════════════════════════════════ */
.compare-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; margin:20px 0; border-radius:14px;
  overflow:hidden; border:1px solid var(--border);
}
.compare-col { padding:20px 22px; background:var(--surface2); }
.compare-col:first-child { border-right:1px solid var(--border); background:rgba(255,107,53,0.04); }
.compare-col:last-child  { background:rgba(0,200,240,0.04); }
.compare-col-header {
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border);
}
.compare-col-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.compare-col-icon.orange { background:rgba(255,107,53,0.15); border:1px solid rgba(255,107,53,0.3); }
.compare-col-icon.cyan   { background:rgba(0,200,240,0.1);   border:1px solid rgba(0,200,240,0.25); }
.compare-col-title { font-size:14px; font-weight:800; }
.compare-col-title.orange { color:var(--accent4); }
.compare-col-title.cyan   { color:var(--accent); }
.compare-col-sub { font-size:11px; color:var(--text3); margin-top:2px; }
.compare-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.04);
  font-size:13px; color:var(--text2);
}
.compare-row:last-child { border:none; }
.compare-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.compare-col:first-child .compare-dot { background:var(--accent4); }
.compare-col:last-child  .compare-dot { background:var(--accent); }


/* ══════════════════════════════════════════
   12. CAREER GRID
══════════════════════════════════════════ */
.career-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px; margin:16px 0;
}
.career-card {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; padding:16px 18px;
  transition:border-color 0.2s,transform 0.2s;
}
.career-card:hover {
  border-color:var(--accent);
  transform:translateY(-2px);
}
.career-icon { font-size:22px; margin-bottom:8px; }
.career-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.career-desc { font-size:12px; color:var(--text3); line-height:1.5; }
.career-salary {
  margin-top:8px; font-size:11px; color:var(--accent3);
  font-family:'Space Mono',monospace;
}


/* ══════════════════════════════════════════
   13. TIMELINE
══════════════════════════════════════════ */
.timeline { margin:20px 0; }
.timeline-item {
  display:flex; gap:16px; margin-bottom:16px;
  align-items:flex-start;
}
.timeline-year {
  font-family:'Space Mono',monospace;
  font-size:11px; color:var(--accent);
  font-weight:700; min-width:70px;
  padding-top:2px; text-align:right;
}
.timeline-dot {
  width:12px; height:12px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg);
  flex-shrink:0; margin-top:4px;
  box-shadow:0 0 8px var(--accent);
}
.timeline-content { flex:1; }
.timeline-event {
  font-size:13px; font-weight:700; color:var(--text);
  margin-bottom:2px;
}
.timeline-detail { font-size:12px; color:var(--text3); line-height:1.5; }


/* ══════════════════════════════════════════
   14. MATERIAL CARDS (Conductors / Semiconductors / Insulators)
══════════════════════════════════════════ */
.material-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.material-card {
  border-radius:14px; padding:18px 16px; text-align:center;
  border:1px solid; position:relative; overflow:hidden;
}
.material-card.conductor    { background:rgba(0,200,240,0.05);  border-color:rgba(0,200,240,0.25); }
.material-card.semiconductor{ background:rgba(168,85,247,0.05); border-color:rgba(168,85,247,0.25); }
.material-card.insulator    { background:rgba(255,77,109,0.05); border-color:rgba(255,77,109,0.25); }
.material-card-icon { font-size:28px; margin-bottom:8px; display:block; }
.material-card-title { font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:1px; margin-bottom:6px; }
.material-card.conductor     .material-card-title { color:var(--accent); }
.material-card.semiconductor .material-card-title { color:var(--accent5); }
.material-card.insulator     .material-card-title { color:var(--danger); }
.material-card-desc { font-size:11px; color:var(--text3); line-height:1.5; margin-bottom:10px; }
.material-examples { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.mat-tag { font-size:10px; padding:2px 8px; border-radius:4px; font-family:'Space Mono',monospace; font-weight:700; }
.material-card.conductor     .mat-tag { background:rgba(0,200,240,0.12); color:var(--accent); }
.material-card.semiconductor .mat-tag { background:rgba(168,85,247,0.12); color:var(--accent5); }
.material-card.insulator     .mat-tag { background:rgba(255,77,109,0.1);  color:var(--danger); }
.material-flow { margin-top:10px; height:4px; border-radius:2px; overflow:hidden; background:var(--border); }
.material-flow-fill { height:100%; border-radius:2px; }
.material-card.conductor     .material-flow-fill { width:95%; background:var(--accent);  animation:mflow 2s ease-in-out infinite alternate; }
.material-card.semiconductor .material-flow-fill { width:40%; background:var(--accent5); animation:mflow 2s ease-in-out infinite alternate 0.5s; }
.material-card.insulator     .material-flow-fill { width:3%;  background:var(--danger);  animation:mflow 2s ease-in-out infinite alternate 1s; }


/* ══════════════════════════════════════════
   15. THEN / NOW SPLIT
══════════════════════════════════════════ */
.then-now { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:20px 0; border-radius:14px; overflow:hidden; border:1px solid var(--border); }
.then-col { padding:18px 20px; background:rgba(255,215,0,0.03); border-right:1px solid var(--border); }
.now-col  { padding:18px 20px; background:rgba(0,200,240,0.03); }
.tn-header { display:flex; align-items:center; gap:8px; font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:1px; margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.tn-header.old { color:var(--warn); }
.tn-header.new { color:var(--accent); }
.tn-item { display:flex; align-items:flex-start; gap:10px; padding:7px 0; font-size:13px; color:var(--text2); border-bottom:1px solid rgba(255,255,255,0.03); }
.tn-item:last-child { border:none; }
.tn-icon { font-size:18px; flex-shrink:0; width:28px; text-align:center; }


/* ══════════════════════════════════════════
   16. CIRCUIT ANIMATION
══════════════════════════════════════════ */
.circuit-anim { background:var(--surface2); border:1px solid var(--border); border-radius:16px; padding:20px; margin:20px 0; overflow:hidden; }
.circuit-anim svg { display:block; margin:0 auto; }


/* ══════════════════════════════════════════
   17. ANIMATED ATOM
══════════════════════════════════════════ */
.atom-container {
  display:flex; justify-content:center; align-items:center;
  padding:30px 20px; margin:20px 0;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; min-height:220px;
}
.atom-wrap { position:relative; width:200px; height:200px; flex-shrink:0; }
.atom-nucleus {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ff8c42, #cc4400);
  box-shadow:0 0 20px rgba(255,107,53,0.5);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:3;
}
.nucleus-label { font-size:9px; font-weight:800; color:white; line-height:1.2; text-align:center; }
.atom-orbit {
  position:absolute; top:50%; left:50%;
  border-radius:50%; border:1px solid rgba(0,200,240,0.25);
  transform-origin:center center;
}
.atom-orbit-1 { width:100px; height:50px; margin-left:-50px; margin-top:-25px; animation:orbit1 2.4s linear infinite; }
.atom-orbit-2 { width:140px; height:60px; margin-left:-70px; margin-top:-30px; animation:orbit2 3.2s linear infinite; transform:rotate(60deg); }
.atom-orbit-3 { width:180px; height:70px; margin-left:-90px; margin-top:-35px; animation:orbit3 4s linear infinite; transform:rotate(-60deg); }
.atom-electron {
  position:absolute; width:12px; height:12px; border-radius:50%;
  top:50%; left:100%; margin-top:-6px; margin-left:-6px;
  background:var(--accent); box-shadow:0 0 10px var(--accent);
}
.atom-label-item { display:flex; align-items:flex-start; gap:10px; font-size:12px; color:var(--text2); }
.alabel-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:3px; }


/* ══════════════════════════════════════════
   18. NAVIGATION BUTTONS
══════════════════════════════════════════ */
.lesson-nav-btns {
  display:flex; gap:12px; margin-top:36px; margin-bottom:24px;
  padding-top:20px; border-top:1px solid var(--border);
}
.btn-prev, .btn-next {
  padding:11px 28px; border-radius:10px;
  font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:700; cursor:pointer;
  transition:all 0.2s; border:none;
}
.btn-prev {
  background:var(--surface2); color:var(--text2);
  border:1px solid var(--border);
}
.btn-prev:hover { border-color:var(--accent); color:var(--accent); }
.btn-next {
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0a0e1a; margin-left:auto;
}
.btn-next:hover { opacity:0.9; transform:translateX(2px); }
.btn-next:disabled { opacity:0.4; cursor:not-allowed; transform:none; }


/* ══════════════════════════════════════════
   19. COMPLETION BANNER
══════════════════════════════════════════ */
.completion-banner {
  margin:16px 0 0;
  padding:14px 20px;
  background:linear-gradient(135deg,rgba(0,255,170,0.08),rgba(0,200,240,0.08));
  border:1px solid rgba(0,255,170,0.25);
  border-radius:14px;
  display:none; align-items:center;
  justify-content:space-between; gap:12px; flex-wrap:wrap;
  animation:fadeSlideIn 0.5s ease;
}
.completion-banner.visible { display:flex; }
.banner-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.banner-icon { font-size:26px; flex-shrink:0; }
.banner-text strong { color:var(--accent3); font-size:14px; font-weight:700; display:block; }
.banner-text span { font-size:12px; color:var(--text2); }
.btn-view-cert {
  padding:10px 22px; background:var(--accent3);
  border:none; border-radius:10px;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700;
  color:#0a0e1a; cursor:pointer; white-space:nowrap;
  transition:opacity 0.2s;
}
.btn-view-cert:hover { opacity:0.85; }


/* ══════════════════════════════════════════
   20. QUIZ
══════════════════════════════════════════ */
.quiz-container {
  max-width:100%;
}
.quiz-header {
  background:linear-gradient(135deg,var(--surface),var(--surface2));
  border:1px solid var(--border); border-radius:12px;
  padding:22px 26px; margin-bottom:24px;
}
.quiz-header h2 {
  font-family:'Orbitron',sans-serif;
  font-size:18px; font-weight:800; color:var(--text);
  margin-bottom:6px;
}
.quiz-header p { font-size:13px; color:var(--text3); }
.quiz-item {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:20px 22px; margin-bottom:14px;
  transition:border-color 0.2s;
}
.quiz-item:focus-within { border-color:var(--accent); }
.quiz-q-num {
  font-size:10px; letter-spacing:2px; color:var(--accent);
  font-family:'Space Mono',monospace; text-transform:uppercase;
  margin-bottom:8px; font-weight:700;
}
.quiz-question {
  font-size:14px; font-weight:600; color:var(--text);
  margin-bottom:14px; line-height:1.5;
}
.quiz-options { display:flex; flex-direction:column; gap:8px; }
.quiz-opt {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px;
  background:var(--surface2); border:1px solid var(--border);
  cursor:pointer; transition:all 0.2s;
  font-size:13px; color:var(--text2);
}
.quiz-opt:hover { border-color:var(--accent); color:var(--text); background:var(--surface3); }
.quiz-opt input { display:none; }
.quiz-opt.selected { border-color:var(--accent); color:var(--accent); background:rgba(0,200,240,0.08); }
.quiz-opt.correct  { border-color:var(--accent3); color:var(--accent3); background:rgba(0,255,170,0.08); }
.quiz-opt.wrong    { border-color:var(--danger); color:var(--danger); background:rgba(255,77,109,0.08); }
.opt-letter {
  width:22px; height:22px; border-radius:50%;
  background:var(--surface3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
  font-family:'Space Mono',monospace;
}
.btn-submit-quiz {
  margin-top:20px; padding:13px 36px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border:none; border-radius:12px;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:800;
  color:#0a0e1a; cursor:pointer; transition:opacity 0.2s;
}
.btn-submit-quiz:hover { opacity:0.9; }

/* Quiz result banner */
.quiz-result {
  display:none; padding:20px 22px; border-radius:12px;
  margin-top:20px; text-align:center;
}
.quiz-result.show { display:block; }
.result-score {
  font-family:'Orbitron',sans-serif;
  font-size:36px; font-weight:800; margin-bottom:6px;
}
.result-label { font-size:14px; color:var(--text2); margin-bottom:12px; }
.result-message { font-size:13px; color:var(--text3); line-height:1.6; }


/* ══════════════════════════════════════════
   21. CERTIFICATE PAGE
══════════════════════════════════════════ */
.cert-page { padding-top:32px; }
.cert-score-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px; margin-bottom:24px;
}
.cert-score-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px; text-align:center;
}
.cert-score-card .score-label { font-size:11px; color:var(--text3); margin-bottom:4px; }
.cert-score-card .score-val { font-family:'Space Mono',monospace; font-size:20px; font-weight:700; }
.cert-score-card.pass .score-val  { color:var(--accent3); }
.cert-score-card.merit .score-val { color:var(--warn); }
.cert-score-card.fail .score-val  { color:var(--danger); }

/* Certificate render */
#cert-render {
  width:100%; max-width:750px; background:#fff;
  font-family:'Cinzel',serif; margin:20px auto;
  padding:0; border-radius:4px;
  overflow:hidden; position:relative;
}
.c-outer { border:8px solid #0d3a5c; padding:6px; }
.c-inner {
  border:3px solid #b8860b;
  padding:30px 40px 28px;
  background:linear-gradient(135deg,#ffffff,#f5f5f0,#ffffff);
  position:relative;
}
.c-corners span {
  position:absolute; font-size:16px; color:#b8860b;
  line-height:1;
}
.c-corners span:nth-child(1) { top:10px; left:10px; }
.c-corners span:nth-child(2) { top:10px; right:10px; }
.c-corners span:nth-child(3) { bottom:10px; left:10px; }
.c-corners span:nth-child(4) { bottom:10px; right:10px; }
.c-top-band {
  background:#0d3a5c; color:#ffffff;
  text-align:center; padding:8px;
  font-size:11px; letter-spacing:4px;
  font-weight:700; margin-bottom:16px;
}
.c-cert-word {
  text-align:center; font-size:11px; letter-spacing:5px;
  color:#999; text-transform:uppercase; margin-bottom:6px;
}
.c-presented {
  text-align:center; font-size:13px; color:#555;
  margin-bottom:8px;
}
.c-name {
  text-align:center; font-family:'Cinzel',serif;
  font-size:26px; font-weight:700; color:#0d3a5c;
  font-style:italic; border-bottom:2px solid #b8860b;
  padding-bottom:8px; margin-bottom:10px;
}
.c-module-badge {
  text-align:center; background:#0d3a5c; color:#ffffff;
  padding:6px 16px; font-size:11px; letter-spacing:3px;
  margin:10px 60px; border-radius:2px;
}
.c-content-line {
  text-align:center; font-size:11px; color:#555;
  margin:6px 0; line-height:1.6;
}
.c-grade {
  text-align:center; margin:10px 0;
  font-size:13px; color:#0d3a5c; font-weight:700;
}
.c-score-row {
  display:flex; justify-content:center; gap:8px;
  flex-wrap:wrap; margin:12px 0;
}
.c-score-chip {
  background:#f0f0f0; border:1px solid #ccc;
  border-radius:4px; padding:4px 10px;
  font-size:10px; text-align:center;
  min-width:70px;
}
.c-score-chip .chip-label { color:#666; font-size:9px; display:block; margin-bottom:2px; }
.c-score-chip .chip-val { font-weight:700; color:#0d3a5c; }
.c-sig-row {
  display:flex; justify-content:space-between;
  margin-top:16px; align-items:flex-end;
}
.c-sig-block { text-align:center; }
.c-sig-name {
  font-family:'Dancing Script',cursive;
  font-size:18px; color:#0d3a5c;
}
.c-sig-line { border-top:1px solid #999; width:160px; margin:4px auto; }
.c-sig-title { font-size:9px; letter-spacing:1px; color:#777; text-transform:uppercase; }
.c-bottom-strip {
  background:#0d3a5c; color:#b8860b;
  text-align:center; padding:6px;
  font-size:9px; letter-spacing:2px; margin-top:14px;
}

.btn-download-cert {
  display:block; margin:16px auto;
  padding:12px 36px; background:linear-gradient(90deg,var(--accent3),#00cc88);
  border:none; border-radius:12px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:800;
  color:#0a0e1a; cursor:pointer; transition:opacity 0.2s;
}
.btn-download-cert:hover { opacity:0.88; }

.cert-nav-links {
  display:flex; justify-content:center; gap:16px;
  margin:28px 0 12px; flex-wrap:wrap;
}
.cert-nav-link {
  font-family:'Orbitron',sans-serif; font-size:12px;
  font-weight:600; color:var(--accent);
  text-decoration:none; padding:12px 24px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--surface); transition:all 0.25s;
}
.cert-nav-link:hover {
  border-color:var(--accent); background:rgba(0,200,240,0.06);
  box-shadow:0 4px 16px rgba(0,200,240,0.12);
  transform:translateY(-2px);
}


/* ══════════════════════════════════════════
   22. TIMER WIDGET (in sidebar)
══════════════════════════════════════════ */
#time-widget {
  margin:0 12px 8px;
  background:rgba(0,200,240,0.05);
  border:1px solid rgba(0,200,240,0.18);
  border-radius:12px;
  padding:12px 14px;
}
.tw-header {
  font-size:9px; letter-spacing:2px; color:var(--accent);
  font-family:'Space Mono',monospace; text-transform:uppercase;
  margin-bottom:8px; opacity:0.7;
}
.tw-main {
  display:flex; align-items:center; gap:8px;
}
#tw-display {
  font-family:'Space Mono',monospace;
  font-size:20px; font-weight:700; color:var(--accent);
  letter-spacing:2px; flex:1; line-height:1;
}
#tw-display.break-warning { color:var(--warn); animation:pulse 1s ease infinite; }
#tw-display.time-up { color:var(--accent3); }
.tw-pause-btn {
  width:30px; height:30px; border-radius:8px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text2); cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; flex-shrink:0;
}
.tw-pause-btn:hover { border-color:var(--accent4); color:var(--accent4); }
.tw-pause-btn.paused {
  background:rgba(255,107,53,0.12);
  border-color:var(--accent4); color:var(--accent4);
  animation:pulse 1.5s ease infinite;
}
.tw-progress {
  height:4px; background:var(--surface3);
  border-radius:2px; margin-top:10px; overflow:hidden;
}
.tw-progress-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent3));
  transition:width 1s linear; border-radius:2px;
}
.tw-breaklabel {
  font-size:9px; color:var(--text3); margin-top:6px;
  font-family:'Space Mono',monospace;
}


/* ══════════════════════════════════════════
   23. BREAK OVERLAYS
══════════════════════════════════════════ */
.break-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  flex-direction:column;
}
.break-overlay.show { display:flex; animation:fadeInOverlay 0.5s ease; }
.break-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px; padding:40px 48px;
  max-width:500px; width:90%; text-align:center;
  box-shadow:0 20px 80px rgba(0,0,0,0.6);
  position:relative; overflow:hidden;
}
.break-card::before {
  content:''; position:absolute;
  inset:0; border-radius:24px;
  background:radial-gradient(ellipse at top,rgba(0,200,240,0.04),transparent 60%);
  pointer-events:none;
}
.break-emoji { font-size:56px; margin-bottom:14px; line-height:1; }
.break-type {
  font-size:10px; letter-spacing:3px; font-weight:700;
  text-transform:uppercase; font-family:'Space Mono',monospace;
  margin-bottom:8px;
}
.break-title {
  font-family:'Orbitron',sans-serif;
  font-size:22px; font-weight:800; color:var(--text);
  margin-bottom:8px;
}
.break-subtitle { font-size:13px; color:var(--text3); margin-bottom:24px; line-height:1.6; }
.break-countdown {
  font-family:'Space Mono',monospace;
  font-size:52px; font-weight:700;
  margin:8px 0 20px; line-height:1;
}
.break-countdown-label {
  font-size:11px; color:var(--text3);
  text-transform:uppercase; letter-spacing:2px;
  margin-bottom:20px;
}
.break-activity {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:12px; padding:14px 18px; margin-bottom:22px;
  text-align:left;
}
.break-activity-title {
  font-size:11px; letter-spacing:2px; font-weight:700;
  text-transform:uppercase; margin-bottom:8px;
  font-family:'Space Mono',monospace;
}
.break-activity ul { list-style:none; padding:0; }
.break-activity li {
  font-size:13px; color:var(--text2); padding:4px 0;
  display:flex; align-items:center; gap:8px;
}
.break-activity li::before { content:'\2192'; color:var(--accent); font-size:10px; }
.btn-resume-break {
  padding:12px 36px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border:none; border-radius:12px;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:800;
  color:#0a0e1a; cursor:pointer; transition:opacity 0.2s;
}
.btn-resume-break:hover { opacity:0.88; }
.btn-resume-break.green-btn {
  background:linear-gradient(90deg,var(--accent3),#00cc88);
}


/* ══════════════════════════════════════════
   24. EASTER EGG OVERLAYS
══════════════════════════════════════════ */
.egg-overlay {
  position:fixed; inset:0; z-index:8500;
  pointer-events:none; display:none;
}
.egg-card {
  position:absolute;
  background:var(--surface);
  border:1px solid var(--accent);
  border-radius:16px; padding:20px 24px;
  box-shadow:0 8px 40px rgba(0,200,240,0.15);
  pointer-events:all;
  opacity:0; transition:all 0.5s cubic-bezier(0.16,1,0.3,1);
  max-width:300px;
}
.egg-card.bottom-right {
  bottom:90px; right:24px;
}
.egg-card.visible {
  opacity:1; transform:translateY(0) !important;
}
.egg-card-emoji { font-size:32px; margin-bottom:8px; }
.egg-card-title { font-size:13px; font-weight:700; color:var(--accent); margin-bottom:6px; }
.egg-card-body { font-size:12px; color:var(--text2); line-height:1.5; margin-bottom:12px; }
.egg-card-dismiss {
  padding:6px 16px; background:var(--accent);
  border:none; border-radius:6px; font-size:11px; font-weight:700;
  color:#0a0e1a; cursor:pointer; font-family:'DM Sans',sans-serif;
}


/* ══════════════════════════════════════════
   25. REGISTRATION MODAL
══════════════════════════════════════════ */
.modal-backdrop {
  position:fixed; inset:0; z-index:9999;
  background:rgba(3,9,20,0.97);
  backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-backdrop.hidden { display:none; }
.modal-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px; padding:36px 40px;
  max-width:480px; width:100%;
  box-shadow:0 20px 80px rgba(0,0,0,0.6);
}
.modal-logo {
  font-family:'Orbitron',sans-serif;
  font-size:10px; letter-spacing:3px; color:var(--accent);
  text-transform:uppercase; margin-bottom:6px;
}
.modal-title {
  font-family:'Orbitron',sans-serif;
  font-size:22px; font-weight:800; color:var(--text);
  margin-bottom:4px;
}
.modal-sub { font-size:13px; color:var(--text3); margin-bottom:24px; }
.form-row { display:flex; gap:12px; }
.form-group { margin-bottom:16px; flex:1; }
.form-label {
  display:block; font-size:11px; font-weight:700;
  color:var(--text3); text-transform:uppercase;
  letter-spacing:1px; margin-bottom:6px;
}
.form-input {
  width:100%; padding:11px 14px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; font-family:'DM Sans',sans-serif;
  font-size:14px; color:var(--text);
  transition:border-color 0.2s, box-shadow 0.2s;
  outline:none;
}
.form-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,200,240,0.08);
}
.form-input::placeholder { color:var(--text3); }
.btn-enroll {
  width:100%; padding:13px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border:none; border-radius:10px;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:800;
  color:#0a0e1a; cursor:pointer; margin-top:8px;
  transition:opacity 0.2s;
}
.btn-enroll:hover { opacity:0.9; }
.form-error { font-size:11px; color:var(--danger); margin-top:4px; display:none; }
.form-error.show { display:block; }


/* ══════════════════════════════════════════
   26. PASSWORD GATE
══════════════════════════════════════════ */
#pw-gate {
  position:fixed; inset:0; z-index:99999;
  background:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  animation:fadeSlideIn 0.5s ease;
}
#pw-gate.hidden { display:none; }
.pw-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:40px 44px; max-width:440px; width:92%;
  text-align:center; box-shadow:0 20px 80px rgba(0,0,0,0.5);
  position:relative; overflow:hidden;
}
.pw-card::before {
  content:''; position:absolute; inset:0; border-radius:20px;
  background:radial-gradient(ellipse at top, rgba(0,200,240,0.06), transparent 60%);
  pointer-events:none;
}
.pw-logo {
  font-family:'Orbitron',sans-serif; font-size:13px; font-weight:800;
  color:var(--accent); letter-spacing:2px; margin-bottom:20px;
}
.pw-lock-icon {
  font-size:52px; margin-bottom:16px; display:block;
  animation:pulseBig 2.5s ease infinite;
}
.pw-title {
  font-family:'Orbitron',sans-serif; font-size:20px; font-weight:800;
  color:var(--text); margin-bottom:6px;
}
.pw-sub { font-size:13px; color:var(--text3); margin-bottom:28px; line-height:1.6; }
.pw-input-wrap { position:relative; margin-bottom:14px; }
.pw-input {
  width:100%; padding:13px 50px 13px 18px;
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:12px; color:var(--text);
  font-family:'Space Mono',monospace; font-size:14px;
  outline:none; transition:border-color 0.2s;
  letter-spacing:2px;
}
.pw-input:focus { border-color:var(--accent); }
.pw-input.error { border-color:var(--danger); animation:shake 0.4s ease; }
.pw-toggle {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text3); cursor:pointer;
  font-size:16px; padding:4px;
}
.pw-toggle:hover { color:var(--accent); }
.pw-error-msg {
  font-size:12px; color:var(--danger); margin-bottom:12px;
  display:none; font-family:'Space Mono',monospace;
}
.pw-error-msg.show { display:block; }
.btn-pw-enter {
  width:100%; padding:13px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border:none; border-radius:12px;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:800;
  color:#0a0e1a; cursor:pointer; transition:opacity 0.2s, transform 0.1s;
}
.btn-pw-enter:hover { opacity:0.9; }
.btn-pw-enter:active { transform:scale(0.98); }
.pw-hint {
  margin-top:18px; font-size:11px; color:var(--text3);
  font-family:'Space Mono',monospace;
}


/* ══════════════════════════════════════════
   27. HAMBURGER & OVERLAY
══════════════════════════════════════════ */
.hamburger {
  display:none; position:fixed; top:16px; left:16px;
  z-index:60; background:var(--surface);
  border:1px solid var(--border); border-radius:8px;
  width:40px; height:40px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hamburger span {
  display:block; width:20px; height:2px;
  background:var(--text); border-radius:2px;
}
.overlay-bg {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.5); z-index:49;
}


/* ══════════════════════════════════════════
   28. INTERACTIVE DEMOS
══════════════════════════════════════════ */
.interactive-demo {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:16px; padding:24px; margin:20px 0; overflow:hidden;
}
.demo-title {
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.demo-title .demo-badge {
  background:rgba(168,85,247,0.15); border:1px solid rgba(168,85,247,0.3);
  border-radius:6px; padding:3px 10px; font-size:9px; color:var(--accent5);
  font-family:'Space Mono',monospace;
}
.demo-btn {
  padding:8px 20px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface3); color:var(--text2); cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:700;
  transition:all 0.2s;
}
.demo-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(0,200,240,0.08); }
.demo-btn.active { background:var(--accent); color:#0a0e1a; border-color:var(--accent); }

/* Charge particles */
.charge-particle {
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; font-family:'Space Mono',monospace;
  position:absolute; transition:all 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
.charge-positive { background:radial-gradient(circle at 35% 35%, #ff6b6b, #cc3333); color:white; box-shadow:0 0 20px rgba(255,77,109,0.4); }
.charge-negative { background:radial-gradient(circle at 35% 35%, #4dabf7, #1971c2); color:white; box-shadow:0 0 20px rgba(0,200,240,0.4); }

/* Calculator */
.calc-input {
  width:100px; padding:8px 12px; background:var(--surface3); border:1px solid var(--border);
  border-radius:8px; color:var(--accent); font-family:'Space Mono',monospace;
  font-size:16px; text-align:center; outline:none;
}
.calc-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,200,240,0.1); }
.calc-result {
  font-family:'Space Mono',monospace; font-size:28px; font-weight:700;
  color:var(--accent3); text-align:center; padding:12px;
  background:rgba(0,255,170,0.06); border:1px solid rgba(0,255,170,0.2);
  border-radius:10px; margin-top:12px;
  transition:all 0.4s ease; transform:scale(1);
}
.calc-result.pop { animation:popIn 0.5s ease; }

/* Waveform */
.waveform-container { position:relative; height:160px; overflow:hidden; }

/* Water analogy */
.water-pipe { fill:none; stroke:var(--border); stroke-width:3; }
.water-flow { fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:8 4; }
.water-flow.flowing { animation:flowDash 0.5s linear infinite; }

/* Multimeter */
.multimeter-body {
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:2px solid #333; border-radius:20px; padding:20px;
  max-width:280px; margin:0 auto; position:relative;
}
.mm-screen {
  background:#0a0a0a; border:2px solid #444; border-radius:8px;
  padding:12px 16px; text-align:right; margin-bottom:16px;
}
.mm-reading {
  font-family:'Space Mono',monospace; font-size:32px; font-weight:700;
  color:var(--accent3); transition:all 0.3s;
}
.mm-unit { font-family:'Space Mono',monospace; font-size:14px; color:var(--text3); }
.mm-dial {
  width:80px; height:80px; border-radius:50%; background:#222;
  border:2px solid #555; margin:0 auto 16px; position:relative; cursor:pointer;
}
.mm-dial-marker {
  position:absolute; top:8px; left:50%; width:3px; height:20px;
  background:var(--danger); transform-origin:bottom center; border-radius:2px;
  margin-left:-1.5px; transition:transform 0.3s ease;
}
.mm-dial-label {
  position:absolute; font-size:8px; font-weight:700; color:var(--text3);
  font-family:'Space Mono',monospace;
}


/* ══════════════════════════════════════════
   29. KEYFRAME ANIMATIONS
══════════════════════════════════════════ */
@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInOverlay {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes pulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.5; }
}
@keyframes confettiFall {
  0%   { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(100vh) rotate(720deg); opacity:0; }
}
@keyframes pulseBig {
  0%,100% { box-shadow:0 0 16px rgba(0,200,240,0.5); transform:scale(1); }
  50%     { box-shadow:0 0 28px rgba(0,200,240,0.8); transform:scale(1.1); }
}
@keyframes countdownPulse {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.05); }
  100% { transform:scale(1); }
}
@keyframes orbit1 {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes orbit2 {
  from { transform:rotate(60deg); }
  to   { transform:rotate(420deg); }
}
@keyframes orbit3 {
  from { transform:rotate(-60deg); }
  to   { transform:rotate(300deg); }
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-6px); }
  40%,80% { transform:translateX(6px); }
}
@keyframes mflow {
  from { opacity:0.5; }
  to   { opacity:1; }
}
@keyframes sineWave {
  from { transform:translateX(0); }
  to   { transform:translateX(-200px); }
}
@keyframes electronDrift {
  0%   { left:0%; }
  100% { left:100%; }
}
@keyframes flowDash {
  to { stroke-dashoffset:-12; }
}
@keyframes popIn {
  0%   { transform:scale(0.8); opacity:0.5; }
  50%  { transform:scale(1.1); }
  100% { transform:scale(1); opacity:1; }
}


/* ══════════════════════════════════════════
   30. SCROLLBAR CUSTOMIZATION
══════════════════════════════════════════ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--surface); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text3); }


/* ══════════════════════════════════════════
   31. HOMEPAGE STYLES
══════════════════════════════════════════ */

/* ── Hero ── */
.hp-hero {
  position:relative; overflow:hidden;
  padding:80px 24px 56px; text-align:center;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
  min-height:420px;
}
.hp-particles {
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.hp-hero-inner { position:relative; z-index:1; max-width:800px; margin:0 auto; }
.hp-logo-badge {
  font-size:64px; margin-bottom:16px;
  filter:drop-shadow(0 0 24px rgba(0,200,240,0.5));
  animation:hpFloat 3s ease-in-out infinite;
}
@keyframes hpFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}
.hp-title {
  font-family:'Cinzel',serif; font-size:clamp(30px,5.5vw,48px);
  font-weight:700; color:var(--accent); letter-spacing:1px;
  text-shadow:0 0 40px rgba(0,200,240,0.35);
  margin-bottom:8px;
}
.hp-subtitle {
  font-family:'Orbitron',sans-serif; font-size:clamp(11px,2vw,14px);
  letter-spacing:5px; text-transform:uppercase;
  color:var(--accent2); margin-bottom:12px;
}
.hp-typing-wrap {
  font-family:'DM Sans',sans-serif; font-size:clamp(15px,2.5vw,20px);
  color:var(--text2); margin-bottom:32px; min-height:30px;
}
.hp-typing { color:var(--text); }
.hp-cursor {
  color:var(--accent); font-weight:300;
  animation:hpBlink 0.8s step-end infinite;
}
@keyframes hpBlink { 0%,100%{opacity:1} 50%{opacity:0} }

.hp-stats {
  display:flex; justify-content:center; gap:36px; flex-wrap:wrap;
  margin-bottom:32px;
}
.hp-stat {
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.hp-stat-num {
  font-family:'Orbitron',sans-serif; font-size:28px;
  font-weight:700; color:var(--accent);
}
.hp-stat-label {
  font-size:11px; text-transform:uppercase; letter-spacing:2px;
  color:var(--text3);
}
.hp-cta-btn {
  display:inline-block; padding:14px 36px;
  font-family:'Orbitron',sans-serif; font-size:13px; font-weight:600;
  color:var(--bg); background:var(--accent);
  border:none; border-radius:30px; text-decoration:none;
  cursor:pointer; transition:all 0.3s;
  box-shadow:0 0 20px rgba(0,200,240,0.3);
  letter-spacing:1px;
}
.hp-cta-btn:hover {
  background:#00deff; transform:translateY(-2px);
  box-shadow:0 0 30px rgba(0,200,240,0.5);
}

/* ── Feature Highlights ── */
.hp-features {
  background:var(--bg); padding:60px 24px;
  border-bottom:1px solid var(--border);
}
.hp-features-inner { max-width:1100px; margin:0 auto; }
.hp-features-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px; margin-top:32px;
}
.hp-feature-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:28px 20px;
  text-align:center; transition:all 0.3s;
  border-top:3px solid transparent;
}
.hp-feature-card:hover {
  border-top-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.hp-feature-icon { font-size:40px; margin-bottom:14px; }
.hp-feature-title {
  font-family:'Orbitron',sans-serif; font-size:14px;
  font-weight:600; color:var(--accent); margin-bottom:10px;
}
.hp-feature-desc {
  font-size:13px; color:var(--text2); line-height:1.6;
}

/* ── Section titles (shared) ── */
.hp-section-title {
  font-family:'Orbitron',sans-serif; font-size:22px;
  font-weight:600; color:var(--text); margin-bottom:8px;
  text-align:center;
}

/* ── Catalog ── */
.hp-catalog { background:var(--bg); padding:60px 24px 80px; }
.hp-catalog-inner { max-width:1200px; margin:0 auto; }

/* Category pills */
.hp-categories {
  display:flex; justify-content:center; gap:10px;
  flex-wrap:wrap; margin:28px 0 24px;
}
.hp-cat-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:30px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text2); font-size:13px; font-weight:500;
  cursor:pointer; transition:all 0.25s;
  font-family:'DM Sans',sans-serif;
}
.hp-cat-pill:hover {
  border-color:var(--accent); color:var(--text);
}
.hp-cat-pill.active {
  background:rgba(0,200,240,0.12); border-color:var(--accent);
  color:var(--accent); font-weight:600;
}
.hp-cat-icon { font-size:16px; }

/* Search & Sort toolbar */
.hp-toolbar {
  display:flex; gap:12px; margin-bottom:16px;
  align-items:center;
}
.hp-search-wrap {
  flex:1; position:relative;
}
.hp-search-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:14px; pointer-events:none;
}
.hp-search {
  width:100%; padding:12px 16px 12px 40px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; color:var(--text); font-size:14px;
  font-family:'DM Sans',sans-serif;
  outline:none; transition:border-color 0.2s;
}
.hp-search:focus { border-color:var(--accent); }
.hp-search::placeholder { color:var(--text3); }
.hp-sort {
  padding:12px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px;
  color:var(--text); font-size:13px;
  font-family:'DM Sans',sans-serif;
  cursor:pointer; outline:none; min-width:160px;
}
.hp-sort:focus { border-color:var(--accent); }

/* Tag filter pills */
.hp-tag-filters {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:24px;
}
.hp-tag-pill {
  padding:6px 14px; border-radius:20px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text3); font-size:12px; cursor:pointer;
  transition:all 0.2s; font-family:'DM Sans',sans-serif;
}
.hp-tag-pill:hover { border-color:var(--text2); color:var(--text2); }
.hp-tag-pill.active {
  background:rgba(0,200,240,0.12); border-color:var(--accent);
  color:var(--accent); font-weight:600;
}

/* No results */
.hp-no-results {
  flex-direction:column; align-items:center; justify-content:center;
  padding:60px 20px; color:var(--text3); text-align:center;
  gap:12px;
}
.hp-no-results-icon { font-size:48px; opacity:0.5; }
.hp-clear-filters {
  padding:10px 24px; border-radius:20px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--accent); font-size:13px; cursor:pointer;
  font-family:'Orbitron',sans-serif; transition:all 0.2s;
}
.hp-clear-filters:hover { background:rgba(0,200,240,0.1); border-color:var(--accent); }

/* ── Course Cards Grid ── */
.hp-course-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
}
.hp-course-card {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:28px 24px 20px;
  text-decoration:none; color:var(--text);
  transition:all 0.4s ease, opacity 0.6s ease, transform 0.6s ease;
  cursor:pointer; display:flex; flex-direction:column;
}
.hp-course-card:hover {
  border-color:var(--card-accent, var(--accent));
  transform:translateY(-6px) !important;
  box-shadow:0 12px 40px rgba(0,0,0,0.35), 0 0 24px color-mix(in srgb, var(--card-accent, var(--accent)) 15%, transparent);
}
.hp-course-card.coming-soon { opacity:0.55; cursor:default; }
.hp-course-card.coming-soon:hover {
  transform:none !important; box-shadow:none; border-color:var(--border);
}
.hp-card-glow {
  position:absolute; top:-30px; right:-30px;
  width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--card-accent, var(--accent)) 10%, transparent) 0%, transparent 70%);
  pointer-events:none;
}
.hp-card-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:12px;
}
.hp-card-icon {
  font-size:40px;
  filter:drop-shadow(0 0 10px rgba(0,0,0,0.3));
}
.hp-card-category {
  font-size:10px; padding:4px 10px; border-radius:12px;
  border:1px solid; font-weight:600; letter-spacing:0.3px;
  white-space:nowrap;
}
.hp-card-title {
  font-family:'Orbitron',sans-serif; font-size:16px;
  font-weight:600; color:var(--card-accent, var(--accent));
  margin-bottom:4px;
}
.hp-card-teacher {
  font-size:12px; color:var(--text3); margin-bottom:10px;
  font-style:italic;
}
.hp-card-desc {
  font-size:13px; color:var(--text2); line-height:1.5;
  flex:1; margin-bottom:16px;
}
.hp-card-price {
  font-family:'Space Mono',monospace; font-size:12px;
  color:var(--accent3); margin-bottom:12px;
}
.hp-card-meta {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
}
.hp-card-sessions {
  font-family:'Space Mono',monospace; font-size:12px;
  color:var(--card-accent, var(--accent)); font-weight:700;
}
.hp-card-tags { display:flex; gap:6px; flex-wrap:wrap; }
.hp-tag {
  font-size:10px; padding:2px 8px; border-radius:10px;
  background:var(--surface2); color:var(--text3);
  border:1px solid var(--border); letter-spacing:0.5px;
}
.hp-card-cta {
  font-family:'Orbitron',sans-serif; font-size:12px;
  font-weight:600; color:var(--card-accent, var(--accent));
  text-align:center; padding:10px;
  border-top:1px solid var(--border); margin:0 -24px -20px;
  background:var(--surface2); border-radius:0 0 16px 16px;
  transition:background 0.2s;
}
.hp-course-card:hover .hp-card-cta:not(.soon) {
  background:color-mix(in srgb, var(--card-accent, var(--accent)) 12%, var(--surface2));
}
.hp-card-cta.soon { color:var(--text3); }
.hp-disabled-overlay {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,12,24,0.7); color:var(--text3);
  font-family:'Orbitron',sans-serif; font-size:13px;
  font-weight:600; letter-spacing:1px;
}

/* ── Scroll Animations ── */
.hp-animate {
  opacity:0; transform:translateY(30px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.hp-animate.hp-visible {
  opacity:1; transform:translateY(0);
}

/* ── Footer ── */
.hp-footer {
  border-top:1px solid var(--border);
  padding:48px 24px 24px;
  background:var(--surface);
}
.hp-footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:32px; max-width:900px; margin:0 auto;
}
.hp-footer-col { display:flex; flex-direction:column; gap:6px; }
.hp-footer-brand {
  font-family:'Cinzel',serif; font-size:20px;
  color:var(--accent); margin-bottom:4px;
}
.hp-footer-text {
  font-size:13px; color:var(--text3); margin:0;
}
.hp-footer-badge {
  display:inline-block; margin-top:8px;
  padding:4px 14px; border-radius:20px;
  background:rgba(0,200,240,0.08); border:1px solid var(--accent2);
  color:var(--accent); font-size:11px; font-weight:600;
  font-family:'Orbitron',sans-serif; letter-spacing:1px;
  width:fit-content;
}
.hp-footer-heading {
  font-family:'Orbitron',sans-serif; font-size:12px;
  font-weight:600; color:var(--text2); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:6px;
}
.hp-footer-link {
  font-size:13px; color:var(--text3); text-decoration:none;
  transition:color 0.2s;
}
.hp-footer-link:hover { color:var(--accent); }
.hp-footer-bottom {
  text-align:center; margin-top:32px; padding-top:20px;
  border-top:1px solid var(--border);
}
.hp-footer-bottom p {
  font-size:12px; color:var(--text3); margin:0;
}

/* ── Homepage Responsive ── */
@media(max-width:1024px) {
  .hp-features-grid { grid-template-columns:repeat(2, 1fr); }
  .hp-footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .hp-hero { padding:48px 16px 40px; min-height:auto; }
  .hp-stats { gap:20px; }
  .hp-stat-num { font-size:22px; }
  .hp-features { padding:40px 16px; }
  .hp-features-grid { grid-template-columns:1fr; }
  .hp-catalog { padding:40px 16px 60px; }
  .hp-toolbar { flex-direction:column; }
  .hp-sort { min-width:auto; width:100%; }
  .hp-course-grid { grid-template-columns:1fr; }
  .hp-categories { gap:8px; }
  .hp-cat-pill { padding:8px 14px; font-size:12px; }
  .hp-footer-grid { grid-template-columns:1fr; text-align:center; }
  .hp-footer-col { align-items:center; }
  .hp-footer-badge { margin:8px auto 0; }
}
@media(max-width:480px) {
  .hp-hero { padding:36px 12px 32px; }
  .hp-title { font-size:24px; }
  .hp-logo-badge { font-size:48px; }
  .hp-cta-btn { padding:12px 28px; font-size:12px; }
  .hp-categories {
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    -webkit-overflow-scrolling:touch; padding-bottom:8px;
    scrollbar-width:none;
  }
  .hp-categories::-webkit-scrollbar { display:none; }
  .hp-cat-pill { flex-shrink:0; }
}

/* Reduced motion */
@media(prefers-reduced-motion: reduce) {
  .hp-animate { opacity:1; transform:none; transition:none; }
  .hp-logo-badge { animation:none; }
  .hp-cursor { animation:none; }
  .hp-particles { display:none; }
  .hp-course-card { transition:border-color 0.2s, box-shadow 0.2s; }
  .hp-feature-card { transition:border-color 0.2s; }
}


/* ══════════════════════════════════════════
   32. COURSE PAGE STYLES
══════════════════════════════════════════ */

/* Course Header */
.cp-header {
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
  padding:24px 24px 36px;
}
.cp-header-inner {
  max-width:900px; margin:0 auto;
}
.cp-back {
  display:inline-block; font-size:13px;
  color:var(--text3); text-decoration:none;
  margin-bottom:16px; transition:color 0.2s;
}
.cp-back:hover { color:var(--accent); }
.cp-header-top {
  display:flex; align-items:center; gap:16px;
  margin-bottom:12px;
}
.cp-icon {
  font-size:48px;
  filter:drop-shadow(0 0 12px rgba(0,0,0,0.4));
}
.cp-title {
  font-family:'Cinzel',serif; font-size:clamp(24px,4vw,34px);
  font-weight:700; color:var(--course-color, var(--accent));
}
.cp-subtitle {
  font-family:'Orbitron',sans-serif; font-size:12px;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--text3); margin-top:2px;
}
.cp-teacher {
  font-size:13px; color:var(--text3); margin-top:4px;
  font-style:italic;
}
.cp-desc {
  font-size:14px; color:var(--text2); line-height:1.6;
  max-width:700px; margin-bottom:20px;
}
.cp-meta-row {
  display:flex; gap:24px; flex-wrap:wrap;
}
.cp-meta-item {
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text2);
  background:var(--surface2); padding:6px 14px;
  border-radius:8px; border:1px solid var(--border);
}
.cp-meta-icon { font-size:15px; }

/* Session List */
.cp-sessions-section {
  max-width:900px; margin:0 auto; padding:32px 24px 60px;
}
.cp-month-group { margin-bottom:36px; }
.cp-month-title {
  font-family:'Orbitron',sans-serif; font-size:15px;
  font-weight:600; color:var(--accent);
  letter-spacing:1px; margin-bottom:16px;
  padding-bottom:8px; border-bottom:1px solid var(--border);
}
.cp-session-list {
  display:flex; flex-direction:column; gap:12px;
}

/* Session Card */
.cp-session-card {
  display:flex; align-items:flex-start; gap:16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:20px;
  transition:all 0.25s ease;
}
.cp-session-card:hover:not(.locked) {
  border-color:var(--accent);
  box-shadow:0 4px 20px rgba(0,0,0,0.2), 0 0 12px rgba(0,200,240,0.08);
}
.cp-session-card.locked {
  opacity:0.5;
}
.cp-session-num {
  flex-shrink:0; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:12px; font-family:'Orbitron',sans-serif;
  font-size:16px; font-weight:700; color:var(--accent);
}
.cp-session-card.locked .cp-session-num {
  font-size:20px; color:var(--text3);
}
.cp-session-body { flex:1; min-width:0; }
.cp-session-title {
  font-size:16px; font-weight:700; color:var(--text);
  margin-bottom:6px;
}
.cp-session-title a {
  color:inherit; text-decoration:none;
  transition:color 0.2s;
}
.cp-session-title a:hover { color:var(--accent); }
.cp-session-desc {
  font-size:13px; color:var(--text2); line-height:1.5;
  margin-bottom:10px;
}
.cp-topic-chips {
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:10px;
}
.cp-topic-chip {
  font-size:11px; padding:3px 10px;
  background:var(--surface2); color:var(--text3);
  border:1px solid var(--border); border-radius:10px;
  font-family:'Space Mono',monospace;
}
.cp-session-card:not(.locked) .cp-topic-chip {
  color:var(--text2);
}
.cp-session-info {
  display:flex; gap:8px; flex-wrap:wrap;
  font-size:11px; color:var(--text3);
  font-family:'Space Mono',monospace;
}
.cp-session-action {
  flex-shrink:0; display:flex; align-items:center;
}
.cp-start-btn {
  font-family:'Orbitron',sans-serif; font-size:12px;
  font-weight:600; color:var(--bg);
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  padding:10px 20px; border-radius:10px;
  text-decoration:none; white-space:nowrap;
  transition:all 0.2s;
}
.cp-start-btn:hover {
  transform:scale(1.05);
  box-shadow:0 4px 16px rgba(0,200,240,0.3);
}
.cp-locked-label {
  font-size:12px; color:var(--text3);
  font-family:'Space Mono',monospace;
}


/* ══════════════════════════════════════════
   33. RESPONSIVE (max-width: 768px)
══════════════════════════════════════════ */
@media(max-width:768px) {
  /* Session page */
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; width:100%; }
  .hamburger { display:flex; }
  .overlay-bg.open { display:block; }
  .page-header-inner { padding:16px 20px 14px; }
  .page-body { padding:0 20px 60px; }
  .form-row { flex-direction:column; gap:0; }

  /* Course page */
  .cp-header { padding:16px 16px 24px; }
  .cp-header-top { flex-direction:column; align-items:flex-start; gap:8px; }
  .cp-meta-row { gap:8px; }
  .cp-meta-item { font-size:12px; padding:5px 10px; }
  .cp-sessions-section { padding:24px 16px 40px; }
  .cp-session-card { flex-direction:column; gap:12px; }
  .cp-session-action { align-self:stretch; }
  .cp-start-btn { display:block; text-align:center; width:100%; }

  /* Auth nav */
  .auth-nav-inner { flex-direction:column; gap:8px; padding:8px 16px; }
  .auth-nav-user { gap:8px; }
  .auth-modal-card { width:94%; margin:20px auto; padding:24px 16px; max-height:90vh; overflow-y:auto; }
  .auth-row { flex-direction:column; gap:0; }

  /* Admin */
  .admin-container { padding:16px; }
  .admin-students-grid { grid-template-columns:1fr; }
  .admin-detail-access-grid { grid-template-columns:1fr; }
}


/* ══════════════════════════════════════════
   34. AUTH NAV BAR
══════════════════════════════════════════ */
.auth-nav {
  position:sticky; top:0; z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.auth-nav-inner {
  max-width:1200px; margin:0 auto;
  padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.auth-nav-brand {
  font-family:'Orbitron',sans-serif;
  font-weight:700; font-size:14px;
  color:var(--accent);
}
.auth-nav-user {
  display:flex; align-items:center; gap:10px;
}
.auth-nav-avatar {
  width:34px; height:34px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; color:#0a0e14;
  font-family:'Space Mono',monospace;
}
.auth-nav-name {
  font-weight:600; font-size:14px; color:var(--text1);
}
.auth-role-badge {
  font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:20px;
  font-family:'Space Mono',monospace;
  text-transform:uppercase; letter-spacing:0.5px;
}
.auth-role-badge.student { background:rgba(0,200,240,0.15); color:var(--accent); }
.auth-role-badge.teacher { background:rgba(0,255,170,0.15); color:var(--accent3); }

.auth-nav-actions {
  display:flex; align-items:center; gap:8px;
}
.auth-nav-btn {
  padding:6px 16px; border-radius:8px;
  font-size:13px; font-weight:600;
  cursor:pointer; border:none;
  font-family:'DM Sans',sans-serif;
  transition:all 0.2s ease;
  text-decoration:none;
}
.auth-nav-btn.login-btn {
  background:transparent; color:var(--accent);
  border:1px solid var(--accent);
}
.auth-nav-btn.login-btn:hover { background:rgba(0,200,240,0.1); }
.auth-nav-btn.signup-btn {
  background:var(--accent); color:#0a0e14;
}
.auth-nav-btn.signup-btn:hover { opacity:0.9; }
.auth-nav-btn.admin-btn {
  background:rgba(0,255,170,0.15); color:var(--accent3);
  border:1px solid rgba(0,255,170,0.3);
}
.auth-nav-btn.admin-btn:hover { background:rgba(0,255,170,0.25); }
.auth-nav-btn.logout-btn {
  background:var(--surface2); color:var(--text3);
  border:1px solid var(--border);
}
.auth-nav-btn.logout-btn:hover { color:var(--danger); border-color:var(--danger); }


/* ══════════════════════════════════════════
   35. AUTH MODAL (Login / Signup)
══════════════════════════════════════════ */
.auth-modal-backdrop {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn 0.3s ease;
  transition:opacity 0.3s ease;
}
.auth-modal-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px;
  width:440px; max-width:95%;
  position:relative;
  animation:slideUp 0.3s ease;
}
@keyframes slideUp { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }

.auth-modal-close {
  position:absolute; top:12px; right:16px;
  background:none; border:none; color:var(--text3);
  font-size:24px; cursor:pointer;
  transition:color 0.2s;
}
.auth-modal-close:hover { color:var(--text1); }

.auth-modal-logo {
  text-align:center; font-family:'Orbitron',sans-serif;
  font-weight:700; font-size:16px; color:var(--accent);
  margin-bottom:20px;
}

.auth-tabs {
  display:flex; gap:0; margin-bottom:20px;
  border:1px solid var(--border); border-radius:10px;
  overflow:hidden;
}
.auth-tab {
  flex:1; padding:10px; text-align:center;
  background:var(--surface2); color:var(--text3);
  border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-weight:600; font-size:14px;
  transition:all 0.2s;
}
.auth-tab.active {
  background:var(--accent); color:#0a0e14;
}

.auth-form { }
.auth-field {
  margin-bottom:14px;
}
.auth-label {
  display:block; font-size:12px; font-weight:600;
  color:var(--text2); margin-bottom:4px;
  font-family:'Space Mono',monospace;
}
.auth-input {
  width:100%; padding:10px 12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px; color:var(--text1);
  font-family:'DM Sans',sans-serif;
  font-size:14px; outline:none;
  transition:border-color 0.2s;
  box-sizing:border-box;
}
.auth-input:focus { border-color:var(--accent); }
.auth-input::placeholder { color:var(--text3); }

.auth-row {
  display:flex; gap:12px;
}
.auth-row .auth-field { flex:1; }

.auth-error {
  color:var(--danger); font-size:13px;
  margin-bottom:10px; min-height:20px;
}

.auth-submit-btn {
  width:100%; padding:12px;
  background:var(--accent); color:#0a0e14;
  border:none; border-radius:10px;
  font-family:'DM Sans',sans-serif;
  font-weight:700; font-size:15px;
  cursor:pointer; transition:opacity 0.2s;
}
.auth-submit-btn:hover { opacity:0.9; }

.auth-switch {
  text-align:center; margin-top:16px;
  font-size:13px; color:var(--text3);
}
.auth-switch a { color:var(--accent); text-decoration:none; }
.auth-switch a:hover { text-decoration:underline; }

/* Role selector */
.auth-role-selector {
  display:flex; gap:12px;
}
.auth-role-option { flex:1; cursor:pointer; }
.auth-role-option input { display:none; }
.auth-role-card {
  display:flex; flex-direction:column;
  align-items:center; gap:6px;
  padding:14px 10px;
  background:var(--surface2);
  border:2px solid var(--border);
  border-radius:10px;
  transition:all 0.2s;
}
.auth-role-option input:checked + .auth-role-card {
  border-color:var(--accent);
  background:rgba(0,200,240,0.08);
}
.auth-role-icon { font-size:24px; }
.auth-role-text {
  font-weight:600; font-size:13px; color:var(--text1);
}


/* ══════════════════════════════════════════
   36. COURSE PAGE LOGIN PROMPT
══════════════════════════════════════════ */
.cp-login-prompt {
  max-width:1000px; margin:0 auto;
  padding:0 24px;
}
.cp-login-prompt-inner {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 24px;
  display:flex; align-items:center; gap:16px;
  margin-top:-12px; margin-bottom:12px;
}
.cp-login-prompt-inner span {
  flex:1; color:var(--text2); font-size:14px;
}


/* ══════════════════════════════════════════
   37. ADMIN PANEL
══════════════════════════════════════════ */
.admin-container {
  max-width:1200px; margin:0 auto;
  padding:24px;
}
.admin-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.admin-title {
  font-family:'Orbitron',sans-serif;
  font-weight:700; font-size:20px;
  color:var(--accent);
}
.admin-subtitle {
  color:var(--text3); font-size:13px; margin-top:4px;
}

/* Student list */
.admin-students-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:16px;
}
.admin-student-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  cursor:pointer;
  transition:all 0.2s;
}
.admin-student-card:hover {
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,200,240,0.1);
}
.admin-student-card .student-header {
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.admin-student-card .student-avatar {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:#0a0e14;
  font-family:'Space Mono',monospace;
}
.admin-student-card .student-name {
  font-weight:700; font-size:15px; color:var(--text1);
}
.admin-student-card .student-email {
  font-size:12px; color:var(--text3);
}
.admin-student-card .student-stats {
  display:flex; gap:16px; font-size:12px; color:var(--text2);
  font-family:'Space Mono',monospace;
}
.admin-student-card .student-stats span { color:var(--accent); font-weight:700; }

/* Student detail view */
.admin-detail-back {
  color:var(--accent); text-decoration:none;
  font-size:14px; display:inline-block;
  margin-bottom:16px; cursor:pointer;
}
.admin-detail-back:hover { text-decoration:underline; }

.admin-detail-header {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px; margin-bottom:24px;
}
.admin-detail-name {
  font-size:20px; font-weight:800; color:var(--text1);
  margin-bottom:4px;
}
.admin-detail-email { color:var(--text3); font-size:13px; }
.admin-detail-meta {
  display:flex; gap:24px; margin-top:12px;
  font-size:12px; color:var(--text2);
  font-family:'Space Mono',monospace;
}

/* Access control section */
.admin-access-section {
  margin-bottom:32px;
}
.admin-access-title {
  font-family:'Orbitron',sans-serif;
  font-weight:600; font-size:16px;
  color:var(--accent3); margin-bottom:12px;
}
.admin-month-group {
  margin-bottom:16px;
}
.admin-month-label {
  font-size:13px; font-weight:700;
  color:var(--text2); margin-bottom:8px;
  font-family:'Space Mono',monospace;
  display:flex; align-items:center; gap:8px;
}
.admin-month-bulk-btn {
  font-size:11px; padding:2px 10px;
  border-radius:6px; border:1px solid var(--border);
  background:var(--surface2); color:var(--text3);
  cursor:pointer; transition:all 0.2s;
}
.admin-month-bulk-btn:hover {
  border-color:var(--accent3); color:var(--accent3);
}

.admin-detail-access-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:8px;
}
.admin-access-item {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 14px;
  transition:border-color 0.2s;
}
.admin-access-item.granted { border-color:rgba(0,255,170,0.3); }
.admin-access-item .session-name {
  font-size:13px; color:var(--text1);
}
.admin-access-item .session-num {
  font-size:11px; color:var(--text3);
  font-family:'Space Mono',monospace;
}

/* Toggle switch */
.admin-toggle {
  position:relative; width:40px; height:22px;
  cursor:pointer;
}
.admin-toggle input { display:none; }
.admin-toggle .toggle-track {
  position:absolute; inset:0;
  background:var(--surface3);
  border-radius:11px;
  transition:background 0.2s;
}
.admin-toggle input:checked + .toggle-track {
  background:var(--accent3);
}
.admin-toggle .toggle-thumb {
  position:absolute; top:2px; left:2px;
  width:18px; height:18px;
  background:white; border-radius:50%;
  transition:left 0.2s;
}
.admin-toggle input:checked ~ .toggle-thumb {
  left:20px;
}

/* Progress section */
.admin-progress-section { margin-top:24px; }
.admin-progress-title {
  font-family:'Orbitron',sans-serif;
  font-weight:600; font-size:16px;
  color:var(--accent); margin-bottom:12px;
}
.admin-progress-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}
.admin-progress-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
}
.admin-progress-card .prog-session {
  font-size:12px; color:var(--accent);
  font-family:'Space Mono',monospace;
  margin-bottom:8px;
}
.admin-progress-card .prog-score {
  font-size:22px; font-weight:800;
  font-family:'Space Mono',monospace;
}
.admin-progress-card .prog-grade {
  font-size:12px; color:var(--text3); margin-top:2px;
}
.admin-progress-card .prog-date {
  font-size:11px; color:var(--text3); margin-top:8px;
}
.admin-no-data {
  color:var(--text3); font-size:14px;
  text-align:center; padding:24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
}

/* ── 38. ADMIN ROLE BADGE ────────────────────────────── */
.auth-role-badge.admin {
  background: rgba(240,200,0,0.15);
  color: var(--warn);
}

/* ── 39. ADMIN TABS ──────────────────────────────────── */
.admin-tabs {
  display:flex; gap:0; margin-bottom:24px;
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.admin-tab {
  flex:1; padding:12px 16px; text-align:center;
  background:var(--surface2); color:var(--text3);
  border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:13px;
  transition:all 0.2s; border-right:1px solid var(--border);
  position:relative;
}
.admin-tab:last-child { border-right:none; }
.admin-tab.active { background:var(--accent); color:#0a0e14; }
.admin-tab:hover:not(.active) { background:var(--surface3); color:var(--text2); }
.admin-tab .tab-badge {
  display:inline-block; background:var(--danger); color:#fff;
  font-size:10px; font-weight:700; padding:1px 6px;
  border-radius:9px; margin-left:6px; vertical-align:middle;
}
.admin-tab.active .tab-badge { background:#0a0e14; color:var(--accent); }

/* ── 40. STAT CARDS ──────────────────────────────────── */
.admin-stats-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px; margin-bottom:24px;
}
.admin-stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:20px; text-align:center;
}
.admin-stat-card .stat-icon { font-size:28px; margin-bottom:8px; }
.admin-stat-card .stat-num {
  font-size:32px; font-weight:800; color:var(--accent);
  font-family:'Space Mono',monospace;
}
.admin-stat-card .stat-label {
  font-size:11px; color:var(--text3); margin-top:4px;
  text-transform:uppercase; letter-spacing:1px;
  font-family:'Space Mono',monospace;
}

/* ── 41. PENDING APPROVAL CARDS ──────────────────────── */
.admin-pending-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
  gap:16px;
}
.admin-pending-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:18px;
  display:flex; align-items:center; gap:14px;
}
.admin-pending-card .pending-info { flex:1; }
.admin-pending-card .pending-name {
  font-size:15px; font-weight:700; color:var(--text1);
}
.admin-pending-card .pending-email {
  font-size:12px; color:var(--text3); margin-top:2px;
}
.admin-pending-card .pending-meta {
  font-size:11px; color:var(--text3); margin-top:6px;
  font-family:'Space Mono',monospace; line-height:1.6;
}
.admin-pending-actions { display:flex; gap:8px; }
.admin-pending-actions button {
  padding:8px 16px; border-radius:8px; border:none;
  font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.admin-pending-actions .approve-btn {
  background:var(--accent3); color:#0a0e14;
}
.admin-pending-actions .approve-btn:hover { opacity:0.8; }
.admin-pending-actions .reject-btn {
  background:var(--surface2); color:var(--danger);
  border:1px solid var(--danger);
}
.admin-pending-actions .reject-btn:hover { background:rgba(255,77,109,0.1); }

/* ── 42. COURSE CARDS ────────────────────────────────── */
.admin-courses-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}
.admin-course-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:20px;
  display:flex; align-items:center; gap:16px;
}
.admin-course-icon { font-size:32px; width:50px; text-align:center; }
.admin-course-info { flex:1; }
.admin-course-name { font-weight:700; font-size:15px; color:var(--text1); }
.admin-course-teacher {
  font-size:12px; color:var(--text3); margin-top:4px;
  font-family:'Space Mono',monospace;
}
.admin-course-select {
  padding:8px 12px; background:var(--surface2);
  border:1px solid var(--border); border-radius:8px;
  color:var(--text1); font-size:13px;
  font-family:'DM Sans',sans-serif;
}
.admin-course-select:focus { border-color:var(--accent); outline:none; }

/* ── 43. ADMIN MODALS ────────────────────────────────── */
.admin-modal-backdrop {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  animation:authFadeIn 0.2s ease;
}
.admin-modal-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:28px; width:440px; max-width:95%;
}
.admin-modal-title {
  font-family:'Orbitron',sans-serif; font-weight:600; font-size:16px;
  color:var(--accent); margin-bottom:20px;
}
.admin-modal-field { margin-bottom:14px; }
.admin-modal-field label {
  display:block; margin-bottom:4px;
  font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--text3); font-weight:600;
}
.admin-modal-field input {
  width:100%; padding:10px 12px; font-size:14px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; color:var(--text1);
  font-family:'DM Sans',sans-serif; transition:border-color 0.2s;
  box-sizing:border-box;
}
.admin-modal-field input:focus { border-color:var(--accent); outline:none; }
.admin-modal-actions {
  display:flex; gap:12px; margin-top:20px;
}
.admin-modal-actions button {
  flex:1; padding:10px; border-radius:8px; border:none;
  font-size:14px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.admin-modal-actions .save-btn { background:var(--accent); color:#0a0e14; }
.admin-modal-actions .save-btn:hover { opacity:0.8; }
.admin-modal-actions .cancel-btn {
  background:var(--surface2); color:var(--text3);
  border:1px solid var(--border);
}
.admin-modal-actions .cancel-btn:hover { border-color:var(--text3); }
.admin-modal-actions .delete-btn {
  background:transparent; color:var(--danger);
  border:1px solid var(--danger);
}
.admin-modal-actions .delete-btn:hover { background:rgba(255,77,109,0.1); }

/* ── 44. TEACHER DASHBOARD BUTTON ────────────────────── */
.auth-nav-btn.teacher-btn {
  background:rgba(0,255,170,0.15); color:var(--accent3);
  border:1px solid rgba(0,255,170,0.3);
}
.auth-nav-btn.teacher-btn:hover { background:rgba(0,255,170,0.25); }

/* ── 45. TEACHER COURSE TABS ─────────────────────────── */
.teacher-course-tabs {
  display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;
}
.teacher-course-tab {
  padding:8px 16px; border-radius:8px;
  background:var(--surface2); color:var(--text3);
  border:1px solid var(--border); cursor:pointer;
  font-size:13px; font-weight:600; transition:all 0.2s;
}
.teacher-course-tab.active {
  background:var(--accent3); color:#0a0e14; border-color:var(--accent3);
}
.teacher-course-tab:hover:not(.active) {
  border-color:var(--accent3); color:var(--accent3);
}

/* ── 47. COLLAPSIBLE COURSE PANELS ───────────────────── */
.admin-course-panel {
  margin-bottom:16px; border:1px solid var(--border);
  border-radius:12px; overflow:hidden; background:var(--surface);
}
.admin-course-panel-header {
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; cursor:pointer;
  background:var(--surface2); transition:background 0.2s;
  user-select:none;
}
.admin-course-panel-header:hover { background:var(--surface3); }
.panel-chevron {
  font-size:12px; color:var(--text3);
  transition:transform 0.25s ease; display:inline-block;
}
.admin-course-panel:not(.collapsed) .panel-chevron {
  transform:rotate(90deg);
}
.panel-icon { font-size:24px; }
.panel-title {
  font-family:'Orbitron',sans-serif; font-size:15px;
  font-weight:600; color:var(--text);
}
.panel-summary {
  margin-left:auto; font-size:11px; color:var(--text3);
  font-family:'Space Mono',monospace;
}
.admin-course-panel-body { padding:16px 20px; }
.admin-course-panel.collapsed .admin-course-panel-body { display:none; }
.admin-schedule-row {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--surface2); border-radius:8px; margin-bottom:12px;
  font-size:12px; color:var(--text2); border:1px solid var(--border);
}
.session-progress { margin-top:4px; }
.prog-badge {
  font-size:11px; font-family:'Space Mono',monospace; font-weight:700;
}

/* ── 48. ENABLE/DISABLE TOGGLE ───────────────── */
.admin-enable-toggle {
  font-size:12px; padding:5px 14px; border-radius:20px;
  border:1px solid var(--border); cursor:pointer;
  font-weight:600; font-family:'DM Sans',sans-serif;
  transition:all 0.2s ease;
}
.admin-enable-toggle.enabled {
  background:rgba(0,255,170,0.12); color:var(--accent3);
  border-color:var(--accent3);
}
.admin-enable-toggle.disabled {
  background:rgba(255,77,109,0.12); color:var(--danger);
  border-color:var(--danger);
}
.admin-enable-toggle:hover { opacity:0.8; }

/* ── 49. PROFILE EDIT DIFF ───────────────── */
.admin-edit-diff {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12px; line-height:1.8;
}
.diff-label { color:var(--text2); font-weight:600; min-width:80px; }
.diff-old {
  color:var(--danger); text-decoration:line-through;
  background:rgba(255,77,109,0.08); padding:1px 6px; border-radius:4px;
}
.diff-arrow { color:var(--text3); font-size:14px; }
.diff-new {
  color:var(--accent3); font-weight:600;
  background:rgba(0,255,170,0.08); padding:1px 6px; border-radius:4px;
}

/* ── 50. ORDER CARDS ───────────────── */
.admin-order-card {
  border-left:3px solid var(--accent);
}
.admin-order-card .pending-info .pending-name {
  font-size:14px;
}

/* ── 51. COURSE PRICING ROW ───────────────── */
.admin-pricing-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
}
.admin-pricing-row .auth-input {
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); font-family:'Space Mono',monospace;
}

/* ── 52. HOMEPAGE PRICE TAG ───────────────── */
.hp-card-price {
  font-size:13px; color:var(--accent3); font-weight:600;
  font-family:'Space Mono',monospace;
  margin-top:4px; margin-bottom:2px;
}
.hp-card-schedule {
  font-size:11px; color:var(--text3);
  margin:4px 0 2px;
}

/* ── 53. COURSE PAGE PRICE ───────────────── */
.cp-price {
  color:var(--accent3) !important; font-weight:600;
}
.cp-purchase-link {
  display:inline-block; margin-top:6px;
  font-size:11px; color:var(--accent); text-decoration:underline;
}
.cp-purchase-link:hover { color:var(--accent3); }

/* ── 54. STUDENT DASHBOARD ───────────────── */
.sd-session-grid {
  display:flex; flex-direction:column; gap:8px;
}
.sd-session-card {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; transition:all 0.2s ease;
}
.sd-session-card.completed {
  border-left:3px solid var(--accent3);
}
.sd-session-card:hover {
  border-color:var(--accent); background:var(--surface3);
}
.sd-session-info { flex:1; }
.sd-session-title {
  font-size:13px; font-weight:600; color:var(--text);
}
.sd-session-meta {
  font-size:11px; color:var(--text3); margin-top:2px;
}
.sd-session-actions {
  flex-shrink:0;
}
.sd-status-badge {
  display:inline-block; font-size:11px; font-weight:600;
  margin-top:4px; font-family:'Space Mono',monospace;
}
.sd-status-badge.unlocked { color:var(--text3); }
.sd-status-badge.completed { font-weight:700; }
.sd-status-badge.in-progress { color:var(--warn); }

/* ── 55. PURCHASE SECTION ───────────────── */
.sd-purchase-grid {
  display:flex; flex-direction:column; gap:6px;
}
.sd-purchase-item {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; transition:all 0.15s ease;
}
.sd-purchase-item:hover { border-color:var(--accent); }
.sd-purchase-item.owned {
  opacity:0.6; border-left:3px solid var(--accent3);
}
.sd-purchase-item input[type="checkbox"] {
  width:18px; height:18px; cursor:pointer;
  accent-color:var(--accent);
}
.sd-cart-total { font-family:'Space Mono',monospace; }

/* ── 56. ACCOUNT SECTION ───────────────── */
.sd-account-card {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:12px; padding:24px; max-width:500px;
  margin:0 auto;
}
.sd-account-header {
  display:flex; align-items:center; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--border);
  margin-bottom:16px;
}
.sd-account-fields {
  display:flex; flex-direction:column; gap:0;
}
.sd-account-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid rgba(30,58,90,0.3);
}
.sd-account-row:last-child { border-bottom:none; }
.sd-field-label {
  font-size:13px; color:var(--text3); font-weight:500;
}
.sd-field-value {
  font-size:13px; color:var(--text); font-weight:500;
  text-align:right;
}
.sd-pending-edits-box {
  background:rgba(255,215,0,0.06); border:1px solid rgba(255,215,0,0.2);
  border-radius:8px; padding:16px; margin-bottom:16px;
}

/* ── 57. NAV BAR PROFILE PHOTO ───────────────── */
.auth-nav-avatar-img {
  width:34px; height:34px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--accent);
}

/* ── 58. STUDENT DASHBOARD BUTTON ───────────────── */
.auth-nav-btn.student-btn {
  background:rgba(0,200,240,0.15); color:var(--accent);
  border:1px solid rgba(0,200,240,0.3);
}
.auth-nav-btn.student-btn:hover { background:rgba(0,200,240,0.25); }

/* ── 59. COURSE PAGE PURCHASE BUTTON ───────────────── */
.cp-purchase-btn {
  font-family:'Orbitron',sans-serif; font-size:12px;
  font-weight:600; color:var(--bg);
  background:linear-gradient(135deg, var(--accent3), #00cc88);
  padding:10px 20px; border-radius:10px;
  border:none; cursor:pointer;
  white-space:nowrap; transition:all 0.2s;
}
.cp-purchase-btn:hover {
  transform:scale(1.05);
  box-shadow:0 4px 16px rgba(0,255,170,0.3);
}

/* ── 60. STATUS DOT (enabled/disabled) ───────────────── */
.status-dot {
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  margin-right:4px;
  vertical-align:middle;
}
.status-dot.enabled { background:var(--accent3); }
.status-dot.disabled { background:var(--danger); }

/* ── 61. ROLE BADGE (admin pending cards) ───────────────── */
.role-badge {
  display:inline-block;
  font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:12px;
  font-family:'Space Mono',monospace;
  text-transform:uppercase; letter-spacing:0.5px;
}
.role-badge.student { background:rgba(0,200,240,0.15); color:var(--accent); }
.role-badge.teacher { background:rgba(0,255,170,0.15); color:var(--accent3); }

/* ── 62. PROFILE PHOTO (student dashboard account) ───────────────── */
.sd-profile-photo {
  width:72px; height:72px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--accent);
}

/* ── 63. RESPONSIVE FOR NEW COMPONENTS ───────────────── */
@media(max-width:600px) {
  .admin-tabs { flex-wrap:wrap; }
  .admin-tab { min-width:45%; font-size:11px; padding:10px 8px; }
  .admin-stats-grid { grid-template-columns:repeat(2,1fr); }
  .admin-pending-card { flex-direction:column; text-align:center; }
  .admin-pending-actions { justify-content:center; }
  .admin-modal-card { padding:20px; }
  .admin-course-card { flex-direction:column; text-align:center; }
  .sd-session-card { flex-direction:column; text-align:center; }
  .sd-session-actions { margin-top:8px; }
  .sd-purchase-item { flex-direction:column; }
  .sd-account-card { padding:16px; }
  .sd-account-row { flex-direction:column; gap:4px; text-align:left; }
  .sd-field-value { text-align:left; }
  .admin-pricing-row { flex-direction:column; }
  .admin-enable-toggle { font-size:11px; padding:4px 10px; }
}


/* ══════════════════════════════════════════════════════════════════════
   64. ADMIN COURSES TAB — Course management grid
══════════════════════════════════════════════════════════════════════ */
.admin-courses-grid,
.admin-courses-manage-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:16px;
  margin-top:16px;
}
.admin-course-mgmt-card,
.admin-course-manage-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  transition:border-color 0.2s;
}
.admin-course-mgmt-card:hover,
.admin-course-manage-card:hover {
  border-color:var(--accent);
}
.admin-course-mgmt-card.disabled-card,
.admin-course-manage-card.disabled-card {
  opacity:0.55;
}
/* ACM — Admin Course Manage card inner elements */
.acm-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.acm-icon {
  width:40px;
  height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.acm-title {
  font-size:15px;
  font-weight:700;
  color:var(--text);
}
.acm-meta {
  font-size:12px;
  color:var(--text3);
  margin-top:2px;
}
.acm-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-top:1px solid rgba(30,58,90,0.3);
}
.acm-label {
  font-size:12px;
  color:var(--text3);
  font-weight:600;
  min-width:55px;
}
.acm-value {
  font-size:13px;
  color:var(--text2);
}
/* Legacy class names for compatibility */
.admin-course-mgmt-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.admin-course-mgmt-icon {
  font-size:32px;
}
.admin-course-mgmt-title {
  font-size:15px;
  font-weight:700;
  color:var(--text);
}
.admin-course-mgmt-teacher {
  font-size:12px;
  color:var(--text3);
  margin-top:2px;
}
.admin-course-mgmt-body {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-course-mgmt-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.admin-course-mgmt-label {
  font-size:12px;
  color:var(--text3);
  min-width:70px;
}
.admin-course-mgmt-value {
  font-size:13px;
  font-weight:600;
  color:var(--text2);
}
.admin-course-toggle-btn {
  font-size:11px;
  padding:4px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text2);
  cursor:pointer;
  transition:all 0.2s;
  font-family:'DM Sans',sans-serif;
}
.admin-course-toggle-btn.enabled {
  background:rgba(0,255,170,0.1);
  border-color:var(--accent3);
  color:var(--accent3);
}
.admin-course-toggle-btn.disabled-toggle {
  background:rgba(255,77,109,0.1);
  border-color:var(--danger);
  color:var(--danger);
}
.admin-course-toggle-btn:hover {
  opacity:0.8;
}
.admin-course-price-input {
  width:80px;
  padding:4px 8px;
  font-size:12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  font-family:'DM Sans',sans-serif;
}
.admin-course-price-input:focus {
  outline:none;
  border-color:var(--accent);
}
.admin-course-save-btn {
  font-size:10px;
  padding:3px 10px;
  border-radius:6px;
  border:none;
  background:var(--accent);
  color:#000;
  cursor:pointer;
  font-weight:600;
  font-family:'DM Sans',sans-serif;
  transition:opacity 0.2s;
}
.admin-course-save-btn:hover { opacity:0.8; }
.admin-assign-btn {
  font-size:11px;
  padding:4px 10px;
  border-radius:6px;
  border:1px solid var(--accent);
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all 0.2s;
}
.admin-assign-btn:hover {
  background:rgba(0,200,240,0.1);
}
.admin-unassign-btn {
  font-size:10px;
  padding:3px 8px;
  border-radius:6px;
  border:1px solid var(--danger);
  background:transparent;
  color:var(--danger);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all 0.2s;
}
.admin-unassign-btn:hover {
  background:rgba(255,77,109,0.1);
}

/* Pending enrollment mini-cards in Courses tab */
.admin-pending-enrollment-card {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}
.admin-enrollment-actions button {
  font-size:10px;
  padding:3px 10px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-weight:600;
  font-family:'DM Sans',sans-serif;
  margin-left:4px;
  transition:opacity 0.2s;
}
.admin-enrollment-actions button:hover { opacity:0.8; }


/* ══════════════════════════════════════════════════════════════════════
   65. ADMIN PAYMENT TABLE (new monthly payments)
══════════════════════════════════════════════════════════════════════ */
.admin-payment-filters {
  display:flex;
  gap:6px;
  margin-bottom:16px;
}
.admin-payment-filter-btn {
  font-size:12px;
  padding:6px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text3);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all 0.2s;
}
.admin-payment-filter-btn.active {
  background:var(--accent);
  color:#000;
  border-color:var(--accent);
  font-weight:600;
}
.admin-payment-filter-btn:hover:not(.active) {
  border-color:var(--accent);
  color:var(--text2);
}

/* Payment table (admin Payments tab) */
.payment-table {
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.payment-table {
  overflow-x:auto;
}
.payment-table-header {
  display:grid;
  grid-template-columns: 1fr 0.9fr 0.8fr 0.6fr 0.7fr 0.7fr 0.7fr 0.6fr 0.6fr 0.7fr;
  gap:6px;
  padding:10px 14px;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  font-size:11px;
  font-weight:600;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:0.5px;
  min-width:900px;
}
.payment-table-row {
  display:grid;
  grid-template-columns: 1fr 0.9fr 0.8fr 0.6fr 0.7fr 0.7fr 0.7fr 0.6fr 0.6fr 0.7fr;
  gap:6px;
  min-width:900px;
  padding:10px 14px;
  border-bottom:1px solid rgba(30,58,90,0.3);
  font-size:13px;
  color:var(--text2);
  align-items:center;
}
.payment-table-row:last-child { border-bottom:none; }
.payment-table-row:hover {
  background:rgba(0,200,240,0.03);
}
.status-paid {
  color:var(--accent3);
  font-weight:600;
}
.status-pending {
  color:var(--warn);
  font-weight:600;
}


/* ══════════════════════════════════════════════════════════════════════
   66. TEACHER DASHBOARD SUB-TABS
══════════════════════════════════════════════════════════════════════ */
.teacher-sub-tabs {
  display:flex;
  gap:6px;
  margin:16px 0;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.teacher-sub-tab {
  font-size:12px;
  padding:6px 16px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text3);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all 0.2s;
}
.teacher-sub-tab.active {
  background:var(--accent);
  color:#000;
  border-color:var(--accent);
  font-weight:600;
}
.teacher-sub-tab:hover:not(.active) {
  border-color:var(--accent);
  color:var(--text2);
}


/* ══════════════════════════════════════════════════════════════════════
   67. TEACHER / ADMIN FEES TABLE
══════════════════════════════════════════════════════════════════════ */
.fees-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  margin-top:12px;
}
.fees-table th {
  padding:8px 12px;
  text-align:left;
  font-weight:600;
  color:var(--text3);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  border-bottom:1px solid var(--border);
}
.fees-table td {
  padding:8px 12px;
  border-bottom:1px solid rgba(30,58,90,0.4);
  color:var(--text2);
}
.fees-table tr:hover td {
  background:rgba(0,200,240,0.03);
}
.fees-status {
  display:inline-block;
  font-size:11px;
  font-weight:600;
  padding:2px 8px;
  border-radius:6px;
}
.fees-status.paid {
  background:rgba(0,255,170,0.12);
  color:var(--accent3);
}
.fees-status.pending {
  background:rgba(255,215,0,0.12);
  color:var(--warn);
}
.fees-confirm-btn {
  font-size:11px;
  padding:4px 10px;
  border-radius:6px;
  border:none;
  background:var(--accent3);
  color:#000;
  cursor:pointer;
  font-weight:600;
  font-family:'DM Sans',sans-serif;
  transition:opacity 0.2s;
}
.fees-confirm-btn:hover { opacity:0.8; }


/* ══════════════════════════════════════════════════════════════════════
   68. ATTENDANCE GRID
══════════════════════════════════════════════════════════════════════ */
.attendance-grid-wrap {
  overflow-x:auto;
  margin-top:12px;
}
/* Div-based attendance grid (teacher dashboard) */
.attendance-grid {
  font-size:12px;
  overflow-x:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
}
.attendance-row {
  display:flex;
  align-items:center;
  gap:2px;
  padding:4px 0;
  border-bottom:1px solid rgba(30,58,90,0.3);
}
.attendance-row:last-child { border-bottom:none; }
.attendance-header-row {
  border-bottom:1px solid var(--border);
  padding-bottom:6px;
  margin-bottom:2px;
}
.attendance-header-row .attendance-cell {
  font-size:9px;
  font-weight:700;
  color:var(--text3);
  text-transform:uppercase;
}
.attendance-name {
  min-width:110px;
  max-width:110px;
  font-size:12px;
  font-weight:600;
  color:var(--text2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex-shrink:0;
}
.attendance-header-row .attendance-name {
  font-size:10px;
  color:var(--text3);
}
.attendance-cell {
  width:32px;
  min-width:32px;
  height:26px;
  line-height:26px;
  border-radius:5px;
  font-size:9px;
  font-weight:700;
  text-align:center;
  flex-shrink:0;
}
.attendance-cell.no-access {
  background:rgba(30,58,90,0.3);
  color:var(--text3);
}
.attendance-cell.in-progress {
  background:rgba(255,215,0,0.15);
  color:var(--warn);
}
.attendance-cell.completed {
  background:rgba(0,255,170,0.15);
  color:var(--accent3);
}
/* Table-based attendance grid (admin panel) */
.attendance-grid table th {
  padding:6px 10px;
  font-size:10px;
  font-weight:600;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:0.5px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  text-align:center;
}
.attendance-grid table th:first-child {
  text-align:left;
  min-width:140px;
}
.attendance-grid table td {
  padding:4px 6px;
  text-align:center;
  border-bottom:1px solid rgba(30,58,90,0.3);
}
.attendance-grid table td:first-child {
  text-align:left;
  font-weight:600;
  color:var(--text2);
  white-space:nowrap;
}
.att-cell {
  display:inline-block;
  width:28px;
  height:28px;
  line-height:28px;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
  text-align:center;
}
.att-cell.no-access {
  background:rgba(30,58,90,0.3);
  color:var(--text3);
}
.att-cell.started {
  background:rgba(255,215,0,0.15);
  color:var(--warn);
}
.att-cell.completed {
  background:rgba(0,255,170,0.15);
  color:var(--accent3);
}
.att-cell.failed {
  background:rgba(255,77,109,0.15);
  color:var(--danger);
}


/* ══════════════════════════════════════════════════════════════════════
   69. STUDENT DASHBOARD — Enrollment badges
══════════════════════════════════════════════════════════════════════ */
.sd-enroll-badge {
  display:inline-block;
  font-size:10px;
  font-weight:700;
  padding:2px 8px;
  border-radius:6px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-left:8px;
}
.sd-enroll-badge.pending {
  background:rgba(255,215,0,0.15);
  color:var(--warn);
}
.sd-enroll-badge.active {
  background:rgba(0,255,170,0.15);
  color:var(--accent3);
}
.sd-enroll-badge.completed-badge {
  background:rgba(0,200,240,0.15);
  color:var(--accent);
}
.sd-enroll-badge.cancelled {
  background:rgba(255,77,109,0.15);
  color:var(--danger);
}


/* ══════════════════════════════════════════════════════════════════════
   70. STUDENT DASHBOARD — Payment reminder banner
══════════════════════════════════════════════════════════════════════ */
.sd-payment-reminder-banner {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  background:rgba(255,215,0,0.08);
  border:1px solid rgba(255,215,0,0.3);
  border-radius:10px;
  margin-bottom:16px;
  font-size:13px;
  color:var(--warn);
  cursor:pointer;
  transition:background 0.2s;
}
.sd-payment-reminder-banner:hover {
  background:rgba(255,215,0,0.12);
}
.sd-payment-reminder-banner .reminder-icon {
  font-size:20px;
}
.sd-payment-reminder-banner .reminder-arrow {
  margin-left:auto;
  font-size:18px;
  opacity:0.6;
}


/* ══════════════════════════════════════════════════════════════════════
   71. STUDENT DASHBOARD — Course payment reminder (in-panel)
══════════════════════════════════════════════════════════════════════ */
.sd-course-payment-reminder {
  display:flex;
  align-items:center;
  padding:10px 14px;
  background:rgba(255,215,0,0.08);
  border:1px solid rgba(255,215,0,0.25);
  border-radius:8px;
  font-size:12px;
  color:var(--warn);
  margin-bottom:12px;
  cursor:pointer;
  transition:background 0.2s;
}
.sd-course-payment-reminder:hover {
  background:rgba(255,215,0,0.14);
}


/* ══════════════════════════════════════════════════════════════════════
   72. STUDENT DASHBOARD — Payment table
══════════════════════════════════════════════════════════════════════ */
.sd-payment-course-group {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin-bottom:12px;
}
.sd-payment-course-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.sd-payment-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.sd-payment-table th {
  padding:8px 10px;
  text-align:left;
  font-weight:600;
  color:var(--text3);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  border-bottom:1px solid var(--border);
}
.sd-payment-table td {
  padding:8px 10px;
  border-bottom:1px solid rgba(30,58,90,0.4);
  color:var(--text2);
}
.sd-payment-table tr:hover td {
  background:rgba(0,200,240,0.03);
}
.sd-pay-status {
  display:inline-block;
  font-size:11px;
  font-weight:600;
  padding:2px 8px;
  border-radius:6px;
}
.sd-pay-status.paid {
  background:rgba(0,255,170,0.12);
  color:var(--accent3);
}
.sd-pay-status.pending {
  background:rgba(255,215,0,0.12);
  color:var(--warn);
}


/* ══════════════════════════════════════════════════════════════════════
   73. STUDENT DASHBOARD — Locked / payment-blocked session cards
══════════════════════════════════════════════════════════════════════ */
.sd-session-card.locked {
  opacity:0.5;
  border-color:var(--border);
}
.sd-session-card.locked.payment-blocked {
  opacity:0.7;
  border-color:rgba(255,215,0,0.3);
  background:rgba(255,215,0,0.03);
}
.sd-status-badge.payment-required {
  color:var(--warn);
  background:rgba(255,215,0,0.12);
  padding:2px 8px;
  border-radius:6px;
  font-weight:600;
  font-size:11px;
}
.sd-status-badge.locked {
  color:var(--text3);
  font-size:11px;
}


/* ══════════════════════════════════════════════════════════════════════
   74. COURSE PAGE — Enrollment bar
══════════════════════════════════════════════════════════════════════ */
.cp-enroll-bar {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  margin-top:18px;
  border-radius:12px;
  background:rgba(0,200,240,0.06);
  border:1px solid rgba(0,200,240,0.2);
}
.cp-enroll-bar.pending {
  background:rgba(255,215,0,0.06);
  border-color:rgba(255,215,0,0.2);
}
.cp-enroll-bar.active {
  background:rgba(0,255,170,0.06);
  border-color:rgba(0,255,170,0.2);
}
.cp-enroll-bar.payment-warning {
  background:rgba(255,215,0,0.08);
  border-color:rgba(255,215,0,0.3);
}
.cp-enroll-info {
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.cp-enroll-label {
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.cp-enroll-price {
  font-size:12px;
  color:var(--text3);
}
.cp-enroll-btn {
  font-size:14px;
  font-weight:700;
  padding:10px 24px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  color:#000;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all 0.2s;
  white-space:nowrap;
}
.cp-enroll-btn:hover {
  background:var(--accent2);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,200,240,0.3);
}
.cp-enroll-status-badge {
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:8px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  white-space:nowrap;
}
.cp-enroll-status-badge.pending {
  background:rgba(255,215,0,0.15);
  color:var(--warn);
}
.cp-enroll-status-badge.active {
  background:rgba(0,255,170,0.15);
  color:var(--accent3);
}
.cp-enroll-status-badge.payment-due {
  background:rgba(255,215,0,0.2);
  color:var(--warn);
}


/* ══════════════════════════════════════════════════════════════════════
   75. COURSE PAGE — Payment required badge on locked sessions
══════════════════════════════════════════════════════════════════════ */
.cp-session-card.payment-blocked {
  border-color:rgba(255,215,0,0.3);
  background:rgba(255,215,0,0.03);
}
.cp-payment-badge {
  font-size:10px;
  font-weight:700;
  padding:4px 10px;
  border-radius:8px;
  background:rgba(255,215,0,0.15);
  color:var(--warn);
  text-transform:uppercase;
  letter-spacing:0.5px;
}


/* ══════════════════════════════════════════════════════════════════════
   76. HOMEPAGE — Disabled course overlay
══════════════════════════════════════════════════════════════════════ */
.hp-course-card.course-disabled {
  position:relative;
  pointer-events:none;
  opacity:0.45;
}
.hp-disabled-overlay {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-12deg);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--warn);
  background:rgba(255,215,0,0.1);
  padding:8px 24px;
  border-radius:8px;
  border:2px solid rgba(255,215,0,0.3);
  z-index:5;
  white-space:nowrap;
}


/* ══════════════════════════════════════════════════════════════════════
   77. ADMIN ACCOUNT TAB
══════════════════════════════════════════════════════════════════════ */
.admin-account-card {
  max-width:480px;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px;
}
.admin-account-header {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}
.admin-account-fields {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-account-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  border-bottom:1px solid rgba(30,58,90,0.3);
}
.admin-account-row:last-child { border-bottom:none; }
.admin-field-label {
  font-size:12px;
  color:var(--text3);
  font-weight:600;
}
.admin-field-value {
  font-size:13px;
  color:var(--text2);
  text-align:right;
}


/* ══════════════════════════════════════════════════════════════════════
   78. RESPONSIVE — New enrollment/payment components
══════════════════════════════════════════════════════════════════════ */
@media(max-width:600px) {
  .admin-courses-grid, .admin-courses-manage-grid { grid-template-columns:1fr; }
  .admin-course-mgmt-row, .acm-row { flex-direction:column; gap:4px; text-align:center; }
  .cp-enroll-bar { flex-direction:column; text-align:center; }
  .cp-enroll-btn { width:100%; }
  .sd-payment-table { font-size:11px; }
  .sd-payment-table th, .sd-payment-table td { padding:6px 6px; }
  .fees-table { font-size:11px; }
  .attendance-grid { font-size:10px; }
  .att-cell { width:22px; height:22px; line-height:22px; font-size:8px; }
  .teacher-sub-tabs { flex-wrap:wrap; }
  .sd-payment-reminder-banner { flex-direction:column; text-align:center; }
  .admin-payment-filters { flex-wrap:wrap; }
}

/* ── 79 · Themed Confirm / Alert Modal ── */
.nda-modal-backdrop {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.nda-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 420px; width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.nda-modal-title {
  font-size: 16px; font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
  text-align: center;
}
.nda-modal-message {
  font-size: 14px; line-height: 1.6;
  color: var(--text2);
  text-align: center;
  margin-bottom: 20px;
  white-space: pre-line;
}
.nda-modal-actions {
  display: flex; gap: 10px; justify-content: center;
}
.nda-modal-btn {
  padding: 9px 24px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.15s ease;
}
.nda-modal-btn.confirm {
  background: var(--accent);
  color: #000;
}
.nda-modal-btn.confirm:hover {
  filter: brightness(1.15);
}
.nda-modal-btn.cancel {
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
}
.nda-modal-btn.cancel:hover {
  background: var(--surface3);
}


/* ══════════════════════════════════════════
   UTILITY CLASSES — Typography
══════════════════════════════════════════ */
.font-display { font-family:'Orbitron',sans-serif; }
.font-mono    { font-family:'Space Mono',monospace; }
.font-body    { font-family:'DM Sans',sans-serif; }

.text-xs   { font-size:var(--fs-xs); }
.text-sm   { font-size:var(--fs-sm); }
.text-base { font-size:var(--fs-base); }
.text-md   { font-size:var(--fs-md); }
.text-lg   { font-size:var(--fs-lg); }
.text-xl   { font-size:var(--fs-xl); }

.text-accent  { color:var(--accent); }
.text-accent3 { color:var(--accent3); }
.text-accent5 { color:var(--accent5); }
.text-muted   { color:var(--text3); }
.text-secondary { color:var(--text2); }
.text-danger  { color:var(--danger); }
.text-warn    { color:var(--warn); }
.text-center  { text-align:center; }
.font-bold    { font-weight:700; }
.font-heavy   { font-weight:800; }

.label-upper {
  font-size:var(--fs-xs);
  font-family:'Space Mono',monospace;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:700;
}

/* ══════════════════════════════════════════
   UTILITY CLASSES — Spacing
══════════════════════════════════════════ */
.p-sm  { padding:var(--sp-sm); }
.p-md  { padding:var(--sp-md); }
.p-lg  { padding:var(--sp-lg); }
.p-xl  { padding:var(--sp-xl); }
.px-md { padding-left:var(--sp-md); padding-right:var(--sp-md); }
.py-md { padding-top:var(--sp-md); padding-bottom:var(--sp-md); }
.px-lg { padding-left:var(--sp-lg); padding-right:var(--sp-lg); }
.py-lg { padding-top:var(--sp-lg); padding-bottom:var(--sp-lg); }
.mb-xs { margin-bottom:var(--sp-xs); }
.mb-sm { margin-bottom:var(--sp-sm); }
.mb-md { margin-bottom:var(--sp-md); }
.mb-lg { margin-bottom:var(--sp-lg); }
.mb-xl { margin-bottom:var(--sp-xl); }
.mt-sm { margin-top:var(--sp-sm); }
.mt-md { margin-top:var(--sp-md); }
.mt-lg { margin-top:var(--sp-lg); }
.gap-xs { gap:var(--sp-xs); }
.gap-sm { gap:var(--sp-sm); }
.gap-md { gap:var(--sp-md); }
.gap-lg { gap:var(--sp-lg); }

/* ══════════════════════════════════════════
   UTILITY CLASSES — Layout
══════════════════════════════════════════ */
.flex          { display:flex; }
.flex-col      { display:flex; flex-direction:column; }
.flex-center   { display:flex; align-items:center; justify-content:center; }
.flex-between  { display:flex; align-items:center; justify-content:space-between; }
.flex-wrap     { flex-wrap:wrap; }
.flex-1        { flex:1; }
.items-center  { align-items:center; }
.justify-center { justify-content:center; }
.w-full        { width:100%; }
.hidden        { display:none!important; }

/* ══════════════════════════════════════════
   COMPONENT — Unified Buttons (.nda-btn)
══════════════════════════════════════════ */
.nda-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-sm); padding:10px 20px;
  border-radius:var(--radius-md);
  font-family:'DM Sans',sans-serif;
  font-size:var(--fs-base); font-weight:700;
  cursor:pointer; border:none;
  transition:all 0.2s ease;
  text-decoration:none; white-space:nowrap; line-height:1.4;
}
.nda-btn:disabled { opacity:0.4; cursor:not-allowed; }

.nda-btn--primary {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#0a0e1a;
}
.nda-btn--primary:hover { filter:brightness(1.1); }

.nda-btn--success { background:var(--accent3); color:#0a0e1a; }
.nda-btn--success:hover { filter:brightness(1.1); }

.nda-btn--danger {
  background:transparent; color:var(--danger);
  border:1px solid var(--danger);
}
.nda-btn--danger:hover { background:rgba(240,64,96,0.1); }

.nda-btn--ghost {
  background:var(--surface2); color:var(--text2);
  border:1px solid var(--border);
}
.nda-btn--ghost:hover { border-color:var(--accent); color:var(--accent); }

.nda-btn--outline {
  background:transparent; color:var(--accent);
  border:1px solid var(--accent);
}
.nda-btn--outline:hover { background:rgba(0,200,240,0.1); }

.nda-btn--sm { padding:6px 14px; font-size:var(--fs-sm); }
.nda-btn--lg { padding:13px 28px; font-size:15px; }
.nda-btn--block { width:100%; }

/* ══════════════════════════════════════════
   COMPONENT — Unified Card (.nda-card)
══════════════════════════════════════════ */
.nda-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-lg);
  transition:border-color 0.2s;
}
.nda-card:hover { border-color:var(--accent); }
.nda-card--flat { background:var(--surface2); }
.nda-card--interactive { cursor:pointer; }
.nda-card--interactive:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,200,240,0.08);
}

/* ══════════════════════════════════════════
   COMPONENT — Unified Input (.nda-input)
══════════════════════════════════════════ */
.nda-input {
  width:100%; padding:10px 14px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;
  font-size:var(--fs-base); color:var(--text);
  outline:none; transition:border-color 0.2s,box-shadow 0.2s;
  box-sizing:border-box;
}
.nda-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,200,240,0.08);
}
.nda-input::placeholder { color:var(--text3); }

/* ══════════════════════════════════════════
   COMPONENT — Badges (.nda-badge)
══════════════════════════════════════════ */
.nda-badge {
  display:inline-block; font-size:var(--fs-xs); font-weight:700;
  padding:2px 8px; border-radius:12px;
  font-family:'Space Mono',monospace;
  text-transform:uppercase; letter-spacing:0.5px;
}
.nda-badge--cyan   { background:rgba(0,200,240,0.15); color:var(--accent); }
.nda-badge--green  { background:rgba(0,224,154,0.15); color:var(--accent3); }
.nda-badge--orange { background:rgba(240,104,48,0.15); color:var(--accent4); }
.nda-badge--warn   { background:rgba(240,200,0,0.15); color:var(--warn); }
.nda-badge--danger { background:rgba(240,64,96,0.15); color:var(--danger); }
.nda-badge--purple { background:rgba(155,77,235,0.15); color:var(--accent5); }

/* ══════════════════════════════════════════
   COMPONENT — Status Indicators
══════════════════════════════════════════ */
.nda-status {
  display:inline-block; font-size:11px; font-weight:600;
  padding:2px 8px; border-radius:var(--radius-sm);
}
.nda-status--paid    { background:rgba(0,224,154,0.12); color:var(--accent3); }
.nda-status--pending { background:rgba(240,200,0,0.12); color:var(--warn); }
.nda-status--danger  { background:rgba(240,64,96,0.12); color:var(--danger); }

/* ══════════════════════════════════════════
   PATTERN — Full-page Message
══════════════════════════════════════════ */
.nda-fullpage-msg {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; flex-direction:column;
  gap:var(--sp-md); font-family:'DM Sans',sans-serif;
}
.nda-fullpage-msg__icon { font-size:48px; }
.nda-fullpage-msg__title { font-size:18px; font-weight:700; }
.nda-fullpage-msg__text  { color:var(--text3); }
.nda-fullpage-msg__btn {
  margin-top:var(--sp-sm);
  padding:10px 24px; border-radius:var(--radius-md);
  background:var(--accent); color:#0a0e1a;
  border:none; font-weight:700; font-size:var(--fs-base);
  cursor:pointer; font-family:inherit;
  transition:filter 0.2s;
}
.nda-fullpage-msg__btn:hover { filter:brightness(1.1); }

/* ══════════════════════════════════════════
   PATTERN — Loading State
══════════════════════════════════════════ */
.nda-loading {
  color:var(--text3); text-align:center; padding:40px;
  font-size:var(--fs-base);
}

/* ══════════════════════════════════════════
   PATTERN — Error State
══════════════════════════════════════════ */
.nda-error {
  color:var(--danger); text-align:center;
  padding:var(--sp-lg); font-size:var(--fs-base);
}

/* ══════════════════════════════════════════
   PATTERN — Section Heading
══════════════════════════════════════════ */
.nda-section-heading {
  font-weight:600; color:var(--text);
  font-size:15px; margin-bottom:var(--sp-md);
}
.nda-section-heading--accent {
  color:var(--accent);
  font-family:'Orbitron',sans-serif;
}

/* ══════════════════════════════════════════
   PATTERN — Teacher Live Session UI
══════════════════════════════════════════ */
.teacher-live-banner {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-lg);
  margin-bottom:var(--sp-lg);
}
.teacher-live-status {
  display:flex; align-items:center; gap:var(--sp-sm);
  margin-bottom:var(--sp-md);
}
.teacher-live-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--accent3); animation:pulse 2s infinite;
}
.teacher-live-dot--off { background:var(--text3); animation:none; }
.teacher-live-label {
  font-family:'Space Mono',monospace;
  font-size:var(--fs-sm); text-transform:uppercase;
  letter-spacing:1.5px; font-weight:700;
}
.teacher-live-label--on  { color:var(--accent3); }
.teacher-live-label--off { color:var(--text3); }

.teacher-live-form {
  display:flex; flex-direction:column; gap:var(--sp-md);
}
.teacher-live-form select,
.teacher-live-form input[type="text"] {
  width:100%; padding:10px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text);
  font-family:inherit; font-size:var(--fs-base);
  outline:none;
}
.teacher-live-form select:focus,
.teacher-live-form input[type="text"]:focus {
  border-color:var(--accent);
}

.teacher-live-history-item {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:var(--sp-md);
  margin-bottom:var(--sp-sm);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-md);
}
.teacher-live-history-item:hover { border-color:var(--accent); }
.teacher-live-history-meta {
  font-size:var(--fs-sm); color:var(--text3);
}

/* ══════════════════════════════════════════
   STATE HELPERS
══════════════════════════════════════════ */
.is-faded    { opacity:0.5; }
.is-hidden   { display:none; }