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


/* ══════════════════════════════════════════
   1. DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  /* Backgrounds — balanced mid-tone gray */
  --bg:       #2a2a32;
  --surface:  #33333d;
  --surface2: #3c3c48;
  --surface3: #454552;
  --border:   #505060;

  /* Primary accent — strong red (9% usage) */
  --accent:   #e63946;
  --accent2:  #c0392b;

  /* Secondary accents (gold 9%, others 1%) */
  --accent3:  #d4a017;   /* gold — prices, stats, headings, special */
  --accent4:  #f06830;   /* orange — very rare use */
  --accent5:  #9b4deb;   /* purple — very rare use */

  /* Text — light on mid-gray */
  --text:     #e8e8f0;
  --text2:    #a8a8b8;
  --text3:    #707080;

  /* Functional */
  --warn:     #f0c800;
  --danger:   #f04060;
  --grid:     rgba(255,255,255,0.02);
  --glow:     0 0 20px rgba(230,57,70,0.12);

  /* 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-2xs:  11px;
  --fs-xs:   10px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;

  /* Semantic colors */
  --success: #00c864;
}


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

/* ── Skip-to-content link (keyboard accessibility) ── */
.skip-link {
  position:absolute; top:-100px; left:16px; z-index:10001;
  background:var(--accent); color:#fff; padding:10px 20px;
  border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  text-decoration:none; transition:top 0.2s;
}
.skip-link:focus { top:16px; outline:2px solid #fff; outline-offset:2px; }

/* ── Focus-visible outlines for keyboard users ── */
*:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
*:focus:not(:focus-visible) { outline:none; }

body {
  font-family:'Inter',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:'JetBrains Mono',monospace;
}
.sidebar-back-link:hover {
  color:var(--accent); border-color:var(--accent);
  background:rgba(230,57,70,0.06);
}
.sidebar-back-sep {
  font-size:10px; color:var(--text3);
}
.sidebar-academy {
  font-family:'Outfit',sans-serif;
  font-size:9px; letter-spacing:2px;
  color:var(--accent); text-transform:uppercase;
  margin-bottom:4px;
}
.sidebar-day {
  font-family:'Outfit',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(230,57,70,0.1);
  border:1px solid rgba(230,57,70,0.3);
  border-radius:6px; padding:3px 10px;
  font-size:10px; color:var(--accent);
  font-family:'JetBrains 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:#fff; 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:'JetBrains 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(230,57,70,0.05); color:var(--text); }
.nav-item.active {
  background:rgba(230,57,70,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:'JetBrains Mono',monospace;
  flex-shrink:0; font-weight:700;
}
.nav-item.active .nav-num { background:var(--accent); color:#fff; border-color:var(--accent); }
.nav-item.completed .nav-num { background:var(--accent3); color:#fff; 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:'JetBrains Mono',monospace;
  color:var(--accent3); letter-spacing:2px; text-transform:uppercase;
  margin-bottom:4px;
}
.page-title {
  font-family:'Outfit',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(230,57,70,0.06),transparent 70%);
}
.lesson-num {
  font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--accent); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:6px;
}
.lesson-title-text {
  font-family:'Outfit',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:'JetBrains Mono',monospace; margin-top:4px;
}


/* ══════════════════════════════════════════
   7. LESSON CONTENT TYPOGRAPHY
══════════════════════════════════════════ */
.lesson-content h3 {
  font-family:'Outfit',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(230,57,70,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:'JetBrains 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:'JetBrains 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:'JetBrains 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(230,57,70,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(230,57,70,0.1);   border:1px solid rgba(230,57,70,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:'JetBrains 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:'JetBrains 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(230,57,70,0.05);  border-color:rgba(230,57,70,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:'Outfit',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:'JetBrains Mono',monospace; font-weight:700; }
.material-card.conductor     .mat-tag { background:rgba(230,57,70,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(230,57,70,0.03); }
.tn-header { display:flex; align-items:center; gap:8px; font-family:'Outfit',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(230,57,70,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
══════════════════════════════════════════ */
/* ── Session Resources Grid ── */
.resources-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px; margin-top:20px;
}
.resource-card {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:all 0.25s; display:flex; flex-direction:column;
}
.resource-card:hover {
  border-color:var(--rc-color, var(--accent));
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
  transform:translateY(-2px);
}
.resource-preview {
  width:100%; max-height:180px; overflow:hidden;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
}
.resource-preview img {
  width:100%; height:180px; object-fit:cover;
}
.resource-preview video {
  width:100%; max-height:180px;
}
.resource-preview-audio {
  padding:20px; background:linear-gradient(135deg, var(--surface2), var(--bg));
}
.resource-preview-audio audio { width:100%; }
.resource-info {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
}
.resource-icon { font-size:28px; flex-shrink:0; }
.resource-details { flex:1; min-width:0; }
.resource-title {
  font-weight:700; font-size:var(--fs-sm); color:var(--text1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.resource-meta {
  font-size:11px; color:var(--text3); margin-top:2px;
  text-transform:uppercase; letter-spacing:0.5px;
}
.resource-download-btn {
  display:block; text-align:center; padding:10px 16px;
  color:#fff; font-weight:700; font-size:var(--fs-sm);
  text-decoration:none; border-top:1px solid rgba(255,255,255,0.1);
  transition:all 0.2s;
}
.resource-download-btn:hover { opacity:0.85; }
@media (max-width:600px) {
  .resources-grid { grid-template-columns:1fr; }
}

.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:'Inter',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:#fff; 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(230,57,70,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:'Inter',sans-serif; font-size:13px; font-weight:700;
  color:#fff; 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:'Outfit',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:'JetBrains 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(230,57,70,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:'JetBrains 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:'Inter',sans-serif; font-size:15px; font-weight:800;
  color:#fff; 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:'Outfit',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:'JetBrains 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 — fixed A4 landscape (297mm × 210mm ≈ 1123px × 794px at 96dpi) */
#cert-render, #cr-cert-render {
  width:1123px; height:794px; background:#fff;
  font-family:'Playfair Display',serif; margin:20px auto;
  padding:0; border-radius:4px;
  overflow:hidden; position:relative;
  transform-origin: top center;
  box-shadow: 0 4px 32px rgba(0,0,0,0.25);
}
.c-outer { border:8px solid #0d3a5c; padding:6px; height:100%; box-sizing:border-box; }
.c-inner {
  border:3px solid #b8860b;
  padding:40px 60px 36px;
  background:linear-gradient(135deg,#ffffff,#f5f5f0,#ffffff);
  position:relative;
  height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
}
.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:10px;
  font-size:14px; letter-spacing:5px;
  font-weight:700; margin-bottom:18px;
}
.c-cert-word {
  text-align:center; font-size:14px; letter-spacing:6px;
  color:#999; text-transform:uppercase; margin-bottom:8px;
}
.c-presented {
  text-align:center; font-size:16px; color:#555;
  margin-bottom:10px;
}
.c-name {
  text-align:center; font-family:'Playfair Display',serif;
  font-size:36px; font-weight:700; color:#0d3a5c;
  font-style:italic; border-bottom:2px solid #b8860b;
  padding-bottom:10px; margin-bottom:14px;
}
.c-module-badge {
  text-align:center; background:#0d3a5c; color:#ffffff;
  padding:8px 24px; font-size:13px; letter-spacing:3px;
  margin:12px 120px; border-radius:2px;
}
.c-content-line {
  text-align:center; font-size:14px; color:#555;
  margin:8px 0; line-height:1.6;
}
.c-grade {
  text-align:center; margin:12px 0;
  font-size:16px; color:#0d3a5c; font-weight:700;
}
.c-score-row {
  display:flex; justify-content:center; gap:10px;
  flex-wrap:wrap; margin:14px 0;
}
.c-score-chip {
  background:#f0f0f0; border:1px solid #ccc;
  border-radius:4px; padding:6px 14px;
  font-size:12px; text-align:center;
  min-width:80px;
}
.c-score-chip .chip-label { color:#666; font-size:10px; 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:20px; align-items:flex-end;
  padding:0 40px;
}
.c-sig-block { text-align:center; }
.c-sig-name {
  font-family:'Caveat',cursive;
  font-size:22px; color:#0d3a5c;
}
.c-sig-line { border-top:1px solid #999; width:200px; margin:4px auto; }
.c-sig-title { font-size:10px; letter-spacing:1px; color:#777; text-transform:uppercase; }
.c-bottom-strip {
  background:#0d3a5c; color:#b8860b;
  text-align:center; padding:8px;
  font-size:10px; letter-spacing:3px; margin-top:16px;
}

/* Scale cert-render to fit viewport on small screens */
@media (max-width:1200px) {
  #cert-render { transform: scale(0.75); margin:-60px auto; }
}
@media (max-width:900px) {
  #cert-render { transform: scale(0.55); margin:-140px auto; }
}
@media (max-width:600px) {
  #cert-render { transform: scale(0.38); margin:-200px auto; }
}

.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:'Inter',sans-serif; font-size:14px; font-weight:800;
  color:#fff; 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:'Outfit',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(230,57,70,0.06);
  box-shadow:0 4px 16px rgba(230,57,70,0.12);
  transform:translateY(-2px);
}


/* ══════════════════════════════════════════
   22. TIMER WIDGET (in sidebar)
══════════════════════════════════════════ */
#time-widget {
  margin:0 12px 8px;
  background:rgba(230,57,70,0.05);
  border:1px solid rgba(230,57,70,0.18);
  border-radius:12px;
  padding:12px 14px;
}
.tw-header {
  font-size:9px; letter-spacing:2px; color:var(--accent);
  font-family:'JetBrains Mono',monospace; text-transform:uppercase;
  margin-bottom:8px; opacity:0.7;
}
.tw-main {
  display:flex; align-items:center; gap:8px;
}
#tw-display {
  font-family:'JetBrains 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:'JetBrains 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(230,57,70,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:'JetBrains Mono',monospace;
  margin-bottom:8px;
}
.break-title {
  font-family:'Outfit',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:'JetBrains 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:'JetBrains 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:'Inter',sans-serif; font-size:14px; font-weight:800;
  color:#fff; 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(230,57,70,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:#fff; cursor:pointer; font-family:'Inter',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:'Outfit',sans-serif;
  font-size:10px; letter-spacing:3px; color:var(--accent);
  text-transform:uppercase; margin-bottom:6px;
}
.modal-title {
  font-family:'Outfit',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:'Inter',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(230,57,70,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:'Inter',sans-serif; font-size:15px; font-weight:800;
  color:#fff; 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(230,57,70,0.06), transparent 60%);
  pointer-events:none;
}
.pw-logo {
  font-family:'Outfit',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:'Outfit',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:'JetBrains 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:'JetBrains 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:'Inter',sans-serif; font-size:15px; font-weight:800;
  color:#fff; 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:'JetBrains 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:'Outfit',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:'JetBrains 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:'Inter',sans-serif; font-size:12px; font-weight:700;
  transition:all 0.2s;
}
.demo-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(230,57,70,0.08); }
.demo-btn.active { background:var(--accent); color:#fff; 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:'JetBrains 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(230,57,70,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:'JetBrains Mono',monospace;
  font-size:16px; text-align:center; outline:none;
}
.calc-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(230,57,70,0.1); }
.calc-result {
  font-family:'JetBrains 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:'JetBrains Mono',monospace; font-size:32px; font-weight:700;
  color:var(--accent3); transition:all 0.3s;
}
.mm-unit { font-family:'JetBrains 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:'JetBrains 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(230,57,70,0.5); transform:scale(1); }
  50%     { box-shadow:0 0 28px rgba(230,57,70,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 {
  width:64px; height:85px; margin:0 auto 16px;
}
@keyframes hpFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}
.hp-title {
  font-family:'Playfair Display',serif; font-size:clamp(30px,5.5vw,48px);
  font-weight:700; color:var(--accent3); letter-spacing:1px;
  text-shadow:0 0 40px rgba(212,160,23,0.35);
  margin-bottom:8px;
}
.hp-subtitle {
  font-family:'Outfit',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:'Inter',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} }

/* ── Magic Stats Row (in features section) ── */
.hp-stats-row {
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:16px; margin-bottom:44px; padding:24px 0;
  max-width:900px; margin-left:auto; margin-right:auto;
}
.hp-magic-stat {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; cursor:default; position:relative;
  padding:20px 8px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  transition:all 0.3s ease;
}
.hp-magic-stat:hover {
  border-color:var(--accent3);
  box-shadow:0 0 20px rgba(212,160,23,0.12);
  transform:translateY(-3px);
}
.hp-magic-stat-orb {
  position:relative; width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
}
.hp-magic-stat-icon { font-size:24px; position:relative; z-index:1; }
.hp-magic-stat-pulse {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent3);
  animation:orb-pulse 2.5s ease-in-out infinite;
  opacity:0.4;
}
@keyframes orb-pulse {
  0%,100% { transform:scale(0.8); opacity:0.2; border-color:var(--accent3); }
  50% { transform:scale(1.1); opacity:0.6; border-color:var(--accent); }
}
.hp-magic-stat-num {
  font-family:'Outfit',sans-serif; font-size:22px;
  font-weight:700; color:var(--accent3);
  height:30px; display:flex; align-items:center; justify-content:center;
}
.hp-magic-stat-label {
  font-size:9px; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--text3); text-align:center; line-height:1.3;
  height:22px; display:flex; align-items:center; justify-content:center;
}
.hp-magic-stat:hover .hp-magic-stat-pulse { animation-duration:1s; opacity:0.8; }
.hp-magic-stat:hover .hp-magic-stat-icon { transform:scale(1.15); transition:transform 0.3s; }
.hp-cta-btn {
  display:inline-block; padding:14px 36px;
  font-family:'Outfit',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(230,57,70,0.3);
  letter-spacing:1px;
}
.hp-cta-btn:hover {
  background:#00deff; transform:translateY(-2px);
  box-shadow:0 0 30px rgba(230,57,70,0.5);
}

/* ── Feature Highlights ── */
.hp-features {
  position:relative; z-index:5;
  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:'Outfit',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:'Outfit',sans-serif; font-size:22px;
  font-weight:600; color:var(--accent3); margin-bottom:8px;
  text-align:center;
}

/* ── Catalog ── */
.hp-catalog { position:relative; z-index:5; 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:'Inter',sans-serif;
}
.hp-cat-pill:hover {
  border-color:var(--accent); color:var(--text);
}
.hp-cat-pill.active {
  background:rgba(230,57,70,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:'Inter',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:'Inter',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:'Inter',sans-serif;
}
.hp-tag-pill:hover { border-color:var(--text2); color:var(--text2); }
.hp-tag-pill.active {
  background:rgba(230,57,70,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:'Outfit',sans-serif; transition:all 0.2s;
}
.hp-clear-filters:hover { background:rgba(230,57,70,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:0;
  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);
}

/* Card effect layer — per-category animation overlay */
.hp-card-effect {
  position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:16px; overflow:hidden;
}

/* Card glow */
.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; z-index:0;
}

/* Card header — category badge + session count */
.hp-card-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px 0; position:relative; z-index:1;
}
.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-sessions-badge {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--text3); font-weight:600;
}

/* Card visual — icon / thumbnail area */
.hp-card-visual {
  display:flex; justify-content:center; align-items:center;
  padding:16px 18px 8px; position:relative; z-index:1;
  min-height:64px;
}
.hp-card-icon {
  font-size:48px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  transition:transform 0.3s;
}
.hp-course-card:hover .hp-card-icon { transform:scale(1.1); }

/* Card body — title, teacher, description, price, tags */
.hp-card-body {
  padding:4px 18px 14px; flex:1; display:flex; flex-direction:column;
  position:relative; z-index:1;
}
.hp-card-title {
  font-family:'Outfit',sans-serif; font-size:15px;
  font-weight:600; color:var(--accent3);
  margin-bottom:4px; line-height:1.3;
}
.hp-card-teacher {
  font-size:11px; color:var(--text3); margin-bottom:4px;
  font-style:italic;
}
.hp-card-location {
  font-size:10px; color:var(--text3); margin-bottom:8px;
  opacity:0.8;
}
.hp-card-desc {
  font-size:12px; color:var(--text2); line-height:1.6;
  flex:1; margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hp-card-price {
  font-family:'JetBrains Mono',monospace; font-size:13px;
  color:var(--accent3); margin-bottom:10px; font-weight:700;
}
.hp-card-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:4px; }
.hp-tag {
  font-size:9px; padding:3px 8px; border-radius:10px;
  background:var(--surface2); color:var(--text3);
  border:1px solid var(--border); letter-spacing:0.5px;
  transition:border-color 0.2s;
}
.hp-course-card:hover .hp-tag { border-color:var(--card-accent, var(--accent)); }

/* Card footer — CTA */
.hp-card-footer { position:relative; z-index:1; margin-top:auto; }
.hp-card-cta {
  font-family:'Outfit',sans-serif; font-size:12px;
  font-weight:600; color:var(--card-accent, var(--accent));
  text-align:center; padding:10px 18px;
  border-top:1px solid var(--border);
  background:var(--surface2); border-radius:0 0 16px 16px;
  transition:background 0.25s, letter-spacing 0.25s;
}
.hp-course-card:hover .hp-card-cta:not(.soon) {
  background:color-mix(in srgb, var(--card-accent, var(--accent)) 12%, var(--surface2));
  letter-spacing:1px;
}
.hp-card-cta.soon { color:var(--text3); }

/* Disabled overlay */
.hp-disabled-overlay {
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,12,24,0.7); color:var(--text3);
  font-family:'Outfit',sans-serif; font-size:13px;
  font-weight:600; letter-spacing:1px; border-radius:16px;
}

/* ═══ PER-CATEGORY ANIMATIONS ═══ */

/* PHYSICAL — Magical energy aura (green pulsing border glow) */
.card-cat-physical .hp-card-effect::before {
  content:''; position:absolute; inset:-1px; border-radius:17px;
  border:2px solid transparent; opacity:0; transition:opacity 0.4s;
  animation:energy-aura 2s ease-in-out infinite paused;
}
.card-cat-physical .hp-card-effect::after {
  content:''; position:absolute; inset:0; border-radius:16px;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,224,154,0.08) 0%, transparent 60%);
  opacity:0; transition:opacity 0.4s;
}
.card-cat-physical:hover .hp-card-effect::before { opacity:1; animation-play-state:running; }
.card-cat-physical:hover .hp-card-effect::after { opacity:1; }
.card-cat-physical:hover { --card-accent:#00e09a; }
@keyframes energy-aura {
  0%,100% { border-color:rgba(0,224,154,0.15); box-shadow:0 0 8px rgba(0,224,154,0.05); }
  50% { border-color:rgba(0,224,154,0.5); box-shadow:0 0 20px rgba(0,224,154,0.15); }
}

/* ONLINE — Data flow along top edge */
.card-cat-online .hp-card-effect::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:repeating-linear-gradient(90deg, transparent 0px, #e63946 4px, transparent 8px, transparent 16px);
  background-size:200% 100%;
  opacity:0; transition:opacity 0.4s;
  animation:data-flow 1.5s linear infinite paused;
}
.card-cat-online:hover .hp-card-effect::before { opacity:0.7; animation-play-state:running; }
.card-cat-online:hover { --card-accent:#e63946; }
@keyframes data-flow { 0% { background-position:0% 0; } 100% { background-position:-200% 0; } }

/* SELF-LEARNING — Shimmer sweep on hover */
.card-cat-self-learning .hp-card-effect::before {
  content:''; position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(120deg, transparent 30%, rgba(155,77,235,0.08) 50%, transparent 70%);
  background-size:200% 100%; background-position:100% 0;
  transition:opacity 0.4s;
  animation:shimmer-sweep 2s ease-in-out infinite paused;
  opacity:0;
}
.card-cat-self-learning:hover .hp-card-effect::before { opacity:1; animation-play-state:running; }
.card-cat-self-learning:hover { --card-accent:#9b4deb; }
@keyframes shimmer-sweep { 0% { background-position:100% 0; } 50% { background-position:-100% 0; } 100% { background-position:100% 0; } }

/* BOTH — Hybrid split glow + gold border pulse */
.card-cat-both .hp-card-effect::before {
  content:''; position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(180deg, rgba(0,224,154,0.04) 0%, transparent 40%, transparent 60%, rgba(230,57,70,0.04) 100%);
  opacity:0; transition:opacity 0.4s;
}
.card-cat-both .hp-card-effect::after {
  content:''; position:absolute; inset:-1px; border-radius:17px;
  border:2px solid transparent;
  animation:gold-pulse 2s ease-in-out infinite paused;
  opacity:0; transition:opacity 0.4s;
}
.card-cat-both:hover .hp-card-effect::before { opacity:1; }
.card-cat-both:hover .hp-card-effect::after { opacity:1; animation-play-state:running; }
.card-cat-both:hover { --card-accent:#d4a017; }
@keyframes gold-pulse { 0%,100% { border-color:rgba(212,160,23,0.2); } 50% { border-color:rgba(212,160,23,0.5); } }

/* ── 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);
}

/* ── Browse Courses CTA ── */
.hp-browse-cta {
  position:relative; z-index:5;
  padding:64px 24px;
  text-align:center;
  background:var(--surface);
  border-top:1px solid var(--border);
}
.hp-browse-cta-inner { max-width:600px; margin:0 auto; }
.hp-browse-cta-title {
  font-family:'Outfit',sans-serif; font-size:24px;
  font-weight:700; color:var(--accent3);
  margin-bottom:12px;
}
.hp-browse-cta-text {
  font-size:15px; color:var(--text2);
  margin-bottom:28px; line-height:1.6;
}

/* ── Footer ── */
.hp-footer {
  position:relative; z-index:5;
  border-top:1px solid var(--border);
  padding:48px 24px 24px;
  background:var(--surface);
}
.hp-footer-grid {
  display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr;
  gap:40px; max-width:960px; margin:0 auto;
}
.hp-footer-col { display:flex; flex-direction:column; gap:8px; }
.hp-footer-brand {
  font-family:'Playfair Display',serif; font-size:22px;
  color:var(--accent3); margin-bottom:2px;
}
.hp-footer-text {
  font-size:13px; color:var(--text3); margin:0; line-height:1.5;
}
.hp-footer-badge {
  display:inline-block; margin-top:10px;
  padding:4px 14px; border-radius:20px;
  background:rgba(230,57,70,0.08); border:1px solid var(--accent2);
  color:var(--accent); font-size:11px; font-weight:600;
  font-family:'Outfit',sans-serif; letter-spacing:1px;
  width:fit-content;
}
.hp-footer-heading {
  font-family:'Outfit',sans-serif; font-size:11px;
  font-weight:700; color:var(--text2); letter-spacing:2.5px;
  text-transform:uppercase; margin-bottom:4px;
}
.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:36px; padding-top:20px;
  border-top:1px solid var(--border);
}
.hp-footer-bottom p {
  font-size:12px; color:var(--text3); margin:2px 0;
}
.hp-footer-founder {
  margin-top:8px !important;
  font-size:11px; color:var(--text3); opacity:0.7;
  font-family:'Inter',sans-serif;
}
.hp-footer-version {
  margin-top:4px !important;
  font-size:10px; color:var(--accent); opacity:0.5;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:1px;
}

/* ── Homepage Responsive ── */
@media(max-width:1024px) {
  .hp-features-grid { grid-template-columns:repeat(2, 1fr); }
  .hp-footer-grid { grid-template-columns:1fr 1fr 1fr; gap:24px; }
}
@media(max-width:768px) {
  .hp-hero { padding:48px 16px 40px; min-height:auto; }
  .hp-stats-row { grid-template-columns:repeat(2, 1fr); gap:10px; max-width:360px; }
  .hp-magic-stat { padding:14px 6px 12px; }
  .hp-magic-stat-orb { width:40px; height:40px; }
  .hp-magic-stat-icon { font-size:18px; }
  .hp-magic-stat-num { font-size:18px; height:24px; }
  .hp-magic-stat-label { font-size:8px; letter-spacing:1px; }
  .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 1fr; gap:20px; text-align:left; }
  .hp-footer-col:first-child { grid-column:1 / -1; text-align:center; 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 { width:52px; height:70px; }
  .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:'Playfair Display',serif; font-size:clamp(24px,4vw,34px);
  font-weight:700; color:var(--course-color, var(--accent));
}
.cp-subtitle {
  font-family:'Outfit',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-location {
  font-size:12px; color:var(--text3); margin-top:2px;
  opacity:0.85;
}
.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:'Outfit',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(230,57,70,0.08);
}
.cp-session-card.locked {
  opacity:0.5;
}
.cp-session-card.coming-soon {
  opacity:0.4; filter:grayscale(0.3);
}
.cp-session-card.coming-soon:hover {
  opacity:0.55;
}
.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:'Outfit',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:'JetBrains 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:'JetBrains Mono',monospace;
}
.cp-session-action {
  flex-shrink:0; display:flex; align-items:center;
}
.cp-start-btn {
  font-family:'Outfit',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(230,57,70,0.3);
}
.cp-locked-label {
  font-size:12px; color:var(--text3);
  font-family:'JetBrains 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; padding-bottom:32px; }
  .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:'Outfit',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:#fff;
  font-family:'JetBrains 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:'JetBrains Mono',monospace;
  text-transform:uppercase; letter-spacing:0.5px;
}
.auth-role-badge.student { background:rgba(230,57,70,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-links {
  display:flex; align-items:center; gap:2px;
}
.auth-nav-link {
  font-size:13px; font-weight:500; color:var(--text2);
  text-decoration:none; padding:6px 12px; border-radius:6px;
  transition:color 0.2s, background 0.2s;
  white-space:nowrap;
}
.auth-nav-link:hover {
  color:var(--accent); background:rgba(230,57,70,0.08);
}
.auth-nav-btn {
  padding:6px 16px; border-radius:8px;
  font-size:13px; font-weight:600;
  cursor:pointer; border:none;
  font-family:'Inter',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(230,57,70,0.1); }
.auth-nav-btn.signup-btn {
  background:var(--accent); color:#fff;
}
.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:'Outfit',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:'Inter',sans-serif;
  font-weight:600; font-size:14px;
  transition:all 0.2s;
}
.auth-tab.active {
  background:var(--accent); color:#fff;
}

.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:'JetBrains 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:'Inter',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:#fff;
  border:none; border-radius:10px;
  font-family:'Inter',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(230,57,70,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; padding-bottom:48px;
}
.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:'Outfit',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(230,57,70,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:#fff;
  font-family:'JetBrains 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:'JetBrains 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:'JetBrains Mono',monospace;
}

/* Access control section */
.admin-access-section {
  margin-bottom:32px;
}
.admin-access-title {
  font-family:'Outfit',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:'JetBrains 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:'JetBrains 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:'Outfit',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:'JetBrains Mono',monospace;
  margin-bottom:8px;
}
.admin-progress-card .prog-score {
  font-size:22px; font-weight:800;
  font-family:'JetBrains 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;
}

/* ── 37b. ADMIN TABLE ────────────────────────────────── */
.admin-table-wrap {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow-x:auto;
}
.admin-table {
  width:100%; border-collapse:collapse;
  font-size:var(--fs-sm);
}
.admin-table thead th {
  text-align:left; padding:var(--sp-sm) var(--sp-md);
  background:var(--surface2); color:var(--text3);
  font-weight:600; font-size:var(--fs-2xs);
  text-transform:uppercase; letter-spacing:0.5px;
  border-bottom:2px solid var(--border);
}
.admin-table tbody td {
  padding:var(--sp-sm) var(--sp-md);
  border-bottom:1px solid var(--border);
  color:var(--text2); vertical-align:middle;
}
.admin-table tbody tr:last-child td { border-bottom:none; }
.admin-table tbody tr:hover td { background:rgba(255,255,255,0.02); }

/* Standalone approve/reject buttons (used outside .admin-pending-actions) */
.approve-btn {
  display:inline-block; font-size:var(--fs-2xs); font-weight:600;
  padding:3px 10px; border-radius:var(--radius-sm);
  background:var(--accent3); color:#0a0e14;
  border:none; cursor:pointer; transition:opacity 0.2s;
}
.approve-btn:hover { opacity:0.85; }
.reject-btn {
  display:inline-block; font-size:var(--fs-2xs); font-weight:600;
  padding:3px 10px; border-radius:var(--radius-sm);
  background:var(--danger); color:#fff;
  border:none; cursor:pointer; transition:opacity 0.2s;
}
.reject-btn:hover { opacity:0.85; }

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

/* ── 38b. OWNER ROLE SWITCHER ─────────────────────────── */
.nda-role-switch {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.nda-role-switch .auth-role-badge {
  transition: all 0.2s;
}
.nda-role-switch:hover .auth-role-badge {
  filter: brightness(1.2);
}
.nda-role-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 130px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
}
.nda-role-switch.open .nda-role-menu {
  display: block;
  animation: roleMenuIn 0.15s ease-out;
}
@keyframes roleMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nda-role-option {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s;
}
.nda-role-option.admin  { color: var(--warn); background: rgba(240,200,0,0.12); }
.nda-role-option.teacher { color: var(--accent3); background: rgba(0,255,170,0.12); }
.nda-role-option.student { color: var(--accent); background: rgba(230,57,70,0.12); }
.nda-role-option:hover { filter: brightness(1.3); }

/* ── 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:'Inter',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:#fff; }
.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:#fff; 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:'JetBrains Mono',monospace;
}
.admin-stat-card .stat-label {
  font-size:11px; color:var(--text3); margin-top:4px;
  text-transform:uppercase; letter-spacing:1px;
  font-family:'JetBrains 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:'JetBrains 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:#fff;
}
.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:'JetBrains 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:'Inter',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:'Outfit',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:'JetBrains 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:'Inter',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:#fff; }
.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); }

/* ── Admin Modal — Wide variant ── */
.admin-modal-card.admin-modal-wide { width:680px; max-width:95%; }
.admin-modal-field textarea {
  width:100%; padding:10px 12px; font-size:14px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; color:var(--text1); font-family:inherit; resize:vertical;
  box-sizing:border-box; transition:border-color 0.2s;
}
.admin-modal-field textarea:focus { border-color:var(--accent); outline:none; }

/* ── Admin modal drop zone ── */
.admin-modal-drop-zone {
  border:2px dashed var(--border); border-radius:12px;
  padding:24px; text-align:center; cursor:pointer; transition:all 0.2s;
}
.admin-modal-drop-zone:hover,
.admin-modal-drop-zone.dragover {
  border-color:var(--accent); background:rgba(0,212,255,0.04);
}

/* ── Admin modal tags (file/YouTube chips) ── */
.admin-modal-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; background:var(--surface2); border:1px solid var(--border);
  border-radius:16px; font-size:12px; color:var(--text2); margin:4px 4px 4px 0;
}
.admin-modal-tag-remove { cursor:pointer; opacity:0.6; font-size:13px; }
.admin-modal-tag-remove:hover { opacity:1; }

/* ── Admin modal collapsible section ── */
.admin-modal-collapsible-toggle {
  background:none; border:none; color:var(--text2); cursor:pointer;
  font-size:13px; padding:6px 0; display:flex; align-items:center; gap:6px;
  font-family:inherit;
}
.admin-modal-collapsible-toggle:hover { color:var(--text1); }
.admin-modal-collapsible-toggle .arrow { transition:transform 0.2s; font-size:10px; }
.admin-modal-collapsible-toggle.open .arrow { transform:rotate(90deg); }
.admin-modal-collapsible-content { display:none; margin-top:8px; }
.admin-modal-collapsible-content.open { display:block; }

/* ── Admin modal status box ── */
.admin-modal-status {
  margin-top:14px; padding:12px; border-radius:8px;
  border:1px solid var(--border); font-size:13px;
}

/* ── Color picker swatches ── */
.admin-color-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.admin-color-swatch {
  width:28px; height:28px; border-radius:50%;
  border:2px solid transparent; cursor:pointer; transition:all 0.2s;
}
.admin-color-swatch:hover { transform:scale(1.15); }
.admin-color-swatch.selected { border-color:var(--text); box-shadow:0 0 0 2px var(--surface); }

/* ── 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:#fff; 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:'Outfit',sans-serif; font-size:15px;
  font-weight:600; color:var(--text);
}
.panel-summary {
  margin-left:auto; font-size:11px; color:var(--text3);
  font-family:'JetBrains 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:'JetBrains 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:'Inter',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:'JetBrains Mono',monospace;
}

/* ── 52. HOMEPAGE PRICE TAG ───────────────── */
.hp-card-price {
  font-size:13px; color:var(--accent3); font-weight:600;
  font-family:'JetBrains 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:'JetBrains 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:'JetBrains 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(230,57,70,0.15); color:var(--accent);
  border:1px solid rgba(230,57,70,0.3);
}
.auth-nav-btn.student-btn:hover { background:rgba(230,57,70,0.25); }

/* ── 59. COURSE PAGE PURCHASE BUTTON ───────────────── */
.cp-purchase-btn {
  font-family:'Outfit',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:'JetBrains Mono',monospace;
  text-transform:uppercase; letter-spacing:0.5px;
}
.role-badge.student { background:rgba(230,57,70,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:'Inter',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:'Inter',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:'Inter',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:'Inter',sans-serif;
  transition:all 0.2s;
}
.admin-assign-btn:hover {
  background:rgba(230,57,70,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:'Inter',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:'Inter',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:'Inter',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: 0.9fr 0.7fr 0.5fr 0.7fr 0.7fr 0.6fr 0.6fr 1fr 0.8fr;
  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: 0.9fr 0.7fr 0.5fr 0.7fr 0.7fr 0.6fr 0.6fr 1fr 0.8fr;
  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(230,57,70,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:'Inter',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(230,57,70,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:'Inter',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:180px;
  max-width:180px;
  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(230,57,70,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(230,57,70,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);
}

/* ── Stripe Pay Now Button ── */
.sd-pay-now-btn {
  display:inline-flex; align-items:center; gap:2px;
  padding:5px 14px;
  font-size:11px; font-weight:700; font-family:'Inter',sans-serif;
  color:#fff; background:linear-gradient(135deg, #e63946, #d4a017);
  border:none; border-radius:6px;
  cursor:pointer; transition:opacity 0.2s, transform 0.15s;
  white-space:nowrap;
}
.sd-pay-now-btn:hover { opacity:0.85; transform:scale(1.03); }
.sd-pay-now-btn:active { transform:scale(0.97); }
.sd-pay-now-btn:disabled { opacity:0.5; cursor:wait; transform:none; }

/* ── Payment Success / Cancel Banners ── */
.sd-payment-success-banner {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; margin-bottom:16px;
  background:rgba(0,255,170,0.08);
  border:1px solid rgba(0,255,170,0.25);
  border-radius:10px; color:var(--accent3); font-size:13px;
}
.sd-payment-cancel-banner {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; margin-bottom:16px;
  background:rgba(255,215,0,0.08);
  border:1px solid rgba(255,215,0,0.25);
  border-radius:10px; color:var(--warn); font-size:13px;
}

/* ── Stripe Payment Modal ── */
.sd-pay-modal-backdrop {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.25s ease;
  padding:16px;
}
.sd-pay-modal-backdrop.active { opacity:1; }
.sd-pay-modal-card {
  position:relative;
  width:100%; max-width:440px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px 24px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(230,57,70,0.05);
  transform:translateY(20px) scale(0.97);
  transition:transform 0.25s ease;
  max-height:90vh; overflow-y:auto;
}
.sd-pay-modal-backdrop.active .sd-pay-modal-card {
  transform:translateY(0) scale(1);
}
.sd-pay-modal-close {
  position:absolute; top:12px; right:14px;
  background:none; border:none; font-size:22px;
  color:var(--text3); cursor:pointer; line-height:1;
  padding:4px 8px; border-radius:6px;
  transition:color 0.15s, background 0.15s;
}
.sd-pay-modal-close:hover { color:var(--text); background:var(--surface2); }
.sd-pay-modal-header {
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
}
.sd-pay-modal-title {
  font-size:18px; font-weight:700; color:var(--text);
  font-family:'Inter',sans-serif;
}
.sd-pay-modal-desc {
  font-size:12px; color:var(--text3); margin-top:2px;
}
.sd-pay-modal-amount {
  text-align:center; margin:16px 0;
}
.sd-pay-modal-currency {
  font-size:13px; font-weight:600; color:var(--text3);
  vertical-align:super; margin-right:4px;
}
.sd-pay-modal-value {
  font-size:36px; font-weight:800; color:var(--text);
  font-family:'Inter',sans-serif;
  letter-spacing:-1px;
}
.sd-pay-modal-divider {
  height:1px; background:var(--border);
  margin:16px 0;
}
#sd-payment-element {
  min-height:120px;
  margin-bottom:20px;
}
.sd-pay-modal-message {
  padding:10px 14px; border-radius:8px;
  font-size:13px; margin-bottom:14px;
  text-align:center;
}
.sd-pay-modal-message.error {
  background:rgba(240,64,96,0.1);
  border:1px solid rgba(240,64,96,0.25);
  color:var(--danger);
}
.sd-pay-modal-message.success {
  background:rgba(0,255,170,0.1);
  border:1px solid rgba(0,255,170,0.25);
  color:var(--accent3);
}
.sd-pay-submit-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 20px;
  font-size:15px; font-weight:700; font-family:'Inter',sans-serif;
  color:#fff; background:linear-gradient(135deg, #e63946, #d4a017);
  border:none; border-radius:10px;
  cursor:pointer; transition:opacity 0.2s, transform 0.15s;
}
.sd-pay-submit-btn:hover:not(:disabled) { opacity:0.9; transform:scale(1.01); }
.sd-pay-submit-btn:active:not(:disabled) { transform:scale(0.98); }
.sd-pay-submit-btn:disabled { opacity:0.55; cursor:wait; }
.sd-pay-spinner {
  display:inline-block; width:18px; height:18px;
  border:2.5px solid rgba(0,0,0,0.2);
  border-top-color:#000;
  border-radius:50%;
  animation:sdPaySpin 0.7s linear infinite;
}
@keyframes sdPaySpin { to { transform:rotate(360deg); } }
.sd-pay-modal-footer {
  text-align:center; margin-top:14px;
  font-size:11px; color:var(--text3);
  display:flex; align-items:center; justify-content:center; gap:5px;
}

/* ══════════════════════════════════════════════════════════════════════
   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(230,57,70,0.06);
  border:1px solid rgba(230,57,70,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:'Inter',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(230,57,70,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:'Outfit',sans-serif; }
.font-mono    { font-family:'JetBrains Mono',monospace; }
.font-body    { font-family:'Inter',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:'JetBrains 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:'Inter',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:#fff;
}
.nda-btn--primary:hover { filter:brightness(1.1); }

.nda-btn--success { background:var(--accent3); color:#fff; }
.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(230,57,70,0.1); }

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

.nda-btn--danger-fill {
  background:var(--danger); color:#fff;
}
.nda-btn--danger-fill:hover { filter:brightness(1.1); }

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

.nda-btn--danger-text {
  background:var(--surface2); color:var(--danger);
  border:1px solid var(--border);
}
.nda-btn--danger-text:hover { border-color:var(--danger); }

.nda-btn--transparent {
  background:transparent; color:var(--text3);
  border:1px solid var(--border);
}
.nda-btn--transparent:hover { color:var(--text2); border-color:var(--text3); }

.nda-btn--xs  { padding:3px 10px; font-size:var(--fs-2xs); }
.nda-btn--sm  { padding:6px 14px; font-size:var(--fs-sm); }
.nda-btn--md  { padding:8px 20px; font-size:var(--fs-base); }
.nda-btn--lg  { padding:10px 24px; font-size:var(--fs-base); }
.nda-btn--xl  { 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(230,57,70,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:'Inter',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(230,57,70,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:'JetBrains Mono',monospace;
  text-transform:uppercase; letter-spacing:0.5px;
}
.nda-badge--cyan   { background:rgba(230,57,70,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); }
.nda-status--active  { background:rgba(0,200,100,0.12); color:var(--success); }
.nda-status--muted   { background:var(--surface2); color:var(--text3); }

/* ══════════════════════════════════════════
   UTILITY — Text, Spacing, Display helpers
══════════════════════════════════════════ */
.nda-text-2xs  { font-size:var(--fs-2xs); }
.nda-text-xs   { font-size:var(--fs-xs); }
.nda-text-sm   { font-size:var(--fs-sm); }
.nda-text-base { font-size:var(--fs-base); }
.nda-text-md   { font-size:var(--fs-md); }
.nda-text-lg   { font-size:var(--fs-lg); }
.nda-text-xl   { font-size:var(--fs-xl); }
.nda-text-2xl  { font-size:var(--fs-2xl); }
.nda-text-muted { color:var(--text2); }
.nda-text-dim   { color:var(--text3); }
.nda-text-accent { color:var(--accent); }
.nda-text-gold  { color:var(--accent3); }
.nda-text-danger { color:var(--danger); }
.nda-text-success { color:var(--success); }
.nda-text-bold  { font-weight:700; }
.nda-text-semi  { font-weight:600; }

.nda-mt-xs  { margin-top:var(--sp-xs); }
.nda-mt-sm  { margin-top:var(--sp-sm); }
.nda-mt-md  { margin-top:var(--sp-md); }
.nda-mt-lg  { margin-top:var(--sp-lg); }
.nda-mt-xl  { margin-top:var(--sp-xl); }
.nda-mb-xs  { margin-bottom:var(--sp-xs); }
.nda-mb-sm  { margin-bottom:var(--sp-sm); }
.nda-mb-md  { margin-bottom:var(--sp-md); }
.nda-mb-lg  { margin-bottom:var(--sp-lg); }
.nda-ml-auto { margin-left:auto; }
.nda-mr-auto { margin-right:auto; }

.nda-flex     { display:flex; }
.nda-flex-col { display:flex; flex-direction:column; }
.nda-items-center { align-items:center; }
.nda-justify-between { justify-content:space-between; }
.nda-gap-xs  { gap:var(--sp-xs); }
.nda-gap-sm  { gap:var(--sp-sm); }
.nda-gap-md  { gap:var(--sp-md); }
.nda-gap-lg  { gap:var(--sp-lg); }

.nda-unread-dot {
  display:inline-block; width:8px; height:8px;
  border-radius:50%; background:var(--accent);
}
.nda-online-dot  { color:var(--success); font-size:var(--fs-xs); }
.nda-offline-dot { color:var(--text3); font-size:var(--fs-xs); }

/* ══════════════════════════════════════════
   COMPONENT — Unified Table (.nda-table)
══════════════════════════════════════════ */
.nda-table {
  width:100%; border-collapse:collapse;
  font-size:var(--fs-sm);
}
.nda-table th {
  text-align:left; padding:var(--sp-sm) var(--sp-md);
  background:var(--surface2); color:var(--text3);
  font-weight:600; font-size:var(--fs-2xs);
  text-transform:uppercase; letter-spacing:0.5px;
  border-bottom:2px solid var(--border);
}
.nda-table td {
  padding:var(--sp-sm) var(--sp-md);
  border-bottom:1px solid var(--border);
  color:var(--text2);
}
.nda-table tr:hover td { background:var(--surface2); }

/* ══════════════════════════════════════════
   COMPONENT — Info/Alert boxes
══════════════════════════════════════════ */
.nda-alert {
  padding:var(--sp-md); border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
}
.nda-alert--info {
  background:rgba(0,212,255,0.06); color:var(--text2);
  border-left:3px solid var(--accent);
}
.nda-alert--warn {
  background:rgba(255,215,0,0.08); color:var(--text2);
  border-left:3px solid var(--warn);
}
.nda-alert--danger {
  background:rgba(240,64,96,0.06); color:var(--text2);
  border-left:3px solid 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:'Inter',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:#fff;
  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:'Outfit',sans-serif;
}

/* ══════════════════════════════════════════
   PATTERN — Teacher Live Session UI (Professional)
══════════════════════════════════════════ */

/* ── Page container ── */
.tl-page { padding:0; }

/* ── Active Session Banner ── */
.tl-active-banner {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(255,77,109,0.08), rgba(168,85,247,0.06));
  border:1px solid rgba(255,77,109,0.3);
  border-radius:16px; padding:24px 28px;
  margin-bottom:24px;
}
.tl-active-pulse {
  position:absolute; top:16px; right:16px;
  width:12px; height:12px; border-radius:50%;
  background:#ff4d6d;
  animation:tl-pulse 2s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(255,77,109,0.5); }
  50% { opacity:0.7; box-shadow:0 0 0 8px rgba(255,77,109,0); }
}
.tl-active-body {
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.tl-active-info { flex:1; min-width:200px; }
.tl-active-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:2px; color:#ff4d6d;
  background:rgba(255,77,109,0.12); border:1px solid rgba(255,77,109,0.25);
  border-radius:20px; padding:4px 14px;
  margin-bottom:10px;
}
.tl-active-title {
  font-size:18px; font-weight:700; color:var(--text);
  font-family:'Inter',sans-serif; margin-bottom:4px;
}
.tl-active-meta {
  font-size:12px; color:var(--text3);
}
.tl-active-actions {
  display:flex; gap:10px; flex-shrink:0;
}

/* ── Shared Button Base ── */
.tl-btn {
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius:10px;
  padding:10px 20px;
  font-size:13px; font-weight:700;
  font-family:'Inter',sans-serif;
  cursor:pointer; transition:all 0.25s ease;
  white-space:nowrap;
}
.tl-btn--enter {
  background:linear-gradient(135deg, var(--accent), var(--accent2, #00b4d8));
  color:var(--bg); box-shadow:0 4px 16px rgba(230,57,70,0.25);
}
.tl-btn--enter:hover {
  box-shadow:0 6px 24px rgba(230,57,70,0.35); transform:translateY(-1px);
}
.tl-btn--end {
  background:rgba(255,77,109,0.12); border:1px solid rgba(255,77,109,0.3);
  color:#ff4d6d;
}
.tl-btn--end:hover {
  background:rgba(255,77,109,0.2); border-color:#ff4d6d;
}
.tl-btn--launch {
  width:100%; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent3, #00ff88));
  color:var(--bg); font-size:14px;
  padding:14px 24px; border-radius:12px;
  box-shadow:0 4px 20px rgba(230,57,70,0.2);
  margin-top:16px;
}
.tl-btn--launch:hover {
  box-shadow:0 6px 28px rgba(230,57,70,0.35); transform:translateY(-1px);
}

/* ── Launch Card (Start New Session) ── */
.tl-launch-card {
  background:var(--surface);
  border:1px solid var(--border, rgba(230,57,70,0.1));
  border-radius:16px; overflow:hidden;
  margin-bottom:28px;
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
}
.tl-launch-header {
  display:flex; align-items:center; gap:16px;
  padding:20px 24px;
  border-bottom:1px solid var(--border, rgba(230,57,70,0.08));
  background:rgba(230,57,70,0.03);
}
.tl-launch-icon {
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg, rgba(230,57,70,0.12), rgba(168,85,247,0.08));
  border:1px solid rgba(230,57,70,0.15);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); flex-shrink:0;
}
.tl-launch-title {
  font-size:16px; font-weight:700; color:var(--text);
  font-family:'Inter',sans-serif;
}
.tl-launch-subtitle {
  font-size:12px; color:var(--text3); margin-top:2px;
}
.tl-launch-body {
  padding:24px;
}

/* ── Form Elements ── */
.tl-form-row {
  display:flex; gap:16px; flex-wrap:wrap;
}
.tl-form-group {
  display:flex; flex-direction:column; gap:8px;
  min-width:140px;
}
.tl-form-group--grow { flex:1; }
.tl-form-label {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--text3);
  font-family:'JetBrains Mono',monospace;
}
.tl-select {
  padding:10px 14px; font-size:13px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--border, rgba(230,57,70,0.15));
  border-radius:10px; font-family:'Inter',sans-serif;
  outline:none; cursor:pointer;
  transition:border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2300d4ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}
.tl-select:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(230,57,70,0.1);
}

/* ── Student Selection ── */
.tl-students-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:20px; margin-bottom:12px;
}
.tl-select-all-btn {
  background:none; border:none;
  font-size:11px; font-weight:700;
  color:var(--accent); cursor:pointer;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.5px; text-transform:uppercase;
  padding:4px 10px; border-radius:6px;
  transition:background 0.2s;
}
.tl-select-all-btn:hover {
  background:rgba(230,57,70,0.08);
}
.tl-students-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:8px;
}
.tl-student-card {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:var(--bg); border:1px solid var(--border, rgba(230,57,70,0.1));
  border-radius:10px; cursor:pointer;
  transition:all 0.2s;
}
.tl-student-card:hover {
  border-color:rgba(230,57,70,0.3);
  background:rgba(230,57,70,0.03);
}
.tl-student-card.tl-student--online {
  border-color:rgba(0,255,136,0.2);
}
.tl-checkbox {
  width:16px; height:16px; accent-color:var(--accent);
  cursor:pointer; flex-shrink:0;
}
.tl-student-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--text3); opacity:0.4;
  flex-shrink:0;
}
.tl-student--online .tl-student-dot {
  background:#00ff88; opacity:1;
  box-shadow:0 0 6px rgba(0,255,136,0.5);
  animation:tl-dot-pulse 2s infinite;
}
@keyframes tl-dot-pulse {
  0%,100% { opacity:1; }
  50% { opacity:0.5; }
}
.tl-student-name {
  font-size:13px; font-weight:500; color:var(--text);
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-student-status {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--text3);
  font-family:'JetBrains Mono',monospace;
}
.tl-student--online .tl-student-status {
  color:#00ff88;
}

/* ── Session History ── */
.tl-history-section {
  margin-top:8px;
}
.tl-history-header {
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--text3);
  font-family:'JetBrains Mono',monospace;
  margin-bottom:14px; padding-bottom:10px;
  border-bottom:1px solid var(--border, rgba(230,57,70,0.08));
}
.tl-history-list {
  display:flex; flex-direction:column; gap:8px;
}
.tl-history-card {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 18px;
  background:var(--surface); border:1px solid var(--border, rgba(230,57,70,0.08));
  border-radius:12px; transition:all 0.2s;
}
.tl-history-card:hover {
  border-color:rgba(230,57,70,0.25);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.tl-history-left {
  flex:1; min-width:0;
}
.tl-history-title {
  font-size:13px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-history-meta {
  font-size:11px; color:var(--text3); margin-top:2px;
}
.tl-history-stats {
  display:flex; align-items:center; gap:16px; flex-shrink:0;
}
.tl-history-stat {
  text-align:center;
}
.tl-history-stat--date { text-align:right; min-width:80px; }
.tl-history-stat-val {
  font-size:15px; font-weight:700;
  font-family:'JetBrains Mono',monospace;
}
.tl-history-stat-val--accent { color:var(--accent); }
.tl-history-stat-val--warm { color:var(--accent4, #f59e0b); }
.tl-history-stat-unit { font-size:11px; color:var(--text3); font-weight:400; }
.tl-history-stat-lbl {
  font-size:9px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--text3); font-family:'JetBrains Mono',monospace; margin-top:1px;
}
.tl-history-stat-date { font-size:12px; color:var(--text2); }
.tl-history-stat-time { font-size:11px; color:var(--text3); }
.tl-history-divider {
  width:1px; height:28px;
  background:var(--border, rgba(230,57,70,0.08));
}

/* ── Responsive ── */
@media(max-width:640px) {
  .tl-active-body { flex-direction:column; align-items:flex-start; }
  .tl-active-actions { width:100%; }
  .tl-active-actions .tl-btn { flex:1; justify-content:center; }
  .tl-form-row { flex-direction:column; }
  .tl-students-grid { grid-template-columns:1fr; }
  .tl-history-card { flex-direction:column; align-items:flex-start; }
  .tl-history-stats { width:100%; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
}

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

/* ══════════════════════════════════════════════════════════════════════
   SELF-LEARNING PACKAGE PAGE
══════════════════════════════════════════════════════════════════════ */
.sl-container {
  max-width:960px; margin:0 auto; padding:24px 20px 48px;
}
.sl-back-row { margin-bottom:16px; }
.sl-back-link {
  color:var(--text3); font-size:13px; text-decoration:none;
  transition:color 0.15s;
}
.sl-back-link:hover { color:var(--accent); }

/* ── Hero ── */
.sl-hero {
  display:flex; align-items:flex-start; gap:20px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:28px 24px;
  margin-bottom:28px;
}
.sl-hero-icon { font-size:48px; line-height:1; }
.sl-hero-thumbnail { width:120px; height:120px; border-radius:14px; overflow:hidden; flex-shrink:0; }
.sl-hero-thumbnail img { width:100%; height:100%; object-fit:cover; }
.sl-trailer-section { margin-bottom:24px; }
.sl-trailer-wrap { display:flex; justify-content:center; padding:16px 0; }
.sl-preview-section { margin-bottom:24px; }
.sl-preview-gallery { margin:16px 0; }
.sl-preview-main {
  width:100%; max-width:720px; margin:0 auto;
  border-radius:12px; overflow:hidden; border:1px solid var(--border);
  background:var(--surface2);
}
.sl-preview-main img { width:100%; display:block; max-height:420px; object-fit:contain; }
.sl-preview-thumbs {
  display:flex; gap:8px; margin-top:10px; justify-content:center;
  flex-wrap:wrap; max-width:720px; margin-left:auto; margin-right:auto;
}
.sl-preview-thumb {
  width:72px; height:48px; border-radius:6px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; opacity:0.6;
  transition:opacity 0.2s, border-color 0.2s;
}
.sl-preview-thumb.active { border-color:var(--accent); opacity:1; }
.sl-preview-thumb:hover { opacity:1; }
.sl-preview-thumb img { width:100%; height:100%; object-fit:cover; }
.sl-preview-video { display:flex; justify-content:center; padding:16px 0; }
.hp-card-thumbnail {
  width:100%; height:100px; background-size:cover; background-position:center;
  border-radius:10px; margin-bottom:8px;
}
.sl-hero-info { flex:1; min-width:0; }
.sl-hero-badge {
  display:inline-block;
  padding:3px 10px; border-radius:6px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
  background:rgba(155,77,235,0.12); color:#9b4deb; border:1px solid rgba(155,77,235,0.3);
  margin-bottom:8px;
}
.sl-hero-title {
  font-size:22px; font-weight:800; color:var(--text);
  font-family:'Inter',sans-serif; margin:0 0 8px;
}
.sl-hero-desc {
  font-size:13px; color:var(--text2); line-height:1.6; margin:0 0 12px;
}
.sl-hero-meta {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12px; color:var(--text3);
}
.sl-meta-item { display:flex; align-items:center; gap:4px; }
.sl-tag {
  padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600;
  background:var(--surface2); color:var(--text3); border:1px solid var(--border);
}

/* ── Price box ── */
.sl-hero-price-box {
  flex-shrink:0; text-align:center;
  padding:20px 24px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:12px; min-width:160px;
}
.sl-price-tag { margin-bottom:4px; }
.sl-price-currency {
  font-size:12px; font-weight:600; color:var(--text3);
  vertical-align:super; margin-right:2px;
}
.sl-price-value {
  font-size:30px; font-weight:800; color:var(--text);
  font-family:'Inter',sans-serif; letter-spacing:-1px;
}
.sl-price-label {
  font-size:11px; color:var(--text3); margin-bottom:14px;
}
.sl-buy-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 24px; border:none; border-radius:10px;
  font-size:14px; font-weight:700; font-family:'Inter',sans-serif;
  color:#fff; background:linear-gradient(135deg, #e63946, #d4a017);
  cursor:pointer; transition:opacity 0.2s, transform 0.15s;
}
.sl-buy-btn:hover { opacity:0.9; transform:scale(1.02); }
.sl-buy-btn:active { transform:scale(0.97); }
.sl-purchased-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:10px;
  font-size:14px; font-weight:700; color:var(--accent3);
  background:rgba(0,255,170,0.1); border:1px solid rgba(0,255,170,0.25);
}

/* ── Content section ── */
.sl-section-title {
  font-size:16px; font-weight:700; color:var(--text);
  font-family:'Inter',sans-serif; margin:0 0 16px;
}
.sl-content-grid {
  display:flex; flex-direction:column; gap:10px;
}

/* ── File card ── */
.sl-file-card {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px;
  transition:border-color 0.2s, background 0.2s;
}
.sl-file-card:not(.locked):hover {
  border-color:var(--accent2);
  background:var(--surface2);
}
.sl-file-card.locked { opacity:0.6; }
.sl-file-icon { flex-shrink:0; }
.sl-file-info { flex:1; min-width:0; }
.sl-file-name {
  font-size:13px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sl-file-meta {
  font-size:11px; color:var(--text3); margin-top:2px;
}
.sl-file-desc {
  font-size:11px; color:var(--text2); margin-top:4px;
}
.sl-file-lock { color:var(--text3); }
.sl-download-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px; border-radius:8px;
  font-size:12px; font-weight:600; font-family:'Inter',sans-serif;
  color:var(--text); background:var(--surface2); border:1px solid var(--border);
  text-decoration:none;
  transition:background 0.2s, border-color 0.2s;
  flex-shrink:0;
}
.sl-download-btn:hover {
  background:var(--surface3); border-color:var(--accent2);
  color:var(--accent);
}
.sl-download-btn.sl-downloading {
  background:var(--surface3); border-color:var(--accent);
  pointer-events:none; min-width:120px; justify-content:center;
}
.sl-dl-progress { font-size:11px; font-weight:600; color:var(--accent); }
.sl-lock-message {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:16px; padding:14px;
  font-size:13px; color:var(--text3);
  background:var(--surface2); border:1px solid var(--border);
  border-radius:10px;
}

/* ── Student dashboard: package cards ── */
.sd-package-card {
  display:flex; flex-direction:column; gap:0;
  padding:16px 20px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px;
  transition:border-color 0.2s, background 0.2s;
  margin-bottom:10px;
}
.sd-package-card:hover {
  border-color:var(--accent2); background:var(--surface2);
}
.sd-package-card__header {
  display:flex; align-items:center; gap:14px;
}
.sd-package-card__icon { font-size:28px; }
.sd-package-card__title { font-size:15px; font-weight:700; color:var(--text); }
.sd-package-card__meta { font-size:12px; color:var(--text3); margin-top:2px; }
.sd-package-card__stat {
  font-size:13px; color:var(--text2);
  padding:6px 12px; background:var(--surface2,rgba(255,255,255,0.03));
  border-radius:6px;
}
.sd-package-icon { font-size:28px; }
.sd-package-info { flex:1; min-width:0; }
.sd-package-title {
  font-size:14px; font-weight:700; color:var(--text);
}
.sd-package-meta {
  font-size:11px; color:var(--text3); margin-top:2px;
}

/* ── Admin: Package management ── */
.admin-pkg-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px; margin-bottom:24px;
}
.admin-pkg-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:18px; cursor:pointer;
  transition:border-color 0.2s, background 0.2s;
}
.admin-pkg-card:hover { border-color:var(--accent2); background:var(--surface2); }
.admin-pkg-card-icon { font-size:32px; margin-bottom:8px; }
.admin-pkg-card-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:4px; }
.admin-pkg-card-stats { font-size:11px; color:var(--text3); }

.admin-pkg-detail { margin-top:16px; }
/* ── Package Course Preview Media ── */
.pkg-media-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); margin-bottom:20px; overflow:hidden;
}
.pkg-media-header {
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:baseline; gap:10px;
}
.pkg-media-title { font-weight:700; font-size:14px; color:var(--text); }
.pkg-media-subtitle { font-size:11px; color:var(--text3); }
.pkg-media-group { padding:14px 16px; }
.pkg-media-group + .pkg-media-group { border-top:1px solid var(--border); }
.pkg-media-label {
  font-size:12px; font-weight:600; color:var(--text2);
  margin-bottom:10px; text-transform:uppercase; letter-spacing:0.5px;
}
.pkg-preview-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
  gap:10px;
}
.pkg-preview-item {
  position:relative; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--border); aspect-ratio:16/10;
}
.pkg-preview-item img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.pkg-preview-remove {
  position:absolute; top:5px; right:5px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,0.7); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transition:opacity 0.2s;
}
.pkg-preview-item:hover .pkg-preview-remove,
.pkg-preview-video-wrap:hover .pkg-preview-remove { opacity:1; }
.pkg-preview-remove:hover { background:var(--danger); }
.pkg-preview-remove--video {
  position:static; opacity:1; width:auto; height:auto;
  border-radius:var(--radius-sm); padding:5px 10px;
  font-size:11px; font-family:'Inter',sans-serif; font-weight:600;
  display:inline-flex; gap:4px; margin-top:8px;
  background:var(--surface2); color:var(--text2); border:1px solid var(--border);
}
.pkg-preview-remove--video:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
.pkg-preview-add {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; border:2px dashed var(--border); border-radius:var(--radius-sm);
  aspect-ratio:16/10; cursor:pointer; color:var(--text3);
  transition:border-color 0.2s, color 0.2s;
}
.pkg-preview-add span { font-size:11px; font-weight:600; }
.pkg-preview-add:hover { border-color:var(--accent); color:var(--accent); }
.pkg-preview-add--video {
  aspect-ratio:auto; padding:20px; flex-direction:row; gap:8px;
}
.pkg-preview-add--video span { font-size:12px; }
.pkg-preview-video-wrap video {
  width:100%; max-height:200px; border-radius:var(--radius-sm);
  background:#000; border:1px solid var(--border);
}

.admin-pkg-upload-area {
  border:2px dashed var(--border); border-radius:12px;
  padding:30px 20px; text-align:center; color:var(--text3);
  cursor:pointer; transition:border-color 0.2s, background 0.2s;
  margin-bottom:16px;
}
.admin-pkg-upload-area:hover { border-color:var(--accent2); background:var(--surface2); }
.admin-pkg-upload-area.dragover { border-color:var(--accent); background:rgba(230,57,70,0.05); }

.admin-pkg-file-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.admin-pkg-file-row:last-child { border-bottom:none; }
.admin-pkg-file-name { flex:1; font-size:13px; color:var(--text); font-weight:500; }
.admin-pkg-file-meta { font-size:11px; color:var(--text3); }
.admin-pkg-file-delete {
  background:none; border:none; color:var(--danger); cursor:pointer;
  font-size:16px; padding:4px 8px; border-radius:6px;
  transition:background 0.15s;
}
.admin-pkg-file-delete:hover { background:rgba(240,64,96,0.1); }

/* ── Self-learning responsive ── */
@media (max-width:700px) {
  .sl-hero { flex-direction:column; }
  .sl-hero-price-box { width:100%; min-width:auto; }
}


/* ══════════════════════════════════════════════════════════════════════
   OVERVIEW PAGES — Redesigned Dashboard Layouts
   Admin · Student · Teacher
   ══════════════════════════════════════════════════════════════════════ */

/* ── Stats Row (top cards) ── */
.ov-stats-row {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:20px;
}
.ov-stats-row.top3 { grid-template-columns:repeat(3, 1fr); margin-bottom:12px; }
.ov-stats-row.top5 { grid-template-columns:repeat(5, 1fr); }
.ov-stats-row.bot2 { grid-template-columns:repeat(2, 1fr); margin-bottom:20px; }
.ov-stats-row.bot3 { grid-template-columns:repeat(3, 1fr); margin-bottom:20px; }
.ov-stat-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  position:relative;
  overflow:hidden;
}
.ov-stat-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:var(--accent);
  opacity:0.5;
  transition:opacity 0.2s;
}
.ov-stat-card.accent::before { background:#e63946; }
.ov-stat-card.blue::before { background:#6c8fff; }
.ov-stat-card.green::before { background:#00ff88; }
.ov-stat-card.gold::before { background:#ffb347; }
.ov-stat-card.purple::before { background:#a855f7; }
.ov-stat-card.emerald::before { background:#00cc66; }
.ov-stat-card.red::before { background:#e63946; }
.ov-stat-card:hover {
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.ov-stat-card:hover::before { opacity:1; }
.ov-stat-icon {
  font-size:24px;
  margin-bottom:6px;
}
.ov-stat-num {
  font-size:28px;
  font-weight:800;
  color:var(--accent);
  font-family:'JetBrains Mono', monospace;
  line-height:1.2;
}
.ov-stat-card.blue .ov-stat-num { color:#6c8fff; }
.ov-stat-card.green .ov-stat-num { color:#00ff88; }
.ov-stat-card.gold .ov-stat-num { color:#ffb347; }
.ov-stat-card.purple .ov-stat-num { color:#a855f7; }
.ov-stat-card.emerald .ov-stat-num { color:#00cc66; }
.ov-stat-card.red .ov-stat-num { color:#e63946; }
.ov-stat-label {
  font-size:11px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:0.8px;
  margin-top:4px;
  font-family:'JetBrains Mono', monospace;
}
.ov-stat-sub {
  font-size:10px;
  color:var(--text3);
  margin-top:6px;
  opacity:0.7;
}

/* ── Pending Action Row (admin) ── */
.ov-pending-row {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:20px;
}
.ov-pending-card {
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 16px;
  cursor:pointer;
  transition:border-color 0.2s, background 0.2s;
}
.ov-pending-card:hover { border-color:var(--accent); background:var(--surface2); }
.ov-pending-card.urgent { border-color:rgba(255,183,71,0.4); background:rgba(255,183,71,0.05); }
.ov-pending-card.urgent .ov-pending-num { color:#ffb347; }
.ov-pending-num {
  font-size:22px;
  font-weight:800;
  color:var(--accent);
  font-family:'JetBrains Mono', monospace;
  min-width:30px;
}
.ov-pending-label {
  font-size:12px;
  color:var(--text2);
  font-weight:500;
}

/* ── Two-column Layout ── */
.ov-two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:20px;
}

/* ── Panel Card ── */
.ov-panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  margin-bottom:16px;
}
.ov-two-col .ov-panel { margin-bottom:0; }
.ov-panel-title {
  font-size:13px;
  font-weight:700;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}

/* ── Bar Chart (Course Popularity) ── */
.ov-bar-chart { display:flex; flex-direction:column; gap:8px; }
.ov-bar-row { display:flex; align-items:center; gap:10px; }
.ov-bar-label {
  width:140px; min-width:140px;
  font-size:11px; color:var(--text2);
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ov-bar-track {
  flex:1;
  height:16px;
  background:rgba(255,255,255,0.04);
  border-radius:8px;
  overflow:hidden;
}
.ov-bar-fill {
  height:100%;
  background:linear-gradient(90deg, #e63946, #6c8fff);
  border-radius:8px;
  min-width:4px;
  transition:width 0.5s ease;
}
.ov-bar-value {
  min-width:28px;
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  font-family:'JetBrains Mono', monospace;
}

/* ── Revenue Grid ── */
.ov-revenue-grid { display:flex; flex-direction:column; gap:4px; }
.ov-rev-section-label {
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:0.8px;
  margin-top:10px; margin-bottom:2px; padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.ov-rev-section-label:first-child { border-top:none; margin-top:0; padding-top:0; }
.ov-rev-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.ov-rev-item:last-child { border-bottom:none; }
.ov-rev-item.subtotal { border-bottom:none; padding-top:6px; margin-bottom:2px; }
.ov-rev-item.subtotal .ov-rev-label { font-weight:600; color:var(--text); }
.ov-rev-item.subtotal .ov-rev-val { color:#ffb347; font-size:15px; }
.ov-rev-item.total { border-top:2px solid var(--border); padding-top:14px; margin-top:8px; }
.ov-rev-label { font-size:12px; color:var(--text2); }
.ov-rev-val {
  font-size:14px; font-weight:700; color:var(--accent);
  font-family:'JetBrains Mono', monospace;
}
.ov-rev-item.total .ov-rev-label { font-weight:700; color:var(--text); font-size:13px; }
.ov-rev-item.total .ov-rev-val { font-size:20px; color:#00cc66; }
.ov-rev-val.payout { color:#e63946; }
.ov-rev-val.income { color:#00ff88; }
.ov-rev-val.settled { color:#6c8fff; }
.ov-rev-val.pending-val { color:#ffb347; }

/* ── Activity Feed ── */
.ov-activity-list { display:flex; flex-direction:column; gap:8px; }
.ov-activity-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  background:rgba(255,255,255,0.02);
  border-radius:8px;
  font-size:12px;
  transition:background 0.15s;
}
.ov-activity-item:hover { background:rgba(255,255,255,0.05); }
.ov-role-tag {
  font-size:9px; font-weight:700;
  padding:2px 8px; border-radius:4px;
  text-transform:uppercase; letter-spacing:0.5px;
  flex-shrink:0;
}
.ov-role-tag.student { background:rgba(230,57,70,0.15); color:#e63946; }
.ov-role-tag.teacher { background:rgba(108,143,255,0.15); color:#6c8fff; }
.ov-activity-name { color:var(--text); font-weight:600; flex-shrink:0; }
.ov-activity-detail { color:var(--text3); flex:1; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ov-activity-amount {
  font-weight:700; color:#00ff88;
  font-family:'JetBrains Mono', monospace;
  flex-shrink:0;
}

/* ── Quick Actions ── */
.ov-quick-actions {
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-top:8px; padding-top:16px;
  border-top:1px solid var(--border);
}
.ov-action-btn {
  padding:8px 20px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text2);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
}
.ov-action-btn:hover {
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(230,57,70,0.05);
}

/* ── Empty State ── */
.ov-empty {
  text-align:center;
  color:var(--text3);
  font-size:12px;
  padding:16px;
  opacity:0.7;
}

/* ── AI Prompt List (Overview) ── */
.ov-ai-prompt-list {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ov-ai-prompt-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:var(--surface2);
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
}
.ov-ai-prompt-icon { font-size:18px; flex-shrink:0; }
.ov-ai-prompt-label {
  flex:1;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ov-ai-badge {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:3px 8px;
  border-radius:10px;
  white-space:nowrap;
  flex-shrink:0;
}
.ov-ai-badge.create { background:rgba(0,212,255,0.15); color:var(--accent); }
.ov-ai-badge.session { background:rgba(168,85,247,0.15); color:var(--accent5); }
.ov-ai-badge.delete { background:rgba(255,77,106,0.15); color:var(--danger); }

/* ── Progress Track (shared) ── */
.ov-progress-track {
  height:8px;
  background:rgba(255,255,255,0.06);
  border-radius:6px;
  overflow:hidden;
  flex:1;
}
.ov-progress-track.small { height:6px; }
.ov-progress-fill {
  height:100%;
  border-radius:6px;
  min-width:2px;
  transition:width 0.5s ease;
}

/* ═══ STUDENT OVERVIEW SPECIFIC ═══ */

/* Score ring */
.ov-score-panel { display:flex; flex-direction:column; align-items:center; }
.ov-score-panel .ov-panel-title { width:100%; }
.ov-score-ring-wrap { display:flex; flex-direction:column; align-items:center; padding:10px 0; }
.ov-score-ring {
  width:120px; height:120px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.ov-score-ring-inner {
  width:88px; height:88px;
  border-radius:50%;
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800;
  color:var(--text);
  font-family:'JetBrains Mono', monospace;
}
.ov-score-summary {
  font-size:11px; color:var(--text3);
  margin-top:10px;
}

/* Payment status */
.ov-payment-status { padding:10px 0; }
.ov-pmt-alert {
  display:flex; align-items:center; gap:14px;
  padding:16px;
  background:rgba(255,183,71,0.08);
  border:1px solid rgba(255,183,71,0.25);
  border-radius:10px;
  cursor:pointer;
  transition:background 0.2s;
}
.ov-pmt-alert:hover { background:rgba(255,183,71,0.14); }
.ov-pmt-alert-num {
  font-size:32px; font-weight:800;
  color:#ffb347;
  font-family:'JetBrains Mono', monospace;
}
.ov-pmt-alert-text { font-size:13px; color:var(--text2); line-height:1.5; }
.ov-pmt-alert-text small { color:var(--text3); }
.ov-pmt-ok {
  text-align:center;
  padding:24px;
  font-size:14px;
  color:#00ff88;
  font-weight:600;
}

/* Course progress list */
.ov-course-progress-list { display:flex; flex-direction:column; gap:14px; }
.ov-course-progress-item {
  padding:14px;
  background:rgba(255,255,255,0.02);
  border-radius:10px;
  cursor:pointer;
  transition:background 0.15s;
}
.ov-course-progress-item:hover { background:rgba(255,255,255,0.05); }
.ov-cp-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ov-cp-icon { font-size:18px; }
.ov-cp-title { font-size:14px; font-weight:600; color:var(--text); flex:1; }
.ov-cp-pct {
  font-size:14px; font-weight:800;
  color:var(--accent);
  font-family:'JetBrains Mono', monospace;
}
.ov-cp-detail {
  font-size:11px; color:var(--text3);
  margin-top:6px;
}

/* Schedule */
.ov-schedule-list { display:flex; flex-direction:column; gap:8px; }
.ov-schedule-item {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px;
  background:rgba(255,255,255,0.02);
  border-radius:8px;
}
.ov-sched-student {
  font-size:13px; font-weight:600; color:var(--text);
  min-width:120px;
}
.ov-sched-course {
  font-size:12px; color:var(--text2);
  min-width:120px;
}
.ov-sched-slots { display:flex; gap:6px; flex-wrap:wrap; }
.ov-sched-slot {
  font-size:11px; font-weight:600;
  padding:3px 10px;
  background:rgba(230,57,70,0.1);
  color:var(--accent);
  border-radius:6px;
}

/* ═══ TEACHER OVERVIEW SPECIFIC ═══ */

/* Course tags */
.ov-course-tags {
  display:flex; gap:8px; flex-wrap:wrap;
}
.ov-course-tag {
  padding:7px 16px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  color:var(--text2);
  transition:border-color 0.2s;
}
.ov-course-tag:hover { border-color:var(--accent); }

/* Teacher course breakdown cards */
.ov-teacher-courses { display:flex; flex-direction:column; gap:16px; }
.ov-teacher-course-card {
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:16px;
}
.ov-tc-header {
  display:flex; align-items:center; gap:8px;
  margin-bottom:12px;
}
.ov-tc-icon { font-size:20px; }
.ov-tc-title { font-size:14px; font-weight:700; color:var(--text); flex:1; }
.ov-tc-badge {
  font-size:10px; font-weight:700;
  padding:3px 10px; border-radius:6px;
  background:rgba(230,57,70,0.12); color:var(--accent);
  text-transform:uppercase;
}
.ov-tc-avg {
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:var(--text3);
  margin-bottom:14px;
}
.ov-tc-avg-pct {
  font-size:13px; font-weight:700;
  color:var(--accent);
  font-family:'JetBrains Mono', monospace;
  min-width:36px;
}

/* Student progress inside teacher course card */
.ov-tc-students { display:flex; flex-direction:column; gap:4px; }
.ov-tc-students-header {
  display:grid;
  grid-template-columns:1fr 1.5fr 50px 50px;
  gap:8px;
  font-size:10px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:4px 0 8px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.ov-sp-row {
  display:grid;
  grid-template-columns:1fr 1.5fr 50px 50px;
  gap:8px;
  align-items:center;
  padding:6px 0;
  font-size:12px;
}
.ov-sp-name { color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ov-sp-bar-wrap { display:flex; align-items:center; }
.ov-sp-stat { color:var(--text3); font-family:'JetBrains Mono', monospace; font-size:11px; text-align:center; }
.ov-sp-score { color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; text-align:center; }

/* ═══ OVERVIEW RESPONSIVE ═══ */
@media (max-width:768px) {
  .ov-stats-row { grid-template-columns:repeat(2, 1fr); }
  .ov-stats-row.top3 { grid-template-columns:repeat(2, 1fr); }
  .ov-stats-row.bot2 { grid-template-columns:repeat(2, 1fr); }
  .ov-stats-row.top5 { grid-template-columns:repeat(3, 1fr); }
  .ov-stats-row.bot3 { grid-template-columns:repeat(3, 1fr); }
  .ov-two-col { grid-template-columns:1fr; }
  .ov-pending-row, .ov-quick-actions { grid-template-columns:repeat(2, 1fr); }
  .ov-bar-label { width:100px; min-width:100px; font-size:10px; }
  .ov-tc-students-header,
  .ov-sp-row { grid-template-columns:1fr 1fr 40px 40px; }
}
@media (max-width:480px) {
  .ov-stats-row, .ov-stats-row.top3, .ov-stats-row.top5, .ov-stats-row.bot2, .ov-stats-row.bot3 { grid-template-columns:1fr; }
  .ov-pending-row, .ov-quick-actions { grid-template-columns:1fr; }
  .ov-stat-num { font-size:22px; }
  .ov-schedule-item { flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════
   PAGE STYLES — About, Contact, Support
   ═══════════════════════════════════════ */

/* ── Shared page layout ── */
.pg-hero { background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%); padding: 80px 24px 48px; text-align: center; border-bottom: 1px solid var(--border); }
.pg-hero-inner { max-width: 700px; margin: 0 auto; }
.pg-hero-icon { font-size: 48px; margin-bottom: 12px; }
.pg-hero-title { font-family: 'Outfit', sans-serif; font-size: 2rem; color: var(--accent3); margin-bottom: 8px; }
.pg-hero-subtitle { color: var(--text2); font-size: 1.05rem; }

.pg-section { padding: 48px 24px; }
.pg-section-alt { background: var(--surface); }
.pg-section-inner { max-width: 800px; margin: 0 auto; }
.pg-section-title { font-family: 'Outfit', sans-serif; font-size: 1.4rem; color: var(--accent3); text-align: center; margin-bottom: 24px; }
.pg-section-text { color: var(--text2); line-height: 1.8; margin-bottom: 16px; font-size: 0.95rem; }

/* ── Page forms ── */
.pg-form { max-width: 600px; margin: 0 auto; }
.pg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.pg-form-group { margin-bottom: 16px; }
.pg-form-label { display: block; font-size: 0.82rem; color: var(--text2); margin-bottom: 6px; font-weight: 500; }
.pg-form-input, .pg-form-textarea { width: 100%; padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.9rem; transition: border-color 0.2s; box-sizing: border-box; font-family: inherit; }
.pg-form-input:focus, .pg-form-textarea:focus { outline: none; border-color: var(--accent); }
.pg-form-textarea { resize: vertical; min-height: 100px; }
.pg-form-submit { display: block; width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: inherit; }
.pg-form-submit:hover { background: var(--accent2); }
.pg-form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.pg-form-status { text-align: center; margin-top: 12px; font-size: 0.85rem; min-height: 20px; }
.pg-form-status.success { color: #00e09a; }
.pg-form-status.error { color: var(--danger); }

/* ── Page footer ── */
.pg-footer { padding:48px 24px 28px; border-top:1px solid var(--border); background:var(--bg); }
.pg-footer-inner { max-width:960px; margin:0 auto; }
.pg-footer-grid {
  display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr;
  gap:40px; margin-bottom:32px;
}
.pg-footer-col { display:flex; flex-direction:column; gap:8px; }
.pg-footer-brand { font-family:'Playfair Display',serif; font-size:22px; color:var(--accent3); margin-bottom:2px; }
.pg-footer-tagline { font-size:13px; color:var(--text3); margin:0; line-height:1.5; }
.pg-footer-heading {
  font-family:'Outfit',sans-serif; font-size:11px; font-weight:700;
  color:var(--text2); letter-spacing:2.5px; text-transform:uppercase; margin-bottom:4px;
}
.pg-footer-link { color:var(--text3); text-decoration:none; font-size:13px; transition:color 0.2s; }
.pg-footer-link:hover { color:var(--accent); }
.pg-footer-bottom {
  text-align:center; padding-top:20px; border-top:1px solid var(--border);
}
.pg-footer-copy { font-size:12px; color:var(--text3); margin:2px 0; }
@media(max-width:768px) {
  .pg-footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .pg-footer-col:first-child { grid-column:1 / -1; text-align:center; align-items:center; }
}
@media(max-width:480px) {
  .pg-footer-grid { grid-template-columns:1fr; text-align:center; }
  .pg-footer-col { align-items:center; }
}

/* ── Quick link pills ── */
.pg-quick-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--surface2); border: 1px solid var(--border); border-radius: 24px; color: var(--text); text-decoration: none; font-size: 0.88rem; transition: all 0.2s; }
.pg-quick-link:hover { border-color: var(--accent); color: var(--accent); background: rgba(230,57,70,0.08); }

/* ── About page ── */
.about-founder-card { display: flex; gap: 24px; align-items: flex-start; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.about-founder-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--accent3); color: #000; display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 700; flex-shrink: 0; }
.about-founder-info { flex: 1; }
.about-founder-name { font-family: 'Outfit', sans-serif; font-size: 1.1rem; color: var(--text); margin-bottom: 4px; }
.about-founder-role { color: var(--accent3); font-size: 0.9rem; font-weight: 600; margin-bottom: 4px; }
.about-founder-location { color: var(--text3); font-size: 0.85rem; margin-bottom: 10px; }
.about-founder-bio { color: var(--text2); font-size: 0.9rem; line-height: 1.7; }

.about-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width:768px) { .about-values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:480px) { .about-values-grid { grid-template-columns: 1fr; } }
.about-value-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 24px; text-align: center; transition: border-color 0.2s, transform 0.2s; }
.about-value-card:hover { border-color: var(--accent3); transform: translateY(-4px); }
.about-value-icon { font-size: 2rem; margin-bottom: 10px; }
.about-value-title { font-family: 'Outfit', sans-serif; font-size: 0.95rem; color: var(--accent3); margin-bottom: 8px; }
.about-value-desc { color: var(--text2); font-size: 0.82rem; line-height: 1.6; }

/* ── Legal pages (Privacy Policy, Terms of Service) ── */
.legal-content { max-width:800px; margin:0 auto; }
.legal-updated {
  font-size:12px; color:var(--text3); margin-bottom:28px;
  padding:8px 14px; background:var(--surface2); border-radius:8px;
  display:inline-block; border:1px solid var(--border);
}
.legal-heading {
  font-family:'Outfit', sans-serif; font-size:1.15rem; font-weight:700;
  color:var(--accent); margin:32px 0 12px 0; padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.legal-subheading {
  font-family:'Outfit', sans-serif; font-size:0.95rem; font-weight:600;
  color:var(--accent3); margin:20px 0 8px 0;
}
.legal-content p {
  color:var(--text2); font-size:0.88rem; line-height:1.75; margin:0 0 12px 0;
}
.legal-content ul {
  color:var(--text2); font-size:0.88rem; line-height:1.75;
  margin:0 0 16px 0; padding-left:24px;
}
.legal-content li { margin-bottom:6px; }
.legal-content a { color:var(--accent); text-decoration:none; }
.legal-content a:hover { text-decoration:underline; }

/* ── Contact page ── */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.contact-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 28px 20px; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; }
.contact-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.contact-card-icon { font-size: 2rem; margin-bottom: 10px; }
.contact-card-title { font-family: 'Outfit', sans-serif; font-size: 0.9rem; color: var(--text); margin-bottom: 6px; }
.contact-card-value { color: var(--text2); font-size: 0.85rem; margin-bottom: 8px; }
.contact-card-cta { color: var(--accent); font-size: 0.8rem; font-weight: 600; }

/* ── FAQ accordion ── */
.faq-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; }
.faq-tab { padding: 10px 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text2); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.faq-tab:hover { border-color: var(--accent); color: var(--text); }
.faq-tab.active { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; }
.faq-panel { display: none; }
.faq-panel.active { display: block; }
.faq-category-title { max-width: 700px; margin: 32px auto 14px; color: var(--accent); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; padding-left: 4px; }
.faq-category-title:first-child { margin-top: 0; }
.faq-list { max-width: 700px; margin: 0 auto 8px; }
.faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: var(--surface2); transition: border-color 0.2s; }
.faq-item:hover { border-color: var(--accent); }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; user-select: none; }
.faq-q-text { color: var(--text); font-weight: 500; font-size: 0.92rem; flex: 1; }
.faq-arrow { color: var(--accent); font-size: 1.1rem; transition: transform 0.25s; flex-shrink: 0; margin-left: 12px; }
.faq-open .faq-arrow { transform: rotate(90deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 20px; }
.faq-open .faq-answer { max-height: 500px; padding: 0 20px 16px; }
.faq-answer p { color: var(--text2); font-size: 0.85rem; line-height: 1.7; margin: 0; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .pg-form-row { grid-template-columns: 1fr; }
  .about-founder-card { flex-direction: column; align-items: center; text-align: center; }
  .pg-hero-title { font-size: 1.5rem; }
  .pg-hero { padding: 60px 16px 36px; }
}

/* ═══════════════════════════════════════
   DARK WIZARD + MAGIC EFFECTS
   ═══════════════════════════════════════ */

/* ── Wizard ── */
.hp-wizard {
  position:absolute; z-index:6; pointer-events:none;
  width:64px; height:85px;
  opacity:0.8;
  filter:drop-shadow(0 2px 10px rgba(212,160,23,0.25));
  transition:opacity 0.4s, filter 0.4s;
}
.hp-wizard-svg { width:100%; height:100%; }
.hp-wizard-eye { animation:wizard-blink 4s ease-in-out infinite; }
@keyframes wizard-blink {
  0%,42%,46%,100% { r:1.5; }
  44% { r:0.3; }
}
.hp-wizard-orb {
  animation:wizard-orb-glow 1.5s ease-in-out infinite alternate;
}
@keyframes wizard-orb-glow {
  0% { stroke:var(--accent); opacity:0.5; }
  100% { stroke:var(--accent3); opacity:1; }
}
.hp-wizard-orb-inner {
  animation:wizard-orb-inner 2s ease-in-out infinite alternate;
}
@keyframes wizard-orb-inner {
  0% { fill:var(--accent); r:1.5; }
  100% { fill:var(--accent3); r:2.5; }
}

/* Wizard casting state */
.hp-wizard-casting {
  opacity:1 !important;
  filter:drop-shadow(0 0 16px rgba(230,57,70,0.5)) drop-shadow(0 0 32px rgba(212,160,23,0.3));
}
.hp-wizard-casting .hp-wizard-orb {
  animation:wizard-cast-orb 0.4s ease-in-out infinite alternate !important;
}
@keyframes wizard-cast-orb {
  0% { stroke:var(--accent); r:4; stroke-width:2; }
  100% { stroke:var(--accent3); r:6; stroke-width:1; }
}
.hp-wizard-casting .hp-wizard-orb-inner {
  animation:wizard-cast-inner 0.3s ease-in-out infinite alternate !important;
}
@keyframes wizard-cast-inner {
  0% { fill:#e63946; r:2; opacity:1; }
  100% { fill:#d4a017; r:3; opacity:0.8; }
}

/* ── Wizard hit flash (takes damage) ── */
.hp-wizard-hit {
  animation:wizard-hit-flash 0.5s ease-out !important;
}
@keyframes wizard-hit-flash {
  0%   { filter:brightness(4) hue-rotate(-30deg) drop-shadow(0 0 30px rgba(255,26,26,0.8)); }
  30%  { filter:brightness(2) hue-rotate(0deg) drop-shadow(0 0 20px rgba(255,26,26,0.5)); }
  60%  { filter:brightness(3) hue-rotate(-20deg) drop-shadow(0 0 25px rgba(255,26,26,0.6)); }
  100% { filter:drop-shadow(0 2px 10px rgba(212,160,23,0.25)); }
}

/* ── Click blocked during attack mode ── */
.hp-click-blocked {
  animation:click-blocked-shake 0.4s ease-out;
  outline:2px solid rgba(255,26,26,0.6) !important;
  outline-offset:2px;
}
@keyframes click-blocked-shake {
  0%, 100% { transform:translateX(0); }
  20% { transform:translateX(-4px); }
  40% { transform:translateX(4px); }
  60% { transform:translateX(-3px); }
  80% { transform:translateX(2px); }
}

/* ── Wizard HP bar ── */
.hp-wizard-hpbar {
  position:fixed; top:70px; right:20px; z-index:10004;
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; border-radius:12px;
  background:rgba(10,5,15,0.85);
  border:1px solid rgba(230,57,70,0.3);
  box-shadow:0 0 20px rgba(139,0,0,0.15);
  animation:hpbar-appear 0.5s ease-out;
}
@keyframes hpbar-appear {
  0%   { opacity:0; transform:translateX(40px); }
  100% { opacity:1; transform:translateX(0); }
}
.hp-wizard-hpbar-label {
  font-family:'Outfit',sans-serif; font-size:0.65rem; font-weight:600;
  color:#b0b0c8; text-transform:uppercase; letter-spacing:1.5px;
}
.hp-wizard-hpbar-hearts {
  display:flex; gap:4px;
}
.hp-wizard-heart {
  font-size:1.2rem; transition:all 0.3s ease;
}
.hp-wizard-heart-full {
  color:#e63946; text-shadow:0 0 8px rgba(230,57,70,0.5);
}
.hp-wizard-heart-empty {
  color:#3a3a52; text-shadow:none;
}

/* ── Magic sparkle particles ── */
.hp-magic-spark {
  position:fixed; z-index:9998; pointer-events:none;
  width:6px; height:6px; border-radius:50%;
  animation:spark-fly 0.8s ease-out forwards;
}
@keyframes spark-fly {
  0% { opacity:1; transform:scale(1) translateY(0); }
  100% { opacity:0; transform:scale(0) translateY(-40px) rotate(180deg); }
}

/* ── Hero sparkle rain ── */
.hp-magic-sparkles {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1;
}
.hp-sparkle {
  position:absolute; top:-10px; border-radius:50%;
  animation:sparkle-fall linear forwards;
}
@keyframes sparkle-fall {
  0% { transform:translateY(-10px) rotate(0deg); opacity:0; }
  10% { opacity:1; }
  90% { opacity:0.5; }
  100% { transform:translateY(100vh) rotate(720deg); opacity:0; }
}

/* ── Feature card magical hover (enhanced) ── */
.hp-feature-card {
  position:relative; overflow:hidden;
}
.hp-feature-card::after {
  content:''; position:absolute; inset:0; border-radius:16px;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(212,160,23,0.06) 0%, transparent 50%);
  pointer-events:none; opacity:0; transition:opacity 0.3s;
}
.hp-feature-card:hover::after { opacity:1; }
.hp-feature-card:hover .hp-feature-icon {
  animation:icon-float 1.5s ease-in-out infinite;
}
@keyframes icon-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}

/* ── Wizard enchantment effect on targeted elements ── */
.hp-enchanted {
  transform:translateY(-4px) scale(1.02) !important;
  box-shadow:
    0 0 20px rgba(230,57,70,0.2),
    0 0 40px rgba(212,160,23,0.1),
    0 8px 32px rgba(0,0,0,0.3) !important;
  border-color:var(--accent3) !important;
  transition:all 0.4s cubic-bezier(0.2,0.8,0.3,1) !important;
  position:relative;
  z-index:2;
}
.hp-enchanted::before {
  content:''; position:absolute; inset:-2px; border-radius:inherit;
  background:linear-gradient(135deg, rgba(230,57,70,0.15), transparent 40%, rgba(212,160,23,0.15));
  pointer-events:none; z-index:-1;
  animation:enchant-shimmer 1.5s ease-in-out infinite;
}
@keyframes enchant-shimmer {
  0%   { opacity:0.3; background-position:0% 0%; }
  50%  { opacity:0.8; background-position:100% 100%; }
  100% { opacity:0.3; background-position:0% 0%; }
}

/* ── Wizard beam ── */
.hp-wizard-beam { position:fixed; inset:0; pointer-events:none; z-index:200; }

/* ── Mobile: hide wizard ── */
@media (max-width: 768px) {
  .hp-wizard, .hp-wizard-beam { display:none; }
}
@media (hover: none) {
  .hp-wizard, .hp-wizard-beam { display:none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   WEATHER SYSTEM — dynamic weather effects
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Overlay container ── */
.weather-overlay {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
  transition:opacity 0.8s ease;
}
.weather-sky,
.weather-clouds,
.weather-rain,
.weather-snow,
.weather-stars,
.weather-sun,
.weather-flash {
  position:absolute; inset:0; pointer-events:none;
}

/* ── Sky tints per weather ── */
.weather-overlay.weather-clear-day .weather-sky {
  background:linear-gradient(180deg, rgba(30,60,120,0.08) 0%, transparent 60%);
}
.weather-overlay.weather-sunny .weather-sky {
  background:linear-gradient(180deg, rgba(212,160,23,0.06) 0%, rgba(230,57,70,0.02) 40%, transparent 70%);
}
.weather-overlay.weather-clear-night .weather-sky,
.weather-overlay.weather-starry-night .weather-sky {
  background:linear-gradient(180deg, rgba(5,5,20,0.25) 0%, rgba(10,10,30,0.1) 60%, transparent 100%);
}
.weather-overlay.weather-cloudy-day .weather-sky {
  background:linear-gradient(180deg, rgba(80,80,100,0.08) 0%, transparent 50%);
}
.weather-overlay.weather-cloudy-night .weather-sky {
  background:linear-gradient(180deg, rgba(10,10,25,0.2) 0%, transparent 60%);
}
.weather-overlay.weather-rainy .weather-sky {
  background:linear-gradient(180deg, rgba(20,20,40,0.18) 0%, rgba(30,30,50,0.06) 60%, transparent 100%);
}
.weather-overlay.weather-stormy .weather-sky {
  background:linear-gradient(180deg, rgba(15,10,25,0.3) 0%, rgba(25,15,35,0.12) 50%, transparent 100%);
}
.weather-overlay.weather-snowy .weather-sky {
  background:linear-gradient(180deg, rgba(180,190,210,0.06) 0%, transparent 50%);
}

/* ── Clouds ── */
.weather-cloud {
  position:absolute;
  width:200px; height:60px;
  background:radial-gradient(ellipse at 50% 90%, rgba(200,200,220,0.15) 0%, transparent 70%);
  border-radius:50%;
  animation:cloud-drift linear infinite;
  filter:blur(6px);
}
.weather-cloud::before,
.weather-cloud::after {
  content:''; position:absolute; border-radius:50%;
  background:inherit;
}
.weather-cloud::before {
  width:70%; height:80%;
  top:-30%; left:15%;
}
.weather-cloud::after {
  width:50%; height:60%;
  top:-15%; left:55%;
}
.weather-cloud-dark {
  background:radial-gradient(ellipse at 50% 90%, rgba(40,40,60,0.25) 0%, transparent 70%);
}
@keyframes cloud-drift {
  0%   { transform:translateX(0) scale(var(--cs,1)); }
  100% { transform:translateX(120vw) scale(var(--cs,1)); }
}

/* ── Rain ── */
.weather-raindrop {
  position:absolute; top:-20px;
  width:1px; height:18px;
  background:linear-gradient(180deg, transparent, rgba(150,180,220,0.5));
  animation:rain-fall linear infinite;
}
.weather-raindrop-heavy {
  width:2px; height:24px;
  background:linear-gradient(180deg, transparent, rgba(150,180,220,0.7));
}
@keyframes rain-fall {
  0%   { transform:translateY(-20px); opacity:0; }
  10%  { opacity:1; }
  100% { transform:translateY(100vh); opacity:0.3; }
}

/* ── Snow ── */
.weather-snowflake {
  position:absolute; top:-10px;
  border-radius:50%;
  background:rgba(255,255,255,0.8);
  animation:snow-fall linear infinite;
}
@keyframes snow-fall {
  0%   { transform:translateY(-10px) translateX(0) rotate(0); opacity:0; }
  10%  { opacity:1; }
  50%  { transform:translateY(50vh) translateX(30px) rotate(180deg); }
  100% { transform:translateY(100vh) translateX(-20px) rotate(360deg); opacity:0.2; }
}

/* ── Stars ── */
.weather-star {
  position:absolute;
  border-radius:50%;
  background:#fff;
  animation:star-twinkle ease-in-out infinite alternate;
}
@keyframes star-twinkle {
  0%   { opacity:0.2; transform:scale(0.8); }
  50%  { opacity:1;   transform:scale(1.2); }
  100% { opacity:0.3; transform:scale(0.9); }
}

/* ── Sun ── */
.weather-sun-orb {
  position:absolute;
  top:5%; right:10%;
  width:60px; height:60px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,220,80,0.3) 0%, rgba(255,180,50,0.1) 50%, transparent 70%);
  animation:sun-pulse 4s ease-in-out infinite alternate;
}
.weather-sun-rays {
  position:absolute;
  top:2%; right:7%;
  width:100px; height:100px;
  background:
    radial-gradient(circle, rgba(255,220,80,0.08) 0%, transparent 60%),
    conic-gradient(from 0deg, transparent, rgba(255,220,80,0.04) 10%, transparent 20%,
      transparent 30%, rgba(255,220,80,0.03) 40%, transparent 50%,
      transparent 60%, rgba(255,220,80,0.04) 70%, transparent 80%);
  border-radius:50%;
  animation:sun-rotate 30s linear infinite;
}
@keyframes sun-pulse {
  0%   { transform:scale(1); opacity:0.7; }
  100% { transform:scale(1.15); opacity:1; }
}
@keyframes sun-rotate {
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

/* ── Lightning flash ── */
.weather-flash {
  background:rgba(200,210,255,0.15);
  opacity:0;
  transition:opacity 0.05s;
  z-index:1;
}

/* ── Mobile: lighter effects ── */
@media (max-width: 768px) {
  .weather-cloud { width:120px; height:36px; }
  .weather-sun-orb { width:40px; height:40px; }
  .weather-sun-rays { width:60px; height:60px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WEATHER ↔ ELEMENT INTERACTIONS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Rain → drip shadow + wet gloss on cards ── */
.weather-el-rain {
  box-shadow:
    0 6px 18px rgba(100,130,180,0.15),
    inset 0 1px 0 rgba(150,180,220,0.08) !important;
  border-color:rgba(100,140,200,0.25) !important;
}
.weather-el-rain::after {
  content:''; position:absolute; bottom:-6px; left:20%; right:20%;
  height:3px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(100,140,200,0.2) 0%, transparent 70%);
  pointer-events:none;
  animation:rain-drip 1.5s ease-in-out infinite;
}
@keyframes rain-drip {
  0%,100% { opacity:0.3; transform:scaleX(0.8); }
  50%     { opacity:0.7; transform:scaleX(1.1); }
}

/* ── Storm → shudder + lightning border pulse ── */
.weather-el-storm {
  animation:storm-shudder 0.15s ease-in-out infinite alternate !important;
  box-shadow:0 0 15px rgba(200,210,255,0.08) !important;
}
@keyframes storm-shudder {
  0%   { transform:translate(0, 0); }
  100% { transform:translate(0.5px, -0.5px); }
}

/* ── Snow → frost border + cool tint ── */
.weather-el-snow {
  border-color:rgba(180,200,230,0.3) !important;
  box-shadow:
    0 0 12px rgba(180,200,230,0.1),
    inset 0 0 20px rgba(200,220,255,0.04) !important;
}
.weather-el-snow::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, rgba(220,230,255,0.15) 30%, rgba(220,230,255,0.2) 50%, rgba(220,230,255,0.15) 70%, transparent);
  border-radius:14px 14px 0 0; pointer-events:none;
}

/* ── Sunny → warm golden glow ── */
.weather-el-sunny {
  box-shadow:0 0 20px rgba(255,200,50,0.08), 0 4px 16px rgba(0,0,0,0.2) !important;
  border-color:rgba(212,160,23,0.2) !important;
}

/* ── Night → dim + subtle star reflect ── */
.weather-el-night {
  opacity:0.92;
  box-shadow:0 0 16px rgba(100,100,180,0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCARY WEATHER — sky tints for new horror weather types
   ═══════════════════════════════════════════════════════════════════════ */
.weather-overlay.weather-thunderstorm .weather-sky {
  background:linear-gradient(180deg, rgba(10,5,20,0.55) 0%, rgba(20,10,30,0.35) 30%, rgba(15,8,25,0.2) 50%, rgba(15,8,25,0.25) 70%, rgba(10,5,20,0.45) 100%);
}
.weather-overlay.weather-dark-rain .weather-sky {
  background:linear-gradient(180deg, rgba(8,8,18,0.5) 0%, rgba(15,15,25,0.3) 30%, rgba(10,10,20,0.15) 50%, rgba(10,10,20,0.2) 70%, rgba(8,8,18,0.4) 100%);
}
.weather-overlay.weather-graveyard .weather-sky {
  background:linear-gradient(180deg, rgba(5,8,5,0.6) 0%, rgba(10,15,10,0.4) 25%, rgba(8,12,8,0.2) 50%, rgba(8,12,8,0.3) 75%, rgba(5,10,5,0.55) 100%);
}
.weather-overlay.weather-halloween .weather-sky {
  background:linear-gradient(180deg, rgba(25,8,0,0.5) 0%, rgba(35,12,5,0.3) 30%, rgba(20,8,3,0.15) 50%, rgba(20,8,3,0.2) 70%, rgba(25,8,0,0.4) 100%);
}
.weather-overlay.weather-haunted .weather-sky {
  background:linear-gradient(180deg, rgba(8,0,15,0.65) 0%, rgba(12,5,20,0.4) 25%, rgba(10,3,18,0.2) 50%, rgba(10,3,18,0.3) 75%, rgba(8,0,15,0.55) 100%);
}

/* ── New layers (fog, ground, flying, popup) ── */
.weather-fog,
.weather-ground,
.weather-flying,
.weather-popup {
  position:absolute; inset:0; pointer-events:none;
}
.weather-popup { z-index:2; }

/* ── Fog patches ── */
.weather-fog-patch {
  position:absolute;
  width:700px; height:280px;
  border-radius:50%;
  filter:blur(60px);
  animation:fog-drift linear infinite;
}
@keyframes fog-drift {
  0%   { transform:translateX(0); }
  100% { transform:translateX(120vw); }
}

/* ── Ground mist — persistent haze at bottom of viewport ── */
.weather-ground-mist {
  position:absolute;
  bottom:0; left:0; right:0;
  height:35%;
  background:linear-gradient(0deg, var(--mist-color, rgba(20,20,30,0.45)) 0%, var(--mist-color, rgba(20,20,30,0.25)) 40%, transparent 100%);
  pointer-events:none;
}

/* ── Tombstones ── */
.weather-tombstone {
  position:absolute;
  bottom:0;
}

/* ── Skeletons walking ── */
.weather-skeleton {
  position:absolute;
  bottom:0;
  left:-50px;
  animation:skeleton-walk linear infinite;
  opacity:0.5;
}
.weather-skeleton svg {
  animation:skeleton-bob 1.2s ease-in-out infinite alternate;
}
@keyframes skeleton-walk {
  0%   { transform:translateX(-50px); }
  100% { transform:translateX(110vw); }
}
@keyframes skeleton-bob {
  0%   { transform:translateY(0); }
  100% { transform:translateY(-6px); }
}

/* ── Bats flying ── */
.weather-bat {
  position:absolute;
  animation:bat-fly linear infinite;
}
.weather-bat svg {
  animation:bat-flap 0.3s ease-in-out infinite alternate;
}
@keyframes bat-fly {
  0%   { left:-50px; top:50%; }
  20%  { left:20vw;  top:15%; }
  40%  { left:40vw;  top:40%; }
  60%  { left:60vw;  top:10%; }
  80%  { left:80vw;  top:35%; }
  100% { left:110vw; top:20%; }
}
@keyframes bat-flap {
  0%   { transform:scaleY(1); }
  100% { transform:scaleY(0.6); }
}

/* ── Pumpkins ── */
.weather-pumpkin {
  position:absolute;
  bottom:0;
}
.weather-pumpkin svg {
  animation:pumpkin-glow 2s ease-in-out infinite alternate;
}
@keyframes pumpkin-glow {
  0%   { filter:brightness(0.8); }
  100% { filter:brightness(1.2) drop-shadow(0 0 6px rgba(255,150,20,0.3)); }
}

/* ── Popup scary statues ── */
.weather-popup-statue {
  position:absolute;
  animation:statue-popup 3.5s ease-out forwards;
  z-index:2;
  filter:drop-shadow(0 0 20px rgba(0,0,0,0.5));
}
@keyframes statue-popup {
  0%   { opacity:0; transform:scale(0.2); }
  8%   { opacity:0.7; transform:scale(1.15); }
  14%  { opacity:0.6; transform:scale(1); }
  75%  { opacity:0.6; transform:scale(1); }
  100% { opacity:0; transform:scale(0.7); }
}

/* ── Mobile: disable heavy scary elements ── */
@media (max-width: 768px) {
  .weather-fog-patch { width:300px; height:120px; filter:blur(30px); }
  .weather-skeleton, .weather-bat, .weather-popup-statue { display:none; }
  .weather-tombstone svg { width:35px; height:50px; }
  .weather-pumpkin svg { width:30px; height:30px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ATTACK DARK MODE — extra-dark theme for homepage during enemy attack.
   Added by switchToScaryWeather(), homepage only.
   ═══════════════════════════════════════════════════════════════════════ */
body.attack-dark {
  --bg:       #06060a;
  --surface:  #0e0c10;
  --surface2: #161218;
  --surface3: #1e1820;
  --border:   #2a1a22;
  --accent:   #cc1a1a;
  --accent2:  #8b0000;
  --accent3:  #cc1a1a;
  --accent4:  #8b0000;
  --accent5:  #4a0000;
  --text:     #d0c8c8;
  --text2:    #8a7878;
  --text3:    #4a3838;
  --grid:     rgba(139,0,0,0.06);
  --glow:     0 0 30px rgba(139,0,0,0.25);
  --warn:     #cc1a1a;
  --danger:   #ff1a1a;
  cursor:crosshair;
}
/* During attack mode, lift weather overlay ABOVE page sections (z-index:5)
   so rain, fog, tombstones, etc. render on top of all page content.
   pointer-events:none keeps it click-through. Navbar (z-index:100) stays above. */
body.attack-dark .weather-overlay {
  z-index:6;
}

/* Particles: moderate on mid-tone, full on attack-dark */
.hp-particles { opacity:0.5; }
body.attack-dark .hp-particles { opacity:1; }

/* Sun orb: visible on mid-tone background */
.weather-sun-orb {
  background:radial-gradient(circle, rgba(255,200,50,0.35) 0%, rgba(255,160,30,0.12) 50%, transparent 70%);
}
.weather-sun-rays {
  background:
    radial-gradient(circle, rgba(255,200,50,0.08) 0%, transparent 60%),
    conic-gradient(from 0deg, transparent, rgba(255,200,50,0.04) 10%, transparent 20%,
      transparent 30%, rgba(255,200,50,0.03) 40%, transparent 50%,
      transparent 60%, rgba(255,200,50,0.04) 70%, transparent 80%);
}

/* Cards: visible shadow on mid-tone theme */
.hp-course-card,
.hp-feature-card {
  box-shadow:0 2px 12px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15);
}
.hp-course-card:hover,
.hp-feature-card:hover {
  box-shadow:0 8px 30px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
}
body.attack-dark .hp-course-card,
body.attack-dark .hp-feature-card {
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
}

/* Smooth attack mode transition — all elements transition their colors */
body,
body .auth-nav,
body .hp-hero,
body .hp-features,
body .hp-catalog,
body .hp-browse-cta,
body .hp-footer,
body .hp-course-card,
body .hp-feature-card,
body .hp-magic-stat,
body .hp-cat-pill,
body .hp-tag-pill,
body .hp-search,
body .hp-sort,
body .sidebar,
body .main,
body .td-tab,
body .td-card,
body .info-section,
body .about-section,
body .contact-card {
  transition: background-color 2.5s ease, color 2.5s ease, border-color 2.5s ease, box-shadow 2.5s ease;
}
body .hp-section-title,
body .hp-cta-btn,
body .hp-browse-btn,
body .hp-hero-title,
body .auth-nav-link,
body .auth-nav-btn,
body h1, body h2, body h3, body h4, body p, body span, body a {
  transition: color 2.5s ease;
}


/* ═══════════════════════════════════════════════════════════════════════
   WIZARD SPELL PROJECTILE + EXPLOSION
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Spell projectile ── */
.hp-spell-projectile {
  position:fixed; z-index:10000; pointer-events:none;
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle, #d4a017 0%, #e63946 60%, transparent 100%);
  box-shadow:0 0 12px #d4a017, 0 0 24px rgba(230,57,70,0.5);
  animation:spell-fly 0.35s ease-in forwards;
}
@keyframes spell-fly {
  0%   { transform:translate(0,0) scale(1); opacity:1; }
  70%  { opacity:1; }
  100% { transform:translate(var(--tx), var(--ty)) scale(0.6); opacity:0.8; }
}

/* ── Spell explosion ring ── */
.hp-spell-explosion {
  position:fixed; z-index:10000; pointer-events:none;
  width:8px; height:8px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:transparent;
  box-shadow:0 0 0 0 rgba(212,160,23,0.6);
  animation:spell-explode 0.5s ease-out forwards;
}
@keyframes spell-explode {
  0%   { box-shadow:0 0 0 0 rgba(212,160,23,0.6), 0 0 20px rgba(230,57,70,0.4); }
  50%  { box-shadow:0 0 0 30px rgba(212,160,23,0), 0 0 40px rgba(230,57,70,0.1); }
  100% { box-shadow:0 0 0 50px rgba(212,160,23,0), 0 0 0 transparent; opacity:0; }
}

/* ── Spell scatter sparks ── */
.hp-spell-spark {
  position:fixed; z-index:10000; pointer-events:none;
  width:5px; height:5px; border-radius:50%;
  transform:translate(-50%,-50%);
  animation:spell-scatter ease-out forwards;
}
@keyframes spell-scatter {
  0%   { transform:translate(-50%,-50%) scale(1); opacity:1; }
  100% { transform:translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0); opacity:0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ENEMY MINI-GAME
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Enemy creature ── */
.hp-enemy {
  position:absolute; z-index:9997; width:40px; height:40px;
  pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(139,0,0,0.5)) drop-shadow(0 0 20px rgba(255,26,26,0.2));
  animation:enemy-pulse 1.5s ease-in-out infinite alternate, enemy-float 2s ease-in-out infinite;
}
.hp-enemy-svg { width:100%; height:100%; }

@keyframes enemy-pulse {
  0%   { opacity:0.8; }
  100% { opacity:1; }
}
@keyframes enemy-float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-5px); }
}

/* ── Enemy dying ── */
.hp-enemy-dying {
  pointer-events:none !important;
  animation:enemy-die 0.35s ease-out forwards !important;
}
@keyframes enemy-die {
  0%   { transform:scale(1); opacity:1; filter:brightness(3); }
  50%  { transform:scale(1.5); opacity:0.6; filter:brightness(5) hue-rotate(40deg); }
  100% { transform:scale(0); opacity:0; filter:brightness(0); }
}

/* ── Enemy death explosion ── */
.hp-enemy-death {
  position:absolute; z-index:10001; pointer-events:none;
  width:10px; height:10px; border-radius:50%;
  transform:translate(-50%,-50%);
  animation:enemy-death-boom 0.6s ease-out forwards;
}
@keyframes enemy-death-boom {
  0%   { box-shadow:0 0 0 0 rgba(255,26,26,0.8), 0 0 30px rgba(139,0,0,0.6); }
  40%  { box-shadow:0 0 0 25px rgba(255,26,26,0), 0 0 50px rgba(139,0,0,0.2); }
  100% { box-shadow:0 0 0 45px rgba(255,26,26,0), 0 0 0 transparent; opacity:0; }
}

/* ── Enemy warning banner ── */
.hp-enemy-warning {
  position:fixed; top:0; left:0; right:0; z-index:10002;
  display:flex; justify-content:center; align-items:center;
  padding:16px 24px;
  background:linear-gradient(180deg, rgba(139,0,0,0.9) 0%, rgba(100,0,20,0.7) 70%, transparent 100%);
  animation:warn-slide 3.5s ease-in-out forwards;
}
.hp-enemy-warn-text {
  font-family:'Outfit',sans-serif; font-size:1.1rem; font-weight:700;
  color:#ff4040; text-transform:uppercase; letter-spacing:3px;
  text-shadow:0 0 20px rgba(255,26,26,0.6), 0 0 40px rgba(139,0,0,0.4);
  animation:warn-flicker 0.15s ease-in-out infinite alternate;
}
@keyframes warn-slide {
  0%   { opacity:0; transform:translateY(-100%); }
  10%  { opacity:1; transform:translateY(0); }
  80%  { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-100%); }
}
@keyframes warn-flicker {
  0%   { opacity:0.7; }
  100% { opacity:1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ATTACK INSTRUCTIONS PANEL — explains gameplay to the user
   ═══════════════════════════════════════════════════════════════════════ */
.hp-instructions {
  position:fixed; z-index:10003;
  top:50%; left:50%; transform:translate(-50%,-50%);
  max-width:420px; width:90%;
  padding:32px 28px; border-radius:16px;
  background:rgba(8,5,15,0.95);
  border:1.5px solid rgba(139,0,0,0.5);
  box-shadow:0 0 50px rgba(139,0,0,0.25), 0 0 100px rgba(139,0,0,0.1), inset 0 0 30px rgba(139,0,0,0.05);
  text-align:center;
  font-family:'Outfit',sans-serif;
  color:#d0c8c8;
  animation:instructions-appear 0.5s ease-out;
  transition:opacity 0.5s ease;
}
.hp-instructions.fadeout { opacity:0; pointer-events:none; }

.hp-instructions-title {
  font-size:1.3rem; font-weight:800; color:#ff4040;
  text-transform:uppercase; letter-spacing:2px;
  margin-bottom:16px;
  text-shadow:0 0 15px rgba(255,26,26,0.4);
}
.hp-instructions-text {
  font-size:0.92rem; line-height:1.6;
  color:#c8c0c0; margin-bottom:14px;
}
.hp-instructions-text strong { color:#ff6b6b; }
.hp-instructions-warn {
  font-size:0.82rem; line-height:1.5;
  color:#8a6060; margin-bottom:20px;
  padding:10px 14px; border-radius:8px;
  background:rgba(139,0,0,0.12);
  border:1px solid rgba(139,0,0,0.2);
}
.hp-instructions-warn strong { color:#cc4444; }
.hp-instructions-btn {
  display:inline-block; padding:10px 28px;
  background:linear-gradient(135deg, #8b0000, #cc1a1a);
  color:#fff; border:none; border-radius:10px;
  font-family:'Outfit',sans-serif; font-size:0.9rem; font-weight:700;
  letter-spacing:1px; cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:0 4px 16px rgba(139,0,0,0.3);
}
.hp-instructions-btn:hover {
  transform:scale(1.05);
  box-shadow:0 6px 24px rgba(139,0,0,0.5);
}
@keyframes instructions-appear {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.8); filter:blur(8px); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   PORTAL — Dimensional rift
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Portal container ── */
.hp-portal {
  position:absolute; z-index:9998; width:150px; height:200px;
  pointer-events:none;
  filter:drop-shadow(0 0 30px rgba(139,0,0,0.6)) drop-shadow(0 0 60px rgba(204,26,26,0.3));
  animation:portal-pulse 3s ease-in-out infinite;
}
.hp-portal-svg { width:100%; height:100%; }

@keyframes portal-pulse {
  0%,100% { filter:drop-shadow(0 0 30px rgba(139,0,0,0.6)) drop-shadow(0 0 60px rgba(204,26,26,0.3)); }
  50%     { filter:drop-shadow(0 0 45px rgba(139,0,0,0.8)) drop-shadow(0 0 80px rgba(204,26,26,0.4)); }
}

/* ── Portal opening animation ── */
.hp-portal-opening {
  animation:portal-open 1.2s ease-out forwards !important;
}
@keyframes portal-open {
  0%   { transform:scale(0) rotate(180deg); opacity:0; filter:brightness(5) blur(10px); }
  50%  { transform:scale(1.15) rotate(-10deg); opacity:1; filter:brightness(2) blur(2px); }
  80%  { transform:scale(0.95) rotate(3deg); filter:brightness(1.2) blur(0); }
  100% { transform:scale(1) rotate(0deg); filter:drop-shadow(0 0 30px rgba(139,0,0,0.6)) drop-shadow(0 0 60px rgba(204,26,26,0.3)); }
}

/* ── Portal HP bar ── */
.hp-portal-hpbar {
  position:absolute; bottom:-24px; left:50%; transform:translateX(-50%);
  width:120px; height:10px; border-radius:5px;
  background:rgba(10,0,0,0.7); border:1px solid rgba(139,0,0,0.5);
  overflow:hidden;
}
.hp-portal-hpbar-fill {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg, #8b0000, #cc1a1a, #ff1a1a);
  transition:width 0.3s ease;
  box-shadow:0 0 8px rgba(204,26,26,0.5);
}
.hp-portal-hpbar-text {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:7px; font-weight:700;
  color:#fff; text-shadow:0 0 4px rgba(0,0,0,0.8);
}

/* ── Portal hit flash ── */
.hp-portal-hit {
  animation:portal-hit-flash 0.3s ease-out !important;
}
@keyframes portal-hit-flash {
  0%   { filter:brightness(3) drop-shadow(0 0 50px rgba(255,255,255,0.5)); transform:scale(1.05); }
  50%  { filter:brightness(1.5) drop-shadow(0 0 40px rgba(204,26,26,0.7)); transform:scale(0.97); }
  100% { filter:drop-shadow(0 0 30px rgba(139,0,0,0.6)); transform:scale(1); }
}

/* ── Portal collapse (destroyed) ── */
.hp-portal-collapse {
  animation:portal-collapse 1.2s ease-in forwards !important;
}
@keyframes portal-collapse {
  0%   { transform:scale(1); opacity:1; filter:brightness(1); }
  20%  { transform:scale(1.3); filter:brightness(4) saturate(3); }
  40%  { transform:scale(1.5) rotate(15deg); filter:brightness(6) hue-rotate(30deg); opacity:0.8; }
  60%  { transform:scale(0.5) rotate(-20deg); filter:brightness(2); opacity:0.5; }
  80%  { transform:scale(0.2) rotate(60deg); filter:brightness(0.5) blur(3px); opacity:0.2; }
  100% { transform:scale(0) rotate(180deg); filter:brightness(0) blur(10px); opacity:0; }
}

/* ── Portal projectile (fires at wizard) ── */
.hp-portal-projectile {
  position:fixed; z-index:10000; pointer-events:none;
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle, #ff1a1a 0%, #8b0000 60%, transparent 100%);
  box-shadow:0 0 16px #ff1a1a, 0 0 32px rgba(139,0,0,0.6);
  animation:portal-proj-fly 1.2s ease-in forwards;
}
@keyframes portal-proj-fly {
  0%   { transform:translate(0,0) scale(1.5); opacity:0.5; }
  20%  { opacity:1; transform:translate(calc(var(--tx) * 0.2), calc(var(--ty) * 0.2)) scale(1); }
  100% { transform:translate(var(--tx), var(--ty)) scale(0.8); opacity:0.9; }
}

/* ── Spell impact ring (at click destination) ── */
.hp-spell-impact {
  position:fixed; z-index:10000; pointer-events:none;
  width:8px; height:8px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:transparent;
  box-shadow:0 0 0 0 rgba(212,160,23,0.5);
  animation:spell-impact 0.4s ease-out forwards;
}
@keyframes spell-impact {
  0%   { box-shadow:0 0 0 0 rgba(212,160,23,0.5), 0 0 15px rgba(230,57,70,0.3); }
  40%  { box-shadow:0 0 0 20px rgba(212,160,23,0), 0 0 30px rgba(230,57,70,0.1); }
  100% { box-shadow:0 0 0 35px rgba(212,160,23,0), 0 0 0 transparent; opacity:0; }
}

/* ── Victory message ── */
.hp-victory-message {
  position:fixed; z-index:10005;
  top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:40px 56px; border-radius:20px;
  background:rgba(5,15,5,0.92);
  border:2px solid rgba(212,160,23,0.5);
  box-shadow:0 0 60px rgba(212,160,23,0.2), 0 0 120px rgba(0,150,50,0.1), inset 0 0 40px rgba(212,160,23,0.05);
  animation:victory-msg-appear 0.6s ease-out forwards;
  text-align:center;
}
@keyframes victory-msg-appear {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.5); filter:blur(10px); }
  60%  { opacity:1; transform:translate(-50%,-50%) scale(1.05); filter:blur(0); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.hp-victory-fadeout {
  animation:victory-fadeout 0.8s ease-in forwards !important;
}
@keyframes victory-fadeout {
  0%   { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(0.8); filter:blur(5px); }
}
.hp-victory-icon {
  animation:victory-icon-glow 1.5s ease-in-out infinite;
}
@keyframes victory-icon-glow {
  0%,100% { filter:drop-shadow(0 0 10px rgba(212,160,23,0.4)); }
  50%     { filter:drop-shadow(0 0 25px rgba(212,160,23,0.8)); }
}
.hp-victory-title {
  font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:800;
  color:#d4a017; text-transform:uppercase; letter-spacing:3px;
  text-shadow:0 0 20px rgba(212,160,23,0.5);
}
.hp-victory-sub {
  font-family:'Inter',sans-serif; font-size:0.9rem;
  color:#a8b8a0; max-width:300px; line-height:1.5;
}

/* ── Wizard death ── */
.hp-wizard-death {
  animation:wizard-death-anim 1.2s ease-out forwards !important;
  pointer-events:none !important;
}
@keyframes wizard-death-anim {
  0%   { transform:scale(1); opacity:1; filter:brightness(1); }
  20%  { transform:scale(1.3); filter:brightness(4) saturate(3); }
  40%  { transform:scale(1.5) rotate(15deg); filter:brightness(6) hue-rotate(30deg); opacity:0.8; }
  60%  { transform:scale(0.8) rotate(-10deg); filter:brightness(2); opacity:0.5; }
  100% { transform:scale(0) rotate(360deg); filter:brightness(0); opacity:0; }
}

/* ── Page destruction ── */
.hp-page-destroyed {
  animation:page-shake 0.5s ease-in-out 3;
}
@keyframes page-shake {
  0%,100% { transform:translate(0,0); }
  10%     { transform:translate(-3px, 2px); }
  20%     { transform:translate(3px, -2px); }
  30%     { transform:translate(-2px, -3px); }
  40%     { transform:translate(2px, 3px); }
  50%     { transform:translate(-3px, -1px); }
  60%     { transform:translate(3px, 1px); }
  70%     { transform:translate(-1px, 3px); }
  80%     { transform:translate(1px, -3px); }
  90%     { transform:translate(-2px, 2px); }
}

/* ── Element glitch destruction ── */
.hp-glitch-destroy {
  animation:glitch-destroy 1.5s ease-in forwards !important;
  pointer-events:none !important;
}
@keyframes glitch-destroy {
  0%   { transform:translate(0,0) skew(0); filter:none; opacity:1; }
  15%  { transform:translate(-3px, 2px) skew(2deg); filter:hue-rotate(90deg) brightness(1.5); }
  30%  { transform:translate(4px, -1px) skew(-3deg); filter:hue-rotate(-60deg) saturate(2); opacity:0.9; }
  45%  { transform:translate(-5px, 3px) skew(4deg, 1deg); filter:hue-rotate(180deg) brightness(2); opacity:0.7; }
  60%  { transform:translate(6px, -4px) skew(-5deg, -2deg); filter:hue-rotate(270deg) blur(1px); opacity:0.5; }
  75%  { transform:translate(-8px, 5px) skew(8deg, 3deg) scaleX(0.95); filter:blur(2px) brightness(0.5); opacity:0.3; }
  100% { transform:translate(0, 30px) skew(0) scaleY(0.01); filter:blur(6px) brightness(0); opacity:0; }
}

/* ── Crack overlay ── */
.hp-page-crack-overlay {
  position:fixed; inset:0; z-index:10003; pointer-events:none;
  animation:crack-appear 0.3s ease-out forwards;
}
@keyframes crack-appear {
  0%   { opacity:0; filter:brightness(3); }
  50%  { opacity:1; filter:brightness(2); }
  100% { opacity:1; filter:brightness(1); }
}

/* ── Static noise overlay ── */
.hp-static-noise {
  position:fixed; inset:0; z-index:10002; pointer-events:none;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(230,57,70,0.03) 2px,
      rgba(230,57,70,0.03) 4px
    );
  animation:static-flicker 0.1s step-end infinite;
  opacity:0.6;
}
@keyframes static-flicker {
  0%   { background-position:0 0; opacity:0.4; }
  25%  { background-position:1px 1px; opacity:0.6; }
  50%  { background-position:-1px 0; opacity:0.5; }
  75%  { background-position:0 -1px; opacity:0.7; }
  100% { background-position:1px -1px; opacity:0.4; }
}

/* ── Death message ── */
.hp-death-message {
  position:fixed; z-index:10005;
  top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:48px 64px; border-radius:20px;
  background:rgba(10,5,15,0.95);
  border:2px solid rgba(230,57,70,0.4);
  box-shadow:0 0 60px rgba(139,0,0,0.3), 0 0 120px rgba(230,57,70,0.1), inset 0 0 40px rgba(139,0,0,0.1);
  animation:death-msg-appear 0.6s ease-out forwards;
  text-align:center;
}
@keyframes death-msg-appear {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.5); filter:blur(10px); }
  60%  { opacity:1; transform:translate(-50%,-50%) scale(1.05); filter:blur(0); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.hp-death-skull {
  animation:death-skull-pulse 2s ease-in-out infinite;
}
@keyframes death-skull-pulse {
  0%,100% { filter:drop-shadow(0 0 10px rgba(230,57,70,0.4)); }
  50%     { filter:drop-shadow(0 0 25px rgba(230,57,70,0.7)); }
}
.hp-death-title {
  font-family:'Outfit',sans-serif; font-size:1.6rem; font-weight:800;
  color:#e63946; text-transform:uppercase; letter-spacing:4px;
  text-shadow:0 0 20px rgba(230,57,70,0.5);
}
.hp-death-sub {
  font-family:'Inter',sans-serif; font-size:0.95rem;
  color:#b0b0c8; max-width:320px; line-height:1.5;
}
.hp-death-reload {
  margin-top:12px; padding:12px 32px; border-radius:10px;
  background:linear-gradient(135deg, #e63946, #c0392b);
  color:#fff; font-family:'Outfit',sans-serif; font-size:0.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:2px;
  border:none; cursor:pointer;
  box-shadow:0 0 20px rgba(230,57,70,0.3);
  transition:all 0.3s ease;
}
.hp-death-reload:hover {
  background:linear-gradient(135deg, #ff4040, #e63946);
  box-shadow:0 0 30px rgba(230,57,70,0.5);
  transform:translateY(-2px);
}

/* ── Mobile: hide enemy game + portal ── */
@media (max-width: 768px) {
  .hp-enemy, .hp-enemy-warning, .hp-death-message, .hp-portal, .hp-victory-message, .hp-instructions { display:none; }
}
@media (hover: none) {
  .hp-enemy, .hp-enemy-warning, .hp-death-message, .hp-portal, .hp-victory-message, .hp-instructions { display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   TEACHER COURSES — Teacher Dashboard My Courses Tab
   ══════════════════════════════════════════════════════════════════════ */

.tc-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:28px; margin-bottom:24px;
}
.tc-section-title {
  font-family:'Outfit',sans-serif; font-weight:600; font-size:17px;
  margin-bottom:6px;
}
.tc-section-sub {
  color:var(--text3); font-size:13px; margin-bottom:22px; line-height:1.5;
}

@media (max-width:640px) {
  .tc-section { padding:18px; }
}


/* ══════════════════════════════════════════
   COMING SOON — Session & Course badges
══════════════════════════════════════════ */
.sd-status-badge.coming-soon { color:var(--text3); background:rgba(255,255,255,0.05); border:1px solid var(--border); }
.sd-session-card.coming-soon { opacity:0.6; }
.cp-coming-soon-badge {
  display:inline-block; font-size:11px; color:var(--text3);
  background:rgba(255,255,255,0.05); border:1px solid var(--border);
  border-radius:6px; padding:2px 8px; margin-top:4px;
}
.cp-coming-soon-banner {
  text-align:center; padding:16px 24px;
  background:rgba(0,212,255,0.05); border:1px solid rgba(0,212,255,0.2);
  border-radius:12px; margin-bottom:24px; color:var(--text2); font-size:14px;
}
.cp-pre-enroll-btn {
  background:var(--surface2) !important; color:var(--accent) !important;
  border:1px solid var(--accent) !important;
}

/* ── Settlement / Platform Fees styles ── */
.settlement-summary { display:flex; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.settlement-summary-card {
  flex:1; min-width:180px; padding:16px 20px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border);
}
.settlement-summary-card .ssc-label { font-size:12px; color:var(--text3); margin-bottom:4px; }
.settlement-summary-card .ssc-value { font-size:22px; font-weight:700; color:var(--text); }
.settlement-summary-card.owes .ssc-value { color:var(--warn); }
.settlement-summary-card.owed .ssc-value { color:var(--accent3); }
.settlement-summary-card.zero .ssc-value { color:var(--text3); }

.settlement-card {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px 20px; margin-bottom:12px;
}
.settlement-card-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px; flex-wrap:wrap; gap:8px;
}
.settlement-card-name { font-size:15px; font-weight:700; color:var(--text); }
.settlement-card-balances { display:flex; gap:16px; flex-wrap:wrap; }
.settlement-card-balances span { font-size:13px; }

.settlement-pay-form {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
}
.settlement-pay-form input[type="number"],
.settlement-pay-form input[type="text"] {
  padding:6px 10px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:13px; width:100px;
}
.settlement-pay-form select {
  padding:6px 10px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:13px;
}
.settlement-pay-form .nda-btn { font-size:12px; padding:6px 14px; }

.settlement-table { margin-top:16px; }
.settlement-table-row {
  display:grid; grid-template-columns:130px 1fr 90px 80px;
  gap:8px; padding:8px 0; border-bottom:1px solid var(--border);
  font-size:12px; color:var(--text2); align-items:center;
}
.settlement-table-row.header { color:var(--text3); font-weight:600; border-bottom:2px solid var(--border); }
.settlement-badge {
  display:inline-block; font-size:11px; padding:2px 8px; border-radius:6px; font-weight:600;
}
.settlement-badge.owed { color:var(--warn); background:rgba(255,215,0,0.1); }
.settlement-badge.paid { color:var(--accent3); background:rgba(0,255,170,0.1); }

/* ══════════════════════════════════════════
   UPLOAD PROGRESS BAR
   ══════════════════════════════════════════ */
.nda-upload-progress {
  margin-top:8px; padding:8px 12px; border-radius:10px;
  background:var(--surface2, rgba(255,255,255,0.04)); border:1px solid var(--border);
  display:flex; align-items:center; gap:10px; animation:nda-up-fadein .25s ease;
}
@keyframes nda-up-fadein { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.nda-upload-progress__label {
  font-size:12px; color:var(--accent); white-space:nowrap; min-width:80px;
}
.nda-upload-progress__track {
  flex:1; height:6px; border-radius:3px; background:var(--border); overflow:hidden;
}
.nda-upload-progress__fill {
  height:100%; width:0; border-radius:3px; transition:width .15s ease;
  background:linear-gradient(90deg, var(--accent), var(--accent3));
}
.nda-upload-progress__pct {
  font-size:11px; color:var(--text3); font-weight:600; min-width:32px; text-align:right;
}
.nda-upload-progress--done .nda-upload-progress__label { color:var(--accent3); }
.nda-upload-progress--done .nda-upload-progress__fill { background:var(--accent3); }
.nda-upload-progress--done { animation:nda-up-fadeout .3s ease 0.9s forwards; }
.nda-upload-progress--error .nda-upload-progress__label { color:var(--danger, #ff4757); }
.nda-upload-progress--error .nda-upload-progress__fill { background:var(--danger, #ff4757); }
@keyframes nda-up-fadeout { to { opacity:0; transform:translateY(-4px); } }

/* ══════════════════════════════════════════
   STUDENT/TEACHER PACKAGE CARDS
   ══════════════════════════════════════════ */
.sd-packages-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
.sd-pkg {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:20px; transition:border-color .2s, box-shadow .2s;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.sd-pkg::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--pkg-color, var(--accent)); border-radius:14px 14px 0 0;
}
.sd-pkg:hover { border-color:var(--accent); box-shadow:0 4px 20px rgba(0,212,255,0.08); }
.sd-pkg__header { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.sd-pkg__icon {
  font-size:28px; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.04); border-radius:12px; flex-shrink:0;
}
.sd-pkg__title { font-size:15px; font-weight:700; color:var(--text); line-height:1.3; }
.sd-pkg__meta { font-size:11px; color:var(--text3); margin-top:3px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sd-pkg__meta-tag {
  font-size:10px; padding:2px 8px; border-radius:20px;
  background:rgba(0,212,255,0.08); color:var(--accent); font-weight:600;
}
.sd-pkg__meta-tag.free { background:rgba(0,255,170,0.1); color:var(--accent3); }
.sd-pkg__desc {
  font-size:12px; color:var(--text3); line-height:1.5; margin-bottom:14px; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sd-pkg__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sd-pkg__stats { display:flex; gap:12px; font-size:11px; color:var(--text3); }
.sd-pkg__stats svg { vertical-align:-2px; margin-right:3px; opacity:0.6; }
.sd-pkg__btn {
  font-size:12px; font-weight:600; color:var(--accent); background:rgba(0,212,255,0.08);
  border:none; padding:6px 14px; border-radius:8px; cursor:pointer; transition:background .2s;
  text-decoration:none; display:inline-flex; align-items:center; gap:5px;
}
.sd-pkg__btn:hover { background:rgba(0,212,255,0.16); }
@media (max-width:600px) { .sd-packages-grid { grid-template-columns:1fr; } }

/* Teacher package sales table */
.tp-sales-row {
  display:grid; grid-template-columns:1fr 100px 80px 90px;
  gap:8px; padding:8px 12px; border-bottom:1px solid var(--border);
  font-size:12px; color:var(--text2); align-items:center;
}
.tp-sales-row.header { font-weight:600; color:var(--text3); border-bottom:2px solid var(--border); }
@media (max-width:600px) {
  .tp-sales-row { grid-template-columns:1fr 70px 60px; }
  .tp-sales-row > *:nth-child(4) { display:none; }
}

/* ══════════════════════════════════════════
   COOKIE CONSENT BANNER
   ══════════════════════════════════════════ */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:99999;
  background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -4px 24px rgba(0,0,0,0.4);
  padding:0; transform:translateY(100%); opacity:0;
  transition:transform 0.4s ease, opacity 0.4s ease;
}
.cookie-banner.visible { transform:translateY(0); opacity:1; }
.cookie-banner.closing { transform:translateY(100%); opacity:0; }
.cookie-banner-inner {
  max-width:1100px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; gap:20px;
  flex-wrap:wrap;
}
.cookie-banner-text {
  flex:1; display:flex; align-items:flex-start; gap:12px; min-width:280px;
}
.cookie-banner-icon { font-size:28px; flex-shrink:0; margin-top:2px; }
.cookie-banner-title {
  font-size:14px; font-weight:700; color:var(--text);
  margin:0 0 4px 0;
}
.cookie-banner-desc {
  font-size:12px; color:var(--text2); line-height:1.5;
  margin:0;
}
.cookie-banner-actions {
  display:flex; gap:10px; flex-shrink:0;
}
.cookie-btn {
  padding:10px 20px; border:none; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:all 0.2s ease; font-family:inherit;
}
.cookie-btn-accept {
  background:var(--accent); color:#000;
}
.cookie-btn-accept:hover { filter:brightness(1.15); transform:translateY(-1px); }
.cookie-btn-decline {
  background:transparent; color:var(--text2);
  border:1px solid var(--border);
}
.cookie-btn-decline:hover { border-color:var(--text2); color:var(--text); }
.cookie-link { color:#5dade2; text-decoration:underline; }
.cookie-link:hover { color:var(--text); }
@media (max-width:600px) {
  .cookie-banner-inner { flex-direction:column; padding:16px; }
  .cookie-banner-actions { width:100%; }
  .cookie-btn { flex:1; padding:12px 16px; }
}

/* ══════════════════════════════════════════
   CROSS-BROWSER FALLBACKS
══════════════════════════════════════════ */
@supports not (gap: 1px) {
  .auth-nav-inner > * + * { margin-left:12px; }
  .auth-nav-links > * + * { margin-left:8px; }
}
@supports not (display: grid) {
  .hp-features-grid, .sd-packages-grid {
    display:-webkit-flex; display:flex;
    -webkit-flex-wrap:wrap; flex-wrap:wrap;
  }
  .hp-features-grid > *, .sd-packages-grid > * {
    -webkit-flex:0 0 calc(33.33% - 16px); flex:0 0 calc(33.33% - 16px); margin:8px;
  }
}
input, select, textarea, button { -webkit-appearance:none; -moz-appearance:none; }

/* ══════════════════════════════════════════
   NOTIFICATION BELL
══════════════════════════════════════════ */
.notif-bell-wrap { position:relative; }
.notif-bell-btn {
  background:none; border:none; color:var(--text2);
  cursor:pointer; padding:6px; position:relative; transition:color 0.2s;
}
.notif-bell-btn:hover { color:var(--text); }
.notif-bell-badge {
  position:absolute; top:0; right:-2px;
  background:var(--accent); color:#fff;
  font-size:9px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.notif-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  width:340px; max-height:420px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:0 8px 32px rgba(0,0,0,0.4);
  z-index:1000; overflow:hidden;
}
.notif-dropdown-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--border);
  font-size:13px; font-weight:600; color:var(--text);
}
.notif-mark-all {
  background:none; border:none; color:var(--accent); font-size:11px; cursor:pointer;
}
.notif-mark-all:hover { text-decoration:underline; }
.notif-dropdown-list { overflow-y:auto; max-height:360px; }
.notif-item {
  padding:10px 16px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background 0.2s;
}
.notif-item:hover { background:var(--surface2); }
.notif-item.unread { border-left:3px solid var(--accent); }
.notif-item-title { font-size:13px; font-weight:600; color:var(--text); }
.notif-item-msg { font-size:11px; color:var(--text2); margin-top:2px; }
.notif-item-time { font-size:10px; color:var(--text3); margin-top:4px; }
.notif-empty { padding:24px; text-align:center; font-size:13px; color:var(--text3); }
.notif-toast {
  position:fixed; top:20px; right:20px; z-index:10000;
  background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius-md);
  padding:12px 20px; box-shadow:0 8px 24px rgba(0,0,0,0.3);
  animation:notifSlideIn 0.3s ease;
}
.notif-toast-title { font-size:13px; font-weight:600; color:var(--text); }
.notif-toast-msg { font-size:11px; color:var(--text2); margin-top:2px; }
@keyframes notifSlideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@media(max-width:480px) {
  .notif-dropdown { width:calc(100vw - 24px); right:-60px; }
}