/* ── Reset & Variables ── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* --- Production-Grade Responsive Design System Spacing & Typography --- */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 0.75rem);
  --space-md: clamp(0.75rem, 1.5vw, 1.25rem);
  --space-lg: clamp(1.25rem, 2.5vw, 2rem);
  --space-xl: clamp(2rem, 4vw, 3.5rem);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --font-xs: clamp(0.7rem, 0.75rem + 0.1vw, 0.8rem);
  --font-sm: clamp(0.8rem, 0.85rem + 0.15vw, 0.95rem);
  --font-md: clamp(0.95rem, 1rem + 0.2vw, 1.15rem);
  --font-lg: clamp(1.15rem, 1.25rem + 0.3vw, 1.5rem);
  --font-xl: clamp(1.5rem, 1.75rem + 0.5vw, 2.25rem);
  --font-xxl: clamp(2.25rem, 2.5rem + 0.8vw, 3.5rem);

  --max-w-container: 1400px;
  --max-w-content: 1100px;
  --header-h: 70px;
  --sd-header-h: 70px;

  /* New Rebranded Color Palette */
  --bg-primary: #000000;
  --bg-secondary: #050505;
  --bg-tertiary: #050505;
  --surface: #050505;
  --surface-elevated: #070707;
  --surface-hover: #090909;
  --carbon-grey: #2A2A2A;
  --dark-grey: #3A3A3A;
  --accent-orange: #D97706;
  --accent-orange-light: #F59E0B;
  --accent-orange-dark: #C2410C;
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --border-new: rgba(255, 255, 255, 0.05);
  --border-hover-new: rgba(255, 255, 255, 0.12);
  --glow-orange: rgba(var(--accent-rgb), 0.022);

  --bg: var(--bg-primary);
  --surface: var(--bg-tertiary);
  --surface2: var(--surface-elevated);
  --surface3: var(--surface-hover);
  --accent: var(--accent-orange);
  --accent2: var(--accent-orange-light);
  --accent-rgb: 245, 158, 11;
  --accent-glow: var(--glow-orange);
  --border: var(--border-new);
  --text: var(--text-primary);
  --text2: var(--text-secondary);
  --text3: var(--text-muted);
  --green:#10B981;--red:#EF4444;--yellow:#F59E0B;
  --blue: var(--accent-orange);
  --orange: var(--accent-orange);
  --radius:24px;--radius-sm:12px;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25);
  --font:'Inter',system-ui,sans-serif;
  --hud-answered: var(--accent-orange);--hud-rank:#FFD166;
}
@keyframes blink {
  0%,100% { opacity:1; }
  50% { opacity:0; }
}
.light{
  /* ── Warm Academic Luxe — Core Surfaces ── */
  --bg:#F8F5EF;
  --surface:rgba(255, 255, 255, 0.95);
  --surface2:#F3EDE2;
  --surface3:#EAD9C8;

  /* ── Text Hierarchy ── */
  --text:#1A1A1A;
  --text2:#444444;
  --text3:#666666;

  /* ── Structure ── */
  --border:rgba(11, 45, 99, 0.1);
  --shadow:0 8px 30px rgba(11, 45, 99, 0.04);

  /* ── Brand Accent — Navy & Gold ── */
  --accent:#0B2D63;
  --accent2:#D4A017;
  --accent-rgb:11, 45, 99;
  --accent-glow:rgba(var(--accent-rgb), 0.037);

  /* ── Status ── */
  --green:#2e7d32;
  --red:#d32f2f;
  --yellow:#B45309;
  --blue:#0288d1;
  --hud-answered:#0288d1;--hud-rank:#B45309;
  --orange:#f57c00;

  /* ── Sidebar (Navy & Gold) ── */
  --sidebar-bg:#0B2D63;
  --sidebar-text:rgba(248, 245, 239, 0.85);
  --sidebar-hover:rgba(212, 160, 23, 0.15);
  --sidebar-active:rgba(212, 160, 23, 0.25);
  --sidebar-text-active:#ffffff;
}

body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh}

/* ── Layout ── */
.app{display:flex;flex-direction:column;min-height:100vh}
.main-content{flex:1;padding:0}
.page{padding:24px;max-width:1400px;margin:0 auto}
.page-sm{padding:24px;max-width:700px;margin:0 auto}

/* ── Nav ── */
.nav{background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;height:60px;gap:4px;
  position:sticky;top:0;z-index:100;flex-wrap:wrap}
.nav-brand{font-weight:700;font-size:1.1rem;color:var(--accent);margin-right:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-btn{padding:6px 14px;border-radius:6px;border:none;background:transparent;
  color:var(--text2);cursor:pointer;font-size:0.85rem;transition:all 0.2s}
.nav-btn:hover{background:var(--surface2);color:var(--text)}
.nav-btn.active{background:var(--accent);color:#fff}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.session-badge{background:var(--surface2);border:1px solid var(--border);
  padding:4px 12px;border-radius:20px;font-size:0.8rem;font-family:monospace;
  color:var(--accent);font-weight:700;letter-spacing:2px}

/* ── Cards ── */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)), var(--surface);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25);
  transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.16); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.25); }
.card-sm{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:16px;
  transition:all 0.3s ease;
}
.card-sm:hover{
  border-color:var(--accent2);
}
.card-title{font-weight:700;font-size:1.05rem;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--text)}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ── Buttons ── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:var(--radius-sm);
  border:none;
  cursor:pointer;
  font-size:0.875rem;
  font-weight:600;
  transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family:inherit;
}
.btn:hover{
  transform:translateY(-1px) scale(1.02);
}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
  box-shadow:0 4px 14px rgba(212, 160, 23, 0.2);
}
.btn-primary:hover{
  box-shadow:0 6px 20px rgba(212, 160, 23, 0.4);
}
.btn-success{background:var(--green);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-warn{background:var(--yellow);color:#000}
.btn-ghost{
  background:transparent;
  color:var(--text2);
  border:1px solid var(--border);
}
.btn-ghost:hover{
  background:var(--surface2);
  color:var(--text);
  border-color:var(--accent2);
}
.btn-sm{padding:6px 12px;font-size:0.8rem}
.btn-xs{padding:4px 8px;font-size:0.75rem;border-radius:6px;line-height:1.4}
@keyframes handAppear{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes handPulse{0%,100%{text-shadow:0 0 4px rgba(251,191,36,0.4)}50%{text-shadow:0 0 12px rgba(251,191,36,0.9)}}
.hand-pulse{animation:handPulse 1.4s ease-in-out infinite;display:inline-block;}

.btn-lg{padding:14px 28px;font-size:1rem}
.btn:disabled{opacity:0.5;cursor:not-allowed}

/* ── Forms ── */
.form-group{margin-bottom:14px}
label{display:block;font-size:0.85rem;color:var(--text2);margin-bottom:4px}
input,select,textarea{width:100%;padding:9px 13px;background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);
  font-size:0.9rem;font-family:inherit;outline:none;transition:border 0.2s}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:80px}
select option{background:var(--surface2)}
.input-row{display:flex;gap:8px}
.input-row input{flex:1}

/* ── Badges & Chips ── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;
  font-size:0.75rem;font-weight:600}
.badge-green{background:rgba(34,197,94,0.15);color:var(--green)}
.badge-red{background:rgba(239,68,68,0.15);color:var(--red)}
.badge-yellow{background:rgba(234,179,8,0.15);color:var(--yellow)}
.badge-blue{background:rgba(var(--accent-rgb), 0.15);color:var(--blue)}
.badge-purple{background:rgba(var(--accent-rgb), 0.15);color:var(--accent)}

/* ── Progress ── */
.progress-bar{background:var(--surface2);border-radius:20px;height:8px;overflow:hidden}
.progress-fill{height:100%;border-radius:20px;transition:width 0.6s ease}
.progress-fill.green{background:var(--green)}
.progress-fill.yellow{background:var(--yellow)}
.progress-fill.red{background:var(--red)}
.progress-fill.accent{background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* ── Stat Cards ── */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;text-align:center}
.stat-value{font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{font-size:0.8rem;color:var(--text2);margin-top:4px}

/* ── Landing Page ── */
.landing{display:block;overflow-x:hidden;background:var(--bg)}

/* ══════════════════════════════════════════════════════════════════════
   HERO — cinematic video background system
   Z-INDEX HIERARCHY:
     0  hero-video-container  (full-bleed looping video)
     1  hero-overlay          (dark gradient + vignette)
     2  hero-vignette         (soft edge darkening)
     3  landing-hero-grid     (subtle grid pattern)
    10  .lp-animate           (foreground text + cards — always on top)
══════════════════════════════════════════════════════════════════════ */
.landing-hero{
  min-height:calc(100vh - 60px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;
  position:relative;overflow:hidden;
  background:#050505; /* fallback while video loads */
}

/* ── VIDEO CONTAINER ────────────────────────────────────────────────────── */
.hero-video-container{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}
.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  /* Slight scale for breathing room — prevents edge flicker */
  transform:scale(1.04);
  /* Hardware-accelerated compositing */
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* Ensure video renders immediately */
  display:block;
}

/* ── CINEMATIC OVERLAY ───────────────────────────────────────────────────── */
/* Dark gradient ensures text is always crystal clear */
.hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* Top-to-bottom darkening — heavier at edges for text legibility */
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.68) 0%,
      rgba(0,0,0,0.42) 28%,
      rgba(0,0,0,0.38) 55%,
      rgba(0,0,0,0.72) 100%
    );
}

/* ── EDGE VIGNETTE ──────────────────────────────────────────────────────── */
/* Soft radial darkening around edges — focuses eye on center content */
.hero-vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%,
      transparent 35%,
      rgba(0,0,0,0.45) 75%,
      rgba(0,0,0,0.75) 100%);
}

/* ── GRID LAYER — keep above orbs/particles ── */
.landing-hero-grid{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--accent-rgb), 0.06) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 100%);
}

/* ── FOREGROUND CONTENT WRAPPER — always on top ── */
.landing-hero > .lp-animate{
  width:100%;max-width:640px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  position:relative;z-index:10;
  /* Prevents height collapse during role→form transition */
  min-height:300px;
}

/* ── ENHANCED HERO TEXT for cinematic bg — premium redesign ── */
.landing-logo{
  text-shadow: none !important;
}
.landing-eyebrow{
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  text-shadow:none;
  background:rgba(255, 255, 255, 0.07)!important;
  border:1.5px solid rgba(255, 255, 255, 0.1)!important;
  color:var(--accent2)!important;
  font-weight:700!important;
  box-shadow:none;
}
.landing-sub{
  text-shadow:
    0 2px 20px rgba(0,0,0,0.95),
    0 4px 40px rgba(0,0,0,0.8),
    0 1px 4px rgba(0,0,0,0.9);
  color:#dde3f4!important;
  font-weight:500!important;
  letter-spacing:0.01em;
  line-height:1.75!important;
}

/* ── ROLE CARDS over cinematic bg — premium glass ── */
.role-card{
  background:rgba(11,11,11,0.82)!important;
  backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1.5px solid rgba(255, 255, 255, 0.08)!important;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.55),
    0 2px 12px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 0 32px rgba(0, 0, 0, 0.04);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1)!important;
}
.role-card:hover{
  background:rgba(20,20,20,0.92)!important;
  border-color:rgba(255, 255, 255, 0.12)!important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 4px 20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.12)!important;
  transform:translateY(-4px) scale(1.01)!important;
}
.role-title{color:#f0f2ff!important;text-shadow:0 1px 8px rgba(0,0,0,0.6)}
.role-desc{color:#b8c0e0!important;text-shadow:0 1px 4px rgba(0,0,0,0.5)}
.role-icon{filter:none}

/* ── FORM CARD over cinematic bg ── */
.lp-form-fade-card{
  background:rgba(11, 11, 11, 0.8)!important;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255, 255, 255, 0.08)!important;
  box-shadow:0 16px 48px rgba(0,0,0,0.5)!important;
}
.landing.light .lp-form-fade-card {
  background: rgba(255, 253, 249, 0.95) !important;
  border-color: #E6D5C3 !important;
  box-shadow: 0 16px 48px rgba(110, 44, 18, 0.1) !important;
}
.lp-profile-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.lp-profile-name {
  font-weight: 700;
  color: #FFFDF9 !important; /* Explicitly cream white by default */
}
.lp-profile-email {
  font-size: 0.8rem;
  color: #CBD5E1 !important; /* Explicitly light grey by default */
}
.landing.light .lp-profile-box {
  background: rgba(110, 44, 18, 0.03) !important;
  border-color: rgba(110, 44, 18, 0.15) !important;
}
.landing.light .lp-profile-name {
  color: #2B1B12 !important; /* Dark brown in light mode */
}
.landing.light .lp-profile-email {
  color: #6B5648 !important; /* Muted brown/grey in light mode */
}


/* ════════════════════════════════════════════════════════════
   LANDING PAGE NAV — Premium Glassmorphism
   Overrides the generic .nav only inside .landing
   ════════════════════════════════════════════════════════════ */
.landing .landing-nav {
  background: rgba(11, 11, 11, 0.22) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 1px 0 rgba(var(--accent-rgb), 0.08),
    0 4px 32px rgba(0,0,0,0.22) !important;
  transition:
    background 0.4s cubic-bezier(0.16,1,0.3,1),
    backdrop-filter 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease !important;
}
/* Scrolled state — slightly more opaque, stronger blur */
.landing .landing-nav.landing-nav--scrolled {
  background: rgba(11, 11, 11, 0.52) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border-bottom-color: rgba(var(--accent-rgb), 0.35) !important;
  box-shadow:
    0 1px 0 rgba(var(--accent-rgb), 0.14),
    0 8px 40px rgba(0,0,0,0.38),
    inset 0 -1px 0 rgba(var(--accent-rgb), 0.1) !important;
}
/* Brand stays gradient, text readable on glass */
.landing .landing-nav .nav-brand {
  background: linear-gradient(135deg, var(--accent2), var(--accent2), var(--accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.087)) !important;
}
.landing .landing-nav .nav-btn {
  color: rgba(240,238,255,0.82) !important;
  transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
}
.landing .landing-nav .nav-btn:hover {
  background: rgba(var(--accent-rgb), 0.14) !important;
  color: #f0eeff !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.05) !important;
}

/* ── LIGHT MODE — Warm ivory glass ── */
.landing.light .landing-nav {
  background: rgba(255, 252, 246, 0.25) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(173, 109, 52, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(212,160,23,0.1),
    0 4px 28px rgba(110,44,18,0.1) !important;
}
.landing.light .landing-nav.landing-nav--scrolled {
  background: rgba(255, 250, 240, 0.60) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border-bottom-color: rgba(173,109,52,0.28) !important;
  box-shadow:
    0 1px 0 rgba(212,160,23,0.14),
    0 8px 36px rgba(110,44,18,0.14),
    inset 0 -1px 0 rgba(212,160,23,0.08) !important;
}
.landing.light .landing-nav .nav-brand {
  background: linear-gradient(135deg, #6E2C12, #A3471B, #D4A017) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: none !important;
}
.landing.light .landing-nav .nav-btn {
  color: rgba(43, 27, 18, 0.78) !important;
}
.landing.light .landing-nav .nav-btn:hover {
  background: rgba(212,160,23,0.12) !important;
  color: #2B1B12 !important;
  box-shadow: 0 0 0 1px rgba(173,109,52,0.2) !important;
}

/* ════════════════════════════════════════════════════════════
   DURATION SELECT — Premium custom styling
   Scoped to .lp-duration-select to avoid polluting other forms
   ════════════════════════════════════════════════════════════ */
.lp-duration-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  /* Custom chevron SVG arrow — white */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 17px 17px !important;
  /* Glassmorphism surface */
  background-color: rgba(11, 11, 11, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 13px 44px 13px 16px !important;
  height: 50px !important;
  font-size: 0.93rem !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  width: 100% !important;
  transition:
    border-color 0.25s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s cubic-bezier(0.16,1,0.3,1),
    background-color 0.25s ease !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    0 2px 16px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.lp-duration-select:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.04),
    0 2px 16px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
  background-color: rgba(26, 26, 26, 0.65) !important;
}
.lp-duration-select:focus {
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 0 0 3.5px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(255, 255, 255, 0.05),
    0 2px 16px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(26, 26, 26, 0.72) !important;
}
/* Style the native options (limited cross-browser, but improves on Chrome) */
.lp-duration-select option {
  background: #121212 !important;
  color: #F8FAFC !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
}
.lp-duration-select option:checked,
.lp-duration-select option:hover {
  background: #1e1200 !important;
  color: var(--accent2) !important;
  box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.35) !important;
}

/* ── LIGHT MODE duration select ── */
.landing.light .lp-duration-select {
  background-color: rgba(255, 252, 246, 0.88) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A3471B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  border: 1px solid rgba(173,109,52,0.28) !important;
  color: #2B1B12 !important;
  box-shadow:
    0 2px 12px rgba(110,44,18,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.landing.light .lp-duration-select:hover {
  border-color: rgba(173,109,52,0.52) !important;
  box-shadow:
    0 0 0 3px rgba(173,109,52,0.1),
    0 2px 14px rgba(110,44,18,0.1),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  background-color: rgba(255,252,246,0.98) !important;
}
.landing.light .lp-duration-select:focus {
  border-color: rgba(163,71,27,0.75) !important;
  box-shadow:
    0 0 0 3.5px rgba(163,71,27,0.14),
    0 0 16px rgba(163,71,27,0.1),
    0 2px 12px rgba(110,44,18,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  background-color: rgba(255,253,250,1) !important;
}
.landing.light .lp-duration-select option {
  background: #FFFCF6 !important;
  color: #2B1B12 !important;
}

/* ── MOBILE PERFORMANCE — video stays full-bleed, no extra complexity ── */
@media(max-width:600px){
  .hero-video{object-position:center center;transform:scale(1.06)}
  .landing-hero{padding:40px 16px}
}

.landing-logo{font-size:3.5rem;font-weight:900;margin-bottom:8px;
  color:#ffffff;
  position:relative;z-index:1;letter-spacing:-0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;}
@keyframes logo-shimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}


.landing-eyebrow{font-size:0.78rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--accent);background:rgba(var(--accent-rgb), 0.35);border:1px solid rgba(255, 255, 255, 0.08);
  padding:4px 14px;border-radius:20px;margin-bottom:16px;display:inline-block;position:relative;z-index:1}
.landing-sub{color:var(--text2);font-size:1.1rem;margin-bottom:36px;text-align:center;
  max-width:520px;line-height:1.6;position:relative;z-index:1}
.role-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:600px;width:100%;position:relative;z-index:1}
.role-card{background:var(--surface);border:2px solid var(--border);border-radius:16px;
  padding:32px;cursor:pointer;text-align:center;transition:all 0.25s}
.role-card:hover{border-color:var(--accent);background:var(--surface2);transform:translateY(-2px)}
.role-icon{font-size:3rem;margin-bottom:12px}
.role-title{font-size:1.2rem;font-weight:700;margin-bottom:4px}
.role-desc{font-size:0.85rem;color:var(--text2)}

/* ── Landing sections shared ── */
.lp-section{padding:64px 24px;max-width:1160px;margin:0 auto}
.lp-section-full{padding:64px 0;width:100%}
/* First lp-section directly after hero gets slightly less top room */
.landing-hero + .lp-section{padding-top:52px}
.lp-tag{font-size:0.75rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent);background:rgba(var(--accent-rgb), 0.35);border:1px solid rgba(255, 255, 255, 0.08);
  padding:4px 12px;border-radius:20px;display:inline-block;margin-bottom:16px}
.lp-h2{font-size:2.4rem;font-weight:800;line-height:1.2;margin-bottom:16px;letter-spacing:-0.02em}
.lp-h2 span{background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lp-lead{font-size:1.1rem;color:var(--text2);line-height:1.7;max-width:600px}
.lp-divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}

/* ── What is VYOM section ── */
.lp-what{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.lp-what-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.lp-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--surface2);border:1px solid var(--border);border-radius:24px;
  font-size:0.82rem;font-weight:600;color:var(--text)}
.lp-pill-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.lp-visual-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:28px;position:relative;overflow:hidden}
.lp-visual-card::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 30%,rgba(var(--accent-rgb), 0.08),transparent 60%);pointer-events:none}
.lp-mock-bar{height:10px;border-radius:8px;margin-bottom:10px;background:var(--surface2)}
.lp-mock-bar.accent{background:linear-gradient(90deg,var(--accent),var(--accent2));animation:bar-grow 2s ease infinite alternate}
.lp-mock-bar.green{background:var(--green);width:72%}
.lp-mock-bar.yellow{background:var(--yellow);width:45%}
.lp-mock-bar.red{background:var(--red);width:28%}
@keyframes bar-grow{from{opacity:0.7}to{opacity:1}}
.lp-mock-metric{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--surface2);border-radius:10px;margin-bottom:8px;font-size:0.82rem}
.lp-mock-metric-val{font-weight:700;font-size:1rem}
.lp-mock-metric-val.green{color:var(--green)}
.lp-mock-metric-val.yellow{color:var(--yellow)}
.lp-mock-metric-val.red{color:var(--red)}
.lp-mock-metric-val.accent{color:var(--accent)}
.lp-mock-students{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.lp-mock-student{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:0.7rem;font-weight:700;color:#fff}

/* ── Features ── */
.lp-features-bg{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lp-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:48px}
.lp-feat{background:var(--bg);border:1px solid var(--border);border-radius:16px;
  padding:24px;transition:all 0.25s;position:relative;overflow:hidden;cursor:default}
.lp-feat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease}
.lp-feat:hover{border-color:rgba(255, 255, 255, 0.08);transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(0,0,0,0.3)}
.lp-feat:hover::before{transform:scaleX(1)}
.lp-feat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:1.3rem;margin-bottom:16px;flex-shrink:0}
.lp-feat-title{font-size:1rem;font-weight:700;margin-bottom:6px;color:var(--text)}
.lp-feat-desc{font-size:0.85rem;color:var(--text2);line-height:1.6}

/* ── For Teachers / Students ── */
.lp-roles{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}
.lp-role-block{border-radius:20px;padding:36px;border:1px solid var(--border);
  background:var(--surface);position:relative;overflow:hidden}
.lp-role-block.teacher{border-color:rgba(255, 255, 255, 0.08)}
.lp-role-block.student{border-color:rgba(34,197,94,0.3)}
.lp-role-block::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  border-radius:20px;pointer-events:none;opacity:0.04}
.lp-role-block.teacher::before{background:var(--accent)}
.lp-role-block.student::before{background:var(--green)}
.lp-role-head{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.lp-role-emoji{font-size:2rem;width:52px;height:52px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.lp-role-name{font-size:1.25rem;font-weight:800}
.lp-role-sub{font-size:0.82rem;color:var(--text2);margin-top:2px}
.lp-role-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.lp-role-list li{display:flex;align-items:flex-start;gap:10px;font-size:0.9rem;color:var(--text2);line-height:1.5}
.lp-role-list li::before{content:'→';color:var(--accent);font-weight:700;flex-shrink:0;margin-top:1px}
.lp-role-block.student .lp-role-list li::before{color:var(--green)}

/* ── (stats bar removed) ── */

/* ── Carousel/Slideshow ── */
.lp-carousel-wrap{width:100%;overflow:hidden;position:relative;padding:32px 0}
/* gap:0 + margin-right on slides makes -50% land exactly at loop point */
.lp-carousel-track{
  display:flex;gap:0;
  animation:lp-scroll 38s linear infinite;
  width:max-content;
  will-change:transform;
  transform:translateZ(0); /* force GPU layer */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Hover-pause intentionally removed — motion is permanently smooth */
.lp-slide{flex-shrink:0;width:320px;border-radius:16px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);padding:20px;
  position:relative;margin-right:20px} /* margin-right instead of gap for exact -50% math */
.lp-slide-header{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.lp-slide-dot{width:10px;height:10px;border-radius:50%}
.lp-slide-title{font-size:0.78rem;font-weight:700;color:var(--text2)}
@keyframes lp-scroll{0%{transform:translateX(0) translateZ(0)}100%{transform:translateX(-50%) translateZ(0)}}

/* ── CTA bottom ── */
/* ── How It Works Section ── */
.lp-hiw-section{padding:80px 24px;max-width:1280px;margin:0 auto}
.lp-hiw-tag{display:inline-block;padding:5px 16px;border-radius:20px;border:1px solid rgba(255, 255, 255, 0.08);background:rgba(var(--accent-rgb), 0.35);color:var(--accent2);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:18px}
.lp-hiw-h2{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;color:var(--text);line-height:1.15;letter-spacing:-0.03em;margin-bottom:16px}
.lp-hiw-h2 span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lp-hiw-sub{font-size:1.1rem;color:var(--text2);max-width:600px;margin:0 auto 56px;line-height:1.7}

/* Grid Layout */
.lp-hiw-grid{display:grid;grid-template-columns:40% 60%;gap:48px;align-items:stretch;margin-top:40px}

/* Left Column: Vertical Steps */
.lp-hiw-left{display:flex;flex-direction:column;gap:16px}

/* Card Styles */
.lp-hiw-card{display:flex;align-items:center;gap:20px;padding:24px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:20px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;position:relative;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease}
.lp-hiw-card:hover{background:rgba(255,255,255,0.05)}

/* Active Card State */
.lp-hiw-card.active{border-color:var(--accent);box-shadow:0 0 25px rgba(var(--accent-rgb), 0.062);background:rgba(var(--accent-rgb), 0.013);transform:scale(1.02)}

/* Card Details */
.lp-hiw-card-num{font-size:1rem;font-weight:800;color:var(--text3);opacity:0.5;transition:color .3s ease,opacity .3s ease;font-variant-numeric:tabular-nums}
.lp-hiw-card.active .lp-hiw-card-num{color:var(--accent2);opacity:1;text-shadow:0 0 10px rgba(var(--accent-rgb), 0.125)}
.lp-hiw-card-icon-wrap{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.lp-hiw-card-icon{font-size:1.4rem;opacity:0.7;transition:opacity .3s ease,transform .3s ease}
.lp-hiw-card.active .lp-hiw-card-icon-wrap{background:rgba(var(--accent-rgb), 0.05);border-color:var(--accent);box-shadow:0 0 15px rgba(var(--accent-rgb), 0.075)}
.lp-hiw-card.active .lp-hiw-card-icon{opacity:1;transform:scale(1.1)}
.lp-hiw-card-body{flex:1;text-align:left}
.lp-hiw-card-title{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:4px;transition:color .3s ease}
.lp-hiw-card.active .lp-hiw-card-title{color:#fff}
.lp-hiw-card-desc{font-size:0.85rem;color:var(--text2);line-height:1.5}

/* Right Column: Preview Panel */
.lp-hiw-right{display:flex;flex-direction:column;align-items:center;gap:20px;height:100%}
.lp-hiw-preview-container{flex:1;width:100%;min-height:320px;border-radius:28px;overflow:hidden;position:relative;border:1px solid var(--border);background:rgba(0,0,0,0.2);box-shadow:0 20px 50px rgba(0,0,0,0.5);transition:border-color .4s ease,box-shadow .4s ease}
.lp-hiw-preview-container:hover{border-color:rgba(var(--accent-rgb), 0.22);box-shadow:0 24px 60px rgba(0,0,0,0.55),0 0 0 1px rgba(var(--accent-rgb), 0.08)}
/* Ambient orange glow orbs that slowly drift */
.lp-hiw-preview-container::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:28px;
  background:
    radial-gradient(ellipse 55% 40% at 88% 82%,rgba(var(--accent-rgb), 0.22) 0%,transparent 60%),
    radial-gradient(ellipse 38% 30% at 12% 18%,rgba(var(--accent-rgb), 0.14) 0%,transparent 55%),
    radial-gradient(ellipse 30% 25% at 50% 5%,rgba(var(--accent-rgb), 0.08) 0%,transparent 50%);
  animation:lp-hiw-glow 7s ease-in-out infinite alternate}
@keyframes lp-hiw-glow{0%{opacity:.65;transform:scale(1) translate(0,0)}100%{opacity:1;transform:scale(1.05) translate(6px,-4px)}}
/* Floating particle dots + subtle animated grid */
.lp-hiw-preview-container::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:28px;
  background-image:
    radial-gradient(2px 2px at 8% 22%,rgba(var(--accent-rgb), 0.7) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 68%,rgba(255,255,255,0.38) 0%,transparent 100%),
    radial-gradient(2.5px 2.5px at 42% 14%,rgba(var(--accent-rgb), 0.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 68% 78%,rgba(255,255,255,0.28) 0%,transparent 100%),
    radial-gradient(2px 2px at 83% 32%,rgba(var(--accent-rgb), 0.55) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 52%,rgba(255,255,255,0.22) 0%,transparent 100%),
    radial-gradient(2px 2px at 32% 44%,rgba(var(--accent-rgb), 0.45) 0%,transparent 100%),
    radial-gradient(1px 1px at 92% 62%,rgba(255,255,255,0.3) 0%,transparent 100%),
    linear-gradient(rgba(var(--accent-rgb), 0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--accent-rgb), 0.035) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,44px 44px,44px 44px;
  animation:lp-hiw-ptcl 14s ease-in-out infinite alternate}

@keyframes lp-hiw-ptcl{0%{transform:translate(0,0);opacity:.6}100%{transform:translate(-4px,-6px);opacity:1}}
/* ── Image cross-fade transitions ── */
.lp-hiw-preview-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.0);transition:opacity .6s cubic-bezier(0.4,0,0.2,1),transform .9s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1}
.lp-hiw-preview-img.active{opacity:1;transform:scale(1.04)}

/* Progress Indicator */
.lp-hiw-progress{display:flex;justify-content:center;gap:16px;margin-top:8px}
.lp-hiw-progress-dot{font-size:0.85rem;font-weight:700;color:var(--text3);cursor:pointer;transition:all .3s ease;position:relative;padding:4px 8px}
.lp-hiw-progress-dot::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent);transition:all .3s ease;transform:translateX(-50%);box-shadow:0 0 8px var(--accent)}
.lp-hiw-progress-dot.active{color:var(--accent2);text-shadow:0 0 8px rgba(var(--accent-rgb), 0.15)}
.lp-hiw-progress-dot.active::after{width:80%}

/* Light Mode Overrides */
.light .lp-hiw-card{background:rgba(0,0,0,0.02);border-color:rgba(11,45,99,0.1)}
.light .lp-hiw-card:hover{background:rgba(0,0,0,0.04)}
.light .lp-hiw-card.active{background:rgba(var(--accent-rgb),0.04);border-color:var(--accent)}
.light .lp-hiw-card.active .lp-hiw-card-title{color:var(--text)}
.light .lp-hiw-preview-container{background:rgba(255,255,255,0.5);border-color:rgba(11,45,99,0.1);box-shadow:0 20px 50px rgba(0,0,0,0.08)}
.light .lp-hiw-preview-container::before{opacity:0.4}
.light .lp-hiw-preview-container::after{opacity:0.3}

/* Responsive break points */
@media(max-width:1024px){.lp-hiw-grid{gap:32px}}
@media(max-width:900px){
  .lp-hiw-grid{grid-template-columns:100%;gap:24px}
  .lp-hiw-right{grid-row:1;height:auto}
  .lp-hiw-left{grid-row:2}
  .lp-hiw-preview-container{flex:none;aspect-ratio:16/9;min-height:0}
}

.lp-cta{text-align:center;padding:72px 24px;
  background:radial-gradient(ellipse at 50% 0%,rgba(var(--accent-rgb), 0.15),transparent 60%)}
.lp-cta-h{font-size:2.2rem;font-weight:800;margin-bottom:12px;letter-spacing:-0.02em}
.lp-cta-sub{color:var(--text2);margin-bottom:36px;font-size:1.05rem}

/* ── Landing footer ── */
.lp-footer {
  padding: 80px 24px 40px;
  color: var(--text2);
  border-top: 1px solid var(--border);
  background: var(--bg); /* Natively matches the page theme background */
  font-family: 'Outfit', sans-serif;
  text-align: left;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.lp-footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Headings */
.lp-footer h3 {
  color: var(--accent2); /* Matches the brand accent color */
  font-size: 1.15rem;
  font-weight: 700;
  margin: 28px 0 10px 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.lp-footer h3:first-of-type {
  margin-top: 0;
}

.lp-footer h4 {
  color: var(--accent); /* Brand primary accent */
  font-size: 1.05rem;
  font-weight: 600;
  margin: 16px 0 8px 0;
}

/* Paragraphs */
.lp-footer p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text2);
  margin: 0 0 16px 0;
}

/* Lists */
.lp-footer ul {
  list-style: none;
  padding: 0 0 0 16px;
  margin: 0 0 16px 0;
}
.lp-footer ul li {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text2);
  margin-bottom: 8px;
  position: relative;
}
.lp-footer ul li::before {
  content: '•';
  color: var(--accent2);
  position: absolute;
  left: -14px;
  top: 0;
}

/* Tech integration row */
.lp-footer-tech-section {
  margin-top: 24px;
}
.lp-footer-tech-title {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lp-footer-tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
.lp-footer-tech-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.25s ease;
  user-select: none;
}
.lp-footer-tech-card i {
  font-size: 1.1rem;
  color: var(--accent2);
}
.lp-footer-tech-card:hover {
  background: var(--surface3);
  border-color: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

/* Divider line */
.lp-footer-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

/* Bottom elements */
.lp-footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--text3);
  padding-top: 10px;
}
.lp-footer-bottom-links {
  display: flex;
  gap: 20px;
}
.lp-footer-bottom-links a {
  color: var(--text3);
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
}
.lp-footer-bottom-links a:hover {
  color: var(--accent2);
}
.lp-footer-copyright {
  margin: 0;
}

/* Light Mode Overrides for Footer separation & contrast */
.landing.light .lp-footer {
  background: var(--bg); /* Matches cream body background exactly */
  border-top-color: rgba(11, 45, 99, 0.15);
  color: #333333;
}
.landing.light .lp-footer h3 {
  color: var(--accent); /* Dark Navy Blue (#0B2D63) for strong readability */
}
.landing.light .lp-footer h4 {
  color: #6E2C12; /* Rich dark brown for subheaders */
}
.landing.light .lp-footer p,
.landing.light .lp-footer ul li {
  color: #444444;
}
.landing.light .lp-footer ul li::before {
  color: var(--accent);
}
.landing.light .lp-footer-tech-title {
  color: var(--accent);
}
.landing.light .lp-footer-tech-card {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(11, 45, 99, 0.15);
  color: #1A1A1A;
}
.landing.light .lp-footer-tech-card i {
  color: var(--accent);
}
.landing.light .lp-footer-tech-card:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(11, 45, 99, 0.08);
}
.landing.light .lp-footer-divider {
  background: rgba(11, 45, 99, 0.15);
}
.landing.light .lp-footer-bottom-links a {
  color: #555555;
}
.landing.light .lp-footer-bottom-links a:hover {
  color: var(--accent);
}

@media (max-width: 768px) {
  .lp-footer {
    padding: 60px 16px 30px;
  }
  .lp-footer-tech-grid {
    justify-content: center;
  }
  .lp-footer-bottom-row {
    flex-direction: column;
    text-align: center;
  }
  .lp-footer-bottom-links {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ── Landing page info modal ── */
.lp-info-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: lp-modal-fadein 0.25s ease-out;
}
.lp-info-modal-card {
  background: var(--surface1, #121212);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  animation: lp-modal-scalein 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lp-info-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lp-info-modal-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text1);
}
.lp-info-modal-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-info-modal-close:hover {
  color: var(--accent);
}
.lp-info-modal-content {
  padding: 24px;
  overflow-y: auto;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text2);
}
.lp-info-modal-body h3 {
  margin: 20px 0 8px 0;
  font-size: 1.05rem;
  color: var(--text1);
  font-weight: 600;
}
.lp-info-modal-body p {
  margin: 0 0 16px 0;
  color: var(--text3);
}
.lp-info-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

@keyframes lp-modal-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lp-modal-scalein {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Light mode overrides */
.landing.light .lp-info-modal-card {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 20px 40px rgba(110, 44, 18, 0.1);
}
.landing.light .lp-info-modal-header {
  border-bottom-color: #E6D5C3;
}
.landing.light .lp-info-modal-header h2 {
  color: #2B1B12;
}
.landing.light .lp-info-modal-content {
  color: #6B5648;
}
.landing.light .lp-info-modal-body h3 {
  color: #2B1B12;
}
.landing.light .lp-info-modal-body p {
  color: #9C8778;
}
.landing.light .lp-info-modal-footer {
  border-top-color: #E6D5C3;
}

/* ── Scroll animations ── */
@keyframes lp-fadein{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.lp-animate{animation:lp-fadein 0.6s ease forwards;opacity:0}
.lp-animate.d1{animation-delay:0.1s}
.lp-animate.d2{animation-delay:0.2s}
.lp-animate.d3{animation-delay:0.3s}
.lp-animate.d4{animation-delay:0.4s}
.lp-animate.d5{animation-delay:0.5s}
.lp-animate.d6{animation-delay:0.6s}
/* Dynamically rendered hero forms (teacher/student) — self-animating, no IntersectionObserver needed */
/* 'both' fill-mode ensures the from-keyframe is the FIRST painted frame — no invisible flash */
.lp-form-fade{animation:lp-form-appear 0.22s cubic-bezier(0.4,0,0.2,1) both}
@keyframes lp-form-appear{
  from{opacity:0;transform:translateY(10px) scale(0.98)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}
/* Fallback: guarantee .lp-animate elements that are already lp-visible stay fully visible */
.lp-animate.lp-visible{opacity:1!important;transform:translateY(0)!important;transition:none!important;animation:none!important}

/* ── Light mode overrides for landing ── */
.light .lp-feat{background:#F3E9DD}
.light .lp-role-block{background:#FFFDF9}
.light .lp-slide{background:#FFFDF9}
.light .lp-section-title{color:#2B1B12}
.light .lp-section-sub{color:#6B5648}
.light .lp-feat-title{color:#2B1B12}
.light .lp-feat-desc{color:#6B5648}
.light .lp-cta-btn{background:#6E2C12;color:#FFFDF9}
.light .lp-cta-btn:hover{background:#8B451E}

/* ── Teacher Dashboard ── */
.understanding-meter{background:var(--surface2);border-radius:var(--radius);
  padding:20px;text-align:center;margin-bottom:16px}
.meter-value{font-size:4rem;font-weight:800;line-height:1}
.meter-label{color:var(--text2);font-size:0.9rem;margin-top:4px}
.student-chip{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--surface2);border-radius:8px;font-size:0.85rem}
.student-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.students-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}

/* ═══════════════════════════════════════════════════════════════
   TEACHER SHELL — NEW SIDEBAR LAYOUT
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --sidebar-w: 280px;
  --sidebar-bg: #080809;
  --sidebar-hover: rgba(255, 255, 255, 0.04);
  --sidebar-active: linear-gradient(90deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.02));
  --sidebar-text: #8B96A8;
  --sidebar-text-active: #F59E0B;
  --header-h: 72px;
  --card-radius: 16px;
  --db-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── Sidebar Layout Wrapper ── */
.teacher-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
  font-family: var(--db-font);
}

/* ══════════════════════════════════════════════════
   VYOM PREMIUM SIDEBAR — Mission Control
══════════════════════════════════════════════════ */
.teacher-sidebar {
  width: 280px;
  min-height: 100vh;
  background: #080809;
  border-right: 1px solid rgba(255, 152, 0, 0.05);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 200;
  transition: width .35s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
  box-shadow: 2px 0 20px rgba(0,0,0,0.3);
}

/* Subtle top accent line */
.teacher-sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 20% at 50% 0%, rgba(255,152,0,0.018) 0%, transparent 70%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.004) 2px, rgba(255,255,255,0.004) 3px);
  pointer-events: none;
  z-index: 0;
}
.teacher-sidebar > * { position: relative; z-index: 1; }

/* ── Collapsed ── */
.teacher-sidebar.collapsed { width: 84px; }
.teacher-sidebar.collapsed:hover { width: 280px; }

/* ── COLLAPSE TOGGLE ── */
.sidebar-collapse-btn {
  position: absolute;
  top: 22px;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,152,0,0.07);
  border: 1px solid rgba(255,152,0,0.18);
  color: rgba(255,152,0,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
  backdrop-filter: blur(6px);
  z-index: 10;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
  background: rgba(255,152,0,0.1);
  border-color: rgba(255,152,0,0.3);
  color: #ff9800;
  box-shadow: 0 0 6px rgba(255,152,0,0.1);
  transform: rotate(-8deg);
}
.teacher-sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

/* ── BRAND ── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  min-height: 72px;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-logo-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transform: translateX(0);
  transition: opacity .3s ease, transform .3s ease;
}
.sidebar-brand-name {
  font-weight: 800;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #ff9800, #ffcc80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sidebar-brand-subtitle {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,152,0,0.42);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  transition: opacity .4s ease;
}
.sidebar-brand-subtitle.fade-out { opacity: 0; }
.teacher-sidebar.collapsed .sidebar-brand-text { opacity: 0; transform: translateX(-8px); pointer-events: none; }
.teacher-sidebar.collapsed:hover .sidebar-brand-text { opacity: 1; transform: translateX(0); }

/* ── NEURAL DECORATION ── */
.sidebar-neural-line {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,152,0,0.04) 25%, rgba(255,152,0,0.02) 55%, rgba(255,152,0,0.04) 80%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.sidebar-neural-node {
  position: absolute;
  right: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,152,0,0.1);
  animation: neural-pulse 3.2s ease-in-out infinite;
}
.sidebar-neural-node:nth-child(1) { top: 28%; animation-delay: 0s; }
.sidebar-neural-node:nth-child(2) { top: 52%; animation-delay: 1.1s; }
.sidebar-neural-node:nth-child(3) { top: 74%; animation-delay: 2.2s; }
@keyframes neural-pulse {
  0%,100% { opacity: 0.05; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(1.3); box-shadow: 0 0 4px rgba(255,152,0,0.15); }
}

/* ── NAVIGATION ── */
.sidebar-nav {
  flex: 1;
  padding: 8px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar { width: 0; }

.sidebar-section-label {
  font-size: 0.61rem;
  font-weight: 700;
  color: rgba(255,255,255,0.18);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 12px 4px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .3s, padding .3s, height .3s;
}
.teacher-sidebar.collapsed .sidebar-section-label { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.teacher-sidebar.collapsed:hover .sidebar-section-label { opacity: 1; height: auto; padding: 10px 12px 4px; }

/* ── NAV ITEMS — PILL CARDS ── */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #8B96A8;
  cursor: pointer;
  font-size: 0.845rem;
  font-weight: 500;
  font-family: var(--db-font);
  text-align: left;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  width: 100%;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.sidebar-nav-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.07);
  color: #D4DBE6;
  transform: translateX(4px);
  box-shadow: none;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.sidebar-nav-item:hover .sidebar-nav-icon-wrap { transform: scale(1.1); color: #C7D2E0; }
.sidebar-nav-item:hover .sidebar-nav-label { transform: translateX(2px); }
.sidebar-nav-item.active {
  font-weight: 700;
  box-shadow: inset 0 0 0 0 transparent;
}
.sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 15%;
  transform: none;
  width: 3px; height: 70%;
  border-radius: 0 3px 3px 0;
}
.sidebar-nav-item.active .sidebar-nav-icon-wrap {
  filter: none;
}

/* Custom Active Colors for Navigation Tabs (Dark Mode) */
#nav-btn-dashboard.active {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.03) 100%);
  border-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
#nav-btn-dashboard.active::before {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  box-shadow: 2px 0 10px rgba(59, 130, 246, 0.4);
}
#nav-btn-dashboard.active .sidebar-nav-icon-wrap {
  color: #60a5fa;
}

#nav-btn-tasks.active {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.14) 0%, rgba(16, 185, 129, 0.03) 100%);
  border-color: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
#nav-btn-tasks.active::before {
  background: linear-gradient(180deg, #34d399, #059669);
  box-shadow: 2px 0 10px rgba(16, 185, 129, 0.4);
}
#nav-btn-tasks.active .sidebar-nav-icon-wrap {
  color: #34d399;
}

#nav-btn-content.active {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.14) 0%, rgba(249, 115, 22, 0.03) 100%);
  border-color: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}
#nav-btn-content.active::before {
  background: linear-gradient(180deg, #fb923c, var(--accent));
  box-shadow: 2px 0 10px rgba(249, 115, 22, 0.4);
}
#nav-btn-content.active .sidebar-nav-icon-wrap {
  color: #fb923c;
}

#nav-btn-attendance.active {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.14) 0%, rgba(139, 92, 246, 0.03) 100%);
  border-color: rgba(139, 92, 246, 0.2);
  color: #c084fc;
}
#nav-btn-attendance.active::before {
  background: linear-gradient(180deg, #c084fc, #7c3aed);
  box-shadow: 2px 0 10px rgba(139, 92, 246, 0.4);
}
#nav-btn-attendance.active .sidebar-nav-icon-wrap {
  color: #c084fc;
}

#nav-btn-reports.active {
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.14) 0%, rgba(6, 182, 212, 0.03) 100%);
  border-color: rgba(6, 182, 212, 0.2);
  color: #22d3ee;
}
#nav-btn-reports.active::before {
  background: linear-gradient(180deg, #22d3ee, #0891b2);
  box-shadow: 2px 0 10px rgba(6, 182, 212, 0.4);
}
#nav-btn-reports.active .sidebar-nav-icon-wrap {
  color: #22d3ee;
}

#nav-btn-communication.active {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.14) 0%, rgba(236, 72, 153, 0.03) 100%);
  border-color: rgba(236, 72, 153, 0.2);
  color: #f472b6;
}
#nav-btn-communication.active::before {
  background: linear-gradient(180deg, #f472b6, #db2777);
  box-shadow: 2px 0 10px rgba(236, 72, 153, 0.4);
}
#nav-btn-communication.active .sidebar-nav-icon-wrap {
  color: #f472b6;
}

#nav-btn-test.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.14) 0%, rgba(99, 102, 241, 0.03) 100%);
  border-color: rgba(99, 102, 241, 0.2);
  color: #818cf8;
}
#nav-btn-test.active::before {
  background: linear-gradient(180deg, #818cf8, #4f46e5);
  box-shadow: 2px 0 10px rgba(99, 102, 241, 0.4);
}
#nav-btn-test.active .sidebar-nav-icon-wrap {
  color: #818cf8;
}

#nav-btn-coding.active {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.14) 0%, rgba(239, 68, 68, 0.03) 100%);
  border-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
#nav-btn-coding.active::before {
  background: linear-gradient(180deg, #f87171, #dc2626);
  box-shadow: 2px 0 10px rgba(239, 68, 68, 0.4);
}
#nav-btn-coding.active .sidebar-nav-icon-wrap {
  color: #f87171;
}

#nav-btn-evaluations.active {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.14) 0%, rgba(251, 191, 36, 0.03) 100%);
  border-color: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
#nav-btn-evaluations.active::before {
  background: linear-gradient(180deg, #fbbf24, var(--accent));
  box-shadow: 2px 0 10px rgba(251, 191, 36, 0.4);
}
#nav-btn-evaluations.active .sidebar-nav-icon-wrap {
  color: #fbbf24;
}

/* ── ICON + LABEL ── */
.sidebar-nav-icon-wrap {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .2s, color .2s, filter .2s;
  color: inherit;
}
.sidebar-nav-icon-wrap svg { display: block; }
.sidebar-nav-label {
  flex: 1;
  transition: transform .2s;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-notif-dot {
  width: 6px; height: 6px;
  background: #ef4444;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(239,68,68,0.6);
}

/* Collapsed: hide labels & adjust layout */
.teacher-sidebar.collapsed .sidebar-nav-label,
.teacher-sidebar.collapsed .sidebar-notif-dot { opacity: 0; width: 0; overflow: hidden; }
.teacher-sidebar.collapsed:hover .sidebar-nav-label,
.teacher-sidebar.collapsed:hover .sidebar-notif-dot { opacity: 1; width: auto; }
.teacher-sidebar.collapsed .sidebar-nav-item { justify-content: center; padding: 10px; transform: none !important; }
.teacher-sidebar.collapsed:hover .sidebar-nav-item { justify-content: flex-start; padding: 9px 12px; }

/* ── LIVE SESSION CARD ── */
.sidebar-live-card {
  margin: 4px 10px 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,152,0,0.06), rgba(255,152,0,0.02));
  border: 1px solid rgba(255,152,0,0.08);
  overflow: hidden;
  flex-shrink: 0;
  transition: all .25s;
}
.sidebar-live-card:hover { background: linear-gradient(135deg,rgba(255,152,0,0.09),rgba(255,152,0,0.03)); border-color: rgba(255,152,0,0.14); }
.sidebar-live-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.sidebar-live-indicator {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: live-heartbeat 2s ease-in-out infinite;
}
@keyframes live-heartbeat {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  60% { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.sidebar-live-label {
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
}
.sidebar-live-code {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ff9800;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 7px;
  font-variant-numeric: tabular-nums;
}
.sidebar-live-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-live-meta-item {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidebar-live-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}
.sidebar-live-waveform span {
  display: block;
  width: 2px;
  border-radius: 1px;
  background: rgba(34,197,94,0.55);
  animation: waveform 1.3s ease-in-out infinite;
}
.sidebar-live-waveform span:nth-child(1) { height: 4px; animation-delay: 0s; }
.sidebar-live-waveform span:nth-child(2) { height: 10px; animation-delay: .2s; }
.sidebar-live-waveform span:nth-child(3) { height: 7px; animation-delay: .4s; }
.sidebar-live-waveform span:nth-child(4) { height: 12px; animation-delay: .1s; }
.sidebar-live-waveform span:nth-child(5) { height: 5px; animation-delay: .3s; }
@keyframes waveform { 0%,100% { transform: scaleY(1); opacity: .5; } 50% { transform: scaleY(1.6); opacity: 1; } }

/* Collapsed live card */
.teacher-sidebar.collapsed .sidebar-live-card { padding: 10px; display: flex; justify-content: center; align-items: center; }
.teacher-sidebar.collapsed .sidebar-live-code,
.teacher-sidebar.collapsed .sidebar-live-meta,
.teacher-sidebar.collapsed .sidebar-live-label { display: none; }
.teacher-sidebar.collapsed:hover .sidebar-live-card { padding: 12px 14px; display: block; }
.teacher-sidebar.collapsed:hover .sidebar-live-code { display: block; }
.teacher-sidebar.collapsed:hover .sidebar-live-meta { display: flex; }
.teacher-sidebar.collapsed:hover .sidebar-live-label { display: block; }

/* ── AI INSIGHTS CARD ── */

/* ══════════════════════════════════════════════════════════════
   ABHI AI CONSULTANT — Integrated Sidebar Panel
   ══════════════════════════════════════════════════════════════ */

/* Divider between nav and ABHI panel */
/* ═══════════════════════════════════════════════════
   SIDEBAR AI MODULE — Speech Bubble + Character Unit
   ═══════════════════════════════════════════════════ */

/* Outer wrapper — bubble + tail + character as one unit */
.sidebar-ai-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 10px 0;
  flex-shrink: 0;
}

/* ── Speech Bubble (Redesigned) ── */
.vyom-ai-bubble-card {
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  background: rgba(13, 12, 15, 0.75);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 20px rgba(var(--accent-rgb), 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: vyom-card-float 6s ease-in-out infinite, vyom-border-shimmer 6s ease-in-out infinite;
}

.vyom-ai-bubble-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow:
    0 12px 40px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 30px rgba(var(--accent-rgb), 0.12);
}

/* Ambient glow */
.vyom-ai-glow-accent {
  position: absolute;
  top: -45px;
  left: -45px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14) 0%, transparent 80%);
  pointer-events: none;
  filter: blur(18px);
}

/* Animations */
@keyframes vyom-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes vyom-border-shimmer {
  0%, 100% { border-color: rgba(var(--accent-rgb), 0.2); }
  50% { border-color: rgba(var(--accent-rgb), 0.45); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.5); opacity: 1; }
  80%, 100% { transform: scale(1.6); opacity: 0; }
}

@keyframes avatar-breathing {
  0%, 100% { box-shadow: 0 0 2px rgba(var(--accent-rgb), 0.2); border-color: rgba(var(--accent-rgb), 0.3); }
  50% { box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6); border-color: rgba(var(--accent-rgb), 0.8); }
}

@keyframes cursor-blink {
  to { visibility: hidden; }
}

@keyframes wave-pulse {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

@keyframes emoji-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

@keyframes emoji-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes emoji-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Header */
.vyom-ai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 9px;
  z-index: 1;
}

.vyom-ai-avatar-container {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.vyom-ai-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(var(--accent-rgb), 0.6);
  background: rgba(0, 0, 0, 0.3);
}

.vyom-ai-avatar-ring-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  animation: avatar-breathing 3s ease-in-out infinite;
}

.vyom-ai-meta-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vyom-ai-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vyom-ai-title-text {
  font-size: 0.74rem;
  font-weight: 750;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.vyom-live-pulse-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 6px;
  height: 6px;
}

.vyom-live-pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  z-index: 1;
}

.vyom-live-pulse-ring {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #22c55e;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.vyom-ai-status-subtitle {
  font-size: 0.61rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.01em;
  margin-top: 1px;
}

/* Message Area */
.vyom-ai-message-area {
  min-height: 52px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.vyom-ai-message-text {
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  letter-spacing: 0.01em;
  word-break: break-word;
}

.vyom-ai-cursor {
  display: inline-block;
  color: var(--accent2);
  font-weight: 700;
  margin-left: 2px;
  animation: cursor-blink 0.8s steps(2, start) infinite;
}

/* Thinking state */
.vyom-ai-thinking-state {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.vyom-waveform {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  width: auto;
}

.vyom-wave-bar {
  width: 2.5px;
  background: var(--accent2);
  border-radius: 2px;
  animation: wave-pulse 1.2s ease-in-out infinite;
  transform-origin: bottom;
}

.vyom-waveform .vyom-wave-bar:nth-child(1) { animation-delay: 0.1s; height: 10px; }
.vyom-waveform .vyom-wave-bar:nth-child(2) { animation-delay: 0.3s; height: 6px; }
.vyom-waveform .vyom-wave-bar:nth-child(3) { animation-delay: 0.6s; height: 14px; }
.vyom-waveform .vyom-wave-bar:nth-child(4) { animation-delay: 0.2s; height: 8px; }
.vyom-waveform .vyom-wave-bar:nth-child(5) { animation-delay: 0.4s; height: 11px; }

.vyom-thinking-text {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.01em;
}

/* Status Pills */
.vyom-ai-pills-row {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.vyom-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.63rem;
  font-weight: 600;
  padding: 3.5px 8px;
  border-radius: 20px;
  transition: all 0.25s ease;
  border: 1px solid;
  letter-spacing: 0.01em;
}

.vyom-ai-pill .pill-emoji {
  font-size: 0.72rem;
  line-height: 1;
}

.vyom-ai-pill.pill-ready {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.vyom-ai-pill.pill-awaiting {
  color: rgba(var(--accent-rgb), 0.85);
  background: rgba(var(--accent-rgb), 0.05);
  border-color: rgba(var(--accent-rgb), 0.15);
}

.vyom-ai-pill.pill-active {
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
}

.vyom-ai-pill.pill-monitoring {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
}

.vyom-ai-pill.pill-attention {
  color: #f97316;
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(249, 115, 22, 0.2);
}

.vyom-ai-pill.pill-success {
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
}

.vyom-ai-pill .pulse-emoji {
  display: inline-block;
  animation: emoji-pulse 2s ease-in-out infinite;
}

.vyom-ai-pill .spin-emoji {
  display: inline-block;
  animation: emoji-spin 4s linear infinite;
}

.vyom-ai-pill .bounce-emoji {
  display: inline-block;
  animation: emoji-bounce 2s ease-in-out infinite;
}

.vyom-ai-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* Premium Action Button */
.vyom-ai-btn-premium {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  outline: none;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.25) 0%, rgba(249, 115, 22, 0.25) 100%);
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  padding: 1px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.vyom-ai-btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: #141316;
  color: rgba(var(--accent-rgb), 0.85);
  font-size: 0.71rem;
  font-weight: 700;
  border-radius: 11px;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}

.vyom-ai-btn-premium:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.75) 0%, rgba(249, 115, 22, 0.75) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.22);
}

.vyom-ai-btn-premium:hover .vyom-ai-btn-content {
  background: rgba(20, 19, 22, 0.88);
  color: #ffffff;
}

.vyom-ai-btn-svg {
  transition: transform 0.3s ease;
}

.vyom-ai-btn-premium:hover .vyom-ai-btn-svg {
  transform: scale(1.15) rotate(5deg);
}

/* ── Speech tail ── */
.sai-bubble-tail {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid rgba(var(--accent-rgb), 0.2);
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(var(--accent-rgb), 0.08));
  margin-top: -1px;
  transition: all 0.3s ease;
}

.sidebar-ai-module:hover .sai-bubble-tail {
  border-top-color: rgba(var(--accent-rgb), 0.35);
}

.sidebar-abhi-char-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  height: 185px;
  overflow: hidden;
  position: relative;
  width: 100%;
  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
  transform-origin: bottom center;
}
.sidebar-abhi-char-wrap.fading {
  opacity: 0;
  transform: scale(0.98);
}


/* Character image */
.sidebar-abhi-char {
  height: 185px;
  width: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  transform-origin: bottom center;
  animation: abhi-sidebar-float 5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.10))
    drop-shadow(0 -4px 22px rgba(var(--accent-rgb), 0.05));
}
@keyframes abhi-sidebar-float {
  0%   { transform: translateY(0px) scale(1); }
  30%  { transform: translateY(-5px) scale(1.006); }
  60%  { transform: translateY(-8px) scale(1.01); }
  80%  { transform: translateY(-4px) scale(1.005); }
  100% { transform: translateY(0px) scale(1); }
}

/* Collapsed sidebar — hide entire module */
.teacher-sidebar.collapsed .sidebar-ai-module { display: none; }
.teacher-sidebar.collapsed:hover .sidebar-ai-module { display: flex; }

/* ── Suppress removed components ── */
.sidebar-capability { display: none !important; }
.sidebar-vc-item { display: none !important; }

/* ── LIGHT MODE overrides ── */
.light .teacher-sidebar {
  background: #f5f4f2;
  border-right-color: rgba(0,0,0,0.05);
  box-shadow: 2px 0 20px rgba(0,0,0,0.06);
}
.light .teacher-sidebar::before { background: radial-gradient(ellipse 70% 35% at 50% 0%, rgba(var(--accent-rgb), 0.05) 0%, transparent 65%); }
.light .sidebar-brand { border-bottom-color: rgba(0,0,0,0.06); }
.light .sidebar-section-label { color: rgba(0,0,0,0.45); }
.light .sidebar-nav-item { color: rgba(0,0,0,0.65); }
.light .sidebar-nav-item:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.9); border-color: rgba(0,0,0,0.08); }
/* Custom Active Colors for Navigation Tabs (Light Mode) */
.light #nav-btn-dashboard.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.02) 100%);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.12);
}
.light #nav-btn-dashboard.active::before {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  box-shadow: 2px 0 8px rgba(37, 99, 235, 0.35);
}
.light #nav-btn-dashboard.active .sidebar-nav-icon-wrap {
  color: #2563eb;
  filter: drop-shadow(0 0 3px rgba(37, 99, 235, 0.3));
}

.light #nav-btn-tasks.active {
  background: linear-gradient(90deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.02) 100%);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.12);
}
.light #nav-btn-tasks.active::before {
  background: linear-gradient(180deg, #34d399, #059669);
  box-shadow: 2px 0 8px rgba(5, 150, 105, 0.35);
}
.light #nav-btn-tasks.active .sidebar-nav-icon-wrap {
  color: #059669;
  filter: drop-shadow(0 0 3px rgba(5, 150, 105, 0.3));
}

.light #nav-btn-content.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.02) 100%);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.12);
}
.light #nav-btn-content.active::before {
  background: linear-gradient(180deg, #fb923c, var(--accent));
  box-shadow: 2px 0 8px rgba(var(--accent-rgb), 0.35);
}
.light #nav-btn-content.active .sidebar-nav-icon-wrap {
  color: var(--accent);
  filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), 0.3));
}

.light #nav-btn-attendance.active {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.12) 0%, rgba(124, 58, 237, 0.02) 100%);
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.12);
}
.light #nav-btn-attendance.active::before {
  background: linear-gradient(180deg, #c084fc, #7c3aed);
  box-shadow: 2px 0 8px rgba(124, 58, 237, 0.35);
}
.light #nav-btn-attendance.active .sidebar-nav-icon-wrap {
  color: #7c3aed;
  filter: drop-shadow(0 0 3px rgba(124, 58, 237, 0.3));
}

.light #nav-btn-reports.active {
  background: linear-gradient(90deg, rgba(8, 145, 178, 0.12) 0%, rgba(8, 145, 178, 0.02) 100%);
  color: #0891b2;
  border-color: rgba(8, 145, 178, 0.12);
}
.light #nav-btn-reports.active::before {
  background: linear-gradient(180deg, #22d3ee, #0891b2);
  box-shadow: 2px 0 8px rgba(8, 145, 178, 0.35);
}
.light #nav-btn-reports.active .sidebar-nav-icon-wrap {
  color: #0891b2;
  filter: drop-shadow(0 0 3px rgba(8, 145, 178, 0.3));
}

.light #nav-btn-communication.active {
  background: linear-gradient(90deg, rgba(219, 39, 119, 0.12) 0%, rgba(219, 39, 119, 0.02) 100%);
  color: #db2777;
  border-color: rgba(219, 39, 119, 0.12);
}
.light #nav-btn-communication.active::before {
  background: linear-gradient(180deg, #f472b6, #db2777);
  box-shadow: 2px 0 8px rgba(219, 39, 119, 0.35);
}
.light #nav-btn-communication.active .sidebar-nav-icon-wrap {
  color: #db2777;
  filter: drop-shadow(0 0 3px rgba(219, 39, 119, 0.3));
}

.light #nav-btn-test.active {
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.12) 0%, rgba(79, 70, 229, 0.02) 100%);
  color: #4f46e5;
  border-color: rgba(79, 70, 229, 0.12);
}
.light #nav-btn-test.active::before {
  background: linear-gradient(180deg, #818cf8, #4f46e5);
  box-shadow: 2px 0 8px rgba(79, 70, 229, 0.35);
}
.light #nav-btn-test.active .sidebar-nav-icon-wrap {
  color: #4f46e5;
  filter: drop-shadow(0 0 3px rgba(79, 70, 229, 0.3));
}

.light #nav-btn-coding.active {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.12) 0%, rgba(220, 38, 38, 0.02) 100%);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.12);
}
.light #nav-btn-coding.active::before {
  background: linear-gradient(180deg, #f87171, #dc2626);
  box-shadow: 2px 0 8px rgba(220, 38, 38, 0.35);
}
.light #nav-btn-coding.active .sidebar-nav-icon-wrap {
  color: #dc2626;
  filter: drop-shadow(0 0 3px rgba(220, 38, 38, 0.3));
}

.light #nav-btn-evaluations.active {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.02) 100%);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.12);
}
.light #nav-btn-evaluations.active::before {
  background: linear-gradient(180deg, #fbbf24, var(--accent));
  box-shadow: 2px 0 8px rgba(var(--accent-rgb), 0.35);
}
.light #nav-btn-evaluations.active .sidebar-nav-icon-wrap {
  color: var(--accent);
  filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), 0.3));
}
.light .sidebar-live-card { background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.08),rgba(var(--accent-rgb), 0.02)); border-color: rgba(var(--accent-rgb), 0.14); }
.light .sidebar-live-code { color: var(--accent); }
.light .sidebar-live-label { color: rgba(0,0,0,0.52); }
.light .sidebar-live-meta-item { color: rgba(0,0,0,0.58); }
.light .sidebar-ai-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.05); }
.light .sidebar-ai-name { color: rgba(0,0,0,0.80); }
.light .sidebar-ai-desc { color: rgba(0,0,0,0.50); }
.light .sidebar-collapse-btn { background: rgba(var(--accent-rgb), 0.07); border-color: rgba(var(--accent-rgb), 0.18); color: rgba(var(--accent-rgb), 0.6); }
.light .sidebar-collapse-btn:hover { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }
.light .sidebar-logo-mark { background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.1),rgba(var(--accent-rgb), 0.03)); border-color: rgba(var(--accent-rgb), 0.2); }
.light .sidebar-brand-subtitle { color: rgba(var(--accent-rgb), 0.42); }

/* LIGHT MODE: Redesigned AI Module / speech bubble */
.light .vyom-ai-bubble-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(var(--accent-rgb), 0.25);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 20px rgba(var(--accent-rgb), 0.04);
}

.light .vyom-ai-bubble-card:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.08),
    0 0 35px rgba(var(--accent-rgb), 0.1);
}

.light .vyom-ai-glow-accent {
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.1) 0%, transparent 80%);
}

.light .vyom-ai-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.light .vyom-ai-title-text {
  color: #1e1b18;
}

.light .vyom-ai-status-subtitle {
  color: rgba(0, 0, 0, 0.5);
}

.light .vyom-ai-message-text {
  color: rgba(30, 27, 24, 0.85);
}

.light .vyom-thinking-text {
  color: rgba(0, 0, 0, 0.5);
}

.light .vyom-ai-pill.pill-ready {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

.light .vyom-ai-pill.pill-awaiting {
  color: #b45309;
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.18);
}

.light .vyom-ai-btn-premium {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.3) 0%, rgba(234, 88, 12, 0.3) 100%);
}

.light .vyom-ai-btn-premium:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.8) 0%, rgba(234, 88, 12, 0.8) 100%);
}

.light .vyom-ai-btn-content {
  background: #ffffff;
  color: #b45309;
}

.light .vyom-ai-btn-premium:hover .vyom-ai-btn-content {
  background: rgba(255, 255, 255, 0.9);
  color: #b45309;
}

.light .sai-bubble-tail {
  border-top-color: rgba(var(--accent-rgb), 0.25);
}

.light .sidebar-ai-module:hover .sai-bubble-tail {
  border-top-color: rgba(var(--accent-rgb), 0.45);
}

/* Brand, nav, capability styles now in premium sidebar section above */
.sidebar-logo-icon { display: none; }



/* Dynamic sparkline placeholder */
.db-sparkline-empty {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: var(--text3);
  letter-spacing: 0.04em;
  font-style: italic;
}

/* Insight item animations */
@keyframes insight-slide-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.db-ai-insight-item {
  animation: insight-slide-in 0.4s ease both;
}
.db-ai-insight-item:nth-child(1) { animation-delay: 0.05s; }
.db-ai-insight-item:nth-child(2) { animation-delay: 0.12s; }
.db-ai-insight-item:nth-child(3) { animation-delay: 0.19s; }
.db-ai-insight-item:nth-child(4) { animation-delay: 0.26s; }

/* ── TEACHER MAIN AREA ── */
.teacher-main {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── TOP HEADER ── */
/* ═══════════════════════════════════════════════════════════
   PREMIUM TEACHER HEADER — full redesign
═══════════════════════════════════════════════════════════ */
.teacher-header {
  height: var(--header-h);
  background: var(--bg, #000000);
  border-bottom: none;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.light .teacher-header {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f8fafc 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb), 0.02), 0 4px 20px rgba(0,0,0,0.06);
}

/* ── Header left: avatar + greeting ── */
.teacher-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.teacher-header-greeting { flex: 1; min-width: 0; }
.teacher-header-greeting h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.light .teacher-header-greeting h2 { color: #1e293b; }

/* Rotating motivational quotes */
.header-quote-wrap {
  height: 18px;
  overflow: hidden;
  position: relative;
}
.header-quote {
  font-size: 0.75rem;
  color: var(--text2);
  line-height: 1;
  position: absolute;
  left: 0; right: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-quote.visible { opacity: 1; transform: translateY(0); }
.header-quote.hidden-up { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.header-quote.hidden-down { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* ── Header actions (right side) ── */
.teacher-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hdr-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.hdr-icon-btn:hover {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.05);
}
.hdr-notif-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--red);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  border: 2px solid var(--bg);
}
.hdr-class-code {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  font-size: 0.8rem;
}
.hdr-class-code-label { color: var(--text2); font-weight: 500; }
.hdr-class-code-value {
  color: var(--accent);
  font-weight: 800;
  font-family: monospace;
  font-size: 0.95rem;
  letter-spacing: 1px;
}

/* ─── PREMIUM AVATAR SYSTEM ─── */
.hdr-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  border: 2.5px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.1);
  flex-shrink: 0;
}
.hdr-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.hdr-avatar:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.05), 0 4px 16px rgba(var(--accent-rgb), 0.075);
  transform: scale(1.08);
}
.hdr-avatar-presence {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--surface);
  pointer-events: none;
}

/* ── READ-ONLY SESSION BANNER ── */
.session-readonly-banner {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text2);
  margin: 12px 24px 0;
  animation: banner-fade-in 0.5s ease;
}
@keyframes banner-fade-in { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: translateY(0); } }
.session-readonly-banner .ro-icon { font-size: 1rem; }
.session-readonly-banner .ro-title {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.85rem;
}
.session-readonly-banner .ro-desc { color: var(--text2); }
.session-readonly-banner .ro-pills {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ro-pill {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}
.ro-pill.allowed { background: rgba(34,197,94,0.12); color: var(--green); border: 1px solid rgba(34,197,94,0.25); }
.ro-pill.locked  { background: rgba(239,68,68,0.10); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }

/* ── DISABLED BUTTONS IN READ-ONLY MODE ── */
.session-ended-lock {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.4);
}
.session-ended-lock-btn {
  position: relative;
}
.session-ended-lock-btn::after {
  content: '🔒';
  position: absolute;
  top: -6px; right: -6px;
  font-size: 0.65rem;
  background: var(--surface);
  border-radius: 50%;
  padding: 1px 2px;
  pointer-events: none;
}

/* ── VIDEO CALL SIDEBAR ITEM (always visible) ── */
/* ── VIDEO CALL ITEM (kept for JS compatibility, hidden via premium sidebar) ── */
.sidebar-vc-item { display: none !important; }
.sidebar-vc-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: none; background: transparent;
  color: rgba(255,255,255,0.5); cursor: pointer;
  font-size: 0.855rem; font-weight: 500; font-family: inherit; transition: all 0.2s;
}
.sidebar-vc-btn.active-call { color: var(--red) !important; }
.sidebar-vc-btn.active-call .vc-pulse-dot { background: var(--red); animation: vc-pulse 1.5s ease-in-out infinite; }
@keyframes vc-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.7; } }
.vc-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-left: auto; }
.sidebar-vc-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── AVATAR UPLOAD MODAL ── */
.avatar-upload-zone {
  border: 2px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(var(--accent-rgb), 0.04);
}
.avatar-upload-zone:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.avatar-upload-zone.dragging {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  transform: scale(1.01);
}
.avatar-preview-ring {
  width: 80px; height: 80px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.062);
}
.avatar-preview-ring img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ── DASHBOARD PAGE WRAPPER ── */
.db-page {
  padding: 20px 20px 32px;
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
  flex: 1;
  box-sizing: border-box;
}

/* ── HERO CLASSROOM CARD ── */
.db-hero-card {
  background: linear-gradient(135deg, #020202 0%, #080808 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--card-radius);
  padding: 16px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0; /* gap on parent flex container handles spacing */
  position: relative;
  overflow: hidden;
  min-height: 165px;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  box-shadow: 0 0 35px rgba(255, 140, 0, 0.15), 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ── HERO SLIDESHOW LAYER ── */
.db-hero-slide {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
  pointer-events: none;
}
.db-hero-slide.active { opacity: 1; }
.db-hero-slide.kb-a { animation: db-kb-a 22s ease-in-out infinite alternate; }
.db-hero-slide.kb-b { animation: db-kb-b 25s ease-in-out infinite alternate; }
.db-hero-slide.kb-c { animation: db-kb-c 20s ease-in-out infinite alternate; }
@keyframes db-kb-a {
  from { transform: scale(1)     translate(0,    0); }
  to   { transform: scale(1.08) translate(-1.5%, 1%); }
}
@keyframes db-kb-b {
  from { transform: scale(1.04) translate(1%,  -0.5%); }
  to   { transform: scale(1.10) translate(-0.5%, 1.5%); }
}
@keyframes db-kb-c {
  from { transform: scale(1)     translate(-1.5%, 0.5%); }
  to   { transform: scale(1.08) translate(1.5%, -1%); }
}

/* Dark overlay — stronger contrast so content dominates background photo */
.db-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.52) 50%,
      rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(180deg,
      rgba(8, 8, 10, 0.35) 0%,
      rgba(8, 8, 10, 0.20) 50%,
      rgba(8, 8, 10, 0.60) 100%);
  z-index: 0;
}

/* All direct children of hero card must sit above slides */
.db-hero-card > *:not(.db-hero-slide):not(.db-hero-overlay) {
  position: relative;
  z-index: 1;
}
/* Animated gradient orb sweep */
.db-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 85% 50%, rgba(var(--accent-rgb), 0.024) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 80%, rgba(var(--accent-rgb), 0.015) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 10%, rgba(var(--accent-rgb), 0.009) 0%, transparent 50%);
  animation: hero-orb-drift 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-orb-drift {
  0%   { opacity: 0.6; transform: scale(1) translateX(0); }
  50%  { opacity: 1;   transform: scale(1.04) translateX(8px); }
  100% { opacity: 0.7; transform: scale(1.02) translateX(-6px); }
}
/* Floating particles overlay */
.db-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(var(--accent-rgb), 0.06) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 65%, rgba(var(--accent-rgb), 0.054) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 20%, rgba(var(--accent-rgb), 0.042) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 70%, rgba(var(--accent-rgb), 0.054) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 40%, rgba(var(--accent-rgb), 0.042) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 85%, rgba(var(--accent-rgb), 0.03) 0%, transparent 100%),
    radial-gradient(2px 2px at 20% 75%, rgba(var(--accent-rgb), 0.036) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 15%, rgba(var(--accent-rgb), 0.042) 0%, transparent 100%);
  animation: hero-particles-float 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-particles-float {
  0%   { transform: translateY(0px) translateX(0px); opacity: 0.6; }
  33%  { transform: translateY(-6px) translateX(3px); opacity: 0.9; }
  66%  { transform: translateY(-3px) translateX(-4px); opacity: 0.7; }
  100% { transform: translateY(-8px) translateX(2px); opacity: 1; }
}
.db-hero-status-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
  position: relative;
}
.db-hero-status-icon::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: db-ring-pulse 2.5s ease-in-out infinite;
}
@keyframes db-ring-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.db-hero-info { flex: 1; }
.db-hero-subtitle {
  font-size: 0.78rem;
  color: rgba(255,248,231,0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}
.db-hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 2.25rem;
  font-weight: 900;
  color: #FFF8E7;
  margin-bottom: 10px;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.db-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db-status-dot.active { background: var(--green); box-shadow: 0 0 8px var(--green); animation: db-dot-pulse 2s infinite; }
.db-status-dot.waiting { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.db-status-dot.paused { background: var(--yellow); }
.db-status-dot.ended { background: var(--red); }
@keyframes db-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.85); }
}
.db-hero-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text2);
}
.db-hero-code-badge {
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 3px 10px;
  font-family: monospace;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  letter-spacing: 1px;
}
.db-hero-code-copy {
  background: none; border: none;
  color: var(--text3); cursor: pointer;
  padding: 4px; font-size: 0.85rem;
  transition: color 0.18s;
}
.db-hero-code-copy:hover { color: var(--accent); }

.db-hero-left-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.db-hero-divider {
  width: 1px;
  height: 70px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.db-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.db-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.db-hero-meta-icon {
  font-size: 1.1rem;
  color: var(--accent2);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.db-hero-meta-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.db-hero-meta-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFF8E7;
  line-height: 1.2;
}
.db-hero-time-value {
  font-family: monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFF8E7;
  line-height: 1.2;
  letter-spacing: 1px;
}
.db-hero-meta-label {
  font-size: 0.67rem;
  color: rgba(255,248,231,0.45);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0;
}

.db-hero-illustration {
  width: 170px;
  min-width: 150px;
  height: 90px;
  background: rgba(var(--accent-rgb), 0.07);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
}
/* Abstract AI/classroom SVG nodes — replaces old emoji graphics */
.db-hero-illustration::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 28px at 30% 50%, rgba(var(--accent-rgb), 0.25) 0%, transparent 70%),
    radial-gradient(circle 18px at 65% 30%, rgba(var(--accent-rgb), 0.2) 0%, transparent 70%),
    radial-gradient(circle 14px at 70% 72%, rgba(var(--accent-rgb), 0.18) 0%, transparent 70%),
    radial-gradient(circle 10px at 50% 55%, rgba(var(--accent-rgb), 0.15) 0%, transparent 70%);
  animation: illus-pulse 4s ease-in-out infinite alternate;
}
@keyframes illus-pulse {
  0%   { opacity: 0.6; transform: scale(0.97); }
  100% { opacity: 1;   transform: scale(1.03); }
}
/* Glassmorphism line network */
.db-hero-illustration::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(var(--accent-rgb), 0.06) 50%, transparent 70%);
  animation: illus-shimmer 3s ease-in-out infinite alternate;
}
@keyframes illus-shimmer {
  0%   { transform: translateX(-10px); opacity: 0.4; }
  100% { transform: translateX(10px);  opacity: 0.8; }
}

.db-hero-start-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: var(--db-font);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.1), 0 0 0 0 rgba(var(--accent-rgb), 0.1);
  transition: all 0.2s;
  animation: hs2-start-glow 2.5s ease-in-out infinite;
}
@keyframes hs2-start-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.1), 0 0 0 0 rgba(var(--accent-rgb), 0.0); }
  50%       { box-shadow: 0 4px 28px rgba(var(--accent-rgb), 0.138), 0 0 0 6px rgba(var(--accent-rgb), 0.025); }
}
.db-hero-start-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--accent-rgb), 0.15), 0 0 0 4px rgba(var(--accent-rgb), 0.037); animation: none; }
.db-hero-pause-btn {
  background: linear-gradient(135deg, #ca8a04, var(--accent));
  box-shadow: 0 4px 20px rgba(234,179,8,0.35);
}
.db-hero-end-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 20px rgba(239,68,68,0.3);
}

/* ── SECTION HEADINGS & HIERARCHY ── */
.db-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 32px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}
.db-section-title-wrap {
  display: flex;
  flex-direction: column;
}
.db-section-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.015em;
  text-transform: capitalize;
  margin: 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}
.db-section-subtitle {
  font-size: 0.82rem;
  color: var(--text3, #94A3B8);
  margin-top: 4px;
  margin-bottom: 0;
  font-weight: 500;
}
.db-date-picker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #070707;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: all 0.2s ease;
}
.db-date-picker-wrap:hover {
  border-color: rgba(255, 140, 0, 0.3);
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.08), 0 4px 16px rgba(0,0,0,0.6);
  background: #090909;
}
.db-date-icon {
  font-size: 0.85rem;
  color: var(--accent-orange-light, var(--accent2));
}
.db-date-text {
  font-family: var(--font);
}
.db-date-arrow {
  font-size: 0.7rem;
  color: var(--text3);
  margin-left: 2px;
}

/* ── STAT CARDS ROW ── */
.db-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 0; /* gap on parent flex container handles spacing */
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.db-stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.00)), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 18px 18px 14px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.22);
}
.db-stat-card:hover {
  transform: translateY(-2px);
}
.db-stat-card.stat-purple {
  border: 1px solid rgba(168,85,247,0.28);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.22), 0 0 10px rgba(168,85,247,0.08);
}
.db-stat-card.stat-purple:hover {
  border-color: rgba(168,85,247,0.42);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.22), 0 0 16px rgba(168,85,247,0.13);
}
.db-stat-card.stat-violet {
  border: 1px solid rgba(59,130,246,0.28);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.22), 0 0 10px rgba(59,130,246,0.08);
}
.db-stat-card.stat-violet:hover {
  border-color: rgba(59,130,246,0.42);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.22), 0 0 16px rgba(59,130,246,0.13);
}
.db-stat-card.stat-blue {
  border: 1px solid rgba(34,197,94,0.28);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.22), 0 0 10px rgba(34,197,94,0.08);
}
.db-stat-card.stat-blue:hover {
  border-color: rgba(34,197,94,0.42);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.22), 0 0 16px rgba(34,197,94,0.13);
}
.db-stat-card.stat-orange {
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.22), 0 0 10px rgba(var(--accent-rgb), 0.08);
}
.db-stat-card.stat-orange:hover {
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.22), 0 0 16px rgba(var(--accent-rgb), 0.13);
}
.db-stat-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  margin-bottom: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: transform 0.2s ease;
}
.db-stat-card:hover .db-stat-icon-wrap { transform: scale(1.08); }

/* ── Live status badges and chips inside analytics cards ── */
.db-stat-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.db-stat-badge.live {
  color: var(--green);
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.15);
}
.db-stat-badge.active {
  color: var(--accent-orange-light, var(--accent2));
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.15);
}
.db-stat-badge.info {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.15);
}
.db-stat-badge.warning {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.08);
  border-color: rgba(251, 146, 60, 0.15);
}

.db-pulse-dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: db-pulse-glow 1.5s infinite;
}
.db-pulse-dot-orange {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-orange-light, var(--accent2));
  box-shadow: 0 0 6px var(--accent-orange-light, var(--accent2));
  animation: db-pulse-glow 1.5s infinite;
}
@keyframes db-pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Typography polish for stats cards */
.db-stat-value {
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  margin-bottom: 1px;
  line-height: 1.1;
}
.db-stat-label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,248,231,0.45) !important;
  margin-bottom: 4px;
}
.db-stat-trend {
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,248,231,0.5);
}

.db-stat-icon-wrap.purple {
  background: radial-gradient(135deg at 30% 30%, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.05) 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.25);
  color: #A855F7;
}
.db-stat-icon-wrap.violet {
  background: radial-gradient(135deg at 30% 30%, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1.5px solid rgba(59, 130, 246, 0.25);
  color: #3B82F6;
}
.db-stat-icon-wrap.blue {
  background: radial-gradient(135deg at 30% 30%, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.05) 100%);
  border: 1.5px solid rgba(34, 197, 94, 0.25);
  color: #22C55E;
}
.db-stat-icon-wrap.orange {
  background: radial-gradient(135deg at 30% 30%, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.05) 100%);
  border: 1.5px solid rgba(var(--accent-rgb), 0.25);
  color: var(--accent2);
}
.db-stat-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.db-stat-value.purple { color: #A855F7; }
.db-stat-value.violet { color: #3B82F6; }
.db-stat-value.blue { color: #22C55E; }
.db-stat-value.orange { color: var(--accent2); }
.db-stat-label {
  font-size: 0.78rem;
  color: var(--text2);
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
/* Subtle per-stat colour accent glow — executive strength */
.db-stat-card.stat-purple::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.07) 0%, transparent 70%);
  pointer-events: none;
}
.db-stat-card.stat-violet::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.07) 0%, transparent 70%);
  pointer-events: none;
}
.db-stat-card.stat-blue::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.db-stat-card.stat-orange::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, transparent 70%);
  pointer-events: none;
}
/* Mini sparkline */
.db-sparkline {
  width: 100%;
  height: 36px;
  position: relative;
}
.db-sparkline svg {
  width: 100%;
  height: 100%;
}

/* Stat trend indicator */
.db-stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 10px;
}
.db-stat-trend.neutral { color: var(--text3); }

/* ── AI INSIGHTS BANNER ── */
.db-ai-banner {
  background: linear-gradient(120deg, rgba(11, 11, 11, 0.95) 0%, rgba(26, 26, 26, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--card-radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.db-ai-banner::before {
  content: '';
  position: absolute;
  right: -20px; top: -20px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.db-ai-badge {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.25));
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.db-ai-content { flex: 1; min-width: 0; }
.db-ai-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.db-ai-subtitle {
  font-size: 0.78rem;
  color: var(--text2);
  margin-bottom: 10px;
}
.db-ai-insights-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.db-ai-insight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text2);
}
.db-ai-insight-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}
.db-ai-brain-icon {
  font-size: 4rem;
  opacity: 0.12;
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.db-ai-view-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--accent2);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--db-font);
  white-space: nowrap;
  transition: all 0.18s;
}
.db-ai-view-btn:hover { background: rgba(var(--accent-rgb), 0.22); }

/* ── BOTTOM 3-COL GRID ── */
.db-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .db-bottom-grid { grid-template-columns: 1fr 1fr; }
  .db-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── PANEL CARD ── */
.db-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.db-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.db-panel-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.db-panel-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text3);
}

/* Active Students panel */
.db-student-search {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  outline: none;
  font-family: var(--db-font);
  margin-bottom: 12px;
  transition: border-color 0.18s;
}
.db-student-search:focus { border-color: rgba(255, 255, 255, 0.08); }
.db-search-wrap {
  position: relative;
  margin-bottom: 12px;
}
.db-search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: 0.8rem;
  pointer-events: none;
}

.db-student-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--surface2);
  margin-bottom: 6px;
  transition: background 0.15s;
}
.db-student-row:hover { background: var(--surface3); }
.db-student-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.045);
}
.db-student-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.db-student-online-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(34,197,94,0.15);
  color: var(--green);
}
.db-student-progress {
  font-size: 0.72rem;
  color: var(--text3);
  text-align: right;
}
.db-student-kick-btn {
  background: none; border: none;
  color: var(--text3); cursor: pointer;
  font-size: 0.75rem;
  padding: 3px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}
.db-student-kick-btn:hover { background: rgba(239,68,68,0.12); color: var(--red); }

.db-view-all-link {
  display: flex; align-items: center; gap: 4px;
  justify-content: center;
  margin-top: 12px;
  color: var(--text3);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border: none; background: none;
  font-family: var(--db-font);
  transition: color 0.18s;
}
.db-view-all-link:hover { color: var(--accent); }

/* Waiting Room empty state */
.db-empty-room {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
}
.db-empty-room-icon {
  font-size: 2.5rem;
  opacity: 0.3;
  margin-bottom: 12px;
}
.db-empty-room-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 4px;
}
.db-empty-room-sub {
  font-size: 0.75rem;
  color: var(--text3);
  line-height: 1.5;
}

/* Waiting room student row */
.db-waiting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.db-waiting-row:last-child { border-bottom: none; }
.db-waiting-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.db-approve-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: rgba(34,197,94,0.15);
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--db-font);
  transition: background 0.15s;
}
.db-approve-btn:hover { background: rgba(34,197,94,0.28); }
.db-reject-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: rgba(239,68,68,0.1);
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--db-font);
  transition: background 0.15s;
}
.db-reject-btn:hover { background: rgba(239,68,68,0.22); }

/* Quick Controls */
.db-qc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: var(--db-font);
  text-align: left;
  width: 100%;
}
.db-qc-item:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); }
.db-qc-icon-wrap {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.db-qc-text { flex: 1; }
.db-qc-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.db-qc-sub {
  font-size: 0.72rem;
  color: var(--text3);
  margin-top: 1px;
}
.db-qc-arrow {
  color: var(--text3);
  font-size: 0.75rem;
}

/* Uploaded file display block */
.db-qc-file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.07);
  margin-bottom: 8px;
  animation: db-file-fadein 0.3s ease;
}
@keyframes db-file-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.db-qc-file-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(34,197,94,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.db-qc-file-text { flex: 1; min-width: 0; }
.db-qc-file-label {
  font-size: 0.68rem;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1px;
}
.db-qc-file-name {
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.db-qc-file-remove {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 0.82rem;
  transition: all 0.15s;
  flex-shrink: 0;
  font-family: inherit;
  display: flex; align-items: center; gap: 3px;
}
.db-qc-file-remove:hover { background: rgba(239,68,68,0.12); color: var(--red); }

/* ── MOBILE: hamburger override for sidebar ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 199;
}

/* ── RESPONSIVE SIDEBAR ── */
@media (max-width: 900px) {
  .teacher-sidebar {
    position: fixed;
    left: 0; top: 0;
    height: 100vh;
    z-index: 300;
    transform: translateX(-100%);
  }
  .teacher-sidebar.open {
    transform: translateX(0);
  }
  .sidebar-overlay.open { display: block; }
  .teacher-main { width: 100%; }
  .db-stats-row { grid-template-columns: repeat(2, 1fr); }
  .db-bottom-grid { grid-template-columns: 1fr; }
  .db-hero-illustration { display: none; }
  .teacher-header { padding: 0 12px; gap: 6px; }
  .teacher-header-greeting h2 { font-size: 0.88rem; }
  .hdr-class-code { display: none; }
  .session-readonly-banner { margin: 8px 14px 0; flex-wrap: wrap; gap: 6px; }
  .ro-pills { display: none; }
  .db-page { padding: 14px 14px 24px; }
}
@media (max-width: 600px) {
  .db-stats-row { grid-template-columns: repeat(2, 1fr); }
  .db-hero-card { flex-wrap: wrap; gap: 16px; padding: 20px; }
  .db-hero-meta { flex-direction: row; }
}

/* Nav hamburger for mobile sidebar toggle */
.sidebar-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  margin-right: 4px;
}
@media (max-width: 900px) {
  .sidebar-hamburger { display: flex; align-items: center; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   WARM ACADEMIC LUXE — Complete Light Mode Override System
   Premium Cream · Espresso Brown · Muted Gold · Calm Institutional
   ═══════════════════════════════════════════════════════════════ */

/* ── SIDEBAR ── */
/* Old light sidebar overrides superseded by premium section */
.light .sidebar-notif-dot { background: #C65A3D; }
.light .sidebar-vc-btn { color: #6B5648; }

/* ── TEACHER HEADER ── */
.light .teacher-header {
  background: linear-gradient(135deg, #FFFDF9 0%, #F8F0E6 50%, #FFFDF9 100%);
  border-bottom: 1px solid #E6D5C3;
  box-shadow: 0 1px 0 rgba(110,44,18,0.06), 0 4px 20px rgba(110,44,18,0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.light .teacher-header-greeting h2 { color: #2B1B12; }
.light .header-quote { color: #9C8778; }
.light .hdr-theme-btn { color: #9C8778; }
.light .hdr-notif-btn { color: #6B5648; }
.light .hdr-notif-badge {
  background: #C65A3D;
  color: #FFFDF9;
}
.light .hdr-icon-btn {
  border-color: rgba(110,44,18,0.12);
  background: rgba(110,44,18,0.04);
  color: #6B5648;
}
.light .hdr-icon-btn:hover {
  background: rgba(110,44,18,0.08);
  color: #2B1B12;
  border-color: rgba(110,44,18,0.18);
}
.light .hdr-exit-btn {
  background: rgba(110,44,18,0.06);
  color: #6B5648;
  border-color: rgba(110,44,18,0.15);
}
.light .hdr-exit-btn:hover {
  background: rgba(198,90,61,0.1);
  color: #C65A3D;
  border-color: rgba(198,90,61,0.25);
}
.light .hdr-avatar {
  background: linear-gradient(135deg, #6E2C12, #A3471B);
  color: #FFFDF9;
  box-shadow: 0 0 0 2px rgba(110,44,18,0.25);
}
.light .hdr-class-code-badge {
  background: rgba(110,44,18,0.07);
  border-color: rgba(110,44,18,0.2);
  color: #6E2C12;
}
.light .session-readonly-banner {
  background: rgba(216,155,91,0.08);
  border-color: rgba(110,44,18,0.12);
}
.light .ro-banner-icon { color: #D89B5B; }
.light .ro-banner-title { color: #2B1B12; }
.light .ro-banner-sub { color: #6B5648; }
.light .ro-pill {
  background: rgba(110,44,18,0.06);
  border-color: rgba(110,44,18,0.15);
  color: #6B5648;
}

/* ── HERO CLASSROOM CARD ── */
.light .db-hero-card {
  background: linear-gradient(135deg, #F8EDD9 0%, #F0DCC0 35%, #EDDEC9 65%, #F5E8D4 100%);
  border: 1px solid #DCC9A8;
  box-shadow: 0 8px 32px rgba(110,44,18,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
}
.light .db-hero-card::before {
  background:
    radial-gradient(ellipse 70% 80% at 85% 50%, rgba(216,155,91,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 80%, rgba(110,44,18,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 10%, rgba(207,164,106,0.1) 0%, transparent 50%);
  animation: none;
}
.light .db-hero-card::after {
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(110,44,18,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 65%, rgba(139,69,30,0.25) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 20%, rgba(216,155,91,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 70%, rgba(110,44,18,0.25) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 40%, rgba(207,164,106,0.3) 0%, transparent 100%);
  animation: none;
  opacity: 0.6;
}
.light .db-hero-overlay {
  background:
    linear-gradient(180deg, rgba(245,235,220,0.4) 0%, rgba(245,235,220,0.15) 40%, rgba(245,235,220,0.35) 100%);
}
.light .db-hero-status-icon {
  border-color: rgba(110,44,18,0.4);
  background: rgba(110,44,18,0.12);
}
.light .db-hero-status-icon::after {
  border-color: rgba(110,44,18,0.2);
}
.light .db-hero-subtitle { color: #9C8778; }
.light .db-hero-title { color: #2B1B12; }
.light .db-hero-code-row { color: #6B5648; }
.light .db-hero-code-badge {
  background: rgba(110,44,18,0.08);
  border-color: rgba(110,44,18,0.25);
  color: #2B1B12;
}
.light .db-hero-code-copy { color: #9C8778; }
.light .db-hero-code-copy:hover { color: #6E2C12; }
.light .db-hero-meta { color: #6B5648; }
.light .db-hero-time-value { color: #2B1B12; }
.light .db-hero-time-label { color: #9C8778; }

/* ── STAT CARDS ── */
.light .db-stat-card {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110,44,18,0.05);
}
.light .db-stat-card:hover {
  border-color: rgba(110,44,18,0.28);
  box-shadow: 0 8px 28px rgba(110,44,18,0.10);
  transform: translateY(-3px);
}
.light .db-stat-icon-wrap.purple {
  background: rgba(110,44,18,0.08);
  border-color: rgba(110,44,18,0.2);
}
.light .db-stat-icon-wrap.violet {
  background: rgba(139,69,30,0.08);
  border-color: rgba(139,69,30,0.2);
}
.light .db-stat-icon-wrap.blue {
  background: rgba(110,44,18,0.06);
  border-color: rgba(110,44,18,0.15);
}
.light .db-stat-icon-wrap.orange {
  background: rgba(216,155,91,0.12);
  border-color: rgba(216,155,91,0.3);
}
.light .db-stat-value { color: #2B1B12; }
.light .db-stat-value.purple { color: #6E2C12; }
.light .db-stat-value.violet { color: #8B451E; }
.light .db-stat-value.blue { color: #6E2C12; }
.light .db-stat-value.orange { color: #A3471B; }
.light .db-stat-label { color: #6B5648; }
.light .db-stat-trend { color: #5E8B55; }
.light .db-stat-trend.neutral { color: #9C8778; }
.light .db-stat-card.stat-purple::after {
  background: radial-gradient(circle, rgba(110,44,18,0.06) 0%, transparent 70%);
}
.light .db-stat-card.stat-violet::after {
  background: radial-gradient(circle, rgba(139,69,30,0.06) 0%, transparent 70%);
}
.light .db-stat-card.stat-blue::after {
  background: radial-gradient(circle, rgba(110,44,18,0.05) 0%, transparent 70%);
}
.light .db-stat-card.stat-orange::after {
  background: radial-gradient(circle, rgba(216,155,91,0.08) 0%, transparent 70%);
}

/* ── AI INSIGHTS BANNER ── */
.light .db-ai-banner {
  background: linear-gradient(120deg, #FFFDF9 0%, #F8EDD9 100%);
  border-color: #E6D5C3;
}
.light .db-ai-banner::before {
  background: radial-gradient(circle, rgba(216,155,91,0.12) 0%, transparent 70%);
}
.light .db-ai-badge {
  background: linear-gradient(135deg, rgba(110,44,18,0.12), rgba(216,155,91,0.12));
  border-color: rgba(110,44,18,0.2);
}
.light .db-ai-title { color: #2B1B12; }
.light .db-ai-sub { color: #6B5648; }
.light .db-ai-insight-item { color: #6B5648; }
.light .db-view-insights-btn {
  background: #6E2C12;
  color: #FFFDF9;
  box-shadow: 0 4px 14px rgba(110,44,18,0.2);
}
.light .db-view-insights-btn:hover {
  background: #8B451E;
  box-shadow: 0 6px 20px rgba(110,44,18,0.3);
}

/* ── PANEL CARDS (Active Students / Waiting Room / Quick Controls) ── */
.light .db-panel {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110,44,18,0.04);
}
.light .db-panel-header { border-bottom-color: #E6D5C3; }
.light .db-panel-title { color: #2B1B12; }
.light .db-panel-count { color: #9C8778; }
.light .db-panel-icon { color: #A3471B; }
.light .db-panel-search {
  background: #F8F3ED;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .db-panel-search::placeholder { color: #B8A090; }
.light .db-panel-search:focus { border-color: rgba(110,44,18,0.4); outline: none; }
.light .db-empty-icon { color: #D89B5B; opacity: 0.6; }
.light .db-empty-title { color: #6B5648; }
.light .db-empty-sub { color: #9C8778; }

/* ── BUTTONS — Espresso System ── */
.light .btn-primary {
  background: #6E2C12;
  color: #FFFDF9;
}
.light .btn-primary:hover {
  background: #8B451E;
  box-shadow: 0 4px 16px rgba(110,44,18,0.25);
  transform: translateY(-1px);
}
.light .btn-success { background: #5E8B55; color: #FFFDF9; }
.light .btn-danger { background: #C65A3D; color: #FFFDF9; }
.light .btn-warn { background: #D89B3C; color: #2B1B12; }
.light .btn-ghost {
  border-color: #E6D5C3;
  color: #6B5648;
  background: transparent;
}
.light .btn-ghost:hover {
  background: #F3E9DD;
  color: #2B1B12;
  border-color: rgba(110,44,18,0.25);
}

/* ── CARDS (global) ── */
.light .card {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110,44,18,0.04);
}
.light .card-sm {
  background: #FFFDF9;
  border-color: #E6D5C3;
}
.light .card-title { color: #2B1B12; }

/* ── NAV ── */
.light .nav { background: #FFFDF9; border-bottom-color: #E6D5C3; }
.light .nav-brand {
  background: linear-gradient(135deg, #6E2C12, #A3471B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.light .nav-btn { color: #6B5648; }
.light .nav-btn:hover { background: #F3E9DD; color: #2B1B12; }
.light .nav-btn.active { background: #6E2C12; color: #FFFDF9; }
.light .session-badge {
  background: #F3E9DD;
  border-color: #E6D5C3;
  color: #6E2C12;
}

/* ── INPUTS & FORMS ── */
.light input, .light select, .light textarea {
  background: #FFFDF9;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light input:focus, .light select:focus, .light textarea:focus {
  border-color: rgba(110,44,18,0.5);
  box-shadow: 0 0 0 3px rgba(110,44,18,0.08);
  outline: none;
}
.light input::placeholder, .light textarea::placeholder { color: #B8A090; }
.light label { color: #6B5648; }
.light .form-group label { color: #6B5648; }

/* ── TABLES ── */
.light table { background: #FFFDF9; }
.light th { background: #F3E9DD; color: #2B1B12; border-color: #E6D5C3; }
.light td { border-color: #E6D5C3; color: #2B1B12; }
.light tr:hover td { background: rgba(110,44,18,0.03); }

/* ── MODALS & OVERLAYS ── */
.light .modal-inner, .light .pdf-modal {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 24px 60px rgba(110,44,18,0.15);
}
.light .modal-header { border-bottom-color: #E6D5C3; color: #2B1B12; }

/* ── SPARKLINES IN LIGHT MODE ── */
.light .db-sparkline svg path,
.light .db-sparkline svg polyline {
  stroke: rgba(110,44,18,0.5) !important;
}
.light .db-sparkline-empty { color: #B8A090; }

/* ── SECTION HEADERS ── */
.light .section-header { color: #2B1B12; }
.light .text-muted { color: #9C8778; }
.light .text-sm { color: #6B5648; }

/* ── CHIPS & BADGES ── */
.light .rc-chip-green { background: rgba(94,139,85,0.12); color: #5E8B55; border-color: rgba(94,139,85,0.25); }
.light .rc-chip-red { background: rgba(198,90,61,0.1); color: #C65A3D; border-color: rgba(198,90,61,0.2); }
.light .rc-chip-yellow { background: rgba(216,155,60,0.1); color: #A3471B; border-color: rgba(216,155,60,0.2); }
.light .rc-chip-test { background: rgba(110,44,18,0.08); color: #6E2C12; border-color: rgba(110,44,18,0.2); }

/* ── REPORT CENTER (student) ── */
.light .rc-card {
  background: #FFFDF9;
  border-color: #E6D5C3;
}
.light .rc-card:hover { border-color: rgba(110,44,18,0.3); }
.light .rc-card-title { color: #2B1B12; }
.light .rc-card-meta { color: #9C8778; }
.light .rc-stat-val { color: #2B1B12; }
.light .rc-stat-lbl { color: #9C8778; }
.light .rc-q-correct { background: rgba(94,139,85,0.06); border-color: rgba(94,139,85,0.2); }
.light .rc-q-wrong { background: rgba(198,90,61,0.05); border-color: rgba(198,90,61,0.15); }
.light .rc-q-text { color: #2B1B12; }
.light .rc-q-meta { color: #9C8778; }
.light .rc-topic-name { color: #6B5648; }
.light .rc-topic-pct { color: #2B1B12; }

/* ── SCROLLBARS ── */
.light ::-webkit-scrollbar { width: 6px; height: 6px; }
.light ::-webkit-scrollbar-track { background: #F3E9DD; }
.light ::-webkit-scrollbar-thumb { background: #CBA888; border-radius: 10px; }
.light ::-webkit-scrollbar-thumb:hover { background: #A3471B; }

/* ── CHAT ── */
.light .chat-area { background: #FFFDF9; border-color: #E6D5C3; }
.light .chat-messages { background: #F8F3ED; }
.light .chat-input-row { background: #FFFDF9; border-top-color: #E6D5C3; }
.light .chat-input { background: #F3E9DD; border-color: #E6D5C3; color: #2B1B12; }
.light .chat-input:focus { border-color: rgba(110,44,18,0.45); box-shadow: 0 0 0 3px rgba(110,44,18,0.07); }
.light .chat-input::placeholder { color: #B8A090; }
.light .chat-sender { color: #9C8778; }
.light .chat-time { color: #B8A090; }
.light .chat-date-sep { color: #9C8778; }
.light .chat-date-sep::before,
.light .chat-date-sep::after { background: #E6D5C3; }
.light .chat-msg-wrap.other .chat-bubble {
  background:#F3E9DD;
  color:#2B1B12;
  box-shadow:0 2px 8px rgba(110,44,18,0.06);
}

/* ── TOAST / MOTIVATIONAL ── */
.light .motiv-toast {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 12px 36px rgba(110,44,18,0.12);
}
.light .motiv-toast-msg { color: #2B1B12; }
.light .motiv-toast-close { color: rgba(43,27,18,0.4); }
.light .motiv-toast-close:hover { color: rgba(43,27,18,0.8); background: rgba(43,27,18,0.06); }
.light .motiv-toast-timer { background: rgba(43,27,18,0.1); }

/* ── QUICK CONTROLS CARD ── */
.light .qc-label { color: #6B5648; }
.light .qc-sub { color: #9C8778; }
.light .qc-select {
  background: #F8F3ED;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .qc-input {
  background: #F8F3ED;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .capture-location-btn {
  background: #6E2C12;
  color: #FFFDF9;
}
.light .capture-location-btn:hover { background: #8B451E; }

/* ── RC DL BUTTONS (student report center download btns) ── */
.light .rc-dl-btn {
  border-color: #E6D5C3;
  background: #F3E9DD;
  color: #6B5648;
}
.light .rc-dl-btn:hover { background: #EAD9C8; color: #2B1B12; }

/* ── RC CARD (student report cards) ── */
.light .rc-card {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 2px 12px rgba(110,44,18,0.04);
}
.light .rc-card:hover { border-color: rgba(110,44,18,0.3); box-shadow: 0 4px 18px rgba(110,44,18,0.08); }
.light .rc-card-title { color: #2B1B12; }
.light .rc-card-meta { color: #9C8778; }
.light .rc-card-top { color: #2B1B12; }
.light .rc-review { background: #F8F3ED; border-top-color: #E6D5C3; }
.light .rc-q-row { border-color: #E6D5C3; }
.light .rc-q-correct { background: rgba(94,139,85,0.06); border-color: rgba(94,139,85,0.18); }
.light .rc-q-wrong { background: rgba(198,90,61,0.05); border-color: rgba(198,90,61,0.15); }
.light .rc-q-skip { background: rgba(156,135,120,0.05); border-color: rgba(156,135,120,0.15); }
.light .rc-q-text { color: #2B1B12; }
.light .rc-q-meta { color: #9C8778; }
.light .rc-q-opt { background: rgba(110,44,18,0.04); border-color: #E6D5C3; color: #6B5648; }
.light .rc-q-opt.opt-correct { background: rgba(94,139,85,0.1); border-color: rgba(94,139,85,0.3); color: #5E8B55; }
.light .rc-q-opt.opt-wrong { background: rgba(198,90,61,0.08); border-color: rgba(198,90,61,0.2); color: #C65A3D; }
.light .rc-stat { color: #2B1B12; }
.light .rc-stat-val { color: #2B1B12; }
.light .rc-stat-lbl { color: #9C8778; }
.light .rc-stats { border-color: #E6D5C3; }
.light .rc-topic-row { border-bottom-color: #E6D5C3; }
.light .rc-topic-name { color: #6B5648; }
.light .rc-topic-bar { background: rgba(110,44,18,0.07); }
.light .rc-topic-pct { color: #2B1B12; }
.light .rc-tabs { border-bottom-color: #E6D5C3; }
.light .rc-tab { color: #9C8778; border-bottom-color: transparent; }
.light .rc-tab.active { color: #6E2C12; border-bottom-color: #6E2C12; }
.light .rc-tab:hover { color: #2B1B12; }
.light .rc-empty-icon { color: #CBA888; opacity: 0.7; }
.light .rc-empty-title { color: #6B5648; }
.light .rc-empty-sub { color: #9C8778; }
.light .rc-title { color: #2B1B12; }
.light .rc-header { border-bottom-color: #E6D5C3; }

/* ── STUDENT DASHBOARD (sv2) ── */
.light .sv2-shell { background: #F8F3ED; }
.light .sv2-top-bar {
  background: #FFFDF9;
  border-bottom-color: #E6D5C3;
}
.light .sv2-session-badge { background: #F3E9DD; border-color: #E6D5C3; color: #6E2C12; }
.light .sv2-ended { background: #F3E9DD; border-color: #E6D5C3; }
.light .s-glass-card {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110,44,18,0.05);
}
.light .s-section-title { color: #2B1B12; }
.light .s-content-pad { background: #F8F3ED; }
.light .s-paused-bar { background: rgba(216,155,60,0.1); border-color: rgba(216,155,60,0.25); color: #A3471B; }

/* ── VIDEO CALL ── */
.light .vc-window {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 16px 48px rgba(110,44,18,0.12);
}
.light .vc-header { background: #F3E9DD; border-bottom-color: #E6D5C3; }
.light .vc-title { color: #2B1B12; }
.light .vc-status { color: #9C8778; }
.light .vc-controls { background: #F8F3ED; border-top-color: #E6D5C3; }
.light .vc-btn {
  background: rgba(110,44,18,0.07);
  border-color: rgba(110,44,18,0.2);
  color: #6B5648;
}
.light .vc-btn:hover { background: rgba(110,44,18,0.12); color: #2B1B12; }
.light .vc-btn.end { background: #C65A3D; color: #FFFDF9; }

/* ── CONTENT MANAGEMENT (cm2) ── */
.light .cm2-page { background: #F8F3ED; }
.light .cm2-header {
  background: #FFFDF9;
  border-bottom-color: #E6D5C3;
}
.light .cm2-header-title { color: #2B1B12; }
.light .cm2-stat-card { background: #FFFDF9; border-color: #E6D5C3; }
.light .cm2-stat-val { color: #2B1B12; }
.light .cm2-stat-label { color: #9C8778; }
.light .cm2-filter-bar { background: #F3E9DD; border-color: #E6D5C3; }
.light .cm2-search {
  background: #FFFDF9;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .cm2-content-card { background: #FFFDF9; border-color: #E6D5C3; }
.light .cm2-content-card:hover { border-color: rgba(110,44,18,0.3); box-shadow: 0 4px 18px rgba(110,44,18,0.08); }
.light .cm2-content-title { color: #2B1B12; }
.light .cm2-content-meta { color: #9C8778; }
.light .cm2-preview-panel { background: #FFFDF9; border-left-color: #E6D5C3; }
.light .cm2-preview-title { color: #2B1B12; }
.light .cm2-action-item { color: #6B5648; }
.light .cm2-action-item:hover { background: #F3E9DD; color: #2B1B12; }

/* ── TEST MODE ── */
.light .test-mode-page { background: #F8F3ED; }
.light .test-setup-card { background: #FFFDF9; border-color: #E6D5C3; }
.light .test-setup-title { color: #2B1B12; }
.light .test-setup-sub { color: #9C8778; }
.light .test-task-row { border-bottom-color: #E6D5C3; color: #2B1B12; }
.light .test-task-row:hover { background: #F8F3ED; }

/* ── REPORTS PAGE ── */
.light .reports-page { background: #F8F3ED; }
.light .rpt-section-hdr { color: #2B1B12; }
.light .rpt-tab { color: #9C8778; border-bottom-color: transparent; }
.light .rpt-tab.active { color: #6E2C12; border-bottom-color: #6E2C12; }

/* ── TASKS / EVALUATIONS ── */
.light .task-card { background: #FFFDF9; border-color: #E6D5C3; }
.light .task-card:hover { border-color: rgba(110,44,18,0.3); }
.light .eval-card { background: #FFFDF9; border-color: #E6D5C3; }
.light .eval-status-badge.pending { background: rgba(216,155,60,0.1); color: #A3471B; border-color: rgba(216,155,60,0.2); }
.light .eval-status-badge.approved { background: rgba(94,139,85,0.1); color: #5E8B55; border-color: rgba(94,139,85,0.2); }

/* ── SHARE CODE PANEL ── */
.light .sc2-panel { background: #FFFDF9; border-color: #E6D5C3; }
.light .sc2-share-btn {
  background: rgba(110,44,18,0.06);
  border-color: rgba(110,44,18,0.18);
  color: #6B5648;
}
.light .sc2-share-btn:hover { background: rgba(110,44,18,0.1); color: #2B1B12; }
.light .sc2-code-display {
  background: #F3E9DD;
  border-color: #E6D5C3;
  color: #2B1B12;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

/* ── ATTENDANCE ── */
.light .att-row { border-bottom-color: #E6D5C3; }
.light .att-row:hover { background: rgba(110,44,18,0.02); }
.light .att-name { color: #2B1B12; }
.light .att-time { color: #9C8778; }
.light .att-badge.present { background: rgba(94,139,85,0.1); color: #5E8B55; }
.light .att-badge.absent { background: rgba(198,90,61,0.1); color: #C65A3D; }

/* ── LANDING PAGE ── */
.light .lp-feat { background: #F3E9DD; }
.light .lp-role-block { background: #FFFDF9; }
.light .lp-slide { background: #FFFDF9; }

/* ── STUDENT DASHBOARD HOME CARDS ── */
.light .sd-stat-card {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110,44,18,0.04);
}
.light .sd-stat-card:hover { border-color: rgba(110,44,18,0.25); transform: translateY(-2px); }
.light .sd-hub-item { color: #6B5648; border-bottom-color: #E6D5C3; }
.light .sd-hub-item:hover { background: #F3E9DD; color: #2B1B12; }
.light .sd-hub-arrow { color: #9C8778; }
.light .sd-hub-item:hover .sd-hub-arrow { color: #6E2C12; }

/* ── PERSONALIZED SUPPORT SIDEBAR CARD ── */
.light .ps-card {
  background: #F3E9DD;
  border-color: rgba(110,44,18,0.15);
}
.light .ps-card-title { color: #2B1B12; }
.light .ps-card-desc { color: #6B5648; }

/* ── CLASS AI COPILOT ── */

/* ── PREMIUM LIGHT-THEME CHATBOT (Black + Gold + Silver) ── */
.light .copilot-window,
.light .student-copilot-panel {
  background: linear-gradient(165deg, #1c1c1f 0%, #121214 100%) !important;
  border: 1px solid rgba(212,175,55,0.35);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 0 0 1px rgba(192,192,192,0.08),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.light .copilot-header,
.light .student-copilot-header {
  background: linear-gradient(135deg, #1a1a1d 0%, #2b2b30 55%, #3a2f12 100%) !important;
  border-bottom: 1px solid rgba(212,175,55,0.3);
}
.light .copilot-header::before,
.light .student-copilot-header::before {
  background: linear-gradient(90deg, rgba(212,175,55,0.08), transparent, rgba(192,192,192,0.06));
}
.light .copilot-title,
.light .student-copilot-title { color: #F5E6C8 !important; }
.light .copilot-subtitle,
.light .student-copilot-sub { color: rgba(245,230,200,0.6) !important; }

/* Header avatar in light mode */
.light .copilot-hdr-avatar {
  border-color: rgba(212,175,55,0.6);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 14px rgba(212,175,55,0.4), 0 4px 12px rgba(0,0,0,0.4);
}
.light .copilot-hdr-online-dot {
  border-color: #1a1a1d;
}
.light .copilot-online-dot-pulse {
  background: #22c55e;
}

.light .copilot-hbtn, .light .copilot-close,
.light .student-copilot-close {
  background: rgba(192,192,192,0.1);
  border: 1px solid rgba(212,175,55,0.25);
  color: rgba(245,230,200,0.85);
}
.light .copilot-hbtn:hover, .light .copilot-close:hover,
.light .student-copilot-close:hover {
  background: rgba(212,175,55,0.18);
  border-color: rgba(212,175,55,0.5);
  color: #F5E6C8;
}

/* Mode bar / chips */
.light .copilot-modebar { background: rgba(255,255,255,0.03); border-bottom-color: rgba(192,192,192,0.12); }
.light .copilot-mode-btn { color: rgba(245,230,200,0.55); }
.light .copilot-mode-btn:hover { color: #F5E6C8; background: rgba(212,175,55,0.08); }
.light .copilot-mode-btn.active { color: #D4AF37; border-bottom-color: #D4AF37; }
.light .copilot-chips { border-bottom-color: rgba(192,192,192,0.12); }
.light .copilot-chip,
.light .sc-quick-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(192,192,192,0.2);
  color: rgba(245,230,200,0.75);
}
.light .copilot-chip:hover,
.light .sc-quick-btn:hover {
  border-color: #D4AF37;
  color: #F5E6C8;
  background: rgba(212,175,55,0.1);
}

/* Messages area */
.light .copilot-messages,
.light .sc-messages { background: transparent; }
.light .copilot-messages::-webkit-scrollbar-thumb,
.light .sc-messages::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.25); }

/* Message row avatars in light mode */
.light .copilot-msg-avatar.ai {
  border-color: rgba(212,175,55,0.5);
  box-shadow: 0 0 10px rgba(212,175,55,0.3);
}
.light .copilot-msg-avatar.teacher {
  border-color: rgba(212,175,55,0.4);
}
.light .copilot-teacher-initials {
  background: linear-gradient(135deg, rgba(212,175,55,0.5), rgba(180,140,30,0.7));
  border-color: rgba(212,175,55,0.6);
}
.light .copilot-msg-online-dot {
  border-color: #1a1a1d;
}

/* Sender labels */
.light .copilot-sender-label { color: rgba(245,230,200,0.4); }
.light .copilot-msg-row.user .copilot-sender-label { color: rgba(212,175,55,0.75); }

/* AI badge small */
.light .copilot-ai-badge-sm {
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.08));
  border-color: rgba(212,175,55,0.35);
  color: #D4AF37;
}

/* Bot bubble — dark metallic glass with silver border */
.light .copilot-bubble.bot,
.light .sc-msg.bot .sc-bubble {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(192,192,192,0.22) !important;
  color: #F1ECE2 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.light .copilot-bubble a { color: #D4AF37; }

/* User bubble — gold gradient */
.light .copilot-bubble.user,
.light .sc-msg.user .sc-bubble {
  background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(212,175,55,0.1)) !important;
  border: 1px solid rgba(212,175,55,0.38) !important;
  color: #F5E6C8 !important;
  box-shadow: 0 4px 16px rgba(212,175,55,0.15);
}
.light .copilot-ts, .light .sc-ts { color: rgba(245,230,200,0.35) !important; }

/* Typing / thinking indicators */
.light .copilot-typing, .light .copilot-thinking,
.light .sc-typing {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(192,192,192,0.2) !important;
}
.light .copilot-thinking-text { color: rgba(245,230,200,0.5) !important; }
.light .copilot-thinking-dots span,
.light .copilot-dot, .light .sc-dot { background: #D4AF37 !important; }

/* Input row & input */
.light .copilot-input-row,
.light .sc-input-row {
  background: rgba(0,0,0,0.2) !important;
  border-top: 1px solid rgba(212,175,55,0.2) !important;
}
.light .copilot-input,
.light .sc-input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(192,192,192,0.25) !important;
  color: #F1ECE2 !important;
}
.light .copilot-input:focus,
.light .sc-input:focus {
  border-color: #D4AF37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
}
.light .copilot-input::placeholder,
.light .sc-input::placeholder { color: rgba(245,230,200,0.35) !important; }

/* Send / mic buttons — gold accent */
.light .copilot-send, .light .sc-send {
  background: linear-gradient(135deg, #D4AF37, #B8860B) !important;
  color: #1A1A1A !important;
  box-shadow: 0 2px 10px rgba(212,175,55,0.45) !important;
}
.light .copilot-send:hover:not(:disabled), .light .sc-send:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(212,175,55,0.6) !important;
}
.light .copilot-mic {
  background: rgba(255,255,255,0.05);
  border-color: rgba(192,192,192,0.25);
  color: rgba(245,230,200,0.7);
}
.light .copilot-mic:hover { border-color: #D4AF37; color: #D4AF37; }

/* Action chips inside messages */
.light .copilot-action-btn {
  border-color: rgba(212,175,55,0.35);
  background: rgba(212,175,55,0.08);
  color: #D4AF37;
}
.light .copilot-action-btn:hover { background: rgba(212,175,55,0.18); border-color: #D4AF37; }

/* AI badge */
.light .copilot-ai-badge {
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(192,192,192,0.1)) !important;
  border: 1px solid rgba(212,175,55,0.35) !important;
  color: #D4AF37 !important;
}
.light .sc-empty, .light .student-copilot-no-task { color: rgba(245,230,200,0.35) !important; }

/* ── TEACHER DB CSS VARIABLES override (premium dashboard) ── */
.light {
  --db-font: 'Inter', system-ui, sans-serif;
  --sidebar-w: 280px;
  --header-h: 60px;
  --card-radius: 18px;
  --card-shadow: var(--shadow);
}

/* ══════════════════════════════════════════════════════════════════
   COMPREHENSIVE LIGHT MODE — Full Teacher UI System v2
   All missing & broken dark sections fixed below.
   Palette: Ivory #FFFDF9 · Cream #F8F3ED · Border #E6D5C3
   Espresso Brown #2B1B12 · Warm Taupe #6B5648 · Muted #9C8778
══════════════════════════════════════════════════════════════════ */

/* ── CM2 CSS VARIABLE OVERRIDES (Content Management) ── */
.light {
  --cm2-bg0: var(--bg);
  --cm2-bg1: var(--surface);
  --cm2-bg2: var(--surface2);
  --cm2-bg3: var(--surface3);
  --cm2-border: var(--border);
  --cm2-border2: rgba(255, 255, 255, 0.08);
  --cm2-purple: var(--accent);
  --cm2-purple2: var(--accent2);
  --cm2-green: var(--green);
  --cm2-orange: var(--orange);
  --cm2-cyan: var(--accent2);
  --cm2-text1: var(--text);
  --cm2-text2: var(--text2);
  --cm2-text3: var(--text3);
  --cm2-glass: rgba(var(--accent-rgb), 0.035);
  --cm2-glass2: rgba(var(--accent-rgb), 0.055);
}

/* ── CM2 CORE COMPONENTS ── */
.light .cm2-wrap { background: #F8F3ED; color: #2B1B12; }
.light .cm2-header { background: #FFFDF9; border-bottom-color: #E6D5C3; }
.light .cm2-header-title { color: #2B1B12; }
.light .cm2-search {
  background: #FFFDF9;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .cm2-search-input {
  background: #FFFDF9;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .cm2-search-input::placeholder { color: #B8A090; }
.light .cm2-search-input:focus { border-color: rgba(110,44,18,0.4); }
.light .cm2-icon-btn {
  border-color: #E6D5C3;
  background: rgba(255,253,249,0.8);
  color: #6B5648;
}
.light .cm2-icon-btn:hover { background: #F3E9DD; color: #2B1B12; }
.light .cm2-tabs-bar { background: #FFFDF9; border-bottom-color: #E6D5C3; }
.light .cm2-tab { color: #9C8778; }
.light .cm2-tab:hover { color: #2B1B12; }
.light .cm2-tab.active { color: #6E2C12; border-bottom-color: #6E2C12; }
.light .cm2-filter-bar { background: #F3E9DD; border-color: #E6D5C3; }
.light .cm2-dropdown {
  background: #FFFDF9;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .cm2-stats-row { border-color: #E6D5C3; background: #FFFDF9; }
.light .cm2-stat-card { background: #FFFDF9; border-color: #E6D5C3; }
.light .cm2-stat-icon-wrap { background: rgba(110,44,18,0.08); border-color: rgba(110,44,18,0.15); }
.light .cm2-stat-val { color: #2B1B12; }
.light .cm2-stat-lbl { color: #9C8778; }
.light .cm2-sidebar { background: #FFFDF9; border-right-color: #E6D5C3; }
.light .cm2-content-list { background: #F8F3ED; }
.light .cm2-row {
  background: #FFFDF9;
  border-color: #E6D5C3;
}
.light .cm2-row:hover { background: #F3E9DD; border-color: rgba(110,44,18,0.2); }
.light .cm2-row.selected { background: rgba(110,44,18,0.04); border-color: rgba(110,44,18,0.25); }
.light .cm2-row-title { color: #2B1B12; }
.light .cm2-row-meta { color: #9C8778; }
.light .cm2-row-thumb { background: #F3E9DD; border-color: #E6D5C3; }
.light .cm2-preview-panel { background: #FFFDF9; border-left-color: #E6D5C3; }
.light .cm2-preview-title { color: #2B1B12; }
.light .cm2-section-heading { color: #9C8778; }

/* CM2 Upload Zone — fixes the dark navy upload area in light mode */
.light .cm2-upload-panel { background: #F8F3ED; }
.light .cm2-upload-card { background: #FFFDF9; border-color: #E6D5C3; }
.light .cm2-upload-card-title { color: #2B1B12; }
.light .cm2-upload-zone {
  border-color: rgba(110,44,18,0.25);
  background: rgba(110,44,18,0.03);
}
.light .cm2-upload-zone:hover,
.light .cm2-upload-zone.dragover {
  border-color: rgba(110,44,18,0.5);
  background: rgba(110,44,18,0.07);
}
.light .cm2-form-group label { color: #6B5648; }
.light .cm2-form-group input,
.light .cm2-form-group textarea {
  background: #F8F3ED;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .cm2-form-group input::placeholder,
.light .cm2-form-group textarea::placeholder { color: #B8A090; }
.light .cm2-form-group input:focus,
.light .cm2-form-group textarea:focus { border-color: rgba(110,44,18,0.45); }
.light .cm2-link-bar input {
  background: #F8F3ED;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .cm2-add-link-btn {
  background: #6E2C12;
  color: #FFFDF9;
}
.light .cm2-edit-btn {
  background: linear-gradient(135deg, #6E2C12, #8B451E);
  box-shadow: 0 4px 14px rgba(110,44,18,0.2);
}
.light .cm2-action-icon-btn {
  border-color: #E6D5C3;
  background: #F3E9DD;
  color: #6B5648;
}
.light .cm2-action-icon-btn:hover { background: #EAD9C8; color: #2B1B12; }
.light .cm2-empty { color: #6B5648; }
.light .cm2-empty-title { color: #2B1B12; }
.light .cm2-empty-sub { color: #9C8778; }

/* ── TI2 TEACHING INTELLIGENCE CARD ── */
.light .ti2-banner {
  background: linear-gradient(135deg, #FFFDF9 0%, #F8EDD9 40%, #F3E4C8 70%, #F8EDD9 100%);
  border: 1px solid #DCC9A8;
  box-shadow: 0 4px 24px rgba(110,44,18,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
}
.light .ti2-neural-canvas { opacity: 0.12; filter: sepia(1) hue-rotate(20deg); }
.light .ti2-glow-orb.a {
  background: radial-gradient(circle, rgba(216,155,91,0.22) 0%, transparent 70%);
}
.light .ti2-glow-orb.b {
  background: radial-gradient(circle, rgba(110,44,18,0.14) 0%, transparent 70%);
}
.light .ti2-badge {
  background: linear-gradient(135deg, rgba(110,44,18,0.12), rgba(216,155,91,0.12));
  border-color: rgba(110,44,18,0.3);
  box-shadow: 0 0 14px rgba(110,44,18,0.12);
  animation: none;
}
.light .ti2-title { color: #2B1B12; }
.light .ti2-subtitle { color: #9C8778; }
.light .ti2-insight-row { color: #6B5648; }
.light .ti2-dot { background: rgba(110,44,18,0.2); }
.light .ti2-dot.active {
  background: rgba(110,44,18,0.75);
  box-shadow: 0 0 5px rgba(110,44,18,0.3);
}
.light .ti2-view-btn {
  background: rgba(110,44,18,0.08);
  border-color: rgba(110,44,18,0.25);
  color: #6E2C12;
  box-shadow: none;
}
.light .ti2-view-btn:hover {
  background: rgba(110,44,18,0.14);
  border-color: rgba(110,44,18,0.45);
  box-shadow: 0 4px 14px rgba(110,44,18,0.12);
  transform: translateY(-1px);
  color: #2B1B12;
}

/* ── AI INSIGHTS PANEL (sidebar card) ── */
.light .ai-insights-panel {
  background: linear-gradient(135deg, rgba(110,44,18,0.06), rgba(216,155,91,0.05));
  border: 1px solid rgba(110,44,18,0.15);
}
.light .ai-insights-panel::before {
  background: linear-gradient(90deg, #6E2C12, #D89B5B, #C65A3D);
}
.light .ai-insights-dot {
  background: #6E2C12;
  animation: none;
  box-shadow: none;
}
.light .ai-insights-title {
  background: linear-gradient(90deg, #6E2C12, #A3471B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.light .ai-insights-text { color: #6B5648; }
.light .ai-indicator-dot { background: #E6D5C3; }
.light .ai-indicator-dot.active { background: #6E2C12; }

/* ── TM2 TEST MODE — FULL LIGHT MODE CONVERSION ── */
.light .tm2-page::before {
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(110,44,18,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(216,155,91,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(110,44,18,0.03) 0%, transparent 50%);
}
/* tm2 cards — core panels */
.light .tm2-card {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110,44,18,0.06);
  backdrop-filter: none;
}
.light .tm2-card:hover {
  border-color: rgba(110,44,18,0.3);
  box-shadow: 0 8px 28px rgba(110,44,18,0.10);
}
.light .tm2-card::before {
  background: linear-gradient(90deg, transparent, rgba(110,44,18,0.2), rgba(216,155,91,0.15), transparent);
  opacity: 0.5;
}
.light .tm2-card-glow {
  background: radial-gradient(circle, rgba(216,155,91,0.1) 0%, transparent 70%);
}
.light .tm2-card-label { color: #2B1B12; }
.light .tm2-ai-badge {
  background: linear-gradient(135deg, rgba(110,44,18,0.1), rgba(216,155,91,0.1));
  border-color: rgba(110,44,18,0.2);
  color: #6E2C12;
}
/* tm2 header */
.light .tm2-header-icon {
  background: linear-gradient(135deg, rgba(110,44,18,0.12), rgba(216,155,91,0.12));
  border-color: rgba(110,44,18,0.25);
  box-shadow: 0 0 14px rgba(110,44,18,0.1);
}
.light .tm2-header-title { color: #2B1B12; }
.light .tm2-header-sub { color: #9C8778; }
.light .tm2-launch-btn {
  background: linear-gradient(135deg, #6E2C12, #8B451E);
  box-shadow: 0 4px 18px rgba(110,44,18,0.28);
}
.light .tm2-launch-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #8B451E, #A3471B);
  box-shadow: 0 6px 24px rgba(110,44,18,0.4);
}
/* tm2 inputs */
.light .tm2-input {
  background: #F8F3ED;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .tm2-input:focus {
  border-color: rgba(110,44,18,0.5);
  box-shadow: 0 0 0 3px rgba(110,44,18,0.08);
}
.light .tm2-input::placeholder { color: #B8A090; }
.light .tm2-label { color: #9C8778; }
/* tm2 pills */
.light .tm2-pill {
  border-color: #E6D5C3;
  background: #F3E9DD;
  color: #6B5648;
}
.light .tm2-pill:hover { border-color: rgba(110,44,18,0.35); background: rgba(110,44,18,0.06); color: #2B1B12; }
.light .tm2-pill.active {
  background: linear-gradient(135deg, rgba(110,44,18,0.14), rgba(216,155,91,0.14));
  border-color: rgba(110,44,18,0.45);
  color: #2B1B12;
  box-shadow: 0 0 8px rgba(110,44,18,0.1);
}
.light .tm2-pill-custom {
  border-color: #E6D5C3;
  background: #F3E9DD;
  color: #6B5648;
}
.light .tm2-pill-custom:focus { border-color: rgba(110,44,18,0.4); }
/* tm2 stats summary */
.light .tm2-stats-row {
  background: rgba(110,44,18,0.04);
  border-color: rgba(110,44,18,0.12);
}
.light .tm2-stat-chip { color: #6B5648; }
.light .tm2-stat-chip strong { color: #2B1B12; }
/* tm2 toggle chips */
.light .tm2-toggle-chip {
  background: rgba(94,139,85,0.1);
  border-color: rgba(94,139,85,0.22);
  color: #5E8B55;
}
/* tm2 type selector */
.light .tm2-type-btn {
  border-color: #E6D5C3;
  background: #F3E9DD;
  color: #6B5648;
}
.light .tm2-type-btn:hover { border-color: rgba(110,44,18,0.35); background: rgba(110,44,18,0.06); color: #2B1B12; }
.light .tm2-type-btn.active {
  background: linear-gradient(135deg, #6E2C12, #8B451E);
  border-color: #8B451E;
  color: #FFFDF9;
  box-shadow: 0 4px 14px rgba(110,44,18,0.25);
}
/* tm2 generate button */
.light .tm2-gen-btn {
  background: linear-gradient(135deg, #6E2C12, #8B451E);
  box-shadow: 0 4px 14px rgba(110,44,18,0.2);
}
.light .tm2-gen-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #8B451E, #A3471B);
  box-shadow: 0 6px 20px rgba(110,44,18,0.35);
}
/* tm2 add question bar */
.light .tm2-add-q-bar {
  background: #FFFDF9;
  border-color: #E6D5C3;
}
.light .tm2-add-q-bar::before {
  background: linear-gradient(90deg, transparent, rgba(110,44,18,0.2), transparent);
}
.light .tm2-add-q-plus {
  background: rgba(110,44,18,0.1);
  border-color: rgba(110,44,18,0.2);
}
.light .tm2-add-q-label { color: #2B1B12; }
.light .tm2-add-q-btn {
  background: linear-gradient(135deg, #6E2C12, #8B451E);
  box-shadow: 0 4px 12px rgba(110,44,18,0.22);
}
.light .tm2-add-q-btn:hover { box-shadow: 0 6px 18px rgba(110,44,18,0.35); }
.light .tm2-marks-select {
  background: #F3E9DD;
  border-color: #E6D5C3;
  color: #2B1B12;
}
/* tm2 questions card */
.light .tm2-questions-card {
  background: #FFFDF9;
  border-color: #E6D5C3;
}
.light .tm2-questions-card::before {
  background: linear-gradient(90deg, transparent, rgba(110,44,18,0.2), rgba(216,155,91,0.15), transparent);
}
.light .tm2-q-header { border-bottom-color: #E6D5C3; }
.light .tm2-q-title-text { color: #2B1B12; }
.light .tm2-q-count {
  background: linear-gradient(135deg, rgba(110,44,18,0.12), rgba(216,155,91,0.1));
  border-color: rgba(110,44,18,0.2);
  color: #6E2C12;
}
.light .tm2-select-all-btn {
  border-color: rgba(110,44,18,0.2);
  background: rgba(110,44,18,0.06);
  color: #6E2C12;
}
.light .tm2-select-all-btn:hover { background: rgba(110,44,18,0.12); border-color: rgba(110,44,18,0.35); }
/* tm2 question rows */
.light .tm2-q-row {
  border-color: #E6D5C3;
  background: #F8F3ED;
}
.light .tm2-q-row:hover {
  border-color: rgba(110,44,18,0.3);
  background: rgba(110,44,18,0.04);
  box-shadow: 0 2px 10px rgba(110,44,18,0.06);
}
.light .tm2-q-row.selected {
  border-color: rgba(110,44,18,0.3);
  background: rgba(110,44,18,0.06);
}
.light .tm2-q-drag { color: rgba(110,44,18,0.3); }
.light .tm2-q-checkbox { border-color: rgba(110,44,18,0.35); }
.light .tm2-q-checkbox.checked {
  background: linear-gradient(135deg, #6E2C12, #8B451E);
  border-color: #8B451E;
  box-shadow: 0 0 6px rgba(110,44,18,0.25);
}
.light .tm2-q-num {
  background: rgba(110,44,18,0.08);
  border-color: rgba(110,44,18,0.18);
  color: #6E2C12;
}
.light .tm2-q-type-badge.mcq {
  background: rgba(110,44,18,0.1);
  color: #6E2C12;
  border-color: rgba(110,44,18,0.2);
}
.light .tm2-q-type-badge.short {
  background: rgba(94,139,85,0.1);
  color: #5E8B55;
  border-color: rgba(94,139,85,0.22);
}
.light .tm2-q-type-badge.long {
  background: rgba(216,155,91,0.12);
  color: #A3471B;
  border-color: rgba(216,155,91,0.25);
}
.light .tm2-q-text { color: #2B1B12; }
.light .tm2-q-sub { color: #9C8778; }
.light .tm2-q-marks { color: #9C8778; }
.light .tm2-api-note { color: #9C8778; }
.light .tm2-api-section { color: #6B5648; }

/* ── COMM-V2 TEACHER CHAT PAGE — FULL LIGHT MODE ── */
/* Chat page wrapper */
.light .comm-v2-page { background: #F8F3ED; }

/* Title area */
.light .comm-v2-title-text h2 {
  background: linear-gradient(135deg, #2B1B12 0%, #6E2C12 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.light .comm-v2-title-text p { color: #9C8778; }
.light .comm-v2-title-icon {
  background: linear-gradient(135deg, rgba(110,44,18,0.12), rgba(216,155,91,0.12));
  border-color: rgba(110,44,18,0.25);
  box-shadow: 0 4px 14px rgba(110,44,18,0.1);
}

/* Toggle bar */
.light .comm-v2-toggle-bar {
  background: #FFFDF9;
  border-color: #E6D5C3;
  backdrop-filter: none;
}
.light .comm-v2-toggle-left { color: #2B1B12; }

/* Tabs */
.light .comm-v2-tabs { border-bottom-color: #E6D5C3; }
.light .comm-v2-tab { color: #9C8778; }
.light .comm-v2-tab:hover { color: #6B5648; }
.light .comm-v2-tab.active {
  color: #6E2C12;
  border-bottom-color: #6E2C12;
  text-shadow: none;
}

/* Main chat container — replaces the dark navy glass */
.light .comm-v2-chat-container {
  background: #FFFDF9;
  border-color: #E6D5C3;
  backdrop-filter: none;
  box-shadow: 0 4px 20px rgba(110,44,18,0.06);
}
.light .comm-v2-chat-container::before { display: none; }

/* Chat header */
.light .comm-v2-chat-header {
  background: #F3E9DD;
  border-bottom-color: #E6D5C3;
}
.light .comm-v2-chat-hdr-title { color: #2B1B12; }
.light .comm-v2-chat-hdr-sub { color: #9C8778; }
.light .comm-v2-online-badge {
  color: #6B5648;
  background: #F3E9DD;
  border-color: #E6D5C3;
}
.light .comm-v2-menu-btn {
  background: rgba(110,44,18,0.05);
  border-color: rgba(110,44,18,0.12);
  color: #6B5648;
}
.light .comm-v2-menu-btn:hover { background: rgba(110,44,18,0.10); border-color: rgba(110,44,18,0.25); }

/* Messages area */
.light .comm-v2-messages { scrollbar-color: #CBA888 #F3E9DD; }
.light .comm-v2-messages::-webkit-scrollbar-track { background: #F3E9DD; }
.light .comm-v2-messages::-webkit-scrollbar-thumb { background: #CBA888; }

/* Message bubbles */
.light .comm-v2-bubble {
  background: #F3E9DD;
  color: #2B1B12;
  border-color: rgba(110,44,18,0.1);
  box-shadow: 0 2px 6px rgba(110,44,18,0.06);
}
.light .comm-v2-bubble:hover { border-color: rgba(110,44,18,0.2); }
.light .comm-v2-bubble.teacher-bubble {
  background: linear-gradient(135deg, rgba(110,44,18,0.10) 0%, rgba(216,155,91,0.10) 100%);
  border-color: rgba(110,44,18,0.25);
  box-shadow: 0 4px 14px rgba(110,44,18,0.08);
}
.light .comm-v2-bubble.student-bubble {
  background: linear-gradient(135deg, rgba(216,155,91,0.16) 0%, rgba(11,45,99,0.06) 100%);
  border-color: rgba(110,44,18,0.18);
  color: #2B1B12;
}
.light .comm-v2-sender { color: #6E2C12; }
.light .comm-v2-time { color: #B8A090; }
.light .comm-v2-teacher-badge {
  color: #A3471B;
  background: rgba(216,155,91,0.12);
  border-color: rgba(216,155,91,0.3);
}

/* System messages */
.light .comm-v2-bubble-system {
  color: #9C8778;
  background: rgba(110,44,18,0.05);
  border-color: rgba(110,44,18,0.12);
}
.light .comm-v2-empty { color: #B8A090; }
.light .comm-v2-empty-icon { opacity: 0.25; }
.light .comm-v2-empty-text { color: #9C8778; }

/* Reaction pills */
.light .comm-v2-reaction-pill {
  background: #F3E9DD;
  border-color: #E6D5C3;
  color: #6B5648;
}
.light .comm-v2-reaction-pill:hover { background: rgba(110,44,18,0.08); border-color: rgba(110,44,18,0.25); }

/* Input area */
.light .comm-v2-input-area {
  background: #FFFDF9;
  border-top-color: #E6D5C3;
}
.light .comm-v2-input-field {
  background: #F3E9DD;
  border-color: #E6D5C3;
  color: #2B1B12;
}
.light .comm-v2-input-field:focus {
  border-color: rgba(110,44,18,0.45);
  box-shadow: 0 0 0 3px rgba(110,44,18,0.07);
}
.light .comm-v2-input-field::placeholder { color: #B8A090; }
.light .comm-v2-icon-btn {
  background: rgba(110,44,18,0.05);
  border-color: rgba(110,44,18,0.12);
  color: #9C8778;
}
.light .comm-v2-icon-btn:hover { background: rgba(110,44,18,0.10); border-color: rgba(110,44,18,0.25); color: #6B5648; }
.light .comm-v2-send-btn {
  background: linear-gradient(135deg, #6E2C12, #8B451E);
  box-shadow: 0 4px 14px rgba(110,44,18,0.25);
}
.light .comm-v2-send-btn:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(110,44,18,0.4);
}

/* Students sidebar panel — replaces dark navy glass */
.light .comm-v2-students-panel {
  background: #FFFDF9;
  border: 1px solid #E6D5C3;
  backdrop-filter: none;
  box-shadow: 0 4px 18px rgba(110,44,18,0.06);
}
.light .comm-v2-students-header {
  background: #F3E9DD;
  border-bottom-color: #E6D5C3;
}
.light .comm-v2-students-title { color: #2B1B12; }
.light .comm-v2-students-count { color: #9C8778; }
.light .comm-v2-student-row:hover { background: rgba(110,44,18,0.04); }
.light .comm-v2-student-name { color: #2B1B12; }
.light .comm-v2-student-sub { color: #9C8778; }
.light .comm-v2-student-online-dot { border-color: #FFFDF9; }

/* Chat file attachments */
.light .chat-file-card {
  background: #F3E9DD;
  border-color: #E6D5C3;
  box-shadow: 0 2px 8px rgba(110,44,18,0.06);
}
.light .chat-file-card:hover {
  background: rgba(110,44,18,0.06);
  border-color: rgba(110,44,18,0.25);
  box-shadow: 0 4px 14px rgba(110,44,18,0.10);
}
.light .chat-file-info .fn { color: #2B1B12; }
.light .chat-file-info .fs { color: #9C8778; }

/* Reaction picker */
.light .comm-v2-reaction-picker,
.light .chat-reaction-picker {
  background: rgba(255,253,249,0.92);
  border-color: #E6D5C3;
  box-shadow: 0 12px 36px rgba(110,44,18,0.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.light .chat-reaction-picker button:hover { background: rgba(110,44,18,0.08); }

/* Chat message actions menu */
.light .chat-msg-actions {
  background: rgba(255,253,249,0.92);
  border-color: #E6D5C3;
  box-shadow: 0 6px 20px rgba(110,44,18,0.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.light .chat-msg-action-btn { color: #6B5648; }
.light .chat-msg-action-btn:hover { background: rgba(110,44,18,0.08); color: #2B1B12; }
.light .chat-moderation-menu {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 12px 36px rgba(110,44,18,0.12);
}
.light .chat-moderation-menu button { color: #6B5648; }
.light .chat-moderation-menu button:hover { background: rgba(110,44,18,0.06); }
.light .chat-moderation-menu button.danger { color: #C65A3D; }
.light .chat-moderation-menu button.danger:hover { background: rgba(198,90,61,0.08); }

/* System message */
.light .chat-system-msg {
  color: #9C8778;
  background: rgba(110,44,18,0.04);
  border-color: rgba(110,44,18,0.10);
}

/* Chat reply preview */
.light .chat-reply-preview {
  background: rgba(110,44,18,0.05);
  border-left-color: rgba(110,44,18,0.4);
  color: #6B5648;
}
.light .chat-reply-preview strong { color: #6E2C12; }
.light .chat-reply-indicator {
  background: rgba(110,44,18,0.06);
  border-left-color: rgba(110,44,18,0.5);
  color: #6E2C12;
}
.light .chat-reply-indicator:hover { background: rgba(110,44,18,0.12); }

/* ── HEADER ICON BUTTONS — light mode ── */
.light .hdr-icon-btn {
  background: rgba(110,44,18,0.06);
  border-color: rgba(110,44,18,0.12);
  color: #6B5648;
}
.light .hdr-icon-btn:hover {
  background: rgba(110,44,18,0.12);
  color: #2B1B12;
  border-color: rgba(110,44,18,0.25);
  box-shadow: 0 4px 12px rgba(110,44,18,0.12);
}
.light .hdr-class-code {
  background: rgba(110,44,18,0.06);
  border-color: rgba(110,44,18,0.15);
}
.light .hdr-class-code-label { color: #9C8778; }
.light .hdr-class-code-value { color: #6E2C12; }

/* ── HS2 — HERO STATUS AVATAR ── */
.light .hs2-avatar-ring {
  background: linear-gradient(135deg, #F3E9DD, #EAD9C8);
  border-color: rgba(110,44,18,0.35);
  animation: none;
  box-shadow: 0 0 0 3px rgba(110,44,18,0.1), 0 4px 14px rgba(110,44,18,0.08);
}
.light .hs2-initials {
  color: #6E2C12;
  text-shadow: none;
}

/* ── DB STAT VALUES — correct dark text in light mode ── */
.light .db-stat-value.purple { color: #6E2C12; }
.light .db-stat-value.violet { color: #8B451E; }
.light .db-stat-value.blue   { color: #6E2C12; }
.light .db-stat-value.orange { color: #A3471B; }

/* ── WAITING TIP / QUESTION CARD ── */
.light .waiting-tip {
  background: rgba(110,44,18,0.05);
  border-color: rgba(110,44,18,0.15);
  color: #6B5648;
}
.light .waiting-question-card {
  background: rgba(216,155,60,0.06);
  border-color: rgba(216,155,60,0.2);
}
.light .waiting-question-label { color: #A3471B; }

/* ── PERFORMANCE PANEL ── */
.light .perf-panel { background: #F3E9DD; border-color: #E6D5C3; }
.light .perf-panel-title { color: #9C8778; }
.light .perf-stats { border-color: #E6D5C3; }
.light .perf-stat { background: #FFFDF9; }
.light .perf-stat:not(:last-child) { border-right-color: #E6D5C3; }
.light .perf-stat-lbl { color: #9C8778; }

/* ── STUDENT WAITING ROOM PANEL ── */
.light .db-waiting-row { border-bottom-color: #E6D5C3; }

/* ── GENERAL TYPOGRAPHY FIXES ── */
.light .db-hero-title { color: #2B1B12; }
.light .db-hero-subtitle { color: #9C8778; }
.light .db-hero-meta { color: #6B5648; }

/* ══════════════════════════════════════════════════
   PREMIUM CHAT UI — Modern Messaging Experience
══════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes msgSlideIn {
  from { opacity:0; transform:translateY(10px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)   scale(1); }
}
@keyframes msgSlideInRight {
  from { opacity:0; transform:translateY(10px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)   scale(1); }
}

/* ── Chat Area Container ── */
.chat-area {
  display:flex; flex-direction:column;
  height:480px;
  border-radius:16px;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
}

/* ── Scrollable Messages ── */
.chat-messages {
  flex:1; overflow-y:auto;
  padding:20px 16px;
  display:flex; flex-direction:column;
  gap:4px;
  background:var(--bg);
  scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar { width:5px; }
.chat-messages::-webkit-scrollbar-track { background:transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background:var(--surface3); border-radius:10px;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background:var(--text3); }

/* ── Message Wrapper (flex row: avatar + bubble col) ── */
.chat-msg-wrap {
  display:flex;
  align-items:flex-end;
  gap:10px;
  max-width:82%;
  animation: msgSlideIn 0.28s cubic-bezier(0.34,1.26,0.64,1) both;
}
.chat-msg-wrap.other { align-self:flex-start; }
.chat-msg-wrap.own   { align-self:flex-end; flex-direction:row-reverse; }

/* ── Avatar Circle ── */
.chat-avatar {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; font-weight:700; letter-spacing:0;
  flex-shrink:0;
  user-select:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  transition:transform 0.2s ease;
}
.chat-avatar:hover { transform:scale(1.08); }
.chat-msg-wrap.other .chat-avatar {
  background:linear-gradient(135deg,var(--accent),var(--accent));
  color:#fff;
}
.chat-msg-wrap.own .chat-avatar {
  background:linear-gradient(135deg,var(--accent),var(--accent));
  color:#fff;
}
/* Teacher special avatar */
.chat-avatar.teacher-av {
  background:linear-gradient(135deg,#f97316,#eab308);
  color:#fff;
}

/* ── Bubble Column (sender name + bubble + time) ── */
.chat-bubble-col {
  display:flex; flex-direction:column; gap:3px;
  max-width:100%;
}
.chat-msg-wrap.own .chat-bubble-col { align-items:flex-end; }
.chat-msg-wrap.other .chat-bubble-col { align-items:flex-start; }

/* ── Sender Name ── */
.chat-sender {
  font-size:0.72rem; font-weight:600;
  color:var(--text3);
  padding:0 4px;
  letter-spacing:0.3px;
}

/* ── The Bubble ── */
.chat-bubble {
  padding:10px 14px;
  border-radius:18px;
  font-size:0.875rem;
  line-height:1.55;
  word-break:break-word;
  white-space:pre-wrap;
  max-width:100%;
  position:relative;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.chat-bubble:hover { transform:translateY(-1px); }

/* Received bubble */
.chat-msg-wrap.other .chat-bubble {
  background:var(--surface2);
  color:var(--text);
  border-bottom-left-radius:5px;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.light .chat-msg-wrap.other .chat-bubble {
  background:#F3E9DD;
  color:#2B1B12;
  box-shadow:0 2px 8px rgba(110,44,18,0.06);
}

/* Sent bubble */
.chat-msg-wrap.own .chat-bubble {
  background:linear-gradient(135deg,var(--accent),var(--accent));
  color:#fff;
  border-bottom-right-radius:5px;
  box-shadow:0 4px 16px rgba(var(--accent-rgb), 0.087);
}

/* ── Timestamp ── */
.chat-time {
  font-size:0.68rem;
  color:var(--text3);
  padding:0 6px;
  opacity:0.75;
  letter-spacing:0.2px;
}
.chat-msg-wrap.own .chat-time { color:var(--text3); }

/* ── Date separator ── */
.chat-date-sep {
  display:flex; align-items:center; gap:10px;
  margin:12px 0 8px;
  color:var(--text3); font-size:0.72rem; font-weight:600;
  letter-spacing:0.5px; text-transform:uppercase;
}
.chat-date-sep::before,.chat-date-sep::after {
  content:''; flex:1; height:1px; background:var(--border);
}

/* ── Chat Input Section ── */
.chat-input-row {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  background:var(--surface);
  border-top:1px solid var(--border);
}
.chat-input-row input {
  flex:1;
  padding:10px 16px;
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:24px;
  color:var(--text);
  font-size:0.875rem;
  font-family:inherit;
  outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.chat-input-row input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb), 0.03);
}
.chat-input-row input::placeholder { color:var(--text3); }
.chat-input-row input:disabled {
  opacity:0.45; cursor:not-allowed;
}

/* ── Modern Send Button ── */
.chat-send-btn {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem;
  flex-shrink:0;
  box-shadow:0 4px 14px rgba(var(--accent-rgb), 0.1);
  transition:transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s;
}
.chat-send-btn:hover:not(:disabled) {
  transform:scale(1.08);
  box-shadow:0 6px 20px rgba(var(--accent-rgb), 0.125);
}
.chat-send-btn:active:not(:disabled) { transform:scale(0.95); }
.chat-send-btn:disabled {
  opacity:0.4; cursor:not-allowed;
  box-shadow:none;
}

/* ── Empty chat state ── */
.chat-empty {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px; color:var(--text3);
  font-size:0.875rem; text-align:center; padding:24px;
}
.chat-empty-icon { font-size:2.5rem; opacity:0.5; }

/* ── Mobile tweaks ── */
@media (max-width:600px) {
  .chat-area { height:400px; }
  .chat-bubble { font-size:0.9rem; padding:9px 13px; }
  .chat-avatar { width:30px; height:30px; font-size:0.75rem; }
  .chat-msg-wrap { max-width:92%; }
}

/* ── Message grouping: consecutive same-sender messages closer ── */
.chat-msg-wrap + .chat-msg-wrap.other,
.chat-msg-wrap + .chat-msg-wrap.own {
  margin-top:2px;
}
.chat-msg-wrap.other + .chat-msg-wrap.own,
.chat-msg-wrap.own + .chat-msg-wrap.other {
  margin-top:10px;
}

/* ── Bubble hover emoji reaction hint ── */
.chat-bubble::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(255,255,255,0.0);
  transition:background 0.15s ease;
  pointer-events:none;
}
.chat-bubble:hover::after {
  background:rgba(255,255,255,0.04);
}

/* ── Chat card header ── */
.chat-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 0;
}
.chat-card-header-title {
  font-weight:700; font-size:0.95rem;
  display:flex; align-items:center; gap:8px;
}
.chat-online-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  display:inline-block;
  box-shadow:0 0 0 2px rgba(34,197,94,0.25);
  animation:pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
  0%,100% { box-shadow:0 0 0 2px rgba(34,197,94,0.25); }
  50%      { box-shadow:0 0 0 5px rgba(34,197,94,0.08); }
}

/* ── Smooth send button press ── */
.chat-send-btn svg, .chat-send-btn span {
  transition:transform 0.15s ease;
}
.chat-send-btn:active:not(:disabled) span {
  transform:translateX(3px);
}

/* ── Input character glow on focus ── */
.chat-input-wrap {
  flex:1; position:relative;
}
.chat-input-glow {
  position:absolute; inset:-1px;
  border-radius:24px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  opacity:0;
  transition:opacity 0.25s;
  z-index:0;
  pointer-events:none;
}
.chat-input-row input:focus ~ .chat-input-glow { opacity:0.15; }

/* ══════════════════════════════════════════════════════════════
   COMMUNICATION PAGE V2 — Premium Discord/Notion Redesign
══════════════════════════════════════════════════════════════ */
.comm-v2-page{display:flex;gap:16px;height:calc(100vh - var(--header-h) - 2px);max-height:calc(100vh - var(--header-h) - 2px);overflow:hidden;padding:18px 20px;box-sizing:border-box;}
.comm-v2-left{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:13px;overflow:hidden;}
/* Title row */
.comm-v2-title-row{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.comm-v2-title-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.045),rgba(var(--accent-rgb), 0.013));border:1px solid rgba(var(--accent-rgb), 0.07);display:flex;align-items:center;justify-content:center;font-size:1.35rem;box-shadow:0 4px 20px rgba(var(--accent-rgb), 0.037);flex-shrink:0;}
.comm-v2-title-text h2{font-size:1.4rem;font-weight:800;background:linear-gradient(135deg,#fff 0%,var(--accent2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0 0 2px;letter-spacing:-.02em;line-height:1.2;}
.comm-v2-title-text p{font-size:0.78rem;color:#8F8F8F;margin:0;}
/* Toggle bar */
.comm-v2-toggle-bar{display:flex;align-items:center;justify-content:space-between;background:#121212;border: 1px solid rgba(255, 255, 255, 0.08);border-radius:14px;padding:10px 16px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-shrink:0;}
.comm-v2-toggle-left{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:#e2e8f0;}
.comm-v2-status-enabled{display:flex;align-items:center;gap:5px;font-size:.73rem;font-weight:700;color:#22c55e;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.22);padding:3px 9px;border-radius:20px;}
.comm-v2-status-disabled{display:flex;align-items:center;gap:5px;font-size:.73rem;font-weight:700;color:#ef4444;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.22);padding:3px 9px;border-radius:20px;}
.comm-v2-disable-btn{display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:10px;border:none;cursor:pointer;font-size:.82rem;font-weight:700;background:linear-gradient(135deg,rgba(239,68,68,.9),rgba(220,38,38,.9));color:#fff;box-shadow:0 4px 16px rgba(239,68,68,.3);transition:all .2s ease;}
.comm-v2-disable-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(239,68,68,.45);}
.comm-v2-enable-btn{display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:10px;border:none;cursor:pointer;font-size:.82rem;font-weight:700;background:linear-gradient(135deg,rgba(34,197,94,.85),rgba(22,163,74,.85));color:#fff;box-shadow:0 4px 16px rgba(34,197,94,.3);transition:all .2s ease;}
.comm-v2-enable-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(34,197,94,.45);}
/* Tabs */
.comm-v2-tabs{display:flex;align-items:center;gap:2px;border-bottom:1px solid rgba(255, 255, 255, 0.08);flex-shrink:0;}
.comm-v2-tab{padding:8px 18px 10px;font-size:.875rem;font-weight:600;color:#8F8F8F;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease;margin-bottom:-1px;display:flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--db-font);}
.comm-v2-tab:hover{color:var(--accent2);}
.comm-v2-tab.active{color:var(--accent2);border-bottom-color:var(--accent2);text-shadow:0 0 20px rgba(var(--accent-rgb), 0.087);}
/* Chat glass container */
.comm-v2-chat-container{flex:1;min-height:0;display:flex;flex-direction:column;background:#121212;border: 1px solid rgba(255, 255, 255, 0.08);border-radius:18px;overflow:hidden;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25);position:relative;}
.comm-v2-chat-container::before{content:'';position:absolute;top:0;left:0;right:0;height:100px;background:linear-gradient(180deg,rgba(var(--accent-rgb), .055) 0%,transparent 100%);pointer-events:none;z-index:0;}
/* Chat header */
.comm-v2-chat-header{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid rgba(255, 255, 255, 0.08);background:#181818;flex-shrink:0;position:relative;z-index:1;}
.comm-v2-chat-header-left{display:flex;align-items:center;gap:12px;}
.comm-v2-chat-hdr-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent));display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;box-shadow:0 4px 12px rgba(var(--accent-rgb), 0.1);}
.comm-v2-chat-hdr-title{font-size:.92rem;font-weight:700;color:#fff;margin:0 0 2px;}
.comm-v2-chat-hdr-sub{font-size:.7rem;color:#8F8F8F;margin:0;}
.comm-v2-chat-header-right{display:flex;align-items:center;gap:10px;}
.comm-v2-online-badge{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;color:#e2e8f0;background:rgba(11, 11, 11, .8);border:1px solid rgba(255, 255, 255, 0.08);padding:5px 12px;border-radius:20px;}
.comm-v2-online-dot-green{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.6);display:inline-block;animation:cv2PulseGreen 2s ease-in-out infinite;flex-shrink:0;}
@keyframes cv2PulseGreen{0%,100%{box-shadow:0 0 6px rgba(34,197,94,.6);}50%{box-shadow:0 0 12px rgba(34,197,94,.9);}}
.comm-v2-menu-btn{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--accent2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;transition:all .2s ease;line-height:1;padding:0;}
.comm-v2-menu-btn:hover{background:rgba(var(--accent-rgb), 0.35);border-color:rgba(255, 255, 255, 0.08);}
/* Messages */
.comm-v2-messages{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;scroll-behavior:smooth;}
.comm-v2-messages::-webkit-scrollbar{width:4px;}
.comm-v2-messages::-webkit-scrollbar-track{background:transparent;}
.comm-v2-messages::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb), 0.35);border-radius:4px;}
.comm-v2-messages::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb), .45);}
/* Message row */
.comm-v2-msg-row{display:flex;align-items:flex-start;gap:10px;max-width:78%;animation:cv2SlideIn .26s cubic-bezier(.34,1.26,.64,1) both;}
@keyframes cv2SlideIn{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.chat-msg-wrapper{display:flex;flex-direction:column;}
.chat-msg-wrapper.teacher-msg{align-items:flex-start;align-self:flex-start;}
.chat-msg-wrapper.student-msg{align-items:flex-end;align-self:flex-end;}
.comm-v2-msg-row.teacher-row{max-width:80%;}
.comm-v2-msg-row.student-row{max-width:78%;flex-direction:row-reverse;}
.comm-v2-msg-row.student-row .comm-v2-bubble-col{align-items:flex-end;}
.comm-v2-msg-row.student-row .comm-v2-bubble-header{flex-direction:row-reverse;}
.comm-v2-msg-row.student-row .comm-v2-time{margin-left:0;margin-right:auto;}
.chat-msg-wrapper{transition:background .15s ease;border-radius:14px;padding:4px 2px;}
.chat-msg-wrapper:hover{background:rgba(var(--accent-rgb), .04);}
.light .chat-msg-wrapper:hover{background:rgba(110,44,18,.03);}
/* Avatars */
.comm-v2-msg-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.77rem;font-weight:700;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,.3);color:#fff;overflow:hidden;margin-top:2px;}
.comm-v2-msg-av.teacher-av{background:linear-gradient(135deg,#f97316,#eab308)!important;}
/* Bubble column */
.comm-v2-bubble-col{display:flex;flex-direction:column;gap:4px;flex:0 1 auto;min-width:0;max-width:100%;align-items:flex-start;}
.comm-v2-bubble-header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;width:100%;padding:0 2px;}
.comm-v2-sender{font-size:.8rem;font-weight:700;color:var(--accent2);letter-spacing:.01em;}
.comm-v2-teacher-badge{font-size:.62rem;font-weight:800;color:#f97316;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);padding:1px 6px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px;}
.comm-v2-time{font-size:.66rem;color:#3d4f6e;margin-left:auto;opacity:.85;font-weight:500;}
/* Bubbles */
.comm-v2-bubble{padding:9px 14px;border-radius:4px 16px 16px 16px;font-size:.875rem;line-height:1.6;word-break:break-word;background:#111111;color:#dde4f5;border:1px solid rgba(var(--accent-rgb), 0.03);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;box-shadow:0 2px 8px rgba(0,0,0,.2);position:relative;}
.comm-v2-bubble:hover{transform:translateY(-1px);border-color:rgba(var(--accent-rgb), 0.055);box-shadow:0 4px 14px rgba(0,0,0,.28);}
.comm-v2-bubble.teacher-bubble{background:linear-gradient(135deg,var(--accent) 0%,var(--accent) 100%);border:1px solid rgba(var(--accent-rgb), 0.075);box-shadow:0 4px 16px rgba(var(--accent-rgb), 0.07);color:#fff;border-radius:16px 16px 16px 4px;}
.comm-v2-bubble.student-bubble{background:#1A1A1A;border:1px solid rgba(255, 255, 255, 0.08);border-radius:16px 4px 16px 16px;color:#eef2ff;}
/* Reactions */
.comm-v2-reactions{display:flex;align-items:center;gap:4px;margin-top:3px;}
.comm-v2-reaction-pill{display:flex;align-items:center;gap:4px;background:rgba(11, 11, 11, .8);border:1px solid rgba(255, 255, 255, 0.08);border-radius:20px;padding:2px 8px;font-size:.73rem;cursor:pointer;transition:all .15s ease;}
.comm-v2-reaction-pill:hover{background:rgba(var(--accent-rgb), 0.35);border-color:rgba(255, 255, 255, 0.08);}
/* Empty state */
.comm-v2-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#3d4f6e;text-align:center;padding:32px;}
.comm-v2-empty-icon{font-size:2.4rem;opacity:.4;}
.comm-v2-empty-text{font-size:.875rem;color:#3d4f6e;}
/* Input area */
.comm-v2-input-area{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid rgba(255, 255, 255, 0.08);background:#0B0B0B;flex-shrink:0;position:relative;z-index:1;}
.comm-v2-input-field{flex:1;min-width:0;padding:11px 16px;background:rgba(255, 255, 255, 0.03);border:1.5px solid rgba(var(--accent-rgb), 0.04);border-radius:12px;color:#e2e8f0;font-size:.875rem;font-family:var(--db-font);outline:none;transition:border-color .2s,box-shadow .2s;}
.comm-v2-input-field:focus{border-color:rgba(var(--accent-rgb), 0.12);box-shadow:0 0 0 3px rgba(var(--accent-rgb), 0.018);}
.comm-v2-input-field::placeholder{color:#3d4f6e;}
.comm-v2-input-field:disabled{opacity:.4;cursor:not-allowed;}
.comm-v2-icon-btn{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:#8F8F8F;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;flex-shrink:0;transition:all .2s ease;}
.comm-v2-icon-btn:hover{background:rgba(var(--accent-rgb), 0.35);border-color:rgba(255, 255, 255, 0.08);color:var(--accent2);}
.comm-v2-send-btn{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 16px rgba(var(--accent-rgb), 0.12);transition:transform .18s ease,box-shadow .18s ease;}
.comm-v2-send-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 6px 22px rgba(var(--accent-rgb), 0.155);}
.comm-v2-send-btn:active:not(:disabled){transform:scale(.95);}
.comm-v2-send-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}
/* Tab content (doubts/hands) */
.comm-v2-tab-content{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;}
.comm-v2-tab-content::-webkit-scrollbar{width:4px;}
.comm-v2-tab-content::-webkit-scrollbar-track{background:transparent;}
.comm-v2-tab-content::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb), 0.35);border-radius:4px;}
.comm-v2-doubt-card{background:#111111;border:1px solid rgba(255, 255, 255, 0.08);border-radius:12px;padding:14px 16px;transition:border-color .15s ease;}
.comm-v2-doubt-card:hover{border-color:rgba(255, 255, 255, 0.08);}
/* RIGHT PANEL */
.comm-v2-right{width:278px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
.comm-v2-students-panel{flex:1;min-height:0;display:flex;flex-direction:column;background:#121212;border: 1px solid rgba(255, 255, 255, 0.08);border-radius:18px;overflow:hidden;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:0 8px 40px rgba(0,0,0,.3);}
.comm-v2-sp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid rgba(255, 255, 255, 0.08);flex-shrink:0;}
.comm-v2-sp-title{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:700;color:#e2e8f0;}
.comm-v2-sp-count{font-size:.73rem;color:#22c55e;background:rgba(34,197,94,.1);padding:2px 9px;border-radius:12px;font-weight:700;}
.comm-v2-sp-search{padding:10px 12px;border-bottom:1px solid rgba(255, 255, 255, 0.08);flex-shrink:0;}
.comm-v2-sp-search-wrap{position:relative;}
.comm-v2-sp-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#3d4f6e;font-size:.8rem;pointer-events:none;}
.comm-v2-sp-search-field{width:100%;padding:8px 12px 8px 32px;background:rgba(255, 255, 255, 0.03);border:1px solid rgba(255, 255, 255, 0.08);border-radius:10px;color:#e2e8f0;font-size:.79rem;font-family:var(--db-font);outline:none;transition:border-color .2s;box-sizing:border-box;}
.comm-v2-sp-search-field:focus{border-color:rgba(255, 255, 255, 0.08);}
.comm-v2-sp-search-field::placeholder{color:#3d4f6e;}
.comm-v2-students-list{flex:1;min-height:0;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;}
.comm-v2-students-list::-webkit-scrollbar{width:3px;}
.comm-v2-students-list::-webkit-scrollbar-track{background:transparent;}
.comm-v2-students-list::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb), 0.35);border-radius:4px;}
.comm-v2-student-row{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:10px;transition:background .15s ease;cursor:pointer;}
.comm-v2-student-row:hover{background:rgba(var(--accent-rgb), .07);}
.comm-v2-student-av-wrap{position:relative;flex-shrink:0;}
.comm-v2-student-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.77rem;font-weight:700;color:#fff;}
.comm-v2-student-online-dot{position:absolute;bottom:0;right:0;width:9px;height:9px;border-radius:50%;background:#22c55e;border:2px solid rgba(11, 11, 11, .97);box-shadow:0 0 5px rgba(34,197,94,.55);}
.comm-v2-student-info{flex:1;min-width:0;}
.comm-v2-student-name{font-size:.82rem;font-weight:600;color:#dde4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comm-v2-student-sub{font-size:.69rem;color:#3d4f6e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comm-v2-view-all-btn{margin:6px 10px 10px;padding:9px 14px;background:rgba(var(--accent-rgb), 0.35);border:1px solid rgba(255, 255, 255, 0.08);border-radius:10px;color:var(--accent2);font-size:.81rem;font-weight:600;cursor:pointer;text-align:center;transition:all .2s ease;flex-shrink:0;font-family:var(--db-font);}
.comm-v2-view-all-btn:hover{background:rgba(var(--accent-rgb), 0.35);border-color:rgba(255, 255, 255, 0.08);}
/* Responsive */
@media(max-width:1024px){.comm-v2-right{width:240px;}}
@media(max-width:900px){.comm-v2-right{display:none;}.comm-v2-page{padding:14px 16px;}}
@media(max-width:768px){.comm-v2-page{height:auto;min-height:calc(100vh - 130px);flex-direction:column;overflow:auto;}.comm-v2-chat-container{min-height:380px;}}

/* ── Code Editor ── */
.code-editor{background:#050505;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;font-family:'Fira Code',monospace;font-size:0.875rem;color:#c9d1d9;
  min-height:200px;overflow:auto}
.code-editor textarea{background:transparent;border:none;color:inherit;font-family:inherit;
  font-size:inherit;width:100%;min-height:200px;resize:vertical;outline:none}
.code-output{background:#050505;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px;font-family:monospace;font-size:0.85rem;color:#22c55e;max-height:200px;overflow:auto;
  white-space:pre-wrap}
.code-output.error{color:var(--red)}

/* ── Waiting Room ── */
.waiting-pulse{width:60px;height:60px;border-radius:50%;border:3px solid var(--accent);
  animation:pulse 2s infinite;margin:0 auto 16px}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:0.7}}

/* ── Test Mode ── */
.timer{font-size:2.5rem;font-weight:700;font-family:monospace;
  color:var(--accent);text-align:center;padding:12px;
  background:var(--surface2);border-radius:var(--radius)}
.timer.warn{color:var(--yellow)}
.timer.danger{color:var(--red)}
.leaderboard-row{display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-radius:var(--radius-sm);background:var(--surface2);margin-bottom:6px}
.rank-badge{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:0.8rem}
.rank-1{background:#fbbf24;color:#000}
.rank-2{background:#8F8F8F;color:#000}
.rank-3{background:#b45309;color:#fff}
.rank-n{background:var(--surface3);color:var(--text2)}

/* ── Task Options (MCQ) ── */
.option-btn{display:block;width:100%;text-align:left;padding:12px 16px;
  background:var(--surface2);border:2px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);cursor:pointer;margin-bottom:8px;transition:all 0.2s;font-family:inherit;font-size:0.9rem}
.option-btn:hover{border-color:var(--accent);background:var(--surface3)}
.option-btn.selected{border-color:var(--accent);background:rgba(var(--accent-rgb), 0.35)}
.option-btn.correct{border-color:var(--green);background:rgba(34,197,94,0.1)}
.option-btn.wrong{border-color:var(--red);background:rgba(239,68,68,0.1)}

/* ── Groups ── */
.group-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;transition:border 0.2s}
.group-card:hover{border-color:var(--accent)}
.group-member{display:flex;align-items:center;gap:8px;padding:6px 10px;
  background:var(--surface2);border-radius:6px;margin:4px 0;font-size:0.85rem}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;color:#fff}

/* ── Doubt Panel ── */
.doubt-card{background:var(--surface2);border-radius:var(--radius-sm);padding:12px;margin-bottom:8px}
.doubt-text{font-size:0.9rem;margin-bottom:4px}
.doubt-answer{font-size:0.85rem;color:var(--green);margin-top:6px;
  padding:6px 10px;background:rgba(34,197,94,0.08);border-radius:6px}

/* ── Content Preview ── */
.content-preview{width:100%;border-radius:var(--radius-sm);max-height:300px;object-fit:contain;
  background:var(--surface2)}
.file-card{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--surface2);border-radius:var(--radius-sm);margin-bottom:8px}
.file-icon{font-size:1.5rem}

/* ── Upload Zone ── */
.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:32px;
  text-align:center;cursor:pointer;transition:border 0.2s;color:var(--text2)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--accent);color:var(--text)}
.upload-icon{font-size:2.5rem;margin-bottom:8px}

/* ── Reports / Charts ── */
.chart-container{position:relative;height:260px;padding:4px}

/* ════════════════════════════════════════════
   REPORT CENTER — Student Side (Redesigned)
   Modern Premium Futuristic Dark Theme
════════════════════════════════════════════ */

/* Main wrapper */
.rc-wrap {
  padding: 24px 24px 80px;
  max-width: 1000px;
  margin: 0 auto;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #F1F5F9;
}

/* Header Section */
.rc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.rc-header-title-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.rc-title-new {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.rc-subtitle-new {
  font-size: 0.875rem;
  color: #8F8F8F;
  font-weight: 400;
  margin: 0;
}

/* Export Buttons with Glassmorphism */
.rc-dl-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rc-dl-btn-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #E2E8F0;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}
.rc-dl-btn-new:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.062);
}
.rc-dl-btn-new:active {
  transform: translateY(0);
}

/* Pill Tabs & Sort Row */
.rc-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 16px;
}
.rc-tabs-new {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rc-tab-new {
  padding: 8px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(241, 245, 249, 0.5);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  font-family: inherit;
}
.rc-tab-new:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(241, 245, 249, 0.85);
  transform: translateY(-1px);
}
.rc-tab-new.active {
  background: linear-gradient(135deg, var(--accent), var(--accent));
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.113);
}

/* Custom Sort Dropdown */
.rc-sort-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 12px;
  backdrop-filter: blur(8px);
}
.rc-sort-label {
  font-size: 0.72rem;
  color: rgba(241, 245, 249, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.rc-sort-select {
  background: transparent;
  border: none;
  color: #F1F5F9;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  padding-right: 4px;
}
.rc-sort-select option {
  background: #050505;
  color: #F1F5F9;
}

/* Top Summary Cards Grid */
.rc-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  width: 100%;
}
@media (max-width: 1024px) {
  .rc-summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .rc-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 440px) {
  .rc-summary-grid {
    grid-template-columns: 1fr;
  }
}

.rc-summary-card {
  background: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  text-align: left;
}
.rc-summary-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 15px rgba(255, 255, 255, 0.03);
}

.rc-summary-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  background: linear-gradient(135deg, rgba(var(--card-color-rgb), 0.15), rgba(var(--card-color-rgb), 0.03));
  border: 1px solid rgba(var(--card-color-rgb), 0.25);
  box-shadow: 0 0 12px rgba(var(--card-color-rgb), 0.1);
}

.rc-summary-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rc-summary-title {
  font-size: 0.68rem;
  color: rgba(241, 245, 249, 0.4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-summary-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: 2px;
}
.rc-summary-sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(var(--card-color-rgb), 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Report Cards */
.rc-card-new {
  background: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.rc-card-new:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Glow Border Accents depending on correctness */
.rc-card-new.is-correct {
  border-color: rgba(16, 185, 129, 0.25);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.06), 0 4px 10px rgba(0, 0, 0, 0.1);
}
.rc-card-new.is-correct:hover {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12), 0 8px 20px rgba(0, 0, 0, 0.18);
}

.rc-card-new.is-incorrect {
  border-color: rgba(239, 68, 68, 0.25);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.06), 0 4px 10px rgba(0, 0, 0, 0.1);
}
.rc-card-new.is-incorrect:hover {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.12), 0 8px 20px rgba(0, 0, 0, 0.18);
}

.rc-card-new.is-pending {
  border-color: rgba(var(--accent-rgb), 0.25);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.06), 0 4px 10px rgba(0, 0, 0, 0.1);
}
.rc-card-new.is-pending:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.12), 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* Card internal layout */
.rc-card-top-new {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}
@media (max-width: 640px) {
  .rc-card-top-new {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .rc-card-top-new .rc-ring {
    align-self: center;
  }
}

.rc-card-info-new {
  flex: 1;
  min-width: 0;
}
.rc-card-title-new {
  font-weight: 700;
  font-size: 0.95rem;
  color: #FFFFFF;
  margin-bottom: 4px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-card-meta-new {
  font-size: 0.76rem;
  color: rgba(241, 245, 249, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rc-card-badges-new {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Premium Glass Pills/Chips */
.rc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(241, 245, 249, 0.7);
  backdrop-filter: blur(4px);
}

.rc-pill-task {
  background: rgba(16, 185, 129, 0.08);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.2);
}
.rc-pill-test {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent2);
  border-color: rgba(255, 255, 255, 0.08);
}
.rc-pill-correct {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.25);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.1);
}
.rc-pill-incorrect {
  background: rgba(239, 68, 68, 0.12);
  color: #F87171;
  border-color: rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.1);
}
.rc-pill-pending {
  background: rgba(var(--accent-rgb), 0.12);
  color: #FCD34D;
  border-color: rgba(var(--accent-rgb), 0.25);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.1);
}
.rc-pill-points {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(241, 245, 249, 0.45);
  border-color: rgba(255, 255, 255, 0.08);
}

.rc-chevron-new {
  font-size: 1.15rem;
  color: rgba(241, 245, 249, 0.3);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
  padding: 4px;
}
.rc-card-new:hover .rc-chevron-new {
  color: rgba(241, 245, 249, 0.6);
}

/* Expanded Review Section */
.rc-review-new {
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  animation: rc-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes rc-fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.rc-review-container {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px;
  margin-top: 10px;
  position: relative;
  text-align: left;
}
.rc-review-container.correct {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.01);
}
.rc-review-container.incorrect {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.01);
}

.rc-review-status-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.rc-review-status-icon.correct {
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
}
.rc-review-status-icon.incorrect {
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.15);
}

.rc-q-header-new {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  color: rgba(241, 245, 249, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.rc-q-text-new {
  font-size: 0.9rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.5;
  margin-bottom: 14px;
  padding-right: 32px; /* Ensure space for status icon */
}

/* Stylish MCQ answer options */
.rc-q-opts-new {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .rc-q-opts-new {
    grid-template-columns: 1fr;
  }
}

.rc-q-opt-new {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #1A1A1A;
  color: rgba(241, 245, 249, 0.6);
  transition: all 0.2s ease;
}
.rc-q-opt-new.opt-correct {
  background: rgba(16, 185, 129, 0.12);
  border-color: #10B981;
  color: #34D399;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}
.rc-q-opt-new.opt-wrong {
  background: rgba(239, 68, 68, 0.12);
  border-color: #EF4444;
  color: #F87171;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

/* Short answer display */
.rc-q-ans-new {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.8rem;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rc-q-ans-new .mine {
  color: #F87171;
  font-weight: 600;
}
.rc-q-ans-new .correct {
  color: #34D399;
  font-weight: 600;
}
.rc-q-ans-new .skip {
  color: rgba(var(--accent-rgb), 0.8);
  font-style: italic;
}

/* Feedback Box */
.rc-feedback-box {
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #E2E8F0;
  margin-top: 10px;
}
.rc-feedback-box.incorrect {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.12);
}
.rc-feedback-box-title {
  font-weight: 700;
  font-size: 0.74rem;
  color: #34D399;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.rc-feedback-box.incorrect .rc-feedback-box-title {
  color: #F87171;
}

/* Detail info footer of review */
.rc-q-meta-new {
  font-size: 0.7rem;
  color: rgba(241, 245, 249, 0.3);
  font-weight: 500;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Empty State */
.rc-empty { text-align:center; padding:60px 20px; color:rgba(241,245,249,0.35) }
.rc-empty-icon { font-size:3rem; margin-bottom:12px }
.rc-empty-title { font-size:1rem; font-weight:700; color:rgba(241,245,249,0.55); margin-bottom:6px }
.rc-empty-sub { font-size:0.82rem }

/* Score ring animation */
@keyframes rc-ring-anim {
  from { stroke-dashoffset: var(--rc-ring-start); }
  to { stroke-dashoffset: var(--rc-ring-end); }
}
.rc-ring-circle {
  animation: rc-ring-anim 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── At-risk panel ── */
.risk-badge{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);
  border-radius:6px;padding:4px 10px;font-size:0.8rem;color:var(--red);margin:2px}

/* ── Tabs ── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tab{padding:8px 16px;background:transparent;border:none;color:var(--text2);
  cursor:pointer;font-size:0.875rem;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:all 0.2s;font-family:inherit}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab:hover{color:var(--text)}

/* ── Divider ── */
hr{border:none;border-top:1px solid var(--border);margin:16px 0}

/* ── Section header ── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-title{font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:8px}

/* ── Toast — Premium Floating Notification System ── */
.toasts{
  position:fixed;top:78px;right:18px;z-index:9999;
  display:flex;flex-direction:column;gap:12px;
  max-width:380px;width:100%;pointer-events:none;
}
.toast{
  pointer-events:auto;
  position:relative;display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px 12px 14px;border-radius:16px;
  min-width:280px;max-width:380px;overflow:hidden;
  background:linear-gradient(145deg,rgba(26, 26, 26, .92),rgba(11, 11, 11, .92));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 12px 32px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.03) inset;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  color:#e7e9f5;font-size:0.85rem;line-height:1.45;
  animation:toastSlideIn .45s cubic-bezier(.34,1.56,.64,1) both;
}
.toast.dismissing{animation:toastSlideOut .32s cubic-bezier(.4,0,.6,1) forwards;}
.toast::before{
  content:'';position:absolute;inset:0;border-radius:16px;padding:1px;
  background:linear-gradient(135deg,var(--toast-glow,rgba(var(--accent-rgb), 0.138)),transparent 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;pointer-events:none;
}
.toast::after{
  content:'';position:absolute;top:-30%;right:-20%;width:120px;height:120px;
  background:var(--toast-glow,rgba(var(--accent-rgb), 0.113));filter:blur(40px);
  border-radius:50%;opacity:.35;pointer-events:none;
  animation:toastGlowPulse 2.6s ease-in-out infinite;
}
@keyframes toastGlowPulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}

.toast-icon{
  flex-shrink:0;width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;background:var(--toast-icon-bg,rgba(var(--accent-rgb), .18));
  border:1px solid var(--toast-glow,rgba(var(--accent-rgb), 0.087));
  box-shadow:0 0 16px var(--toast-glow,rgba(var(--accent-rgb), 0.075));
  position:relative;z-index:1;
}
.toast-body{flex:1;min-width:0;position:relative;z-index:1;}
.toast-label{font-size:.78rem;font-weight:800;letter-spacing:.2px;color:var(--toast-accent,var(--accent2));margin-bottom:2px;text-transform:uppercase;}
.toast-msg{flex:1;line-height:1.4;color:#e7e9f5;word-break:break-word;}
.toast-close{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,0.45);opacity:0.85;font-size:.95rem;line-height:1;
  padding:3px 5px;border-radius:6px;transition:all 0.15s;position:relative;z-index:1;
}
.toast-close:hover{opacity:1;color:#fff;background:rgba(255,255,255,0.08)}

/* Progress / auto-close timer bar */
.toast-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,0.06);overflow:hidden;border-radius:0 0 16px 16px;}
.toast-progress-fill{height:100%;background:var(--toast-glow,var(--accent2));box-shadow:0 0 8px var(--toast-glow,var(--accent2));width:100%;transform-origin:left;animation:toastTimer var(--toast-duration,5s) linear forwards;}
.toast:hover .toast-progress-fill{animation-play-state:paused;}
@keyframes toastTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@keyframes toastSlideIn{from{transform:translateX(60px) scale(.95);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
@keyframes toastSlideOut{from{transform:translateX(0) scale(1);opacity:1;max-height:200px}to{transform:translateX(60px) scale(.92);opacity:0;max-height:0}}

/* Category accents */
.toast.success{--toast-glow:rgba(34,197,94,.55);--toast-icon-bg:rgba(34,197,94,.16);--toast-accent:#4ade80;}
.toast.error{--toast-glow:rgba(239,68,68,.55);--toast-icon-bg:rgba(239,68,68,.16);--toast-accent:#f87171;}
.toast.info{--toast-glow:rgba(var(--accent-rgb), 0.138);--toast-icon-bg:rgba(var(--accent-rgb), 0.04);--toast-accent:var(--accent2);}
.toast.warn,.toast.warning{--toast-glow:rgba(234,179,8,.55);--toast-icon-bg:rgba(234,179,8,.16);--toast-accent:#facc15;}
.toast.achievement{--toast-glow:rgba(249,115,22,.55);--toast-icon-bg:rgba(249,115,22,.16);--toast-accent:#fb923c;}
.toast.message{--toast-glow:rgba(var(--accent-rgb), 0.138);--toast-icon-bg:rgba(var(--accent-rgb), 0.04);--toast-accent:var(--accent2);}
.toast.session{--toast-glow:rgba(244,63,94,.55);--toast-icon-bg:rgba(244,63,94,.16);--toast-accent:#fb7185;}
.toast.ai{--toast-glow:rgba(var(--accent-rgb), 0.15);--toast-icon-bg:rgba(var(--accent-rgb), 0.045);--toast-accent:var(--accent2);
  background:linear-gradient(145deg,rgba(var(--accent-rgb), .55),rgba(26, 26, 26, .92));}
.toast.s{--toast-glow:rgba(34,197,94,.55);--toast-icon-bg:rgba(34,197,94,.16);--toast-accent:#4ade80;}

/* ── Light theme ── */
.light .toast{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,248,252,.94));
  border:1px solid rgba(11, 11, 11, 0.08);
  box-shadow:0 10px 28px rgba(11, 11, 11, 0.12),0 0 0 1px rgba(255,255,255,0.6) inset;
  color:#1f2333;
}
.light .toast-msg{color:#2B2B36}
.light .toast-label{color:var(--toast-accent,#6366f1)}
.light .toast-close{color:rgba(31,35,51,0.4)}
.light .toast-close:hover{color:rgba(31,35,51,0.85);background:rgba(31,35,51,0.06)}
.light .toast-progress{background:rgba(20,20,30,0.06)}
.light .toast.ai{background:linear-gradient(145deg,rgba(245,243,255,.97),rgba(255,255,255,.95));}

/* ── Mobile ── */
@media(max-width:600px){
  .toasts{ right:8px; left:8px; top:64px; max-width:unset; }
  .toast{ min-width:unset; max-width:100%; width:100%; }
}

/* ── Mobile ── */
@media(max-width:600px){
  .role-cards{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .nav{padding:0 12px;height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .page,.page-sm{padding:16px}
  .lp-what{grid-template-columns:1fr;gap:32px}
  .lp-roles{grid-template-columns:1fr}
  .lp-stats{grid-template-columns:1fr 1fr}
  .lp-stat-item{border-right:none;border-bottom:1px solid var(--border);padding:28px 16px}
  .lp-h2{font-size:1.8rem}
  .lp-section{padding:44px 20px}
  .lp-features-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .lp-what{grid-template-columns:1fr;gap:40px}
  .lp-roles{grid-template-columns:1fr}
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}

/* ── Task Card Send Enhancements ── */
@keyframes task-sent-glow {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6), 0 4px 24px rgba(0,0,0,0.4); border-color: var(--green); }
  50%  { box-shadow: 0 0 0 6px rgba(34,197,94,0.15), 0 4px 24px rgba(0,0,0,0.4); border-color: var(--green); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0), 0 4px 24px rgba(0,0,0,0.4); border-color: var(--border); }
}
.task-card-sent {
  animation: task-sent-glow 1.8s ease forwards;
}
.sent-badge {
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:20px;font-size:0.72rem;font-weight:700;
  background:rgba(34,197,94,0.15);color:var(--green);
  border:1px solid rgba(34,197,94,0.3);
  animation:fadeIn 0.3s ease;
}
@keyframes fadeIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}

/* ── Task Send Dropdown ── */
.task-send-dropdown {
  position:absolute;top:calc(100% + 6px);right:0;z-index:200;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,0.35);
  min-width:180px;overflow:hidden;
  animation:fadeIn 0.15s ease;
}
.task-send-dropdown-item {
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;font-size:0.85rem;cursor:pointer;
  color:var(--text);transition:background 0.15s;border:none;
  background:transparent;width:100%;text-align:left;font-family:inherit;
}
.task-send-dropdown-item:hover { background:var(--surface2); }
.task-send-dropdown-label {
  font-size:0.72rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:0.06em;
  padding:8px 14px 4px;
}

/* ── Btn click animation ── */
.btn-click { animation:btn-pop 0.15s ease; }
@keyframes btn-pop { 0%{transform:scale(1)} 50%{transform:scale(0.91)} 100%{transform:scale(1)} }

/* ── Misc ── */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}
.mt-24{margin-top:24px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}
.text-sm{font-size:0.875rem}.text-xs{font-size:0.75rem}.text-muted{color:var(--text2)}
.font-mono{font-family:monospace}.font-bold{font-weight:700}
.text-center{text-align:center}.w-full{width:100%}
.hidden{display:none}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.notification-dot{width:8px;height:8px;background:var(--red);border-radius:50%;
  display:inline-block;margin-left:4px;animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.4}}

/* ── Quiz Builder / PDF / Excel Converter ── */
.quiz-order-item{display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;cursor:grab}
.quiz-order-item:hover{border-color:var(--accent)}
.quiz-order-btns{display:flex;flex-direction:column;gap:2px}
.quiz-order-btns button{background:none;border:none;cursor:pointer;color:var(--text3);
  font-size:0.75rem;padding:1px 4px;line-height:1;transition:color 0.15s}
.quiz-order-btns button:hover{color:var(--accent)}
.feedback-card{border-radius:12px;padding:14px 16px;margin-top:12px;font-size:0.9rem}
.feedback-correct{background:rgba(34,197,94,0.1);border:1px solid var(--green)}
.feedback-wrong{background:rgba(239,68,68,0.1);border:1px solid var(--red)}
.feedback-answer-box{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.3);
  border-radius:8px;padding:10px 13px;margin-top:8px;font-size:0.875rem}
.feedback-student-box{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3);
  border-radius:8px;padding:10px 13px;margin-top:8px;font-size:0.875rem}
.pdf-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);
  display:flex;align-items:center;justify-content:center;z-index:300;padding:16px}
.pdf-modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.excel-drop{border:2px dashed var(--border);border-radius:10px;padding:24px;text-align:center;
  cursor:pointer;transition:border 0.2s;position:relative}
.excel-drop:hover{border-color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════
   TEACHER MOTIVATIONAL NOTIFICATION SYSTEM
   Premium animated toast cards with glassmorphism
═══════════════════════════════════════════════════════════════ */

/* ── Container — bottom-left corner for teacher dashboard ── */
.motiv-toasts-container{
  position:fixed;
  bottom:32px;left:28px;
  z-index:9990;
  display:flex;flex-direction:column-reverse;gap:10px;
  max-width:360px;
  pointer-events:none;
}

/* ── Individual motivational toast card ── */
.motiv-toast{
  display:flex;flex-direction:column;
  background:rgba(11, 11, 11, 0.88);
  backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:16px;
  padding:14px 16px 12px;
  min-width:280px;max-width:360px;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events:all;
  position:relative;overflow:hidden;
  animation:motiv-slide-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
  transform-origin:bottom left;
}
.motiv-toast::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--motiv-color-a,var(--accent)),var(--motiv-color-b,var(--accent)));
  border-radius:16px 16px 0 0;
}
.motiv-toast.dismissing{
  animation:motiv-slide-out 0.35s cubic-bezier(0.4,0,1,1) forwards;
}

@keyframes motiv-slide-in{
  0%  {transform:translateX(-60px) scale(0.88);opacity:0}
  60% {transform:translateX(6px) scale(1.01);opacity:1}
  100%{transform:translateX(0) scale(1);opacity:1}
}
@keyframes motiv-slide-out{
  0%  {transform:translateX(0) scale(1);opacity:1}
  100%{transform:translateX(-80px) scale(0.88);opacity:0}
}

/* ── Toast header ── */
.motiv-toast-header{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;
}
.motiv-toast-icon{
  font-size:1.4rem;flex-shrink:0;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.3));
  animation:motiv-icon-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
@keyframes motiv-icon-pop{
  0%{transform:scale(0);opacity:0}
  100%{transform:scale(1);opacity:1}
}
.motiv-toast-content{flex:1;min-width:0}
.motiv-toast-label{
  font-size:0.68rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
  opacity:0.7;margin-bottom:2px;
}
.motiv-toast-msg{
  font-size:0.88rem;font-weight:600;line-height:1.4;
  color:#e8ecff;
}

/* ── Dismiss button ── */
.motiv-toast-close{
  position:absolute;top:10px;right:12px;
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,0.4);font-size:0.9rem;line-height:1;
  padding:2px 4px;border-radius:4px;transition:all 0.15s;
  pointer-events:all;
}
.motiv-toast-close:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.08)}

/* ── Timer progress bar ── */
.motiv-toast-timer{
  height:2px;border-radius:2px;
  background:rgba(255,255,255,0.1);
  margin-top:10px;overflow:hidden;
}
.motiv-toast-timer-fill{
  height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--motiv-color-a,var(--accent)),var(--motiv-color-b,var(--accent)));
  animation:motiv-timer-drain var(--motiv-duration,6s) linear forwards;
}
@keyframes motiv-timer-drain{from{width:100%}to{width:0%}}

/* ── Accent variants ── */
.motiv-toast.fire{border-color:rgba(249,115,22,0.5);
  --motiv-color-a:#f97316;--motiv-color-b:#fb923c}
.motiv-toast.fire::before{background:linear-gradient(90deg,#f97316,#fb923c)}
.motiv-toast.star{border-color:rgba(234,179,8,0.5);
  --motiv-color-a:#eab308;--motiv-color-b:#fbbf24}
.motiv-toast.star::before{background:linear-gradient(90deg,#eab308,#fbbf24)}
.motiv-toast.brain{border-color:rgba(255, 255, 255, 0.08);
  --motiv-color-a:var(--accent);--motiv-color-b:var(--accent)}
.motiv-toast.rocket{border-color:rgba(255, 255, 255, 0.08);
  --motiv-color-a:var(--accent);--motiv-color-b:var(--accent)}
.motiv-toast.rocket::before{background:linear-gradient(90deg,var(--accent),var(--accent))}
.motiv-toast.trophy{border-color:rgba(34,197,94,0.5);
  --motiv-color-a:#22c55e;--motiv-color-b:#10b981}
.motiv-toast.trophy::before{background:linear-gradient(90deg,#22c55e,#10b981)}

/* Light mode ── */
.light .motiv-toast{
  background:rgba(255,253,249,0.95);
  border-color:rgba(110,44,18,0.25);
  box-shadow:0 8px 40px rgba(110,44,18,0.12),0 2px 12px rgba(110,44,18,0.08);
}
.light .motiv-toast-msg{color:#2B1B12}
.light .motiv-toast-close{color:rgba(43,27,18,0.4)}
.light .motiv-toast-close:hover{color:rgba(43,27,18,0.8);background:rgba(43,27,18,0.06)}
.light .motiv-toast-timer{background:rgba(43,27,18,0.1)}

/* ── AI Teaching Insights panel ── */
.ai-insights-panel{
  background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.08),rgba(var(--accent-rgb), 0.06));
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:var(--radius);padding:16px;
  position:relative;overflow:hidden;
}
.ai-insights-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));
}
.ai-insights-header{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
}
.ai-insights-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  animation:ai-pulse 2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes ai-pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--accent-rgb), 0.15)}
  50%{opacity:0.7;box-shadow:0 0 0 5px rgba(var(--accent-rgb), 0.0)}
}
.ai-insights-title{
  font-size:0.78rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.1em;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.ai-insights-text{
  font-size:0.875rem;line-height:1.6;color:var(--text2);
  min-height:40px;
  transition:opacity 0.4s ease;
}
.ai-insights-text.fading{opacity:0}
.ai-insights-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;
}
.ai-insights-indicator{
  display:flex;gap:4px;
}
.ai-indicator-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--border);transition:all 0.3s;
}
.ai-indicator-dot.active{background:var(--accent);transform:scale(1.5)}

/* Mobile ── */
@media(max-width:600px){
  .motiv-toasts-container{
    bottom:16px;left:12px;right:12px;
    max-width:calc(100vw - 24px);
  }
  .motiv-toast{min-width:unset;width:100%}
}

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL CO-PILOT — Portal-rendered, ALWAYS on top, never clipped
   Root causes fixed:
     1. ReactDOM.createPortal → renders directly on <body>, bypassing
        ALL ancestor stacking contexts (transform, filter, will-change)
     2. z-index:9999999 — above every modal, overlay, VC panel, tour
     3. contain:none — prevents CSS Containment from confining the layer
     4. transform:translateZ(0) — forces GPU compositing layer
     5. Desktop: 24px offsets + larger 64px button
══════════════════════════════════════════════════════════════════════ */
.copilot-fab{
  /* CRITICAL POSITION — must never move or be overridden */
  position:fixed !important;
  bottom:24px !important;
  right:24px !important;
  z-index:9999999 !important;

  width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent),var(--accent2));
  color:#fff;font-size:1.5rem;
  box-shadow:0 4px 24px rgba(var(--accent-rgb), 0.138),0 0 0 1px rgba(var(--accent-rgb), 0.075);
  display:flex !important;align-items:center;justify-content:center;
  visibility:visible !important;opacity:1 !important;
  overflow:visible;

  /* GPU compositing — prevents repaint on scroll/layout */
  transform:translateZ(0);
  will-change:transform,box-shadow;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  /* Prevent any containment from clipping this element */
  contain:none;

  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.2s;

  /* Entrance animation */
  animation:copilot-fab-enter 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes copilot-fab-enter{
  from{transform:translateZ(0) scale(0) translateY(20px);opacity:0}
  to{transform:translateZ(0) scale(1) translateY(0);opacity:1}
}

.copilot-fab::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,0.2),transparent);
  pointer-events:none;
}
.copilot-fab:hover{
  transform:translateZ(0) scale(1.1) translateY(-2px);
  box-shadow:0 8px 32px rgba(var(--accent-rgb), 0.188),0 0 0 1px rgba(var(--accent-rgb), 0.125),
             0 0 48px rgba(var(--accent-rgb), 0.3);
}
.copilot-fab .copilot-pulse{
  position:absolute;width:60px;height:60px;border-radius:50%;
  background:rgba(var(--accent-rgb), 0.3);
  animation:copilot-ring 2.5s ease-out infinite;
  pointer-events:none;
}
.copilot-fab .copilot-pulse2{
  position:absolute;width:60px;height:60px;border-radius:50%;
  background:rgba(var(--accent-rgb), 0.2);
  animation:copilot-ring 2.5s ease-out 1.25s infinite;
  pointer-events:none;
}
@keyframes copilot-ring{0%{transform:scale(1);opacity:0.8}100%{transform:scale(1.8);opacity:0}}

/* Normal window */
.copilot-window{
  position:fixed !important;
  bottom:100px;right:24px;
  z-index:9999998 !important;
  width:390px;height:600px;
  background: linear-gradient(160deg, #0e0e10 0%, #050505 100%);
  border:1px solid rgba(var(--accent-rgb), 0.18);
  border-radius:20px;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(var(--accent-rgb), 0.08),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 100px rgba(var(--accent-rgb), 0.04);
  display:flex;flex-direction:column;overflow:hidden;
  animation:copilot-open 0.32s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin:bottom right;
  transition:width 0.3s ease,height 0.3s ease,bottom 0.3s ease,right 0.3s ease,border-radius 0.3s ease;
  contain:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Fullscreen window */
.copilot-window.fullscreen{
  position:fixed !important;inset:0;bottom:0;right:0;
  z-index:9999998 !important;
  width:100vw !important;height:100vh !important;
  border-radius:0 !important;
  animation:none;
}
@keyframes copilot-open{
  from{transform:scale(0.75) translateY(24px);opacity:0;filter:blur(4px)}
  to{transform:scale(1) translateY(0);opacity:1;filter:blur(0)}
}

/* Backdrop when fullscreen */
.copilot-window.fullscreen::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(10,10,11,0.98),rgba(20,20,22,0.99));
  z-index:-1;
}

/* ── PREMIUM HEADER ────────────────────────────────────────────────── */
.copilot-header{
  padding:14px 16px;
  background:linear-gradient(135deg,#0a0a0b 0%,#141416 55%,#1a1208 100%);
  backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
  border-bottom:1px solid rgba(var(--accent-rgb), 0.2);
  position:relative;overflow:hidden;
}
.copilot-header::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--accent-rgb), 0.06),transparent 50%,rgba(var(--accent-rgb), 0.03));
  pointer-events:none;
}
.copilot-header-info{display:flex;align-items:center;gap:12px;position:relative;z-index:1}

/* Header avatar */
.copilot-hdr-avatar-wrap{
  position:relative;flex-shrink:0;
  width:44px;height:44px;
}
.copilot-hdr-avatar{
  width:44px;height:44px;border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(var(--accent-rgb), 0.5);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 14px rgba(var(--accent-rgb), 0.35),
    0 4px 12px rgba(0,0,0,0.4);
  display:block;
}
.copilot-hdr-online-dot{
  position:absolute;bottom:1px;right:1px;
  width:11px;height:11px;border-radius:50%;
  background:#22c55e;
  border:2px solid #0a0a0b;
  box-shadow:0 0 8px rgba(34,197,94,0.7),0 0 16px rgba(34,197,94,0.4);
  animation:hdr-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes hdr-dot-pulse{
  0%,100%{box-shadow:0 0 8px rgba(34,197,94,0.7),0 0 16px rgba(34,197,94,0.35)}
  50%{box-shadow:0 0 12px rgba(34,197,94,1),0 0 24px rgba(34,197,94,0.6)}
}
.copilot-hdr-text{display:flex;flex-direction:column;gap:2px}
.copilot-title{font-weight:700;color:#fff;font-size:0.95rem;letter-spacing:-0.01em}
.copilot-subtitle{
  font-size:0.7rem;color:rgba(255,255,255,0.55);
  display:flex;align-items:center;gap:5px;
}
/* Pulsing green dot inside subtitle */
.copilot-online-dot-pulse{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 5px rgba(34,197,94,0.8);
  flex-shrink:0;
  animation:hdr-dot-pulse 2.4s ease-in-out infinite;
}
.copilot-header-actions{display:flex;align-items:center;gap:4px;position:relative;z-index:1}
.copilot-hbtn{
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.7);cursor:pointer;
  font-size:0.85rem;padding:5px 8px;border-radius:8px;
  transition:all 0.15s;line-height:1;
}
.copilot-hbtn:hover{background:rgba(255,255,255,0.15);color:#fff}
.copilot-close{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.7);cursor:pointer;
  font-size:0.9rem;padding:5px 8px;border-radius:8px;transition:all 0.15s;}
.copilot-close:hover{background:rgba(239,68,68,0.45);color:#fff;border-color:rgba(239,68,68,0.4)}

/* ── MODE BAR ──────────────────────────────────────────────────────── */
.copilot-modebar{
  display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,0.06);flex-shrink:0;
  background:#0a0a0b;overflow-x:auto;scrollbar-width:none;
}
.copilot-modebar::-webkit-scrollbar{display:none}
.copilot-mode-btn{
  padding:8px 14px;font-size:0.76rem;font-weight:600;
  border:none;background:transparent;color:rgba(255,255,255,0.35);cursor:pointer;
  border-bottom:2px solid transparent;transition:all 0.15s;
  white-space:nowrap;font-family:inherit;letter-spacing:0.01em;
}
.copilot-mode-btn:hover{color:rgba(255,255,255,0.7);background:rgba(var(--accent-rgb), 0.05)}
.copilot-mode-btn.active{color:var(--accent);border-bottom-color:var(--accent);background:transparent}

/* ── CHIPS ─────────────────────────────────────────────────────────── */
.copilot-chips{
  padding:10px 12px 8px;display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.copilot-chip{
  padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.6);font-size:0.74rem;cursor:pointer;
  transition:all 0.15s;white-space:nowrap;font-family:inherit;
  display:flex;align-items:center;gap:4px;
}
.copilot-chip:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb), 0.1);transform:translateY(-1px)}

/* ── MESSAGES AREA ──────────────────────────────────────────────────── */
.copilot-messages{
  flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:14px;
  scroll-behavior:smooth;
}
.copilot-messages::-webkit-scrollbar{width:4px}
.copilot-messages::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb), 0.2);border-radius:2px}

/* ── MESSAGE ROW (avatar + column) ────────────────────────────────── */
.copilot-msg-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  max-width:100%;
}
/* Bot: avatar left, column right */
.copilot-msg-row.bot{
  flex-direction:row;
  animation:msg-slide-left 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
/* User: avatar right, column left (reversed) */
.copilot-msg-row.user{
  flex-direction:row-reverse;
  align-self:flex-end;
  animation:msg-slide-right 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes msg-slide-left{
  from{opacity:0;transform:translateX(-16px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes msg-slide-right{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}

/* ── AVATARS inside messages ─────────────────────────────────────── */
.copilot-ai-avatar-wrap{
  position:relative;flex-shrink:0;
  width:36px;height:36px;
}
.copilot-msg-avatar{
  width:36px;height:36px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  display:block;
}
.copilot-msg-avatar.ai{
  border:1.5px solid rgba(var(--accent-rgb), 0.4);
  box-shadow:0 0 10px rgba(var(--accent-rgb), 0.25);
}
.copilot-msg-avatar.teacher{
  border:1.5px solid rgba(var(--accent-rgb), 0.35);
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
/* Teacher initials fallback */
.copilot-teacher-initials{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.4),rgba(180,83,9,0.6));
  border:1.5px solid rgba(var(--accent-rgb), 0.5);
  font-size:0.72rem;font-weight:700;color:#fff;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
/* Online dot on message avatar */
.copilot-msg-online-dot{
  position:absolute;bottom:0px;right:0px;
  width:9px;height:9px;border-radius:50%;
  background:#22c55e;
  border:2px solid #0a0a0b;
  box-shadow:0 0 6px rgba(34,197,94,0.7);
  animation:hdr-dot-pulse 2.4s ease-in-out infinite;
}

/* ── MESSAGE COLUMN ─────────────────────────────────────────────────── */
.copilot-msg-col{
  display:flex;flex-direction:column;gap:4px;
  max-width:75%;
  min-width:0;
}
.copilot-msg-row.user .copilot-msg-col{
  align-items:flex-end;
}
.copilot-msg-row.bot .copilot-msg-col{
  align-items:flex-start;
}

/* ── SENDER LABEL ──────────────────────────────────────────────────── */
.copilot-sender-label{
  font-size:0.65rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(255,255,255,0.35);
  display:flex;align-items:center;gap:6px;
  padding:0 2px;
}
.copilot-msg-row.user .copilot-sender-label{
  color:rgba(var(--accent-rgb), 0.7);
}

/* ── AI BADGE (small, inside sender label) ──────────────────────────── */
.copilot-ai-badge-sm{
  display:inline-flex;align-items:center;
  background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.18),rgba(var(--accent-rgb), 0.08));
  border:1px solid rgba(var(--accent-rgb), 0.3);
  border-radius:10px;padding:1px 6px;font-size:0.58rem;font-weight:700;
  color:var(--accent);letter-spacing:0.05em;
  text-transform:uppercase;
}

/* ── BUBBLES ─────────────────────────────────────────────────────────── */
.copilot-bubble{
  padding:11px 15px;border-radius:18px;
  font-size:0.86rem;line-height:1.65;
  word-break:break-word;position:relative;
  max-width:100%;
}
.copilot-bubble a{color:var(--accent);text-decoration:underline}

/* AI / bot bubble — glassmorphism */
.copilot-bubble.bot{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,0.88);
  border-bottom-left-radius:5px;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
/* Teacher / user bubble — orange gradient */
.copilot-bubble.user{
  background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.22),rgba(var(--accent-rgb), 0.08));
  border:1px solid rgba(var(--accent-rgb), 0.32);
  color:rgba(255,255,255,0.92);
  border-bottom-right-radius:5px;
  box-shadow:0 4px 16px rgba(var(--accent-rgb), 0.1);
}

/* Timestamp */
.copilot-ts{font-size:0.62rem;color:rgba(255,255,255,0.25);padding:0 2px}

/* ── THINKING INDICATOR ─────────────────────────────────────────────── */
.copilot-thinking{
  display:flex;align-items:center;gap:8px;
  padding:11px 15px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:18px;border-bottom-left-radius:5px;
  width:fit-content;
}
.copilot-thinking-text{
  font-size:0.8rem;color:rgba(255,255,255,0.5);
  font-style:italic;
}
.copilot-thinking-dots{
  display:inline-flex;align-items:center;gap:3px;
}
.copilot-thinking-dots span{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);
  animation:copilot-bounce 1.4s ease-in-out infinite;
  opacity:0.7;
}
.copilot-thinking-dots span:nth-child(2){animation-delay:0.2s}
.copilot-thinking-dots span:nth-child(3){animation-delay:0.4s}

/* ── TYPING DOTS ─────────────────────────────────────────────────────── */
.copilot-typing{
  display:flex;align-items:center;gap:4px;padding:12px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:18px;border-bottom-left-radius:5px;
  width:fit-content;
}
.copilot-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:copilot-bounce 1.3s infinite;opacity:0.7}
.copilot-dot:nth-child(2){animation-delay:0.18s}
.copilot-dot:nth-child(3){animation-delay:0.36s}
@keyframes copilot-bounce{0%,60%,100%{transform:translateY(0);opacity:0.7}30%{transform:translateY(-7px);opacity:1}}

/* Action buttons in messages */
.copilot-action-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.copilot-action-btn{
  padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);
  background:rgba(var(--accent-rgb), 0.06);color:var(--accent);
  font-size:0.75rem;cursor:pointer;transition:all 0.15s;font-family:inherit;
}
.copilot-action-btn:hover{background:rgba(var(--accent-rgb), 0.18);border-color:var(--accent)}

/* ── INPUT ROW ──────────────────────────────────────────────────────── */
.copilot-input-row{
  display:flex;gap:8px;padding:10px 12px;
  border-top:1px solid rgba(255,255,255,0.06);flex-shrink:0;
  align-items:center;background:#080809;
}
.copilot-input{
  flex:1;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  border-radius:22px;padding:9px 16px;color:rgba(255,255,255,0.9);font-size:0.855rem;
  font-family:inherit;outline:none;transition:border 0.2s,box-shadow 0.2s;
  resize:none;max-height:120px;overflow-y:auto;line-height:1.4;
}
.copilot-input:focus{border-color:rgba(var(--accent-rgb), 0.6);box-shadow:0 0 0 3px rgba(var(--accent-rgb), 0.08)}
.copilot-input::placeholder{color:rgba(255,255,255,0.25)}
.copilot-input-btns{display:flex;gap:6px;align-items:center;flex-shrink:0}
.copilot-mic{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.55);
  font-size:0.85rem;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.2s;flex-shrink:0;
}
.copilot-mic:hover{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.9);border-color:rgba(var(--accent-rgb), 0.5)}
.copilot-mic.listening{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.5);color:rgba(239,68,68,0.9);animation:mic-pulse 1s ease-in-out infinite}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}
.copilot-send{
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#B45309);color:#fff;
  font-size:0.95rem;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:transform 0.15s,box-shadow 0.15s;
  box-shadow:0 2px 10px rgba(var(--accent-rgb), 0.3);
}
.copilot-send:hover:not(:disabled){transform:scale(1.1);box-shadow:0 4px 18px rgba(var(--accent-rgb), 0.5)}
.copilot-send:disabled{opacity:0.3;cursor:not-allowed;transform:none;box-shadow:none}

/* ── AI BADGE (header/modebar context) ──────────────────────────────── */
.copilot-ai-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.15),rgba(var(--accent-rgb), 0.08));
  border:1px solid rgba(var(--accent-rgb), 0.28);
  border-radius:20px;padding:2px 8px;font-size:0.65rem;font-weight:700;
  color:var(--accent);letter-spacing:0.04em;text-transform:uppercase;
}
.copilot-ai-dot{width:5px;height:5px;border-radius:50%;background:#22c55e;animation:blink 1.5s infinite}

@media(max-width:600px){
  .copilot-window{width:calc(100vw - 20px);right:10px;bottom:80px;height:75vh}
  .copilot-fab{bottom:16px !important;right:16px !important}
  .copilot-window.fullscreen{height:100dvh}
  .copilot-hdr-avatar{width:36px;height:36px}
  .copilot-hdr-avatar-wrap{width:36px;height:36px}
  .copilot-msg-avatar{width:30px;height:30px}
  .copilot-ai-avatar-wrap{width:30px;height:30px}
  .copilot-teacher-initials{width:30px;height:30px;font-size:0.65rem}
  .copilot-msg-col{max-width:calc(100% - 48px)}
}

@media(min-width:601px) and (max-width:768px){
  .copilot-window{width:calc(100vw - 32px);right:16px;bottom:154px;height:70vh}
  .copilot-hdr-avatar{width:38px;height:38px}
  .copilot-hdr-avatar-wrap{width:38px;height:38px}
}

/* ── DESKTOP — premium copilot experience ── */
@media(min-width:769px){
  .copilot-fab{
    width:64px !important;
    height:64px !important;
    font-size:1.65rem;
    bottom:24px !important;
    right:24px !important;
    box-shadow:
      0 6px 28px rgba(var(--accent-rgb), 0.6),
      0 0 0 1px rgba(var(--accent-rgb), 0.35),
      0 0 60px rgba(var(--accent-rgb), 0.15);
  }
  .copilot-window{
    width:430px;
    height:640px;
    bottom:108px;
    right:24px;
    border-radius:22px;
    box-shadow:
      0 28px 90px rgba(0,0,0,0.65),
      0 0 0 1px rgba(var(--accent-rgb), 0.14),
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 0 130px rgba(var(--accent-rgb), 0.05);
    backdrop-filter:blur(0px);
  }
  .copilot-kb-hint{
    display:flex;align-items:center;gap:4px;
    font-size:0.65rem;color:rgba(255,255,255,0.45);
    position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
    white-space:nowrap;pointer-events:none;
    opacity:0;transition:opacity 0.2s;
  }
  .copilot-fab:hover .copilot-kb-hint{opacity:1}
  .copilot-kb-hint kbd{
    background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);
    border-radius:4px;padding:1px 5px;font-family:monospace;font-size:0.6rem;
  }
}

/* ── TABLET — medium breakpoint ── */
@media(min-width:601px) and (max-width:768px){
  .copilot-fab{bottom:80px !important;right:16px !important}
  .copilot-window{width:calc(100vw - 32px);right:16px;bottom:154px;height:70vh}
}

/* ── Copilot badge (new) ── */
.copilot-badge{
  position:absolute;top:-5px;right:-5px;
  min-width:20px;height:20px;border-radius:10px;
  background:var(--red);color:#fff;
  font-size:0.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px;
  border:2px solid var(--bg);
  z-index:2;
  box-shadow:0 2px 6px rgba(239,68,68,0.5);
  animation:blink 1.5s infinite;
  pointer-events:none;
}

/* ── Desktop Keyboard hint tooltip (hidden by default, shown on hover in media query) ── */
.copilot-kb-hint{
  display:none; /* enabled via desktop @media block */
}

/* ── Copilot AI-thinking pulse state ── */
.copilot-fab.is-thinking{
  animation:copilot-thinking-glow 1.2s ease-in-out infinite !important;
}
@keyframes copilot-thinking-glow{
  0%,100%{box-shadow:0 4px 24px rgba(var(--accent-rgb), 0.138),0 0 0 1px rgba(var(--accent-rgb), 0.075)}
  50%{box-shadow:0 6px 36px rgba(var(--accent-rgb), 0.225),0 0 0 2px rgba(var(--accent-rgb), 0.175),0 0 60px rgba(var(--accent-rgb), 0.087)}
}

/* ── Auto Intervention Popup ── */
@keyframes intervention-fadein{
  from{opacity:0;transform:translateY(20px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes intervention-fadeout{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(20px) scale(0.96)}
}
.intervention-popup{
  position:fixed;bottom:96px;left:28px;z-index:99997;
  width:320px;
  background:linear-gradient(145deg,var(--surface),var(--surface2));
  border:1px solid rgba(239,68,68,0.4);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.45),0 0 0 1px rgba(239,68,68,0.15);
  overflow:hidden;
  animation:intervention-fadein 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.intervention-popup.hiding{
  animation:intervention-fadeout 0.3s ease forwards;
}
.intervention-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 10px;
  background:rgba(239,68,68,0.08);
  border-bottom:1px solid rgba(239,68,68,0.2);
}
.intervention-title{
  display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:0.9rem;color:var(--red);
}
.intervention-close{
  background:none;border:none;color:var(--text3);cursor:pointer;
  font-size:1.1rem;line-height:1;padding:2px 6px;border-radius:4px;
  transition:color 0.15s;
}
.intervention-close:hover{color:var(--text)}
.intervention-body{padding:12px 14px}
.intervention-metric{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-size:0.85rem;color:var(--text2);
}
.intervention-metric span{font-weight:600;color:var(--text)}
.intervention-actions{
  margin-top:10px;border-top:1px solid var(--border);padding-top:10px;
}
.intervention-action-label{
  font-size:0.75rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;
}
.intervention-action-item{
  display:flex;align-items:center;gap:6px;
  font-size:0.82rem;color:var(--text2);
  padding:4px 0;
}
.intervention-progress{
  height:3px;background:var(--surface3);border-radius:3px;
  margin-top:12px;overflow:hidden;
}
.intervention-progress-fill{
  height:100%;background:var(--red);border-radius:3px;
  transition:width 0.1s linear;
}

/* ── At-Risk Students Panel ── */
.at-risk-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;margin-top:16px;
}
.at-risk-panel-title{
  font-weight:700;font-size:0.95rem;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.at-risk-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;
  background:var(--surface2);margin-bottom:6px;
  transition:background 0.2s;
}
.at-risk-row:hover{background:var(--surface3)}
.at-risk-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
}
.at-risk-name{flex:1;font-size:0.875rem;font-weight:500}
.at-risk-pct{font-size:0.8rem;font-weight:700;margin-right:4px}
.at-risk-label{font-size:0.72rem;color:var(--text3)}
.at-risk-bar{
  width:60px;height:5px;background:var(--surface3);
  border-radius:3px;overflow:hidden;
}
.at-risk-bar-fill{height:100%;border-radius:3px;transition:width 0.5s ease}

/* ═══════════════════════════════════════════════════════════════
   STUDENT UI ENHANCEMENTS — ALL 10 FEATURES
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Student Live HUD ── */
.student-hud{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:8px 24px;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;font-size:0.78rem;position:sticky;top:60px;z-index:90;
}
.hud-item{display:flex;align-items:center;gap:6px;color:var(--text2)}
.hud-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.hud-dot.green{background:var(--green);box-shadow:0 0 6px var(--green)}
.hud-dot.yellow{background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
.hud-dot.red{background:var(--red)}
.hud-dot.pulse{animation:hud-pulse 2s ease-in-out infinite}
@keyframes hud-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(1.2)}}
.hud-sep{width:1px;height:16px;background:var(--border)}
.hud-progress-track{width:80px;height:5px;background:var(--surface3);border-radius:3px;overflow:hidden}
.hud-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;transition:width 0.5s ease}
.hud-ws-badge{padding:2px 8px;border-radius:20px;font-weight:700;font-size:0.7rem;
  background:rgba(34,197,94,0.12);color:var(--green);border:1px solid rgba(34,197,94,0.3)}
.hud-ws-badge.warn{background:rgba(234,179,8,0.12);color:var(--yellow);border-color:rgba(234,179,8,0.3)}
.teacher-pulse{display:flex;align-items:center;gap:4px;color:var(--text3);font-size:0.72rem}
.teacher-pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:hud-pulse 1.8s ease-in-out infinite}

/* ── 2. Task Progress Bar & Time-spent ── */
.task-progress-bar{
  height:3px;background:var(--surface3);position:relative;overflow:hidden;
  margin-bottom:0;
}
.task-progress-fill{
  height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.task-time-spent{
  display:flex;align-items:center;gap:4px;font-size:0.72rem;color:var(--text3);
  font-family:monospace;padding:2px 8px;background:var(--surface2);
  border-radius:20px;border:1px solid var(--border);
}
@keyframes task-fade-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.task-card-animated{animation:task-fade-in 0.35s cubic-bezier(0.34,1.56,0.64,1)}
.option-btn{transition:all 0.18s cubic-bezier(0.34,1.56,0.64,1)}
.option-btn:active{transform:scale(0.98)}
.option-btn.correct{animation:option-correct 0.4s ease}
.option-btn.wrong{animation:option-wrong 0.4s ease}
@keyframes option-correct{0%,100%{transform:translateX(0)}20%{transform:translateX(4px)}40%{transform:translateX(-2px)}60%{transform:translateX(2px)}}
@keyframes option-wrong{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px)}30%{transform:translateX(6px)}45%{transform:translateX(-4px)}60%{transform:translateX(4px)}}

/* ── 3. Leaderboard toggle ── */
.lb-toggle-btn{
  font-size:0.75rem;padding:3px 10px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;transition:all 0.15s;
}
.lb-toggle-btn:hover{border-color:var(--accent);color:var(--accent)}
.lb-top-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-size:0.7rem;font-weight:700;margin-right:4px;
}
.lb-row-me{border-left:3px solid var(--accent);background:rgba(var(--accent-rgb), 0.35) !important}

/* ── 4. Chat unread dot ── */
.chat-unread-dot{
  width:8px;height:8px;background:var(--red);border-radius:50%;
  display:inline-block;margin-left:6px;
  animation:blink 1.2s infinite;
  vertical-align:middle;
}

/* ── 5. Student Copilot (Premium) ── */
.student-copilot-fab{
  position:fixed !important;
  bottom:24px !important;right:24px !important;left:auto !important;
  z-index:9999999 !important;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#10b981,var(--accent));
  color:#fff;font-size:1.35rem;
  box-shadow:0 4px 22px rgba(var(--accent-rgb), 0.138),0 0 0 1px rgba(16,185,129,0.2);
  display:flex !important;align-items:center;justify-content:center;
  visibility:visible !important;opacity:1 !important;overflow:visible;
  /* GPU compositing layer — same fix as teacher copilot */
  transform:translateZ(0);
  will-change:transform,box-shadow;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:none;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.2s;
  animation:copilot-fab-enter 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.student-copilot-fab::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,0.2),transparent);
  pointer-events:none;
}
.student-copilot-fab:hover{transform:translateZ(0) scale(1.1) translateY(-2px);box-shadow:0 8px 30px rgba(var(--accent-rgb), 0.175)}
.student-copilot-fab .s-pulse{
  position:absolute;width:56px;height:56px;border-radius:50%;
  background:rgba(var(--accent-rgb), 0.3);animation:copilot-ring 2.5s ease-out infinite;pointer-events:none;
}
.student-copilot-panel{
  position:fixed !important;
  bottom:92px;right:24px;left:auto;
  z-index:9999998 !important;
  width:360px;
  background:#050505;
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:20px;
  box-shadow:0 20px 70px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;
  animation:copilot-open 0.32s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin:bottom right;
  backdrop-filter:blur(20px);
  display:flex;flex-direction:column;max-height:580px;
  contain:none;
}
.student-copilot-header{
  padding:13px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;
  background:#050505;
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:relative;overflow:hidden;
}
.student-copilot-header::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(45deg,transparent,rgba(255,255,255,0.06),transparent);
  pointer-events:none;
}
.sc-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.15);
  border:2px solid rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;flex-shrink:0;position:relative;}
.sc-avatar-dot{position:absolute;bottom:0;right:0;width:9px;height:9px;border-radius:50%;
  background:#22c55e;border:2px solid rgba(255, 255, 255, 0.08);}
.student-copilot-title{font-weight:700;color:#fff;font-size:0.9rem}
.student-copilot-sub{font-size:0.68rem;color:rgba(255,255,255,0.65);margin-top:1px}
.student-copilot-close{margin-left:auto;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.85);cursor:pointer;font-size:0.9rem;padding:5px 8px;border-radius:8px;
  transition:all 0.15s;position:relative;z-index:1;}
.student-copilot-close:hover{background:rgba(239,68,68,0.4);border-color:rgba(239,68,68,0.4);color:#fff}
.sc-quick-btns{
  padding:10px 12px;display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.sc-quick-btn{
  padding:5px 11px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05);color:rgba(241,245,249,0.75);
  font-size:0.74rem;cursor:pointer;transition:all 0.15s;font-family:inherit;
  display:flex;align-items:center;gap:5px;
}
.sc-quick-btn:hover{border-color:rgba(255, 255, 255, 0.08);background:rgba(var(--accent-rgb), 0.35);color:#e0f2fe;transform:translateY(-1px)}
.sc-messages{
  flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;
  min-height:0;
}
.sc-messages::-webkit-scrollbar{width:3px}
.sc-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px}
.sc-msg{display:flex;flex-direction:column;gap:3px;max-width:90%}
.sc-msg.user{align-self:flex-end;align-items:flex-end}
.sc-msg.bot{align-self:flex-start;align-items:flex-start}
.sc-bubble{
  padding:9px 13px;border-radius:15px;font-size:0.83rem;line-height:1.6;
  word-break:break-word;
}
.sc-msg.user .sc-bubble{
  background:linear-gradient(135deg,var(--accent),var(--accent));color:#fff;
  border-bottom-right-radius:4px;box-shadow:0 2px 10px rgba(var(--accent-rgb), 0.075);
}
.sc-msg.bot .sc-bubble{
  background:rgba(255,255,255,0.06);color:rgba(241,245,249,0.9);
  border-bottom-left-radius:4px;border:1px solid rgba(255,255,255,0.1);
}
.sc-ts{font-size:0.64rem;color:rgba(255,255,255,0.3);padding:0 4px}
.sc-typing{display:flex;align-items:center;gap:4px;padding:10px 13px;
  background:rgba(255,255,255,0.06);border-radius:15px;border-bottom-left-radius:4px;
  border:1px solid rgba(255,255,255,0.1);width:fit-content;}
.sc-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:copilot-bounce 1.3s infinite;opacity:0.7}
.sc-dot:nth-child(2){animation-delay:0.18s}
.sc-dot:nth-child(3){animation-delay:0.36s}
.sc-input-row{
  display:flex;gap:8px;padding:10px 12px;flex-shrink:0;
  border-top:1px solid rgba(255,255,255,0.07);align-items:center;
}
.sc-input{
  flex:1;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;padding:9px 14px;color:rgba(241,245,249,0.9);font-size:0.83rem;
  font-family:inherit;outline:none;transition:border 0.2s,box-shadow 0.2s;
}
.sc-input:focus{border-color:rgba(var(--accent-rgb), 0.125);box-shadow:0 0 0 3px rgba(var(--accent-rgb), 0.025)}
.sc-input::placeholder{color:rgba(255,255,255,0.3)}
.sc-send{
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#10b981);color:#fff;
  font-size:0.9rem;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:transform 0.15s,box-shadow 0.15s;
  box-shadow:0 2px 8px rgba(var(--accent-rgb), 0.1);
}
.sc-send:hover:not(:disabled){transform:scale(1.1);box-shadow:0 4px 14px rgba(var(--accent-rgb), 0.15)}
.sc-send:disabled{opacity:0.35;cursor:not-allowed;transform:none}
.sc-empty{text-align:center;color:rgba(255,255,255,0.25);font-size:0.8rem;padding:24px 12px}
.student-copilot-no-task{padding:20px;text-align:center;color:rgba(255,255,255,0.35);font-size:0.85rem}
@media(max-width:600px){
  .student-copilot-panel{width:calc(100vw - 20px) !important;right:10px !important;left:auto !important;bottom:80px !important}
  .student-copilot-fab{bottom:16px !important;right:16px !important;left:auto !important}
}

/* Desktop student copilot enhancements */
@media(min-width:769px){
  .student-copilot-fab{
    width:62px !important;
    height:62px !important;
    font-size:1.5rem;
    bottom:24px !important;
    right:24px !important;
    box-shadow:
      0 6px 28px rgba(var(--accent-rgb), 0.6),
      0 0 0 1px rgba(16,185,129,0.25),
      0 0 60px rgba(var(--accent-rgb), 0.12);
  }
  .student-copilot-panel{
    width:400px !important;
    max-height:620px !important;
    bottom:104px !important;
    right:24px !important;
    border-radius:22px !important;
    box-shadow:
      0 24px 80px rgba(0,0,0,0.6),
      0 0 0 1px rgba(var(--accent-rgb), 0.15),
      inset 0 1px 0 rgba(255,255,255,0.06) !important;
  }
}

/* ── 6. Waiting room tips ── */
.waiting-tip{
  background:rgba(var(--accent-rgb), 0.35);border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:10px;padding:12px 16px;font-size:0.85rem;color:var(--text2);
  margin-top:16px;text-align:left;line-height:1.5;
  animation:task-fade-in 0.4s ease;
}
.waiting-tip-icon{font-size:1.1rem;margin-right:6px}
.waiting-question-card{
  background:rgba(234,179,8,0.08);border:1px solid rgba(234,179,8,0.3);
  border-radius:12px;padding:16px;margin-top:16px;text-align:left;
}
.waiting-question-label{
  font-size:0.75rem;font-weight:700;color:var(--yellow);
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;
  display:flex;align-items:center;gap:6px;
}

/* ── 7. Performance panel ── */
.perf-panel{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;
}
.perf-panel-title{font-size:0.75rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
.perf-stats{display:flex;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.perf-stat{flex:1;text-align:center;padding:10px 6px;background:var(--surface)}
.perf-stat:not(:last-child){border-right:1px solid var(--border)}
.perf-stat-val{font-size:1.3rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.perf-stat-lbl{font-size:0.68rem;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:0.06em}

/* ── 8. Micro-interactions ── */
.btn{transition:all 0.18s cubic-bezier(0.34,1.56,0.64,1)}
.btn:active:not(:disabled){transform:scale(0.95)}
.card{animation:task-fade-in 0.3s ease}
@keyframes panel-slide-in{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}
.page-sm > *{animation:task-fade-in 0.3s ease}

/* ── 9. Content preview enhancement ── */
.content-preview-enhanced{
  width:100%;border-radius:12px;overflow:hidden;margin-bottom:16px;
  border:1px solid var(--border);background:var(--surface2);
}
.content-preview-label{
  padding:8px 14px;font-size:0.75rem;font-weight:700;color:var(--text2);
  background:var(--surface3);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:6px;
}
.content-preview-enhanced img{width:100%;max-height:280px;object-fit:contain;display:block}
.content-preview-enhanced iframe{width:100%;height:300px;border:none;display:block}

/* ── General fade for new content ── */
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fade-up 0.3s ease forwards}

/* ── Quiz Navigation ── */
.quiz-nav-dot{
  width:28px;height:28px;border-radius:6px;border:none;cursor:pointer;
  font-size:0.75rem;font-weight:700;transition:all 0.15s;
}
.quiz-nav-dot:hover{transform:scale(1.1)}

/* ── Copilot response highlight ── */
/* removed legacy student copilot override */

/* ── Copilot v2: wider panel + chat ── *//* removed legacy student copilot override */

/* ═══════════════════════════════════════════════════════════════
   PREMIUM STUDENT UI — REBUILT FROM SCRATCH
   Aesthetic: Deep Space + Bioluminescent Glass
   ═══════════════════════════════════════════════════════════════ */

/* ── Student-specific toast stack ── */
.s-ui ~ .toasts,
body.s-ui-active .toasts {
  bottom: 80px !important;
  top: auto !important;
  right: 16px;
}

/* ── Better toast spring animation handled by .toast / .toast.dismissing in core styles ── */

/* ── Student mobile nav safe area ── */
@media (max-width: 768px) {
  .s-mobile-nav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    height: auto !important;
    min-height: 60px;
  }
  .toasts { right: 8px; left: 8px; }
}
.s-code { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
.s-display { font-family: 'Syne', system-ui, sans-serif; }

/* ── Aurora Background ── */
.s-aurora-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: #050505;
}
.s-aurora-layer {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.18;
  animation: s-drift 20s ease-in-out infinite alternate;
}
.s-aurora-1 { width: 60vw; height: 60vw; background: var(--accent); top: -20%; left: -10%; animation-duration: 22s; }
.s-aurora-2 { width: 50vw; height: 50vw; background: var(--accent); bottom: -15%; right: -10%; animation-duration: 18s; animation-delay: -5s; }
.s-aurora-3 { width: 40vw; height: 40vw; background: #10B981; top: 30%; left: 30%; animation-duration: 25s; animation-delay: -10s; }
@keyframes s-drift {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(3%,5%) scale(1.08); }
  100% { transform: translate(-2%,2%) scale(0.95); }
}

/* ── Glass Cards ── */
.s-glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
}
.s-glass-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.s-glass-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.02);
}

/* ── Neon Accents ── */
.s-glow-cyan { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.1); }
.s-glow-violet { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.1); }
.s-glow-emerald { box-shadow: 0 0 20px rgba(16,185,129,0.4); }
.s-text-cyan { color: var(--accent); }
.s-text-violet { color: var(--accent); }
.s-text-emerald { color: #10B981; }
.s-text-muted { color: rgba(241,245,249,0.5); }

/* ── Premium Nav Bar (Student) ── */
.s-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0 20px; height: 58px;
  display: flex; align-items: center; gap: 8px;
}
.s-nav-brand {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-right: 12px; letter-spacing: -0.02em;
}
.s-nav-student-name {
  font-size: 0.82rem; color: rgba(241,245,249,0.6); max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-nav-tabs { display: flex; gap: 2px; margin-left: 8px; }
.s-nav-tab {
  padding: 6px 14px; border-radius: 100px; border: none; cursor: pointer;
  font-size: 0.8rem; font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif;
  color: rgba(241,245,249,0.5); background: transparent;
  transition: all 0.2s; position: relative;
}
.s-nav-tab:hover { color: rgba(241,245,249,0.85); background: rgba(255,255,255,0.05); }
.s-nav-tab.active {
  color: #fff; background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.s-nav-tab .s-badge {
  position: absolute; top: 3px; right: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #EF4444; animation: s-blink 1.2s infinite;
}
@keyframes s-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.s-nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.s-session-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 100px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.75rem; color: rgba(241,245,249,0.7);
}
.s-session-code {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  color: var(--accent); font-size: 0.85rem; letter-spacing: 0.1em;
}
.s-hand-btn {
  padding: 6px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.12);
  background: transparent; color: rgba(241,245,249,0.7); cursor: pointer;
  font-size: 0.8rem; font-family: inherit; font-weight: 600;
  transition: all 0.2s;
}
.s-hand-btn:hover { border-color: rgba(234,179,8,0.5); color: #EAB308; }
.s-hand-btn.raised { background: rgba(234,179,8,0.15); border-color: #EAB308; color: #EAB308; }
/* ── Live Status HUD ── */
.s-hud {
  padding: 8px 20px; background: rgba(5, 5, 5, 0.7);
  backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: center; gap: 16px; font-size: 0.75rem;
  flex-wrap: wrap; position: sticky; top: 58px; z-index: 190;
}
.s-hud-item { display: flex; align-items: center; gap: 5px; color: rgba(241,245,249,0.5); }
.s-hud-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.1); }
.s-hud-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.s-hud-dot.live { background: #10B981; box-shadow: 0 0 8px #10B981; animation: s-hudpulse 2s infinite; }
.s-hud-dot.paused { background: #EAB308; box-shadow: 0 0 6px #EAB308; }
.s-hud-dot.ended { background: #EF4444; }
.s-hud-dot.waiting { background: rgba(255,255,255,0.3); }
@keyframes s-hudpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }
.s-hud-ws { padding: 2px 9px; border-radius: 100px; font-size: 0.7rem; font-weight: 700; }
.s-hud-ws.ok { background: rgba(16,185,129,0.15); color: #10B981; border: 1px solid rgba(16,185,129,0.3); }
.s-hud-ws.warn { background: rgba(234,179,8,0.12); color: #EAB308; border: 1px solid rgba(234,179,8,0.3); }
.s-hud-progress { display: flex; align-items: center; gap: 7px; }
.s-hud-track { width: 72px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.s-hud-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg,var(--accent),var(--accent)); transition: width 0.5s ease; }
.s-hud-rank { color: #EAB308; font-weight: 700; }

/* ── Announcement Banner ── */
.s-announce {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.9));
  padding: 10px 20px; font-size: 0.875rem; color: #fff; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
  animation: s-slidein 0.4s ease;
}
@keyframes s-slidein { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── Main Content Area ── */
.s-main {
  flex: 1; padding: 0;
  max-width: 100%; margin: 0; width: 100%;
  box-sizing: border-box;
  --bg: #050505;
  --surface: rgba(255, 255, 255, 0.03);
  --surface2: rgba(255, 255, 255, 0.05);
  --surface3: rgba(255, 255, 255, 0.08);
  --text: rgba(241, 245, 249, 0.9);
  --text2: rgba(241, 245, 249, 0.7);
  --text3: rgba(241, 245, 249, 0.4);
  --border: rgba(255, 255, 255, 0.08);
}
.s-main select option {
  background: #050505;
  color: rgba(241, 245, 249, 0.9);
}
.s-main .section-title {
  font-family: 'Syne', sans-serif; font-size: 1.15rem; font-weight: 800;
  color: rgba(241,245,249,0.9); margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.s-main .section-title::before {
  content: ''; width: 3px; height: 20px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent));
}
.s-main-wide { max-width: 1100px; }

/* ── Perf Stats Row ── */
.s-perf-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.s-perf-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 12px 14px; text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.s-perf-card:hover { border-color: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.s-perf-val {
  font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.1; margin-bottom: 4px;
}
.s-perf-val.green { background: linear-gradient(135deg, #10B981, var(--accent)); -webkit-background-clip: text; }
.s-perf-val.yellow { background: linear-gradient(135deg, #EAB308, #F97316); -webkit-background-clip: text; }
.s-perf-val.red { background: linear-gradient(135deg, #EF4444, #F97316); -webkit-background-clip: text; }
.s-perf-lbl { font-size: 0.65rem; color: rgba(241,245,249,0.4); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

/* ── Task Card ── */
.s-task-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 28px;
  animation: s-taskin 0.35s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden;
}
.s-task-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent), #10B981);
}
@keyframes s-taskin {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.s-task-meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.s-task-type-chip {
  padding: 3px 10px; border-radius: 100px; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.s-chip-mcq { background: rgba(var(--accent-rgb), 0.35); color: var(--accent); border: 1px solid rgba(255, 255, 255, 0.08); }
.s-chip-short { background: rgba(16,185,129,0.15); color: #10B981; border: 1px solid rgba(16,185,129,0.3); }
.s-chip-coding { background: rgba(var(--accent-rgb), 0.35); color: var(--accent2); border: 1px solid rgba(255, 255, 255, 0.08); }
.s-chip-diff {
  padding: 3px 10px; border-radius: 100px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.s-chip-easy { background: rgba(16,185,129,0.1); color: #10B981; }
.s-chip-medium { background: rgba(234,179,8,0.1); color: #EAB308; }
.s-chip-hard { background: rgba(239,68,68,0.1); color: #EF4444; }
.s-task-topic {
  font-size: 0.7rem; color: rgba(241,245,249,0.4); margin-left: auto;
  font-style: italic;
}
.s-task-timer {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3);
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700; color: #EF4444;
}
.s-task-q {
  font-size: 1.05rem; line-height: 1.7; color: rgba(241,245,249,0.92);
  font-weight: 500; margin-bottom: 24px;
}
.s-task-hint {
  background: rgba(234,179,8,0.07); border: 1px solid rgba(234,179,8,0.2);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
  font-size: 0.875rem; color: rgba(241,245,249,0.8); line-height: 1.6;
  display: flex; gap: 10px;
}

/* ── MCQ Options ── */
.s-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.s-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02); cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
  text-align: left; width: 100%; font-family: 'Plus Jakarta Sans', sans-serif;
  color: rgba(241,245,249,0.85); font-size: 0.92rem; line-height: 1.5;
  position: relative; overflow: hidden;
}
.s-option:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35);
  transform: translateX(4px);
}
.s-option.selected {
  border-color: var(--accent); background: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.037);
  transform: translateX(4px);
}
.s-option.correct-ans {
  border-color: #10B981; background: rgba(16,185,129,0.12);
  color: #fff;
}
.s-option.wrong-ans {
  border-color: #EF4444; background: rgba(239,68,68,0.1);
  opacity: 0.8;
}
.s-option-letter {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
  background: rgba(255,255,255,0.07); color: rgba(241,245,249,0.5);
  transition: all 0.18s;
}
.s-option.selected .s-option-letter {
  background: var(--accent); color: #fff;
}
.s-option.correct-ans .s-option-letter { background: #10B981; color: #fff; }
.s-option.wrong-ans .s-option-letter { background: #EF4444; color: #fff; }

/* ── Answer Actions ── */
.s-answer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.s-btn-submit {
  flex: 1; min-width: 140px; padding: 13px 24px; border-radius: 14px; border: none;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.92rem;
  cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent)); color: #fff;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.075);
}
.s-btn-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--accent-rgb), 0.1); }
.s-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.s-btn-hint {
  padding: 13px 18px; border-radius: 14px; border: 1px solid rgba(234,179,8,0.3);
  background: rgba(234,179,8,0.07); color: #EAB308; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.85rem;
  transition: all 0.2s;
}
.s-btn-hint:hover { border-color: #EAB308; background: rgba(234,179,8,0.12); }

/* ── Result Panel ── */
.s-result {
  border-radius: 16px; padding: 20px; margin-top: 16px; animation: s-taskin 0.3s ease;
}
.s-result.correct { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25); }
.s-result.wrong { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); }
.s-result-headline { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.s-result.correct .s-result-headline { color: #10B981; }
.s-result.wrong .s-result-headline { color: #EF4444; }

/* ── Short Answer ── */
.s-short-area {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.1);
  color: rgba(241,245,249,0.9); font-size: 0.92rem; font-family: 'Plus Jakarta Sans', sans-serif;
  outline: none; resize: vertical; min-height: 100px; line-height: 1.6;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.s-short-area:focus {
  border-color: rgba(var(--accent-rgb), 0.125); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.02);
}

/* ── Code Editor ── */
.s-code-editor {
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5, 5, 5, 0.8); margin-bottom: 12px;
}
.s-code-editor-header {
  padding: 10px 16px; background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 8px; font-size: 0.75rem;
}
.s-code-dot { width: 10px; height: 10px; border-radius: 50%; }
.s-code-dot-r { background: #EF4444; }
.s-code-dot-y { background: #EAB308; }
.s-code-dot-g { background: #10B981; }
.s-code-lang { color: rgba(241,245,249,0.3); font-family: 'JetBrains Mono', monospace; }
.s-code-autosave { margin-left: auto; color: rgba(var(--accent-rgb), 0.7); font-size: 0.7rem; }
.s-code-textarea {
  width: 100%; padding: 16px; background: transparent; border: none; outline: none;
  color: var(--accent2); font-family: 'JetBrains Mono', monospace; font-size: 0.88rem;
  min-height: 220px; resize: vertical; line-height: 1.7; caret-color: var(--accent);
}
.s-code-textarea::placeholder { color: rgba(var(--accent-rgb), 0.2); }
.s-code-output {
  border-top: 1px solid rgba(255,255,255,0.06); padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.82rem;
  color: #86EFAC; white-space: pre-wrap; max-height: 160px; overflow-y: auto;
  background: rgba(16,185,129,0.04);
}
.s-code-output.err { color: #FCA5A5; background: rgba(239,68,68,0.04); }
.s-code-actions { display: flex; gap: 10px; }
.s-btn-run {
  flex: 1; padding: 11px 16px; border-radius: 12px;
  border: 1px solid rgba(16,185,129,0.3); background: rgba(16,185,129,0.08);
  color: #10B981; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; font-size: 0.85rem; transition: all 0.2s;
}
.s-btn-run:hover:not(:disabled) { background: rgba(16,185,129,0.15); border-color: #10B981; }
.s-btn-run:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Quiz mode ── */
.s-quiz-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.s-quiz-nav-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.s-quiz-dot {
  width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer;
  font-size: 0.68rem; font-weight: 700; transition: all 0.15s;
  background: rgba(255,255,255,0.06); color: rgba(241,245,249,0.5);
}
.s-quiz-dot.answered { background: rgba(16,185,129,0.2); color: #10B981; border: 1px solid rgba(16,185,129,0.3); }
.s-quiz-dot.current { background: rgba(var(--accent-rgb), 0.35); color: var(--accent); border: 1px solid rgba(255, 255, 255, 0.08); }
.s-quiz-prev-next { display: flex; gap: 8px; }
.s-quiz-nav-btn {
  padding: 9px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: rgba(241,245,249,0.7); cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.82rem;
  transition: all 0.2s;
}
.s-quiz-nav-btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.08); color: #B45309; }
.s-quiz-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.s-quiz-finish {
  padding: 9px 18px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #10B981, var(--accent)); color: #fff; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.85rem;
  transition: all 0.2s;
}
.s-quiz-finish:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(16,185,129,0.3); }

/* ── Empty state ── */
.s-empty {
  text-align: center; padding: 60px 24px;
  color: rgba(241,245,249,0.3);
}
.s-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.7; }
.s-empty-title { font-size: 1.05rem; font-weight: 700; color: rgba(241,245,249,0.5); margin-bottom: 8px; }
.s-empty-sub { font-size: 0.85rem; color: rgba(241,245,249,0.3); line-height: 1.6; }
.s-waiting-orb {
  width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  animation: s-orbpulse 2s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
@keyframes s-orbpulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.1); }
  50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.175); }
}

/* ── Chat ── */
.s-chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 160px); }
.s-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.s-chat-messages::-webkit-scrollbar { width: 4px; }
.s-chat-messages::-webkit-scrollbar-track { background: transparent; }
.s-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.s-chat-msg {
  max-width: 70%; padding: 10px 14px; border-radius: 16px;
  font-size: 0.88rem; line-height: 1.5;
}
.s-chat-msg.mine {
  align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent)); color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.s-chat-msg.theirs {
  align-self: flex-start; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08); color: rgba(241,245,249,0.85);
  border-radius: 4px 16px 16px 16px;
}
.s-chat-msg.teacher {
  align-self: flex-start; background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(241,245,249,0.9);
  border-radius: 4px 16px 16px 16px;
}
.s-chat-sender { font-size: 0.68rem; font-weight: 700; opacity: 0.6; margin-bottom: 3px; }
.s-chat-time { font-size: 0.62rem; opacity: 0.5; margin-top: 3px; }
.s-chat-input-row {
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; gap: 10px; align-items: center; flex-shrink: 0;
  background: rgba(5, 5, 5, 0.8);
}
.s-chat-input {
  flex: 1; padding: 10px 14px; border-radius: 100px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(241,245,249,0.9); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem; outline: none; transition: border-color 0.2s;
}
.s-chat-input:focus { border-color: rgba(255, 255, 255, 0.08); }
.s-chat-send {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent)); color: #fff; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all 0.2s;
}
.s-chat-send:hover { transform: scale(1.1); }
.s-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Chat Reply Preview (Feature 1) ── */
.chat-reply-preview {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; margin: 4px 12px 0;
  background: rgba(var(--accent-rgb), 0.35); border-left: 3px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px 8px 0 0; font-size: 0.78rem; color: rgba(241,245,249,0.65);
  animation: fadeInUp .15s ease;
}
.chat-reply-preview strong { color: rgba(var(--accent-rgb), 1); font-weight: 700; margin-right: 4px; }
.chat-reply-preview-dismiss {
  margin-left: auto; cursor: pointer; opacity: 0.5; padding: 0 4px;
  font-size: 0.9rem; line-height: 1; background: none; border: none; color: inherit;
  flex-shrink: 0;
}
.chat-reply-preview-dismiss:hover { opacity: 1; }
.chat-reply-indicator {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 14px; margin-bottom: 6px;
  background: rgba(var(--accent-rgb), 0.1);
  border-left: 3px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 10px 10px 0;
  font-size: 0.72rem; color: rgba(var(--accent-rgb), 0.9);
  max-width: 92%; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all 0.15s;
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.chat-reply-indicator:hover {
  background: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.037), inset 0 1px 0 rgba(255,255,255,0.04);
}
.chat-reply-indicator span { opacity: 0.7; margin-right: 2px; }

/* ── Emoji Reactions (Feature 2) ── */
.chat-reactions {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px;
}
.chat-reaction-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 9px; border-radius: 100px;
  background: rgba(26, 26, 26, 0.7); border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem; cursor: pointer; transition: all 0.18s ease;
  user-select: none; backdrop-filter: blur(4px);
}
.chat-reaction-pill:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.05);
  transform: scale(1.05);
}
.chat-reaction-pill.reacted {
  background: rgba(var(--accent-rgb), 0.35); border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.062);
}
.chat-reaction-pill .r-count { font-size: 0.72rem; opacity: 0.8; }
.chat-reaction-picker {
  position: absolute; z-index: 200;
  display: flex; gap: 4px; flex-wrap: nowrap;
  padding: 8px 10px; border-radius: 100px;
  background: rgba(11, 11, 11, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 20px rgba(var(--accent-rgb), 0.03);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  animation: chatPopIn .18s cubic-bezier(.34,1.56,.64,1) both;
  transform-origin: bottom center;
}
.chat-reaction-picker button {
  font-size: 1.25rem; background: none; border: none; cursor: pointer;
  padding: 4px 6px; border-radius: 50%; transition: transform .12s ease, background .12s ease;
  line-height: 1;
}
.chat-reaction-picker button:hover {
  transform: scale(1.35) translateY(-2px);
  background: rgba(var(--accent-rgb), 0.18);
}
@keyframes chatPopIn { from{opacity:0;transform:translateY(6px) scale(.9);} to{opacity:1;transform:translateY(0) scale(1);} }

/* ── Chat Message Hover Actions (Feature 3) — WhatsApp style ── */
.chat-msg-wrapper { position: relative; }
.chat-msg-actions {
  position: absolute; right: 0; top: -16px;
  display: none; gap: 2px; align-items: center;
  background: rgba(11, 11, 11, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px; padding: 4px 6px;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.5),
    0 0 14px rgba(var(--accent-rgb), 0.12),
    0 0 0 1px rgba(var(--accent-rgb), 0.06);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 100;
  animation: chatActFade 0.16s cubic-bezier(.34,1.4,.64,1) both;
}
.chat-msg-wrapper.student-msg .chat-msg-actions { right: auto; left: 0; }
@keyframes chatActFade { from{opacity:0;transform:translateY(6px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
.chat-msg-wrapper:hover .chat-msg-actions { display: flex; }
/* Mobile tap-to-reveal */
.chat-msg-wrapper.actions-open .chat-msg-actions { display: flex; }
.chat-msg-action-btn {
  background: none; border: none; cursor: pointer; padding: 5px 8px;
  border-radius: 50%; font-size: 0.92rem; color: rgba(var(--accent-rgb), 0.35);
  transition: all .15s ease; display: flex; align-items: center; justify-content: center;
}
.chat-msg-action-btn:hover {
  background: rgba(var(--accent-rgb), 0.2);
  color: #e2e8f0;
  transform: scale(1.15);
}
.chat-msg-action-btn.danger:hover { background: rgba(239,68,68,0.16); color: #f87171; }
/* ── Sticky Submit Test bar ── */
.s-test-submit-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding: 12px 16px;
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 16px;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.03);
  z-index: 50;
}
.s-test-submit-btn {
  padding: 12px 26px; border-radius: 12px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 0.92rem; letter-spacing: 0.02em;
  background: linear-gradient(135deg, #D4AF37, #B8860B);
  color: #1A1A1A;
  box-shadow: 0 4px 18px rgba(212,175,55,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
}
.s-test-submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(212,175,55,0.55); }
.s-test-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
@media (max-width: 600px) {
  .s-test-submit-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .s-test-submit-btn { width: 100%; }
}

/* ── Submit Test confirmation modal ── */
.s-test-submit-overlay {
  position: fixed; inset: 0; z-index: 9999999;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.s-test-submit-modal {
  width: 100%; max-width: 420px; padding: 22px;
  background: linear-gradient(165deg, #1c1c1f 0%, #121214 100%);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 18px; color: #F1ECE2;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.s-test-submit-cancel, .s-test-submit-confirm {
  flex: 1; padding: 11px 16px; border-radius: 12px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 0.85rem; transition: all 0.15s;
}
.s-test-submit-cancel {
  background: rgba(255,255,255,0.06); color: rgba(245,230,200,0.8);
  border: 1px solid rgba(192,192,192,0.2);
}
.s-test-submit-cancel:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.s-test-submit-confirm {
  background: linear-gradient(135deg, #D4AF37, #B8860B); color: #1A1A1A;
  box-shadow: 0 4px 16px rgba(212,175,55,0.4);
}
.s-test-submit-confirm:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(212,175,55,0.55); }
.s-test-submit-cancel:disabled, .s-test-submit-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Submit success toast styling ── */
.s-success-toast-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: s-toast-fadein 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.s-success-toast-card {
  width: 100%;
  max-width: 400px;
  padding: 30px 24px;
  border-radius: 24px;
  text-align: center;
  transform: scale(0.9);
  animation: s-toast-scalein 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  
  /* Dark Mode Defaults */
  background: rgba(11, 11, 11, 0.85); /* dark glassmorphism */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(16, 185, 129, 0.25), /* Green accent glow */
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.light .s-success-toast-card {
  /* Light Mode Override */
  background: rgba(255, 255, 255, 0.95); /* Soft white card */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(16, 185, 129, 0.5); /* green border */
  box-shadow: 
    0 20px 48px rgba(0, 0, 0, 0.12),
    0 0 24px rgba(16, 185, 129, 0.18); /* green shadow glow */
  color: #1E293B; /* Dark readable text */
}
.s-success-toast-text {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 8px;
}
.s-success-checkmark-svg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 4;
  stroke: #10B981;
  stroke-miterlimit: 10;
  box-shadow: inset 0 0 0 #10B981;
  animation: s-checkmark-fill .4s ease-in-out .4s forwards, s-checkmark-scale .3s ease-in-out 0s both;
  margin: 0 auto 16px auto;
}
.s-success-checkmark-circle-svg {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 4;
  stroke-miterlimit: 10;
  stroke: #10B981;
  fill: none;
  animation: s-checkmark-stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.s-success-checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke: #10B981;
  animation: s-checkmark-stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards;
}
@keyframes s-checkmark-stroke {
  100% { stroke-dashoffset: 0; }
}
@keyframes s-checkmark-scale {
  0%, 100% { transform: none; }
  50% { transform: scale3d(1.1, 1.1, 1); }
}
@keyframes s-checkmark-fill {
  100% { box-shadow: inset 0 0 0 30px rgba(16, 185, 129, 0.05); }
}
@keyframes s-toast-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes s-toast-scalein {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.chat-moderation-menu {
  position: absolute; right: 4px; top: 24px; z-index: 200;
  min-width: 182px;
  background: rgba(11, 11, 11, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 0 14px rgba(var(--accent-rgb), 0.025);
  backdrop-filter: blur(20px); animation: fadeInDown .14s ease;
}
@keyframes fadeInDown { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.chat-moderation-menu button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; background: none; border: none;
  cursor: pointer; text-align: left; font-size: 0.82rem;
  color: rgba(226,232,240,0.8); transition: background .12s;
}
.chat-moderation-menu button:hover { background: rgba(var(--accent-rgb), 0.12); }
.chat-moderation-menu button.danger { color: #f87171; }
.chat-moderation-menu button.danger:hover { background: rgba(239,68,68,0.12); }

/* ── System Messages (Feature 8) ── */
.chat-system-msg {
  text-align: center; padding: 5px 16px; margin: 8px auto;
  font-size: 0.72rem; color: var(--text-muted);
  background: rgba(var(--accent-rgb), 0.35); border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08); max-width: 85%;
}
.comm-v2-msg-system {
  display: flex; justify-content: center; padding: 4px 0;
}
.comm-v2-bubble-system {
  font-size: 0.73rem; color: rgba(var(--accent-rgb), 0.65);
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 16px; border-radius: 100px; text-align: center;
}

/* ── File / Image Attachments (Feature 5 & 6) ── */
.chat-file-card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; margin-top: 4px;
  background: rgba(11, 11, 11, 0.8); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px; cursor: pointer; transition: all .18s;
  text-decoration: none; color: inherit;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.chat-file-card:hover {
  background: rgba(var(--accent-rgb), 0.09);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.037);
}
.chat-file-icon { font-size: 1.5rem; flex-shrink: 0; }
.chat-file-info .fn { font-size: 0.82rem; font-weight: 600; color: rgba(226,232,240,0.9); }
.chat-file-info .fs { font-size: 0.7rem; color: rgba(100,116,139,0.7); }
.chat-img-preview {
  max-width: 240px; max-height: 190px; object-fit: cover;
  border-radius: 16px; cursor: zoom-in; display: block;
  margin-top: 4px; transition: transform .22s, box-shadow .22s;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.chat-img-preview:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 16px rgba(var(--accent-rgb), 0.037);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ── Image Lightbox (Feature 6) ── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s ease; backdrop-filter: blur(8px); cursor: zoom-out;
}
.lightbox-overlay img {
  max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,0.8);
  cursor: default;
}
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255,255,255,0.12); border: none; color: #fff;
  border-radius: 50%; width: 36px; height: 36px; cursor: pointer;
  font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }

/* ── Chat Suspension Banner (Feature 7) ── */
.chat-suspended-banner {
  margin: 10px 16px; padding: 11px 16px;
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(185,28,28,0.08));
  border: 1px solid rgba(239,68,68,0.28);
  border-radius: 14px; font-size: 0.82rem; color: #fca5a5;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(239,68,68,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Class End Warning Toast (Feature 4) ── */
.class-end-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9998; padding: 12px 22px;
  background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.95),rgba(239,68,68,0.9));
  border-radius: 100px; color: #fff; font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 8px 32px rgba(239,68,68,0.4); animation: toastIn .3s cubic-bezier(.34,1.56,.64,1);
  display: flex; align-items: center; gap: 8px; pointer-events: none;
  white-space: nowrap;
}
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(-50%) translateY(0)} to{opacity:0;transform:translateX(-50%) translateY(20px)} }
.class-end-toast.exiting { animation: toastOut .3s ease forwards; }

/* ── Teacher chat file upload button ── */
.comm-v2-attach-btn {
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(var(--accent-rgb), 0.35); border-radius: 100px; padding: 6px 10px;
  cursor: pointer; font-size: 0.85rem; transition: all .15s; flex-shrink: 0;
}
.comm-v2-attach-btn:hover { background: rgba(var(--accent-rgb), 0.2); color: var(--accent2); }
.comm-v2-attach-input { display: none; }

/* ── comm-v2 delete button ── */
.comm-v2-del-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(239,68,68,0.5); font-size: 0.75rem; padding: 2px 4px;
  border-radius: 4px; transition: all .12s; flex-shrink: 0;
}
.comm-v2-del-btn:hover { background: rgba(239,68,68,0.1); color: #f87171; }

/* ── Doubt cards — premium glass ── */
.s-doubt-card {
  background: rgba(11, 11, 11, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 14px rgba(0,0,0,0.2);
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin 0.4s ease, padding 0.4s ease, border-color 0.2s;
  max-height: 600px;
  overflow: hidden;
  opacity: 1;
}
.s-doubt-card:hover { border-color: rgba(255, 255, 255, 0.08); }
.s-doubt-card.cleared-anim {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  pointer-events: none;
}
.s-clear-doubt-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 4px 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justifyContent: center;
  transition: all 0.2s;
  flex-shrink: 0;
  line-height: 1;
}
.s-clear-doubt-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #ef4444 !important;
}
.light .s-clear-doubt-btn {
  color: var(--text3);
}
.light .s-clear-doubt-btn:hover {
  background: rgba(11, 45, 99, 0.08);
  color: var(--red) !important;
}
.s-resolved-toggle-btn {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 0;
  margin-top: 8px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.s-resolved-toggle-btn:hover {
  opacity: 1;
  color: var(--accent) !important;
}
.s-doubt-resolved {
  border-color: rgba(16,185,129,0.3) !important;
  background: rgba(16,185,129,0.07) !important;
  box-shadow: 0 2px 14px rgba(16,185,129,0.08) !important;
}
.s-doubt-text { font-size: 0.875rem; color: rgba(226,232,240,0.85); margin-bottom: 8px; line-height: 1.5; }
.s-doubt-answer {
  font-size: 0.82rem; color: #34D399; padding-top: 8px;
  border-top: 1px solid rgba(16,185,129,0.2); margin-top: 8px;
  line-height: 1.5;
}

/* ── Test Mode ── */
.s-test-header {
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
  border-radius: 16px; padding: 16px 20px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.s-test-timer {
  font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 800; color: #EF4444;
  animation: s-timerpulse 1s ease infinite;
}
@keyframes s-timerpulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
.s-test-timer.safe { color: #10B981; animation: none; }
.s-test-timer.warn { color: #EAB308; }
.s-test-q-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }

/* ── Leaderboard ── */
.s-lb { display: flex; flex-direction: column; gap: 8px; }
.s-lb-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: 14px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06); transition: all 0.2s;
}
.s-lb-row.me { border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); }
.s-lb-rank {
  width: 28px; height: 28px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; flex-shrink: 0;
  background: rgba(255,255,255,0.07); color: rgba(241,245,249,0.5);
}
.s-lb-rank.gold { background: rgba(234,179,8,0.2); color: #EAB308; border: 1px solid rgba(234,179,8,0.3); }
.s-lb-rank.silver { background: rgba(148,163,184,0.15); color: #8F8F8F; border: 1px solid rgba(148,163,184,0.3); }
.s-lb-rank.bronze { background: rgba(249,115,22,0.15); color: #F97316; border: 1px solid rgba(249,115,22,0.3); }
.s-lb-name { flex: 1; font-size: 0.88rem; font-weight: 600; color: rgba(241,245,249,0.85); }
.s-lb-score { font-family: 'JetBrains Mono', monospace; font-size: 0.88rem; font-weight: 700; color: var(--accent); }

/* ── Explanation Panel ── */
.s-explain {
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px; padding: 18px; margin-top: 16px; animation: s-taskin 0.3s ease;
}
.s-explain-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.s-explain-badge { padding: 3px 10px; border-radius: 100px; font-size: 0.7rem; font-weight: 700; background: rgba(var(--accent-rgb), 0.35); color: var(--accent2); }
.s-explain-content { font-size: 0.875rem; line-height: 1.7; color: rgba(241,245,249,0.8); white-space: pre-wrap; }

/* ── Content preview ── */
.s-content-preview {
  border-radius: 14px; overflow: hidden; margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(5, 5, 5, 0.5);
}
.s-content-label {
  padding: 8px 14px; font-size: 0.72rem; font-weight: 700;
  color: rgba(241,245,249,0.4); text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
.s-content-preview img { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.s-content-preview iframe { width: 100%; height: 280px; border: none; display: block; }

/* ── Status screens (paused/ended) ── */
.s-session-alert {
  border-radius: 16px; padding: 20px; text-align: center; margin-bottom: 16px;
}
.s-session-alert.paused { background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.25); }
.s-session-alert.ended { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); }
.s-session-alert-icon { font-size: 2rem; margin-bottom: 10px; }
.s-session-alert-text { font-size: 0.92rem; font-weight: 600; color: rgba(241,245,249,0.8); }

/* ── Mobile Bottom Nav ── */
.s-mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 250;
  background: rgba(5, 5, 5, 0.95); backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 16px 12px; /* extra bottom for safe area */
}
.s-mobile-nav-inner { display: flex; justify-content: space-around; }
.s-mobile-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 12px; border-radius: 12px; border: none; background: transparent;
  cursor: pointer; color: rgba(241,245,249,0.4); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6rem; font-weight: 600; transition: all 0.2s; position: relative;
  min-width: 44px;
}
.s-mobile-tab.active { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.s-mobile-tab-icon { font-size: 1.2rem; line-height: 1; }
.s-mobile-tab .s-badge {
  position: absolute; top: 4px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: #EF4444;
}


/* ── Section headers ── */
.s-section-title {
  font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 800;
  color: rgba(241,245,249,0.9); margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.s-section-title::before {
  content: ''; width: 3px; height: 20px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent));
}

/* ── Profile modal overlay ── */
.s-profile-overlay {
  position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px); display: flex; align-items: center;
  justify-content: center; padding: 20px; animation: s-fadein 0.2s ease;
}
@keyframes s-fadein { from{opacity:0} to{opacity:1} }
.s-profile-card {
  width: 100%; max-width: 380px; background: rgba(11, 11, 11, 0.95);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 24px;
  padding: 28px; backdrop-filter: blur(20px);
  animation: s-taskin 0.3s ease;
}

/* ── Waiting room ── */
.s-waiting-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: #050505; position: relative; overflow: hidden;
}
.s-waiting-card {
  width: 100%; max-width: 440px; background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px; padding: 36px; text-align: center; position: relative; z-index: 1;
  animation: s-taskin 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.s-waiting-card::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent), transparent);
}

/* ═══════════════════════════════════════════════════════════════
   WAITING ROOM — CINEMATIC VIDEO BACKGROUND
   Architecture mirrors the landing page hero video system
   z-index stack:
     0  .wr-video-container  (full-bleed looping video)
     1  .wr-overlay          (dark gradient — 50% opacity)
     2  .wr-vignette         (soft edge darkening)
     3  .wr-aurora           (aurora orbs — blend over video)
    10  .s-waiting-card      (content — always on top)
═══════════════════════════════════════════════════════════════ */

/* Override the static background so the video shows through */
.s-waiting-wrap {
  background: #050505 !important; /* fallback while video loads */
}

/* ── VIDEO CONTAINER ── */
.wr-video-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  /* Prevent layout shift while video initialises */
  contain: strict;
}
.wr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* Slight scale for breathing room — prevents edge flicker on resize */
  transform: scale(1.04);
  /* Hardware-accelerated compositing */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: block;
}

/* ── DARK CINEMATIC OVERLAY — 50% opacity for readability ── */
.wr-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.60) 0%,
      rgba(0,0,0,0.38) 30%,
      rgba(0,0,0,0.38) 65%,
      rgba(0,0,0,0.70) 100%
    );
}

/* ── EDGE VIGNETTE — focuses eye on the card ── */
.wr-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 50%,
      transparent 30%,
      rgba(0,0,0,0.40) 70%,
      rgba(0,0,0,0.72) 100%);
}

/* ── AURORA ORBS — blended above video, below card ── */
.wr-aurora {
  z-index: 3 !important;
  /* Reduce aurora opacity so video stays cinematic */
  opacity: 0.35;
}

/* Ensure the waiting card always floats above all background layers */
.s-waiting-wrap .s-waiting-card {
  position: relative;
  z-index: 10;
  /* Premium glassmorphism — deeper blur + stronger border */
  background: rgba(5, 5, 5, 0.52) !important;
  backdrop-filter: blur(28px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  box-shadow:
    0 8px 48px rgba(0,0,0,0.55),
    0 2px 0 rgba(255,255,255,0.06) inset,
    0 0 80px rgba(var(--accent-rgb), 0.06) !important;
}

/* Brand label also stays above video layers */
.s-waiting-wrap > [style*="position:absolute"][style*="top:20"] {
  z-index: 10;
}

/* ── Responsive — no black bars on any viewport ── */
@media (max-width: 768px) {
  .wr-video {
    object-position: center center;
    transform: scale(1.06); /* extra scale compensates for narrow viewports */
  }
}
@media (max-width: 480px) {
  .wr-video {
    transform: scale(1.08);
  }
}

/* ── Reduced motion — honour OS preference ── */
@media (prefers-reduced-motion: reduce) {
  .wr-video { display: none; }
  .s-waiting-wrap { background: #090909 !important; }
}

/* ── Quiz review modal ── */
.s-review-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: s-fadein 0.2s ease;
}
.s-review-card {
  width: 100%; max-width: 420px; background: rgba(11, 11, 11, 0.98);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; padding: 28px;
  animation: s-taskin 0.3s ease;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .s-nav-tabs { display: none; }
  .s-mobile-nav { display: block; }
  .s-main { padding: 16px 14px 100px; }
  .s-perf-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .s-task-card { padding: 18px; }
  .s-task-q { font-size: 0.95rem; }
  .s-chat-wrap { height: calc(100vh - 200px); }
}
@media (max-width: 480px) {
  .s-nav { padding: 0 12px; }
  .s-nav-student-name { display: none; }
  .s-session-chip { padding: 4px 10px; }
}

@keyframes copilot-dot-bounce{
  0%,80%,100%{transform:translateY(0);opacity:0.4}
  40%{transform:translateY(-5px);opacity:1}
}

/* ═══════════════════════════════════════════════════════════════
   MISSING STUDENT FEATURES — Ported from student.html
   Midnight Gaming Dashboard Aesthetic layer
═══════════════════════════════════════════════════════════════ */

/* ── Font imports for student aesthetic ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Student-specific CSS Variables (midnight gaming) ── */
.s-ui {
  --s-teal:       #00E5B4;
  --s-teal-dim:   rgba(0,229,180,0.12);
  --s-teal-glow:  rgba(0,229,180,0.3);
  --s-purple:     #D97706;
  --s-purple-dim: rgba(var(--accent-rgb), 0.12);
  --s-purple-glow:rgba(var(--accent-rgb), 0.075);
  --s-coral:      #FF6B6B;
  --s-gold:       #FFD166;
  --s-green-v:    #34D399;
  --s-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Page transition wrapper ── */
.s-page-wrap {
  flex: 1; display: flex; flex-direction: column;
  animation: s-pageIn 0.3s cubic-bezier(0.4,0,0.2,1) both;
  /* NOTE: transform in s-pageIn would break position:fixed descendants.
     The copilot is now rendered via ReactDOM.createPortal on <body>,
     so it's immune to this stacking context. No changes needed here. */
}
@keyframes s-pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Photo upload zone (join page) ── */
.jf-photo-section {
  margin-bottom: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.jf-photo-zone {
  width: 90px; height: 90px; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.07);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; overflow: hidden;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.0);
  flex-shrink: 0;
}
.jf-photo-zone:hover {
  border-color: var(--accent); background: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.055);
  transform: scale(1.04);
}
.jf-photo-zone.dragging {
  border-color: var(--accent); background: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.075);
  transform: scale(1.06);
}
.jf-photo-zone.has-photo { border-style: solid; border-color: var(--accent); }
.jf-photo-zone img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.jf-photo-overlay {
  position:absolute;inset:0;border-radius:50%;
  background:rgba(5, 5, 5, 0.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.2s;
  font-size:0.65rem;color:#E2E8F0;gap:3px;
}
.jf-photo-zone:hover .jf-photo-overlay { opacity:1; }
.jf-photo-placeholder {
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:rgba(var(--accent-rgb), 0.6);
}
.jf-photo-placeholder svg { width:26px;height:26px; }
.jf-photo-placeholder span { font-size:0.6rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase; }
.jf-photo-actions {
  display:flex;gap:8px;align-items:center;
}
.jf-photo-upload-label {
  padding:5px 12px;border-radius:8px;
  background:rgba(var(--accent-rgb), 0.35);border:1px solid rgba(255, 255, 255, 0.08);
  color:var(--accent2);font-size:0.72rem;font-weight:600;cursor:pointer;
  transition:all 0.18s;font-family:inherit;
}
.jf-photo-upload-label:hover { background:rgba(var(--accent-rgb), 0.35);border-color:#B45309; }
.jf-photo-remove-btn {
  padding:5px 10px;border-radius:8px;
  background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);
  color:#F87171;font-size:0.72rem;font-weight:600;cursor:pointer;
  transition:all 0.18s;font-family:inherit;
}
.jf-photo-remove-btn:hover { background:rgba(239,68,68,0.18);border-color:#EF4444; }
.jf-photo-hint {
  font-size:0.62rem;color:rgba(241,245,249,0.35);text-align:center;line-height:1.4;
}
/* ── Photo upload zone light mode overrides ── */
.landing.light .jf-photo-zone {
  border-color: rgba(110, 44, 18, 0.15);
  background: rgba(110, 44, 18, 0.05);
}
.landing.light .jf-photo-zone:hover,
.landing.light .jf-photo-zone.dragging {
  border-color: #6E2C12;
  background: rgba(110, 44, 18, 0.12);
}
.landing.light .jf-photo-placeholder {
  color: #6E2C12;
}
.landing.light .jf-photo-upload-label {
  background: rgba(110, 44, 18, 0.08);
  border-color: rgba(110, 44, 18, 0.25);
  color: #6E2C12;
}
.landing.light .jf-photo-upload-label:hover {
  background: rgba(110, 44, 18, 0.15);
  border-color: #6E2C12;
}
.landing.light .jf-photo-hint {
  color: #6B5648;
}
.landing.light .jf-photo-remove-btn {
  background: rgba(211, 47, 47, 0.08);
  border-color: rgba(211, 47, 47, 0.25);
  color: #d32f2f;
}
.landing.light .jf-photo-remove-btn:hover {
  background: rgba(211, 47, 47, 0.15);
  border-color: #d32f2f;
}

/* ── Join page code input pulse ── */
.s-code-input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem; font-weight: 700;
  letter-spacing: 0.25em; text-align: center; text-transform: uppercase;
}
.s-code-input::placeholder { letter-spacing: 0.1em; }
.s-join-pulse { animation: s-joinPulse 2s ease-in-out infinite; }
@keyframes s-joinPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.1); }
  50%      { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0.0); }
}

/* ── Join divider ── */
.s-join-divider {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.2); font-size: 0.78rem; margin: 4px 0;
}
.s-join-divider::before, .s-join-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08);
}

/* ── Waiting room enhancements ── */
.s-waiting-ring {
  width: 80px; height: 80px; border-radius: 50%;
  margin: 0 auto 24px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.s-waiting-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent);
  animation: s-wspin 1s linear infinite;
}
.s-waiting-ring::after {
  content: '🧠'; font-size: 2rem;
  animation: s-breathe 3s ease-in-out infinite;
}
@keyframes s-wspin { to { transform: rotate(360deg); } }
@keyframes s-breathe {
  0%,100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* ── Student pip (waiting room participant bubbles) ── */
.s-waiting-students {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center; margin-top: 16px;
}
.s-student-pip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem; color: rgba(241,245,249,0.7);
  animation: s-popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes s-popIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
.s-pip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10B981; flex-shrink: 0;
}

/* ── Waiting count display ── */
.s-waiting-count {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 16px;
  font-size: 0.85rem; color: rgba(241,245,249,0.5);
}
.s-waiting-count-num {
  font-family: 'Syne', sans-serif; font-size: 1.2rem;
  font-weight: 800; color: var(--accent);
}

/* ── Tip carousel ── */
.s-tip-carousel {
  margin-top: 20px; padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem; color: rgba(241,245,249,0.5);
  min-height: 56px; transition: opacity 0.4s ease;
  text-align: center; line-height: 1.6;
}
.s-tip-carousel.fading { opacity: 0; }

/* ── Waiting question block ── */
.s-waiting-question {
  margin-top: 20px; text-align: left;
  animation: s-slideDown 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes s-slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card glow variants ── */
.s-card-glow-teal {
  box-shadow: 0 0 0 1px rgba(0,229,180,0.3), inset 0 0 40px rgba(0,229,180,0.06);
  border-color: rgba(0,229,180,0.3) !important;
}
.s-card-glow-purple {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.075), inset 0 0 40px rgba(var(--accent-rgb), 0.015);
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.s-card-glow-gold {
  box-shadow: 0 0 0 1px rgba(255,209,102,0.3), inset 0 0 40px rgba(255,209,102,0.05);
  border-color: rgba(255,209,102,0.25) !important;
}

/* ── XP Burst celebration ── */
.s-xp-burst {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9000; text-align: center; pointer-events: none;
  animation: s-burstAnim 1.4s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes s-burstAnim {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
  30%  { opacity: 1; transform: translate(-50%,-60%) scale(1.3); }
  70%  { opacity: 1; transform: translate(-50%,-65%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-80%) scale(0.8); }
}
.s-xp-num {
  font-family: 'Syne', sans-serif; font-size: 3rem; font-weight: 800;
  color: #FFD166; text-shadow: 0 0 40px rgba(255,209,102,0.8);
}
.s-xp-label { font-size: 1rem; color: rgba(255,209,102,0.8); margin-top: 4px; }

/* ── Confetti pieces ── */
@keyframes s-confettiFall {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--s-tx), 100vh) rotate(720deg); opacity: 0; }
}
.s-confetti {
  position: fixed; top: -10px; pointer-events: none; z-index: 9999;
  animation: s-confettiFall var(--s-dur) ease-in forwards;
}

/* ── Skeleton shimmer ── */
.s-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: s-shimmer 1.5s infinite;
  border-radius: 10px;
}
@keyframes s-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Float bob animation (no-task icon) ── */
@keyframes s-floatBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.s-float-bob { animation: s-floatBob 3s ease-in-out infinite; }

/* ── Task arrival animation ── */
@keyframes s-taskArrive {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.s-task-arrive { animation: s-taskArrive 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ── MCQ option stagger slide-in ── */
@keyframes s-optionSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.s-option { animation: s-optionSlide 0.3s cubic-bezier(0.4,0,0.2,1) both; }
.s-option:nth-child(2) { animation-delay: 0.05s; }
.s-option:nth-child(3) { animation-delay: 0.10s; }
.s-option:nth-child(4) { animation-delay: 0.15s; }
.s-option:nth-child(5) { animation-delay: 0.20s; }

/* ── Bounce-in for result icons ── */
@keyframes s-bounceIn {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.s-result-icon-anim { animation: s-bounceIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ── Streak / performance bar ── */
.s-streak-bar {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255,209,102,0.1);
  border: 1px solid rgba(255,209,102,0.25);
  font-size: 0.78rem; font-weight: 700; color: #FFD166;
}

/* ── Session paused/ended bars ── */
.s-paused-bar {
  background: rgba(234,179,8,0.08); border-bottom: 2px solid #EAB308;
  padding: 12px 20px; display: flex; align-items: center; gap: 10px;
  font-size: 0.88rem; font-weight: 600; color: #EAB308;
  animation: s-slideDown 0.3s ease;
}
.s-ended-bar {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  padding: 20px; border-radius: 16px; text-align: center; margin-bottom: 16px;
}

/* ── Announcement bar enhanced ── */
.s-announce-icon { animation: s-pulseScale 1s ease-in-out infinite; }
@keyframes s-pulseScale {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

/* ── Empty state illustration ── */
.s-empty-illustration {
  width: 80px; height: 80px; border-radius: 24px;
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; margin: 0 auto 16px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── Scroll-to-bottom button ── */
.s-scroll-bottom {
  position: absolute; bottom: 80px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: all 0.2s; font-size: 1rem; color: rgba(241,245,249,0.7);
  animation: s-fadein 0.2s ease;
}
.s-scroll-bottom:hover {
  background: rgba(var(--accent-rgb), 0.35); border-color: var(--accent);
  color: var(--accent);
}

/* ── Result pop animation ── */
@keyframes s-resultPop {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.s-result-pop { animation: s-resultPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ── HUD score animate ── */
@keyframes s-scoreAnim {
  0%,100% { transform: scale(1); color: inherit; }
  50%      { transform: scale(1.35); color: #FFD166; }
}
.s-hud-score-bump { animation: s-scoreAnim 0.35s ease; }

/* ── Better WS dot (matching student.html) ── */
.s-ws-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  transition: background 0.3s;
}
.s-ws-dot.online  { background: #10B981; animation: s-hudpulse 1.5s infinite; }
.s-ws-dot.offline { background: #EF4444; }
.s-ws-dot.reconnecting { background: #EAB308; animation: s-hudpulse 0.8s infinite; }

/* ── Typing indicator ── */
.s-typing-dots {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 8px 12px; background: rgba(255,255,255,0.05); border-radius: 12px;
}
.s-typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(241,245,249,0.3);
  animation: s-typingBounce 1.2s ease-in-out infinite;
}
.s-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.s-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes s-typingBounce {
  0%,60%,100% { transform: translateY(0); }
  30% { transform: translateY(-5px); background: var(--accent); }
}

/* ── Better progress bar variants ── */
.s-prog-teal   { background: linear-gradient(90deg, #00E5B4, #00B894); }
.s-prog-purple { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.s-prog-gold   { background: linear-gradient(90deg, #FFD166, var(--accent2)); }
.s-prog-multi  { background: linear-gradient(90deg, var(--accent), var(--accent)); }

/* ── Better badge variants ── */
.s-badge-live    { background: rgba(16,185,129,0.15); color: #10B981; border: 1px solid rgba(16,185,129,0.3); }
.s-badge-paused  { background: rgba(234,179,8,0.12);  color: #EAB308; border: 1px solid rgba(234,179,8,0.25); }
.s-badge-ended   { background: rgba(239,68,68,0.12);  color: #EF4444; border: 1px solid rgba(239,68,68,0.25); }
.s-badge-topic   { background: rgba(var(--accent-rgb), 0.35); color: var(--accent); border: 1px solid rgba(255, 255, 255, 0.08); }
.s-badge-diff-easy   { background: rgba(16,185,129,0.12); color: #10B981; }
.s-badge-diff-medium { background: rgba(234,179,8,0.12);  color: #EAB308; }
.s-badge-diff-hard   { background: rgba(239,68,68,0.12);  color: #EF4444; }

/* ── Better button microinteractions ── */
.s-btn-primary:active:not(:disabled)  { transform: scale(0.96); }
.s-btn-ghost:active:not(:disabled)    { transform: scale(0.96); }
.s-btn-submit:active:not(:disabled)   { transform: scale(0.96); }

/* ── Better input focus states ── */
.s-ui input:focus, .s-ui textarea:focus, .s-chat-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.037) !important;
  outline: none;
}

/* ── Session code pill (enhanced) ── */
.s-session-code-enhanced {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 0.9rem; color: var(--accent); letter-spacing: 0.2em;
  cursor: pointer; transition: opacity 0.2s;
}
.s-session-code-enhanced:hover { opacity: 0.7; }
.s-session-code-enhanced:hover::after { content: ' 📋'; }

/* ── Topbar session display name ── */
.s-session-display-name {
  font-size: 0.75rem; color: rgba(241,245,249,0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}

/* ── Hand raise animation ── */
@keyframes s-handShake {
  0%,100% { transform: rotate(0deg); }
  25%  { transform: rotate(20deg); }
  75%  { transform: rotate(-10deg); }
}
.s-hand-raised-anim { animation: s-handShake 0.8s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ── Content modal (full-featured from student.html) ── */
.s-content-modal-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: s-fadein 0.2s ease;
}
.s-content-modal {
  background: rgba(11, 11, 11, 0.98); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; width: 100%; max-width: 700px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: s-taskin 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.s-content-modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.s-content-modal-body { flex: 1; overflow: auto; padding: 20px; }
.s-content-iframe { width: 100%; height: 60vh; border: none; border-radius: 12px; background: #fff; }

/* ── Perf chip row ── */
.s-perf-chips {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.s-perf-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 12px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); font-size: 0.8rem; font-weight: 600;
  color: rgba(241,245,249,0.7);
}
.s-perf-chip .val {
  font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 800;
}

/* ── Mobile safe area padding ── */
.s-mobile-nav {
  padding-bottom: env(safe-area-inset-bottom, 8px) !important;
  height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 768px) {
  .s-main { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── Test question navigator ── */
.s-test-q-btn {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(241,245,249,0.5); font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
}
.s-test-q-btn.answered { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.35); color: var(--accent); }
.s-test-q-btn.current  { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.35); color: var(--accent2); transform: scale(1.15); }

/* ── Personalization: initials display in nav ── */
.s-nav-initials-avatar {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  border: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0;
  overflow: hidden;
}
.s-nav-initials-avatar img { width:100%;height:100%;object-fit:cover;border-radius:10px; }

/* ── Session code copy feedback ── */
.s-copied-feedback {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(16,185,129,0.9); color: #fff;
  padding: 8px 20px; border-radius: 99px;
  font-size: 0.85rem; font-weight: 700;
  z-index: 9999; pointer-events: none;
  animation: s-copiedPop 1.2s ease forwards;
}
@keyframes s-copiedPop {
  0%   { opacity: 0; transform: translate(-50%,-60%) scale(0.8); }
  20%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-40%) scale(0.95); }
}

/* ── Leaderboard mini-progress bars ── */
.s-lb-progress { margin-top: 6px; padding-left: 52px; }
.s-lb-track { height: 3px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; }
.s-lb-fill  { height: 100%; border-radius: 99px; transition: width 0.7s ease; }

/* ── Online/offline notification ── */
.s-network-toast {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  z-index: 9990; padding: 8px 20px; border-radius: 99px;
  font-size: 0.82rem; font-weight: 700; pointer-events: none;
  animation: s-fadein 0.3s ease;
}
.s-network-toast.online  { background: rgba(16,185,129,0.9); color: #fff; }
.s-network-toast.offline { background: rgba(239,68,68,0.9); color: #fff; }
@keyframes copilot-open{
  from{transform:scale(0.88) translateY(10px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
.sc-msg-user{
  background:linear-gradient(135deg,#10b981,var(--accent));
  color:#fff;border-radius:12px 12px 4px 12px;
  padding:8px 12px;font-size:0.83rem;line-height:1.55;max-width:88%;
}
.sc-msg-bot{
  background:var(--surface2);color:var(--text);
  border:1px solid var(--border);border-radius:12px 12px 12px 4px;
  padding:8px 12px;font-size:0.83rem;line-height:1.55;max-width:92%;
}
.sc-msg-bot strong{color:var(--text)}
.sc-quick-btn{
  white-space:nowrap;padding:4px 10px;border-radius:20px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-size:0.74rem;cursor:pointer;flex-shrink:0;
  transition:all 0.15s;font-family:inherit;
}
.sc-quick-btn:hover:not(:disabled){border-color:#10b981;color:#10b981;background:rgba(16,185,129,0.08)}
.sc-quick-btn:disabled{opacity:0.4;cursor:not-allowed}
.sc-suggestion{
  padding:3px 9px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--text2);font-size:0.7rem;
  cursor:pointer;font-family:inherit;transition:all 0.15s;
}
.sc-suggestion:hover{border-color:#10b981;color:#10b981}
.sc-input{
  flex:1;padding:7px 12px;border-radius:20px;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text);font-size:0.83rem;outline:none;font-family:inherit;
}
.sc-input:focus{border-color:#10b981}
.sc-send{
  padding:7px 14px;border-radius:20px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#10b981,var(--accent));
  color:#fff;font-weight:700;font-size:0.8rem;
  transition:opacity 0.15s;font-family:inherit;
}
.sc-send:disabled{opacity:0.4;cursor:not-allowed}

/* ── Quiz Report Section ── */
.quiz-report-section{margin-top:24px}
.quiz-report-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.quiz-report-q{background:var(--surface2);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;border-left:3px solid var(--border)}
.quiz-report-q.correct{border-left-color:var(--green)}
.quiz-report-q.wrong{border-left-color:var(--red)}
.quiz-report-q-text{font-size:0.875rem;font-weight:600;margin-bottom:6px}
.quiz-report-ans{font-size:0.8rem;margin-top:4px;color:var(--text2)}

/* ── Profile Icon ── */
.profile-icon-btn{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--border);
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:0.85rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;flex-shrink:0;
}
.profile-icon-btn.no-profile{
  background:var(--surface2);border:2px dashed var(--border);
  color:var(--text3);font-size:1rem;
}
.profile-icon-btn:hover{transform:scale(1.08);box-shadow:0 0 0 3px rgba(var(--accent-rgb), 0.075)}

/* ── Login Modal ── */
@keyframes login-modal-in{
  from{opacity:0;transform:scale(0.92) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
/* ══ LOGIN PAGE — Full-screen auth wall ══ */
.login-page-bg{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:radial-gradient(ellipse at 60% 20%,rgba(var(--accent-rgb), 0.18) 0%,rgba(var(--accent-rgb), 0.08) 35%,var(--bg) 65%),
             radial-gradient(ellipse at 20% 80%,rgba(var(--accent-rgb), 0.07) 0%,transparent 50%);
  animation:login-bg-in 0.4s ease;
  overflow:hidden;
}
.login-video-container{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:hidden;
  z-index:-2;
  pointer-events:none;
}
.login-video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.login-video-overlay{
  position:absolute;inset:0;
  width:100%;height:100%;
  background:rgba(0,0,0,0.5);
  z-index:-1;
  pointer-events:none;
}
@keyframes login-bg-in{from{opacity:0}to{opacity:1}}
.login-page-bg::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(var(--accent-rgb), 0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--accent-rgb), 0.04) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 0%,transparent 100%);
}

/* ── Card wrapper ── */
.login-card{
  position:relative;z-index:1;
  background:var(--surface);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:24px;
  width:100%;max-width:420px;
  box-shadow:0 32px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(var(--accent-rgb), 0.02),
             inset 0 1px 0 rgba(255,255,255,0.04);
  animation:login-card-rise 0.38s cubic-bezier(0.34,1.28,0.64,1);
  overflow:hidden;
}
@keyframes login-card-rise{
  from{opacity:0;transform:translateY(28px) scale(0.97)}
  to{opacity:1;transform:none}
}

/* ── Card header ── */
.login-card-head{
  padding:32px 32px 24px;
  background:linear-gradient(160deg,rgba(var(--accent-rgb), 0.13),rgba(var(--accent-rgb), 0.06) 60%,transparent);
  border-bottom:1px solid var(--border);
  text-align:center;
  position:relative;
}
.login-brand-mark{
  width:64px;height:64px;border-radius:18px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--accent),var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  box-shadow:0 10px 32px rgba(var(--accent-rgb), 0.1),inset 0 1px 0 rgba(255,255,255,0.15);
  position:relative;
}
.login-brand-mark::after{
  content:'';position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,0.12),transparent);
  pointer-events:none;
}
.login-card-title{
  font-size:1.05rem;font-weight:800;letter-spacing:-0.02em;
  color:var(--text);margin-bottom:5px;line-height:1.3;
}
.login-card-sub{font-size:0.82rem;color:var(--text2);line-height:1.5;max-width:280px;margin:0 auto;}

/* ── Card body ── */
.login-card-body{padding:24px 28px 28px;}

/* ── Stored account rows ── */
.login-accounts-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.login-account-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--surface2);
  cursor:pointer;transition:all 0.18s;text-align:left;
  font-family:inherit;color:var(--text);width:100%;
}
.login-account-row:hover{
  border-color:var(--accent);background:rgba(var(--accent-rgb), 0.35);
  transform:translateX(2px);
  box-shadow:0 4px 16px rgba(var(--accent-rgb), 0.03);
}
.login-account-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;font-weight:700;color:#fff;
  box-shadow:0 3px 10px rgba(var(--accent-rgb), 0.075);
}
.login-account-info{flex:1;min-width:0;}
.login-account-name{font-size:0.9rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.login-account-email{font-size:0.75rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.login-account-arrow{color:var(--text3);font-size:0.85rem;flex-shrink:0;}

/* ── Divider with text ── */
.login-divider{
  display:flex;align-items:center;gap:10px;margin:16px 0;
  color:var(--text3);font-size:0.75rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
}
.login-divider::before,.login-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* ── "Use another account" button ── */
.login-use-another{
  width:100%;padding:11px 14px;
  display:flex;align-items:center;gap:12px;
  border-radius:12px;border:1.5px dashed var(--border);
  background:transparent;cursor:pointer;
  color:var(--text2);font-family:inherit;font-size:0.87rem;font-weight:600;
  transition:all 0.18s;
}
.login-use-another:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb), 0.35);}
.login-use-another-icon{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--surface3);display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;transition:background 0.18s;
}
.login-use-another:hover .login-use-another-icon{background:rgba(var(--accent-rgb), 0.15);}

/* ── New profile form ── */
.login-form-wrap{animation:login-form-in 0.25s ease;}
@keyframes login-form-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.login-form-back{
  display:flex;align-items:center;gap:6px;background:none;border:none;
  color:var(--text3);font-size:0.82rem;font-weight:600;cursor:pointer;
  padding:0 0 14px;font-family:inherit;transition:color 0.15s;
}
.login-form-back:hover{color:var(--text);}
.login-field-label{
  font-size:0.75rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px;display:block;
}
.login-field-label span{color:var(--red);}
.login-field-input{
  width:100%;padding:11px 14px;margin-bottom:12px;
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:10px;color:var(--text);font-size:0.9rem;
  font-family:inherit;outline:none;transition:border 0.2s,box-shadow 0.2s;
}
.login-field-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb), 0.03);
}
.login-field-input::placeholder{color:var(--text3);}

/* ── Role selector in form ── */
.login-role-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.login-role-btn{
  padding:10px 8px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--surface2);cursor:pointer;text-align:center;
  transition:all 0.18s;font-family:inherit;color:var(--text);
}
.login-role-btn:hover{border-color:var(--accent);background:rgba(var(--accent-rgb), 0.35);}
.login-role-btn.active{
  border-color:var(--accent);background:rgba(var(--accent-rgb), 0.35);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb), 0.033);
}
.login-role-icon{font-size:1.5rem;margin-bottom:4px;}
.login-role-label{font-size:0.8rem;font-weight:700;}

/* ── Submit CTA ── */
.login-submit{
  width:100%;padding:13px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent));
  color:#fff;font-size:0.95rem;font-weight:700;font-family:inherit;
  letter-spacing:0.01em;transition:all 0.2s;
  box-shadow:0 4px 16px rgba(var(--accent-rgb), 0.075);
  position:relative;overflow:hidden;
  margin-top:4px;
}
.login-submit::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.12),transparent);
  pointer-events:none;
}
.login-submit:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(var(--accent-rgb), 0.1);
}
.login-submit:disabled{opacity:0.5;cursor:not-allowed;transform:none;}

/* ── Social login ── */
.login-social-grid{display:flex;flex-direction:column;gap:9px;margin-bottom:4px;}
.login-social-btn{
  width:100%;padding:11px 14px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:0.875rem;font-weight:600;font-family:inherit;cursor:pointer;
  transition:all 0.18s;border:1.5px solid;position:relative;overflow:hidden;
}
.login-social-btn::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity 0.18s;
  background:rgba(255,255,255,0.06);
}
.login-social-btn:hover::before{opacity:1;}
.login-social-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,0.25);}
.login-social-google{
  background:#fff;border-color:#e2e8f0;color:#1f2937;
}
.login-social-google:hover{border-color:#d1d5db;background:#f9fafb;}
.login-social-linkedin{
  background:#0077b5;border-color:#0077b5;color:#fff;
}
.login-social-facebook{
  background:#1877f2;border-color:#1877f2;color:#fff;
}
.login-social-icon{width:20px;height:20px;flex-shrink:0;}

/* ── Footer note ── */
.login-card-footer{
  padding:14px 28px 20px;
  text-align:center;font-size:0.75rem;color:var(--text3);
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.06);
}

/* Legacy alias so nothing else breaks */
.login-modal-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);}
.login-modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;width:100%;max-width:420px;overflow:hidden;}
.login-modal-header{padding:28px 28px 20px;border-bottom:1px solid var(--border);text-align:center;}
.login-modal-logo{width:60px;height:60px;border-radius:16px;margin:0 auto 14px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:2.2rem;}
.login-modal-title{font-size:1.25rem;font-weight:800;margin-bottom:4px;}
.login-modal-sub{font-size:0.85rem;color:var(--text2);}
.login-modal-body{padding:24px 28px 28px;}
.login-modal-name-input{width:100%;padding:12px 16px;background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;color:var(--text);font-size:0.95rem;font-family:inherit;outline:none;transition:border 0.2s;margin-bottom:18px;}
.login-modal-name-input:focus{border-color:var(--accent);}
.login-modal-submit{width:100%;padding:13px;border-radius:10px;border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:0.95rem;font-weight:700;font-family:inherit;transition:all 0.2s;}
.login-modal-footer{text-align:center;margin-top:14px;font-size:0.78rem;color:var(--text3);}

/* ── Profile Drawer Overlay ── */
.profile-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:9000;
  opacity:0;pointer-events:none;transition:opacity 0.25s ease;
}
.profile-overlay.open{opacity:1;pointer-events:all;}

/* ── Profile Drawer Panel ── */
.profile-drawer{
  position:fixed;top:0;right:-420px;width:420px;max-width:100vw;height:100vh;
  background:var(--surface);border-left:1px solid var(--border);
  z-index:9001;display:flex;flex-direction:column;
  transition:right 0.3s cubic-bezier(0.34,1.1,0.64,1);
  box-shadow:-8px 0 40px rgba(0,0,0,0.35);
  overflow:hidden;
}
.profile-drawer.open{right:0;}

/* ── Profile Drawer Header ── */
.profile-drawer-header{
  padding:20px 20px 0;
  background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.12),rgba(var(--accent-rgb), 0.08));
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.profile-drawer-close{
  position:absolute;top:14px;right:14px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:5px 9px;cursor:pointer;
  color:var(--text2);font-size:0.9rem;transition:all 0.15s;
}
.profile-drawer-close:hover{background:var(--surface3);color:var(--text)}
.profile-avatar{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;font-weight:800;color:#fff;margin-bottom:10px;
  box-shadow:0 4px 20px rgba(var(--accent-rgb), 0.113), 0 0 0 3px rgba(var(--accent-rgb), 0.062);
  overflow:hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.profile-avatar:hover { transform: scale(1.05); box-shadow: 0 8px 28px rgba(var(--accent-rgb), 0.125), 0 0 0 4px rgba(var(--accent-rgb), 0.087); }
.profile-avatar:hover .avatar-camera-overlay { opacity: 1 !important; }
.avatar-camera-overlay { opacity: 0; transition: opacity 0.2s; }
.profile-name{font-size:1.1rem;font-weight:700;margin-bottom:2px}
.profile-role-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;font-size:0.75rem;font-weight:600;
  background:rgba(var(--accent-rgb), 0.15);color:var(--accent);margin-bottom:14px;
}

/* ── Profile Tabs ── */
.profile-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-top:4px;}
.profile-tab{
  flex:1;padding:10px 6px;border:none;background:transparent;
  color:var(--text2);font-size:0.82rem;font-weight:600;cursor:pointer;
  border-bottom:2px solid transparent;transition:all 0.15s;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.profile-tab:hover{color:var(--text);background:rgba(var(--accent-rgb), 0.05)}
.profile-tab.active{color:var(--accent);border-bottom-color:var(--accent);}

/* ── Profile Drawer Body ── */
.profile-drawer-body{
  flex:1;overflow-y:auto;padding:16px;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}

/* ── Profile Stats Grid ── */
.prof-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.prof-stat{
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  padding:14px;text-align:center;
}
.prof-stat-value{
  font-size:1.6rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.prof-stat-label{font-size:0.72rem;color:var(--text2);margin-top:3px;text-transform:uppercase;letter-spacing:0.06em;}

/* ── Profile Section Title ── */
.prof-section-title{
  font-size:0.78rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:0.1em;
  margin:14px 0 8px;display:flex;align-items:center;gap:6px;
}

/* ── Session Row in profile ── */
.prof-session-row{
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;margin-bottom:7px;
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;
}
.prof-session-name{font-size:0.88rem;font-weight:600;margin-bottom:3px;}
.prof-session-date{font-size:0.72rem;color:var(--text3);}
.prof-session-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.prof-session-stat{
  font-size:0.72rem;padding:2px 8px;border-radius:12px;font-weight:600;
  background:rgba(var(--accent-rgb), 0.1);color:var(--accent);
}
.prof-session-stat.green{background:rgba(34,197,94,0.1);color:var(--green);}
.prof-session-stat.yellow{background:rgba(234,179,8,0.1);color:var(--yellow);}

/* ── Profile Export Bar ── */
.prof-export-bar{
  display:flex;gap:8px;padding:14px 16px;
  border-top:1px solid var(--border);flex-shrink:0;
  background:var(--surface);
}

/* ── Empty state in profile ── */
.prof-empty{
  text-align:center;padding:32px 16px;color:var(--text3);
  font-size:0.875rem;
}
.prof-empty-icon{font-size:2.5rem;margin-bottom:8px;}

/* ── Profile Settings Tab ── */
.prof-settings-section{margin-bottom:20px;}
.prof-settings-label{
  font-size:0.72rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;
  display:flex;align-items:center;gap:6px;
}

/* ── Restricted Admin View ── */
.restricted-view {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}
.restricted-card {
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
.restricted-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--red), var(--orange));
}
.restricted-icon {
  width: 80px;
  height: 80px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto 24px;
}
.restricted-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text);
}
.restricted-text {
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 32px;
  font-size: 0.95rem;
}
.restricted-email {
  display: inline-block;
  font-family: monospace;
  background: var(--surface2);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 8px;
}
.prof-settings-input{
  width:100%;padding:10px 14px;background:var(--surface2);
  border:1.5px solid var(--border);border-radius:10px;
  color:var(--text);font-size:0.9rem;font-family:inherit;
  outline:none;transition:border 0.2s;margin-bottom:8px;
}
.prof-settings-input:focus{border-color:var(--accent);}
.prof-role-switch{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;
}
.prof-role-switch-btn{
  padding:10px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--surface2);cursor:pointer;text-align:center;
  font-family:inherit;color:var(--text2);transition:all 0.15s;
  font-size:0.85rem;font-weight:600;
}
.prof-role-switch-btn:hover{border-color:var(--accent);color:var(--accent)}
.prof-role-switch-btn.active{
  border-color:var(--accent);background:rgba(var(--accent-rgb), 0.35);color:var(--accent);
}
.prof-logout-btn{
  width:100%;padding:11px;border-radius:10px;border:1.5px solid rgba(239,68,68,0.4);
  background:rgba(239,68,68,0.08);color:var(--red);
  cursor:pointer;font-family:inherit;font-size:0.875rem;font-weight:700;
  transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:24px;
}
.prof-logout-btn:hover{background:rgba(239,68,68,0.15);border-color:var(--red);}

/* ── Profile trend mini-chart ── */
.prof-trend-row{
  display:flex;gap:3px;align-items:flex-end;height:40px;margin-bottom:10px;
}
.prof-trend-bar{
  flex:1;border-radius:3px 3px 0 0;
  background:linear-gradient(to top,var(--accent),var(--accent2));
  opacity:0.8;min-width:6px;transition:all 0.3s ease;
}

@media(max-width:480px){
  .profile-drawer{width:100vw;}
}


/* ═══════════════════════════════════════════════════════════════════
   ASK DOUBT SYSTEM — Premium Discord-style Support UI
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout Shell ── */
.doubt-system-shell {
  display: flex; height: 100%; overflow: hidden;
  background: linear-gradient(135deg, #050505 0%, #050505 100%);
}
/* ── Left Sidebar ── */
.doubt-sidebar {
  width: 260px; flex-shrink: 0; display: flex; flex-direction: column;
  background: rgba(11, 11, 11, 0.95); border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
}
.doubt-sidebar::-webkit-scrollbar { width: 3px; }
.doubt-sidebar::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.35); border-radius: 4px; }

.doubt-sidebar-header {
  padding: 18px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.doubt-sidebar-title {
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(var(--accent-rgb), 0.7);
  margin-bottom: 12px;
}
.doubt-new-btn {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.15));
  color: var(--accent2); font-family: inherit; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px;
  justify-content: center;
}
.doubt-new-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.28));
  border-color: rgba(255, 255, 255, 0.08); color: #ede9fe;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.062); transform: translateY(-1px);
}
.doubt-category-section { padding: 12px 10px 4px; }
.doubt-category-label {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(148,163,184,0.45); padding: 0 6px; margin-bottom: 4px;
}
.doubt-category-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  font-size: 0.78rem; color: rgba(148,163,184,0.75);
  transition: all 0.15s; border: none; background: transparent;
  width: 100%; text-align: left; font-family: inherit;
}
.doubt-category-item:hover { background: rgba(var(--accent-rgb), 0.1); color: var(--accent2); }
.doubt-category-item.active {
  background: rgba(var(--accent-rgb), 0.18); color: var(--accent2); font-weight: 600;
}
.doubt-category-item .dci-icon { font-size: 0.9rem; width: 20px; text-align: center; }
.doubt-category-count {
  margin-left: auto; font-size: 0.62rem; background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent2); border-radius: 10px; padding: 1px 7px; font-weight: 700;
}
.doubt-recent-section { padding: 4px 10px 12px; }
.doubt-recent-label {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(148,163,184,0.45); padding: 0 6px; margin-bottom: 6px;
  margin-top: 10px;
}
.doubt-thread-item {
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  transition: all 0.15s; border: 1px solid transparent;
  margin-bottom: 4px;
}
.doubt-thread-item:hover { background: rgba(var(--accent-rgb), 0.35); border-color: rgba(255, 255, 255, 0.08); }
.doubt-thread-item.active { background: rgba(var(--accent-rgb), 0.35); border-color: rgba(255, 255, 255, 0.08); }
.dti-title {
  font-size: 0.77rem; font-weight: 600; color: rgba(226,232,240,0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px;
}
.dti-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.62rem; color: rgba(148,163,184,0.5);
}
.dti-badge {
  padding: 1px 7px; border-radius: 8px; font-size: 0.58rem; font-weight: 700;
}
.dti-badge.open { background: rgba(var(--accent-rgb), 0.15); color: var(--accent2); }
.dti-badge.answered { background: rgba(16,185,129,0.12); color: #34d399; }
.dti-badge.pending { background: rgba(var(--accent-rgb), 0.12); color: #fbbf24; }

/* ── Main Thread Area ── */
.doubt-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
}
.doubt-thread-header {
  padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 11, 11, 0.8); backdrop-filter: blur(12px);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.dth-title { font-size: 0.95rem; font-weight: 700; color: #e2e8f0; flex: 1; min-width: 0; }
.dth-badge {
  padding: 3px 10px; border-radius: 10px; font-size: 0.68rem; font-weight: 700;
  flex-shrink: 0;
}
.dth-badge.open { background: rgba(var(--accent-rgb), 0.35); color: var(--accent2); border: 1px solid rgba(255, 255, 255, 0.08); }
.dth-badge.answered { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
.dth-meta { font-size: 0.68rem; color: rgba(148,163,184,0.5); }

/* ── Thread Messages ── */
.doubt-thread-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.doubt-thread-body::-webkit-scrollbar { width: 4px; }
.doubt-thread-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.35); border-radius: 4px; }

.doubt-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 20px; text-align: center;
}
.doubt-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.4; }
.doubt-empty-title { font-size: 1rem; font-weight: 700; color: rgba(226,232,240,0.5); margin-bottom: 6px; }
.doubt-empty-sub { font-size: 0.8rem; color: rgba(148,163,184,0.4); max-width: 260px; line-height: 1.5; }

/* Thread Message Bubbles */
.doubt-msg {
  display: flex; gap: 12px; align-items: flex-start;
}
.doubt-msg.teacher { flex-direction: row-reverse; }
.doubt-msg-av {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; color: #fff; overflow: hidden;
}
.doubt-msg-av.student-av { background: linear-gradient(135deg,var(--accent),var(--accent)); }
.doubt-msg-av.teacher-av { background: linear-gradient(135deg,var(--accent2),#EF4444); }
.doubt-msg-body { flex: 1; min-width: 0; max-width: 80%; }
.doubt-msg.teacher .doubt-msg-body { display: flex; flex-direction: column; align-items: flex-end; }
.doubt-msg-sender {
  font-size: 0.68rem; font-weight: 700; color: rgba(var(--accent-rgb), 0.7);
  margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.doubt-msg.teacher .doubt-msg-sender { color: rgba(251,191,36,0.8); justify-content: flex-end; }
.doubt-msg-time { font-size: 0.6rem; color: rgba(148,163,184,0.4); font-weight: 400; }
.doubt-msg-bubble {
  padding: 12px 16px; border-radius: 14px; font-size: 0.83rem; line-height: 1.6;
  color: rgba(226,232,240,0.9); background: rgba(26, 26, 26, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 4px; max-width: 100%;
}
.doubt-msg.teacher .doubt-msg-bubble {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(239,68,68,0.08));
  border-color: rgba(var(--accent-rgb), 0.2); border-bottom-right-radius: 4px; border-bottom-left-radius: 14px;
}
.doubt-msg-img {
  max-width: 280px; max-height: 200px; object-fit: cover; border-radius: 10px; margin-top: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.2s; display: block;
}
.doubt-msg-img:hover { transform: scale(1.02); }
.doubt-msg-pdf {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.2);
  border-radius: 12px; margin-top: 8px; text-decoration: none; cursor: pointer;
  transition: all 0.15s; max-width: 280px;
}
.doubt-msg-pdf:hover { background: rgba(16,185,129,0.12); }
.doubt-msg-pdf-icon { font-size: 1.4rem; flex-shrink: 0; }
.doubt-msg-pdf-info { min-width: 0; }
.doubt-msg-pdf-name { font-size: 0.77rem; font-weight: 600; color: #34d399; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doubt-msg-pdf-size { font-size: 0.62rem; color: rgba(148,163,184,0.5); margin-top: 1px; }
.doubt-msg-pdf-dl { margin-left: auto; font-size: 0.8rem; color: rgba(52,211,153,0.6); flex-shrink: 0; }

/* ── Composer ── */
.doubt-composer {
  padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 5, 5, 0.95); backdrop-filter: blur(12px); flex-shrink: 0;
}
.doubt-composer-attach-bar {
  display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.doubt-attach-preview {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; font-size: 0.72rem; color: rgba(var(--accent-rgb), 0.35);
  max-width: 200px;
}
.doubt-attach-preview img {
  height: 32px; width: 32px; object-fit: cover; border-radius: 6px;
}
.doubt-attach-preview-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doubt-attach-remove {
  width: 18px; height: 18px; border-radius: 50%; background: rgba(239,68,68,0.7);
  border: none; color: #fff; cursor: pointer; font-size: 0.6rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  line-height: 1;
}
.doubt-subject-row {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.doubt-subject-select {
  flex: 1; padding: 8px 12px; border-radius: 10px;
  background: rgba(11, 11, 11, 0.8); border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226,232,240,0.85); font-family: inherit; font-size: 0.78rem;
  outline: none; cursor: pointer;
}
.doubt-subject-select:focus { border-color: rgba(255, 255, 255, 0.08); }
.doubt-subject-select option { background: #050505; }
.doubt-input-row {
  display: flex; gap: 8px; align-items: flex-end;
}
.doubt-textarea {
  flex: 1; padding: 11px 14px; border-radius: 14px; min-height: 44px; max-height: 120px;
  background: rgba(11, 11, 11, 0.8); border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226,232,240,0.9); font-family: inherit; font-size: 0.84rem;
  outline: none; resize: none; transition: border-color 0.2s; line-height: 1.5;
}
.doubt-textarea:focus { border-color: rgba(255, 255, 255, 0.08); background: rgba(11, 11, 11, 0.95); }
.doubt-textarea::placeholder { color: rgba(148,163,184,0.4); }
.doubt-send-btn {
  width: 44px; height: 44px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent)); color: #fff;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0;
}
.doubt-send-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.1); }
.doubt-send-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
.doubt-attach-btns { display: flex; gap: 6px; }
.doubt-attach-icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(148,163,184,0.65); cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.doubt-attach-icon-btn:hover { background: rgba(var(--accent-rgb), 0.18); color: var(--accent2); }

/* ── New Doubt Modal Overlay ── */
.doubt-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.doubt-modal {
  background: linear-gradient(135deg, rgba(11, 11, 11, 0.98), rgba(11, 11, 11, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px;
  padding: 28px; width: 100%; max-width: 520px; max-height: 80vh;
  overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.doubt-modal-title {
  font-size: 1.05rem; font-weight: 800; color: #e2e8f0; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.doubt-modal-close {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.25);
  color: #f87171; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.doubt-modal-close:hover { background: rgba(239,68,68,0.3); }
.doubt-modal-field { margin-bottom: 14px; }
.doubt-modal-label {
  font-size: 0.72rem; font-weight: 700; color: rgba(var(--accent-rgb), 0.7);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.doubt-modal-input, .doubt-modal-select, .doubt-modal-textarea {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  background: rgba(11, 11, 11, 0.85); border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226,232,240,0.9); font-family: inherit; font-size: 0.84rem;
  outline: none; box-sizing: border-box; transition: border-color 0.2s;
}
.doubt-modal-input:focus, .doubt-modal-select:focus, .doubt-modal-textarea:focus {
  border-color: rgba(255, 255, 255, 0.08);
}
.doubt-modal-textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.doubt-modal-select option { background: #050505; color: #ffffff; }
.doubt-modal-upload {
  border: 2px dashed rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 20px;
  text-align: center; cursor: pointer; transition: all 0.2s;
  background: rgba(var(--accent-rgb), 0.04);
}
.doubt-modal-upload:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); }
.doubt-modal-upload-icon { font-size: 1.6rem; margin-bottom: 6px; }
.doubt-modal-upload-text { font-size: 0.78rem; color: rgba(148,163,184,0.6); }
.doubt-modal-upload-sub { font-size: 0.68rem; color: rgba(148,163,184,0.4); margin-top: 3px; }
.doubt-modal-preview-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.doubt-modal-preview-item {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.doubt-modal-preview-item img { height: 60px; width: 80px; object-fit: cover; display: block; }
.doubt-modal-preview-item .dmp-remove {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
  background: rgba(0,0,0,0.7); border: none; color: #fff; border-radius: 50%;
  cursor: pointer; font-size: 0.55rem; display: flex; align-items: center; justify-content: center;
}
.doubt-modal-pdf-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: rgba(16,185,129,0.07); border: 1px solid rgba(16,185,129,0.2);
  border-radius: 10px; font-size: 0.72rem; color: #6ee7b7;
}
.doubt-modal-submit {
  width: 100%; padding: 12px; border-radius: 14px; border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent)); color: #fff;
  font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  transition: all 0.2s; margin-top: 6px;
}
.doubt-modal-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.1); }
.doubt-modal-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Mobile responsiveness */
@media (max-width: 768px) {
  .doubt-sidebar { width: 200px; }
}
@media (max-width: 560px) {
  .doubt-sidebar { display: none; }
  .doubt-system-shell { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════
   STUDENT LIGHT THEME — Full Coverage
   ═══════════════════════════════════════════════════════════════════ */

/* ── Student Nav (sd-) ── */
.light .sd-sidebar {
  background: #FFFDF9; border-right-color: #E6D5C3;
}
.light .sd-logo-text { color: #2B1B12; }
.light .sd-nav-section { color: #9C8778; }
.light .sd-nav-item { color: #6B5648; }
.light .sd-nav-item:hover { background: #F3E9DD; color: #2B1B12; }
.light .sd-nav-item.active {
  background: linear-gradient(135deg, rgba(110,44,18,0.1), rgba(110,44,18,0.06));
  color: #6E2C12; border-right-color: #6E2C12;
}
.light .sd-join-card { background: #F3E9DD; border-color: #E6D5C3; }
.light .sd-join-card-title { color: #2B1B12; }
.light .sd-join-card-sub { color: #9C8778; }
.light .sd-content { background: #F8F3ED; }

/* ── Chat system (sv2, sv3) in light mode ── */
.light .sv2-chat-layout { background: #FFFDF9; }
.light .sv2-chat-header {
  background: #FFFDF9; border-bottom-color: #E6D5C3;
}
.light .sv2-chat-header-title { color: #2B1B12; }
.light .sv2-chat-header-sub { color: #9C8778; }
.light .sv2-chat-icon-btn { color: #9C8778; border-color: #E6D5C3; background: #F3E9DD; }
.light .sv2-chat-messages { background: #F8F3ED; }
.light .sv2-msg-bubble { background: #FFFDF9; border-color: #E6D5C3; color: #2B1B12; }
.light .sv2-msg-bubble.mine { background: linear-gradient(135deg,rgba(110,44,18,0.08),rgba(110,44,18,0.04)); color: #2B1B12; border-color: rgba(110,44,18,0.2); }
.light .sv2-msg-bubble.teacher { background: rgba(216,155,60,0.07); color: #2B1B12; border-color: rgba(216,155,60,0.2); }
.light .sv2-msg-sender-name { color: #9C8778; }
.light .sv2-msg-sender-name.teacher { color: #A3471B; }
.light .sv2-msg-time { color: #9C8778; }
.light .sv2-msg-system-pill { background: #F3E9DD; color: #9C8778; border-color: #E6D5C3; }
.light .sv2-doubt-section { background: #FFFDF9; border-top-color: #E6D5C3; }
.light .sv2-doubt-label { color: #6B5648; }
.light .sv2-doubt-input { background: #F3E9DD; border-color: #E6D5C3; color: #2B1B12; }
.light .sv2-doubt-input::placeholder { color: #9C8778; }
.light .sv2-doubt-input:focus { border-color: rgba(110,44,18,0.4); }
.light .sv2-doubt-btn { background: linear-gradient(135deg,#6E2C12,#A3471B); }
.light .sv2-doubt-attach-btn { background: rgba(110,44,18,0.06); border-color: rgba(110,44,18,0.18); color: #6B5648; }
.light .sv2-composer { background: #FFFDF9; border-top-color: #E6D5C3; }
.light .sv2-composer-input { background: #F3E9DD; border-color: #E6D5C3; color: #2B1B12; }
.light .sv2-composer-input::placeholder { color: #9C8778; }
.light .sv2-composer-btn { background: #F3E9DD; border-color: #E6D5C3; color: #6B5648; }
.light .sv2-composer-send { background: linear-gradient(135deg,#6E2C12,#A3471B); }
.light .sv2-file-card { background: #F3E9DD; border-color: rgba(110,44,18,0.2); }
.light .sv2-file-name { color: #2B1B12; }
.light .sv2-file-size { color: #9C8778; }

/* sv3 chat right sidebar in light */
.light .sv3-chat-shell { background: #F8F3ED; }
.light .sv3-top-header { background: #FFFDF9; border-bottom-color: #E6D5C3; }
.light .sv3-top-title { color: #2B1B12; }
.light .sv3-top-sub { color: #9C8778; }
.light .sv3-chat-right { background: #FFFDF9; border-left-color: #E6D5C3; }
.light .sv3-card { background: #F3E9DD; border-color: #E6D5C3; }
.light .sv3-card-title { color: #2B1B12; }
.light .sv3-info-row { color: #6B5648; border-bottom-color: #E6D5C3; }
.light .sv3-resource-row { background: #F3E9DD; border-color: #E6D5C3; }
.light .sv3-resource-name { color: #2B1B12; }
.light .sv3-resource-size { color: #9C8778; }
.light .sv3-empty-note { color: #9C8778; }
.light .sv3-qa-btn { background: #F3E9DD; border-color: #E6D5C3; color: #6B5648; }
.light .sv3-qa-btn:hover { background: #EDE3D8; border-color: rgba(110,44,18,0.25); color: #2B1B12; }
.light .sv3-raise-btn { background: rgba(110,44,18,0.07); border-color: rgba(110,44,18,0.2); color: #6E2C12; }

/* s-doubt-card in light */
.light .s-doubt-card { background: #F3E9DD; border-color: #E6D5C3; }
.light .s-doubt-text { color: #2B1B12; }

/* ── Ask Doubt system in light mode ── */
.light .doubt-system-shell { background: #F8F3ED; }
.light .doubt-sidebar { background: #FFFDF9; border-right-color: #E6D5C3; }
.light .doubt-sidebar-title { color: #9C8778; }
.light .doubt-new-btn {
  background: linear-gradient(135deg, rgba(110,44,18,0.08), rgba(110,44,18,0.05));
  border-color: rgba(110,44,18,0.25); color: #6E2C12;
}
.light .doubt-new-btn:hover {
  background: linear-gradient(135deg, rgba(110,44,18,0.14), rgba(110,44,18,0.1));
  border-color: rgba(110,44,18,0.4); color: #2B1B12;
}
.light .doubt-category-label { color: rgba(107,86,72,0.6); }
.light .doubt-category-item { color: #9C8778; }
.light .doubt-category-item:hover { background: #F3E9DD; color: #6E2C12; }
.light .doubt-category-item.active { background: rgba(110,44,18,0.08); color: #6E2C12; }
.light .doubt-category-count { background: rgba(110,44,18,0.1); color: #A3471B; }
.light .doubt-recent-label { color: rgba(107,86,72,0.6); }
.light .doubt-thread-item { border-color: transparent; }
.light .doubt-thread-item:hover { background: #F3E9DD; border-color: #E6D5C3; }
.light .doubt-thread-item.active { background: rgba(110,44,18,0.08); border-color: rgba(110,44,18,0.2); }
.light .dti-title { color: #2B1B12; }
.light .dti-meta { color: #9C8778; }
.light .dti-badge.open { background: rgba(99,102,241,0.08); color: #6366f1; }
.light .dti-badge.answered { background: rgba(16,185,129,0.08); color: #059669; }
.light .doubt-main { background: #F8F3ED; }
.light .doubt-thread-header { background: #FFFDF9; border-bottom-color: #E6D5C3; }
.light .dth-title { color: #2B1B12; }
.light .dth-meta { color: #9C8778; }
.light .doubt-thread-body { background: #F8F3ED; }
.light .doubt-empty-title { color: rgba(43,27,18,0.5); }
.light .doubt-empty-sub { color: rgba(156,135,120,0.7); }
.light .doubt-msg-bubble { background: #FFFDF9; border-color: #E6D5C3; color: #2B1B12; }
.light .doubt-msg-sender { color: #9C8778; }
.light .doubt-msg.teacher .doubt-msg-bubble { background: rgba(216,155,60,0.07); border-color: rgba(216,155,60,0.2); }
.light .doubt-composer { background: #FFFDF9; border-top-color: #E6D5C3; }
.light .doubt-subject-select { background: #F3E9DD; border-color: #E6D5C3; color: #2B1B12; }
.light .doubt-textarea { background: #F3E9DD; border-color: #E6D5C3; color: #2B1B12; }
.light .doubt-textarea::placeholder { color: #9C8778; }
.light .doubt-textarea:focus { border-color: rgba(110,44,18,0.4); background: #F3E9DD; }
.light .doubt-attach-icon-btn { background: #F3E9DD; border-color: #E6D5C3; color: #9C8778; }
.light .doubt-attach-icon-btn:hover { background: #EDE3D8; color: #6E2C12; }
.light .doubt-send-btn { background: linear-gradient(135deg,#6E2C12,#A3471B); }
.light .doubt-modal { background: #FFFDF9; border-color: #E6D5C3; }
.light .doubt-modal-title { color: #2B1B12; }
.light .doubt-modal-label { color: #9C8778; }
.light .doubt-modal-input, .light .doubt-modal-select, .light .doubt-modal-textarea {
  background: #F3E9DD; border-color: #E6D5C3; color: #2B1B12;
}
.light .doubt-modal-select option {
  background: #FFFDF9; color: #2B1B12;
}
.light .doubt-modal-upload { border-color: #E6D5C3; background: #F3E9DD; }
.light .doubt-modal-upload:hover { border-color: rgba(110,44,18,0.35); background: #EDE3D8; }
.light .doubt-modal-upload-text { color: #9C8778; }
.light .doubt-modal-submit { background: linear-gradient(135deg,#6E2C12,#A3471B); }

/* ── Mobile nav in light ── */
.light .s-mobile-nav { background: #FFFDF9; border-top-color: #E6D5C3; }
.light .s-mobile-tab { color: #9C8778; }
.light .s-mobile-tab.active { color: #6E2C12; }
.light .s-mobile-tab:hover { background: #F3E9DD; }


/* ── sv3 chat main column in light ── */
.light .sv3-chat-main { border-color: #E6D5C3; }
.light .sv2-chat-layout { background: #FFFDF9; border-color: #E6D5C3; }
.light .sv2-chat-messages { background: #F8F3ED; }
.light .sv3-live-pill { background: rgba(94,139,85,0.12); color: #5E8B55; }
.light .sv3-online-dot { background: #5E8B55; }

/* ── sd-content light ── */
.light .sd-content { background: #F8F3ED; }
.light .sv2-content-pad { background: #F8F3ED; }

/* ── rc-wrap (report center) light ── */
.light .rc-wrap { background: #F8F3ED; }
.light .rc-header { border-bottom-color: #E6D5C3; }
.light .rc-title { color: #2B1B12; }
.light .rc-card { background: #FFFDF9; border-color: #E6D5C3; }
.light .rc-card:hover { border-color: rgba(110,44,18,0.3); box-shadow: 0 4px 18px rgba(110,44,18,0.06); }
.light .rc-card-title { color: #2B1B12; }
.light .rc-card-meta { color: #9C8778; }
.light .rc-tab { color: #9C8778; border-bottom-color: transparent; }
.light .rc-tab.active { color: #6E2C12; border-bottom-color: #6E2C12; }
.light .rc-empty-title { color: rgba(43,27,18,0.6); }
.light .rc-empty-sub { color: #9C8778; }
.light .rc-review { background: #FFFDF9; border-top-color: #E6D5C3; }
.light .rc-q-row { border-bottom-color: #E6D5C3; color: #2B1B12; }
.light .rc-q-correct { background: rgba(94,139,85,0.04); }
.light .rc-q-wrong { background: rgba(198,90,61,0.04); }
.light .rc-q-skip { background: rgba(156,135,120,0.04); }

/* ── sd-shell (main student wrapper) ── */
.light .sd-shell { background: #F8F3ED; }

/* ── Student copilot FAB in light ── */
.light .student-copilot-fab { box-shadow: 0 4px 20px rgba(110,44,18,0.25); }

/* ── Chat suspended banner in light ── */
.light .chat-suspended-banner { background: rgba(198,90,61,0.08); border-color: rgba(198,90,61,0.2); color: #A3471B; }

/* ── Reply bar in light ── */
.light .sv2-reply-bar { background: rgba(110,44,18,0.06); border-left-color: #A3471B; color: #6B5648; }

/* ── Chat file card in light ── */
.light .chat-file-card { background: #F3E9DD; border-color: #E6D5C3; color: #2B1B12; }
.light .chat-file-card:hover { border-color: rgba(110,44,18,0.3); }
.light .chat-img-preview { border-color: #E6D5C3; }

/* ── Student Theme Toggle ── */
.theme-toggle-btn{
  padding:5px 10px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;
  font-size:0.8rem;transition:all 0.2s;line-height:1;
}
.theme-toggle-btn:hover{background:var(--surface3);color:var(--text)}

/* ═══════════════════════════════════════════════════════════════════
   STUDENT UI v2 — 3-Column Layout System
   Matches premium Discord+Linear+AI EdTech reference design
   All classes namespaced sv2- to avoid teacher UI conflicts
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  --sv2-bg:          var(--bg);
  --sv2-surface:     var(--surface);
  --sv2-surface2:    var(--surface2);
  --sv2-surface3:    var(--surface3);
  --sv2-border:      var(--border);
  --sv2-border2:     rgba(255, 255, 255, 0.08);
  --sv2-text:        var(--text);
  --sv2-text2:       var(--text2);
  --sv2-text3:       var(--text3);
  --sv2-purple:      var(--accent);
  --sv2-purple-dim:  var(--accent-glow);
  --sv2-purple-glow: rgba(var(--accent-rgb), 0.087);
  --sv2-blue:        var(--accent2);
  --sv2-blue-dim:    rgba(var(--accent-rgb), 0.12);
  --sv2-blue-glow:   var(--accent-glow);
  --sv2-green:       var(--green);
  --sv2-gold:        var(--yellow);
  --sv2-red:         var(--red);
  --sv2-sidebar-w:   242px;
  --sv2-right-w:     260px;
  --sv2-nav-h:       58px;
}

/* ── New Nav Overrides ── */
.s-nav {
  background: rgba(11, 11, 11, 0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 0 16px !important;
  height: var(--sv2-nav-h) !important;
  gap: 6px !important;
}
.s-nav-brand {
  font-size: 1rem !important;
  margin-right: 4px !important;
  display: flex; align-items: center; gap: 6px;
}
/* Nav tab recolor to match reference purple active */
.s-nav-tab.active {
  color: #fff !important;
  background: rgba(var(--accent-rgb), 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.s-nav-tab:hover { background: rgba(255,255,255,0.05) !important; }

/* ═══════════════════════════════════════════════════════════════════
   STUDENT DASHBOARD v4 — Futuristic Premium Redesign (sd- prefix)
   All classes prefixed sd- / sv2- / s- to fully isolate from teacher
═══════════════════════════════════════════════════════════════════ */
:root {
  --sd-bg: var(--bg);
  --sd-bg2: var(--surface);
  --sd-surface: var(--surface2);
  --sd-surface2: var(--surface2);
  --sd-surface3: var(--surface3);
  --sd-purple: var(--accent);
  --sd-purple2: var(--accent);
  --sd-purple-light: var(--accent2);
  --sd-purple-glow: rgba(var(--accent-rgb), 0.087);
  --sd-purple-dim: var(--accent-glow);
  --sd-violet: var(--accent);
  --sd-pink: var(--accent2);
  --sd-sky: var(--accent2);
  --sd-sky2: var(--accent2);
  --sd-green: var(--green);
  --sd-teal: var(--green);
  --sd-orange: var(--accent-orange);
  --sd-text: var(--text);
  --sd-text2: var(--text2);
  --sd-text3: var(--text3);
  --sd-border: var(--border);
  --sd-border2: rgba(255, 255, 255, 0.08);
  --sd-border3: var(--border);
  --sd-sidebar-w: 220px;
  --sd-header-h: 66px;
  --sd-radius: 16px;
  --sd-radius2: 20px;
}

/* ── Root Shell ── */
.sd-app {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--sd-bg);
  font-family: 'Inter', system-ui, sans-serif;
  position: relative;
}
/* Ambient mesh gradient overlay for the whole student app */
.sd-app::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(var(--accent-rgb), 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(var(--accent-rgb), 0.04) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb), 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════
   SIDEBAR — Premium Dark Glass
══════════════════════════════ */
.sd-sidebar {
  width: var(--sd-sidebar-w);
  min-width: var(--sd-sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: rgba(5, 5, 5, 0.98);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
}
.sd-sidebar::-webkit-scrollbar { display: none; }
.sd-sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 260px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.09) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.sd-sidebar::after {
  content: '';
  position: absolute;
  bottom: 200px; left: -30px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Sidebar floating stars decoration */
.sd-sidebar-stars {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.sd-star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: sd-twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes sd-twinkle {
  0%,100% { opacity: 0.12; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.4); }
}

.sd-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.sd-logo-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.138), 0 0 40px rgba(var(--accent-rgb), 0.045);
}
.sd-logo-text {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 1.4rem;
  background: linear-gradient(135deg, var(--accent2), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}

.sd-nav { padding: 8px 0; flex: 1; position: relative; z-index: 1; }
.sd-nav-section {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sd-text3);
  padding: 16px 16px 6px;
}
.sd-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 16px); margin: 1px 8px;
  padding: 9px 12px;
  border: none; border-radius: 10px;
  background: transparent; color: var(--sd-text2);
  font-family: inherit; font-size: 0.845rem; font-weight: 500;
  cursor: pointer; transition: all 0.18s;
  text-align: left; position: relative; white-space: nowrap;
}
.sd-nav-item:hover {
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--sd-text);
}
.sd-nav-item.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.12));
  color: #fff; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 16px rgba(var(--accent-rgb), 0.045), inset 0 1px 0 rgba(255,255,255,0.07);
}
.sd-nav-item.active::before {
  content: '';
  position: absolute; left: -1px; top: 5px; bottom: 5px;
  width: 3px; background: linear-gradient(180deg,var(--accent2),var(--accent));
  border-radius: 0 3px 3px 0;
}
.sd-nav-item-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.92rem;
}

/* Session card at bottom of sidebar */
.sd-join-card {
  margin: 6px 10px 8px;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.10));
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative; overflow: hidden; cursor: pointer;
  transition: all 0.2s; z-index: 1;
}
.sd-join-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 22px rgba(var(--accent-rgb), 0.05);
  transform: translateY(-1px);
}
.sd-join-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.07), transparent);
  pointer-events: none;
}
.sd-join-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sd-join-card-icon {
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.sd-join-card-title { font-size: 0.83rem; font-weight: 700; color: var(--sd-text); }
.sd-join-card-sub {
  font-size: 0.7rem; color: var(--sd-text2);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
}
.sd-join-card-arrow { margin-left: auto; color: var(--sd-text3); font-size: 0.9rem; }

/* Sidebar decorative bottom */
.sd-sidebar-deco {
  padding: 0 10px 14px;
  display: flex; justify-content: center; align-items: flex-end;
  flex-shrink: 0; position: relative; z-index: 1;
  height: 110px; overflow: hidden;
}

/* ══════════════════════════════
   MAIN AREA
══════════════════════════════ */
.sd-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sd-bg);
  min-width: 0;
}

/* ── Header ── */
.sd-header {
  height: var(--sd-header-h);
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center;
  padding: 0 24px; gap: 10px; flex-shrink: 0;
  position: relative;
  z-index: 100;
}
.sd-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.25), transparent);
}
.sd-header-avatar-wrap {
  position: relative; cursor: pointer; flex-shrink: 0;
}
.sd-header-avatar {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.18));
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.055);
  transition: box-shadow 0.2s;
}
.sd-header-avatar:hover { box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.12); }
/* ── Premium Student Header Enhancements ── */
.sd-header-welcome {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 0;
  animation: sdHeaderEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Breathing background glow */
.sd-header-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 140px;
  height: 80px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18) 0%, rgba(var(--accent-rgb), 0.06) 50%, transparent 100%);
  filter: blur(16px);
  pointer-events: none;
  z-index: 0;
  animation: sdHeaderGlowBreathe 6s ease-in-out infinite alternate;
}
.light .sd-header-glow {
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.08) 60%, transparent 100%);
}

/* Glowing/flowing particles & streaks */
.sd-header-decorations {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.sd-decor-streak {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), rgba(var(--accent-rgb), 0.4), transparent);
  animation: sdStreakFlow 8s linear infinite;
}
.sd-decor-streak.decor-streak-1 {
  top: 10%;
  left: -50%;
  width: 50%;
  animation-duration: 9s;
}
.sd-decor-streak.decor-streak-2 {
  bottom: 15%;
  left: -60%;
  width: 40%;
  animation-duration: 12s;
  animation-delay: 3s;
}
.sd-decor-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 8px var(--accent2);
  opacity: 0;
  animation: sdSparkleFly 6s ease-in-out infinite;
}
.sd-decor-spark.decor-spark-1 {
  top: 30%;
  left: 10%;
  animation-delay: 1s;
}
.sd-decor-spark.decor-spark-2 {
  bottom: 30%;
  left: 45%;
  animation-delay: 3.5s;
}

/* Username shimmer style */
.sd-shimmer-username {
  background: linear-gradient(90deg, #f1f5f9 0%, var(--accent2) 50%, #f1f5f9 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sdShimmerText 4s linear infinite;
  font-weight: 800;
  display: inline-block;
}
.light .sd-shimmer-username {
  background: linear-gradient(90deg, #1e1b4b 0%, #4338ca 50%, #1e1b4b 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sdShimmerText 4s linear infinite;
}

.sd-header-hi {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--sd-text);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}

/* Motivational container layout */
.sd-header-sub-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  z-index: 1;
  font-size: 0.76rem;
  color: var(--sd-text2);
}

.sd-live-status {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.18);
  padding: 1px 6px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.68rem;
  color: #34d399;
  flex-shrink: 0;
}
.light .sd-live-status {
  background: rgba(16,185,129,0.06);
  border-color: rgba(16,185,129,0.14);
  color: #059669;
}

.sd-live-pulse-dot {
  width: 6px;
  height: 6px;
  background-color: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.7);
  animation: sdPulseDot 2s infinite;
}

.sd-live-status-divider {
  color: rgba(255,255,255,0.15);
  font-weight: 300;
  font-size: 0.7rem;
  user-select: none;
}
.light .sd-live-status-divider {
  color: rgba(0,0,0,0.1);
}

/* Rotating quote style with smooth slide + fade */
.sd-header-motivation-text {
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0.8;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
}
.sd-header-motivation-text.visible {
  opacity: 0.85;
  transform: translateY(0);
}
.sd-header-motivation-text.hidden-slide {
  opacity: 0;
  transform: translateY(-8px);
}
.light .sd-header-motivation-text {
  color: #4b5563;
}

/* Animations */
@keyframes sdHeaderEntrance {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes sdHeaderGlowBreathe {
  0% { transform: scale(0.9) translate(0, 0); opacity: 0.8; }
  100% { transform: scale(1.1) translate(5px, 5px); opacity: 1.1; }
}
@keyframes sdStreakFlow {
  0% { transform: translateX(0); }
  100% { transform: translateX(300%); }
}
@keyframes sdSparkleFly {
  0% { opacity: 0; transform: scale(0.6) translateY(0); }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1) translateY(-15px) translateX(10px); }
}
@keyframes sdPulseDot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16,185,129,0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16,185,129,0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16,185,129,0);
  }
}
@keyframes sdPulseGlow {
  0% { opacity: 0.4; }
  100% { opacity: 0.8; }
}
@keyframes sdShimmerText {
  to {
    background-position: 200% center;
  }
}
.sd-header-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.sd-header-right .bb8-toggle { flex-shrink: 0; margin: 0 2px; }
@media (max-width: 700px) {
  .sd-header { padding: 0 12px; gap: 6px; }
  .sd-header-right { gap: 5px; }
  .sd-header-sub, .sd-header-sub-container { display: none !important; }
}
.sd-notif-btn {
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: var(--sd-text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: all 0.2s;
}
.sd-notif-btn:hover { border-color: rgba(255, 255, 255, 0.08); color: var(--sd-text); background: rgba(var(--accent-rgb), 0.35); }
.sd-notif-badge {
  position: absolute; top: -3px; right: -3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #ef4444; font-size: 0.58rem; font-weight: 800;
  color: #fff; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--sd-bg);
}
.sd-profile-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 5px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  cursor: pointer; transition: all 0.2s;
  color: var(--sd-text); font-size: 0.82rem; font-weight: 500;
}
.sd-profile-chip:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); }
.sd-profile-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.1);
}
.sd-profile-caret { color: var(--sd-text3); font-size: 0.7rem; margin-left: 2px; }

/* ── Utility bar ── */
.sd-utility-bar { flex-shrink: 0; }

/* ── Content ── */
.sd-content {
  flex: 1; overflow-y: auto; overflow-x: hidden;
}
.sd-content::-webkit-scrollbar { width: 4px; }
.sd-content::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.35); border-radius: 3px; }

/* ══════════════════════════════
   DASHBOARD HOME PAGE
══════════════════════════════ */
.sd-dashboard { padding: 22px 26px 36px; }

/* ── Hero Live Class Card ── */
/* ══════════════════════════════════════════════════════════════
   VYOM — Student Live Class Hero — Premium Redesign v2.0
   Namespace : slch-  (Student Live Class Hero)
   ═══════════════════════════════════════════════════════════ */

/* ── Student Hero — Cinematic Slideshow ── */
.sd-hero-slide {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 0;
}
.sd-hero-slide.active { opacity: 1; }
.sd-hero-slide.kb-a { animation: db-kb-a 22s ease-in-out infinite alternate; }
.sd-hero-slide.kb-b { animation: db-kb-b 25s ease-in-out infinite alternate; }
.sd-hero-slide.kb-c { animation: db-kb-c 20s ease-in-out infinite alternate; }
.sd-hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.78) 0%, rgba(5,5,5,0.55) 40%, rgba(5,5,5,0.75) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 15%, rgba(5,5,5,0.55) 100%);
  z-index: 0;
}
.sd-hero > *:not(.sd-hero-slide):not(.sd-hero-overlay) { position: relative; z-index: 1; }

/* ── 1. HERO SHELL ── */
.sd-hero {
  border-radius: 22px;
  background: #0B0B0B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
  display: flex;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  min-height: 195px;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.06),
    0 8px 64px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.035);
  animation: slch-border-breathe 6s ease-in-out infinite;
}

@keyframes slch-border-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.015), 0 8px 64px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.035); }
  50%       { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.045), 0 8px 64px rgba(0,0,0,0.6), 0 0 0 4px rgba(var(--accent-rgb), 0.01), inset 0 1px 0 rgba(255,255,255,0.035); }
}

/* ── Cinematic multi-light gradient mesh ── */
.sd-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 5% 65%, rgba(var(--accent-rgb), 0.33) 0%, transparent 100%),
    radial-gradient(ellipse 42% 65% at 88% 18%, rgba(var(--accent-rgb), 0.14) 0%, transparent 100%),
    radial-gradient(ellipse 50% 70% at 48% 110%, rgba(var(--accent-rgb), 0.11) 0%, transparent 100%),
    radial-gradient(ellipse 30% 50% at 22% -10%, rgba(var(--accent-rgb), 0.08) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
  animation: slch-mesh 14s ease-in-out infinite alternate;
}

@keyframes slch-mesh {
  0%   { transform: scale(1) translate(0, 0); opacity: 0.85; }
  100% { transform: scale(1.07) translate(12px, -8px); opacity: 1; }
}

/* ── Refined grid overlay ── */
.sd-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.048) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none; z-index: 1;
}

/* ── 2. REMOVE LAPTOP ILLUSTRATION ── */
.sd-hero-laptop { display: none !important; }

/* ── 3. LEFT PANEL ── */
.sd-hero-left {
  flex: 1; padding: 30px 36px;
  display: flex; align-items: center; gap: 22px;
  position: relative; z-index: 1;
}

/* Soft spotlight behind content block */
.sd-hero-left::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 65% 100% at 18% 50%, rgba(var(--accent-rgb), 0.07) 0%, transparent 68%);
  z-index: 0;
}

/* ── 4. AVATAR — PREMIUM SCALED ── */
.sd-hero-avatar {
  width: 82px; height: 82px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.22));
  border: 2px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; flex-shrink: 0;
  box-shadow:
    0 0 0 5px rgba(var(--accent-rgb), 0.09),
    0 0 0 10px rgba(var(--accent-rgb), 0.04),
    0 0 28px rgba(var(--accent-rgb), 0.52),
    0 0 60px rgba(var(--accent-rgb), 0.16);
  overflow: hidden; cursor: pointer; position: relative; z-index: 1;
  animation: slch-avatar-breathe 3.8s ease-in-out infinite;
}

@keyframes slch-avatar-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 5px rgba(var(--accent-rgb), 0.09),
      0 0 0 10px rgba(var(--accent-rgb), 0.04),
      0 0 28px rgba(var(--accent-rgb), 0.52),
      0 0 60px rgba(var(--accent-rgb), 0.16);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(var(--accent-rgb), 0.14),
      0 0 0 13px rgba(var(--accent-rgb), 0.06),
      0 0 42px rgba(var(--accent-rgb), 0.68),
      0 0 80px rgba(var(--accent-rgb), 0.24);
  }
}

.sd-hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sd-hero-avatar-upload-hint {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; color: #fff; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.sd-hero-avatar:hover .sd-hero-avatar-upload-hint { opacity: 1; }
/* Student photo upload in settings */
.s-photo-upload-wrap {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
  padding: 16px; background: rgba(255,255,255,0.03); border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
}
.s-photo-preview {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.2));
  border: 2px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; overflow: hidden; cursor: pointer; position: relative;
}
.s-photo-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.s-photo-upload-btn {
  padding: 9px 18px; border-radius: 10px; font-size: 0.8rem; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  color: var(--accent2); cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.s-photo-upload-btn:hover { background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.28),rgba(var(--accent-rgb), 0.22)); }
.s-photo-remove-btn {
  padding: 7px 14px; border-radius: 10px; font-size: 0.78rem; font-weight: 600;
  border: 1px solid rgba(239,68,68,0.3); background: rgba(239,68,68,0.08);
  color: #f87171; cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.s-photo-remove-btn:hover { background: rgba(239,68,68,0.15); }
/* Leaderboard / chat avatar with photo */
.s-photo-avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.28),rgba(var(--accent-rgb), 0.2));
  border: 1.5px solid rgba(255, 255, 255, 0.08);
}
.s-photo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sd-hero-info { flex: 1; min-width: 0; position: relative; z-index: 1; }

/* ── 5. LIVE BADGE — glowing pill ── */
.sd-hero-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: #22c55e; margin-bottom: 10px;
  padding: 4px 11px 4px 8px;
  background: rgba(34,197,94,0.07);
  border: 1px solid rgba(34,197,94,0.26);
  border-radius: 999px; width: fit-content;
  animation: slch-live-glow 3s ease-in-out infinite;
}

@keyframes slch-live-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(34,197,94,0.07); }
  50%       { box-shadow: 0 0 18px rgba(34,197,94,0.22), 0 0 0 3px rgba(34,197,94,0.05); }
}

.sd-hero-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(34,197,94,0.9), 0 0 20px rgba(34,197,94,0.5);
  animation: sd-livepulse 1.5s ease infinite;
}

/* ── 6. TITLE ── */
.sd-hero-title-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 7px;
}
.sd-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: 2.05rem; font-weight: 900; line-height: 1;
  letter-spacing: -0.025em;
  background: linear-gradient(130deg, #ffffff 0%, var(--accent2) 55%, var(--accent2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sd-live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 12px rgba(34,197,94,0.82), 0 0 26px rgba(34,197,94,0.38);
  animation: sd-livepulse 1.5s ease infinite;
  flex-shrink: 0;
}
@keyframes sd-livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.55;transform:scale(0.82)} }

/* ── 7. SUBTITLE ── */
.sd-hero-subtitle { font-size: 0.84rem; color: rgba(203,213,225,0.5); margin-bottom: 20px; letter-spacing: 0.01em; }

/* ── 8. CLASS CODE — premium glass badge ── */
.sd-hero-code-row { display: flex; align-items: center; gap: 12px; }
.sd-hero-code-label {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.sd-hero-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.02rem; font-weight: 800; color: var(--accent2);
  background: rgba(var(--accent-rgb), 0.1); padding: 8px 20px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.22em;
  box-shadow: 0 2px 16px rgba(var(--accent-rgb), 0.025), inset 0 1px 0 rgba(255,255,255,0.07);
}
/* ── 9. COPY BUTTON ── */
.sd-hero-copy-btn {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35);
  color: var(--sd-text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem;
  transition: all 0.26s cubic-bezier(0.34,1.56,0.64,1);
}
.sd-hero-copy-btn:hover {
  transform: scale(1.14) rotate(-4deg);
  border-color: rgba(255, 255, 255, 0.08); color: var(--sd-text);
  background: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.075);
}

/* ── 10. LAPTOP (hidden) ── */
.sd-hero-laptop { display: none !important; }

/* ── 11. DIVIDER ── */
.sd-hero-divider {
  width: 1px; flex-shrink: 0; align-self: stretch; margin: 24px 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.45) 28%,
    rgba(var(--accent-rgb), 0.28) 72%,
    transparent 100%);
}

/* ── 12. RIGHT STATS — premium glass widgets ── */
.sd-hero-right {
  padding: 26px 32px; display: flex; flex-direction: column;
  justify-content: center; gap: 16px;
  position: relative; z-index: 1; flex-shrink: 0;
  min-width: 205px;
  background: rgba(255,255,255,0.016);
  backdrop-filter: blur(16px);
}
.sd-hero-stat {
  text-align: right;
  padding: 13px 16px;
  background: rgba(255,255,255,0.028);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.22s, box-shadow 0.22s;
}
.sd-hero-stat:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 20px rgba(var(--accent-rgb), 0.025), inset 0 1px 0 rgba(255,255,255,0.04);
}
.sd-hero-stat-label {
  font-size: 0.59rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(241,245,249,0.38); margin-bottom: 5px;
}
.sd-hero-stat-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.1rem; font-weight: 900; color: #22c55e; line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 28px rgba(34,197,94,0.65), 0 0 55px rgba(34,197,94,0.22);
}
.sd-hero-stat-num {
  font-size: 1.9rem; font-weight: 900; line-height: 1; margin-bottom: 2px;
  background: linear-gradient(135deg, #ffffff 0%, var(--accent2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sd-hero-stat-sub { font-size: 0.7rem; color: rgba(241,245,249,0.4); letter-spacing: 0.04em; }

/* ── 13. FLOATING ORBS (injected via JS) ── */
.slch-orbs {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
.slch-orb {
  position: absolute; border-radius: 50%;
  filter: blur(38px); pointer-events: none;
}
.slch-orb-1 {
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.26) 0%, transparent 68%);
  top: -50px; left: -50px;
  animation: slch-orb1 10s ease-in-out infinite alternate;
}
.slch-orb-2 {
  width: 190px; height: 190px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18) 0%, transparent 68%);
  bottom: -35px; right: 230px;
  animation: slch-orb2 12s ease-in-out infinite alternate;
}
.slch-orb-3 {
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, transparent 68%);
  top: 50%; right: 40px; transform: translateY(-50%);
  animation: slch-orb3 8s ease-in-out infinite alternate;
}
@keyframes slch-orb1 { from { transform: translate(0,0); } to { transform: translate(28px,18px); } }
@keyframes slch-orb2 { from { transform: translate(0,0); } to { transform: translate(-18px,-14px); } }
@keyframes slch-orb3 { from { transform: translateY(-50%) scale(1); } to { transform: translateY(-47%) scale(1.14); } }

/* ── 14. PARTICLES (injected via JS) ── */
.slch-ptcl-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.slch-ptcl { position: absolute; border-radius: 50%; animation: slch-ptcl-rise linear infinite; }
@keyframes slch-ptcl-rise {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  8%   { opacity: 1; }
  92%  { opacity: 0.45; }
  100% { opacity: 0; transform: translateY(-155px) scale(0.28); }
}

/* ── 15. ENTRANCE ANIMATIONS ── */
.sd-hero-left  { animation: slch-enter 0.65s cubic-bezier(0.22,1,0.36,1) both; }
.sd-hero-right { animation: slch-enter 0.78s cubic-bezier(0.22,1,0.36,1) 0.09s both; }
@keyframes slch-enter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sd-hero-graph {
  position: absolute; right: 0; top: 0; bottom: 0; width: 280px;
  opacity: 0.2; pointer-events: none; overflow: hidden; z-index: 1;
}

/* ── Stat Cards Row ── */
.sd-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 20px;
}
/* ── Premium Dashboard Stat Card Animations ── */
@keyframes sd-orb-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(8px,-12px) scale(1.08); }
  66% { transform: translate(-6px,8px) scale(0.94); }
}
@keyframes sd-orb-drift-b {
  0%,100% { transform: translate(0,0) scale(1); }
  40% { transform: translate(-10px,10px) scale(1.1); }
  70% { transform: translate(10px,-6px) scale(0.92); }
}
@keyframes sd-grid-flow {
  0% { background-position: 0 0; }
  100% { background-position: 20px 20px; }
}
@keyframes sd-particle-float {
  0%,100% { opacity:0; transform:translateY(0) scale(0); }
  20% { opacity:1; transform:translateY(-6px) scale(1); }
  80% { opacity:0.5; transform:translateY(-18px) scale(0.7); }
}
@keyframes sd-wave-shift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.sd-stat-card {
  border: 1px solid var(--sd-border); border-radius: var(--sd-radius);
  padding: 20px 20px 16px; position: relative;
  overflow: hidden; transition: all 0.28s cubic-bezier(0.22,1,0.36,1); cursor: pointer;
  background: var(--sd-surface);
  isolation: isolate;
}
.sd-stat-card:hover { transform: translateY(-4px); }

/* ── Purple card — Today's Agenda ── */
.sd-stat-card.purple-card {
  background: linear-gradient(145deg, #050505, #050505);
  border-color: rgba(255, 255, 255, 0.08);
}
.sd-stat-card.purple-card:hover {
  box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.07), 0 0 0 1px rgba(var(--accent-rgb), 0.095);
  border-color: rgba(255, 255, 255, 0.08);
}
/* Purple orbs */
.sd-stat-card.purple-card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80px 80px at 85% 20%, rgba(var(--accent-rgb), 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 50px 50px at 15% 80%, rgba(var(--accent-rgb), 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 60px 40px at 55% 60%, rgba(var(--accent-rgb), 0.12) 0%, transparent 60%);
  animation: sd-orb-drift 8s ease-in-out infinite;
}
/* Purple grid overlay */
.sd-stat-card.purple-card::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.07) 1px, transparent 1px);
  background-size:20px 20px;
  animation: sd-grid-flow 4s linear infinite;
  mask-image: linear-gradient(to bottom right, transparent 20%, rgba(0,0,0,0.6) 60%, transparent 100%);
}

/* ── Teal card — My Tasks ── */
.sd-stat-card.teal-card {
  background: linear-gradient(145deg, #0B0B0B, #050505);
  border-color: rgba(255, 255, 255, 0.08);
}
.sd-stat-card.teal-card:hover {
  box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.055), 0 0 0 1px rgba(var(--accent-rgb), 0.105);
  border-color: rgba(255, 255, 255, 0.08);
}
/* Teal orbs */
.sd-stat-card.teal-card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70px 70px at 80% 15%, rgba(var(--accent-rgb), 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 45px 45px at 10% 75%, rgba(var(--accent-rgb), 0.2) 0%, transparent 70%),
    radial-gradient(ellipse 90px 30px at 50% 95%, rgba(var(--accent-rgb), 0.12) 0%, transparent 60%);
  animation: sd-orb-drift-b 9s ease-in-out infinite;
}
/* Teal waveform lines */
.sd-stat-card.teal-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:45%; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 3px,
      rgba(var(--accent-rgb), 0.08) 3px, rgba(var(--accent-rgb), 0.08) 4px,
      transparent 4px, transparent 10px
    );
  mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
  animation: sd-wave-shift 3s linear infinite;
}

/* ── Magenta card — My Progress ── */
.sd-stat-card.red-card {
  background: linear-gradient(145deg, #050505, #050505);
  border-color: rgba(255, 255, 255, 0.08);
}
.sd-stat-card.red-card:hover {
  box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.05), 0 0 0 1px rgba(var(--accent-rgb), 0.105);
  border-color: rgba(255, 255, 255, 0.08);
}
/* Magenta orbs */
.sd-stat-card.red-card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 75px 75px at 88% 18%, rgba(var(--accent-rgb), 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 40px 40px at 12% 70%, rgba(var(--accent-rgb), 0.2) 0%, transparent 70%),
    radial-gradient(ellipse 100px 25px at 50% 90%, rgba(var(--accent-rgb), 0.1) 0%, transparent 60%);
  animation: sd-orb-drift 11s ease-in-out infinite;
}
/* Magenta analytics arc */
.sd-stat-card.red-card::after {
  content:''; position:absolute; right:-10px; bottom:-10px;
  width:130px; height:130px; pointer-events:none; z-index:0;
  border-radius:50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 20px rgba(var(--accent-rgb), 0.05),
    0 0 0 40px rgba(var(--accent-rgb), 0.03),
    0 0 0 60px rgba(var(--accent-rgb), 0.02);
}

/* Heartbeat ECG ambient background — My Progress card */
.progress-heartbeat-bg {
  position: absolute !important;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0 !important;
  overflow: hidden;
  border-radius: inherit;
}
.progress-heartbeat-bg svg {
  width: 130%;
  height: auto;
  flex-shrink: 0;
}
.progress-heartbeat-bg path {
  stroke-dasharray: 814;
  animation: sd-heartRate 5s linear infinite;
}
@keyframes sd-heartRate {
  from { stroke-dashoffset: 814; }
  to   { stroke-dashoffset: -814; }
}

/* Ensure card children sit above pseudo-elements */
.sd-stat-card > * { position: relative; z-index: 1; }
/* Override — heartbeat bg must stay behind content */
.sd-stat-card > .progress-heartbeat-bg { z-index: 0 !important; position: absolute !important; }

.sd-stat-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 14px; position: relative; z-index: 1;
}
.sd-stat-icon.purple {
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.04);
}
.sd-stat-icon.green {
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.035);
}
.sd-stat-icon.orange {
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.03);
}
.sd-stat-label { font-size: 0.76rem; font-weight: 500; margin-bottom: 4px; position: relative; z-index: 1; }
.sd-stat-card.purple-card .sd-stat-label { color: var(--accent2); }
.sd-stat-card.teal-card .sd-stat-label { color: var(--accent2); }
.sd-stat-card.red-card .sd-stat-label { color: var(--accent2); }
.sd-stat-card:not(.purple-card):not(.teal-card):not(.red-card) .sd-stat-label { color: var(--sd-text2); }
.sd-stat-value {
  font-size: 2rem; font-weight: 800; color: var(--sd-text);
  line-height: 1; margin-bottom: 2px; position: relative; z-index: 1;
}
.sd-stat-sub { font-size: 0.76rem; color: var(--sd-text2); margin-bottom: 16px; position: relative; z-index: 1; }
.sd-stat-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.79rem; font-weight: 600;
  cursor: pointer; background: none; border: none; padding: 0;
  font-family: inherit; transition: gap 0.18s;
  position: relative; z-index: 1;
}
.sd-stat-card.purple-card .sd-stat-cta { color: var(--accent2); }
.sd-stat-card.teal-card .sd-stat-cta { color: var(--accent2); }
.sd-stat-card.red-card .sd-stat-cta { color: var(--accent2); }
.sd-stat-card:not(.purple-card):not(.teal-card):not(.red-card) .sd-stat-cta { color: var(--sd-purple-light); }
.sd-stat-cta:hover { gap: 9px; }

/* ── Dashboard card floating particles ── */
@keyframes sd-particle-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.4); }
  15%  { opacity: 0.9; transform: translateY(-8px) scale(1); }
  85%  { opacity: 0.4; transform: translateY(-28px) scale(0.7); }
  100% { opacity: 0; transform: translateY(-38px) scale(0.3); }
}
.sd-card-particles {
  position: absolute; bottom: 10px; left: 0; right: 0; height: 50%;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.sd-particle {
  position: absolute; bottom: 0; width: 4px; height: 4px; border-radius: 50%;
  animation: sd-particle-rise linear infinite;
  opacity: 0;
}
.sd-p-purple { background: rgba(var(--accent-rgb), 0.175); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.125); }
.sd-p-teal   { background: rgba(var(--accent-rgb), 0.175);  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.125); }
.sd-p-pink   { background: rgba(var(--accent-rgb), 0.175); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.125); }

/* ══════════════════════════════════════════════════
   My Tasks — Typewriter Background Animation
   Extracted from pract.html (by dilmurod_3869 / uiverse.io)
   ══════════════════════════════════════════════════ */

/* Background wrapper layering */
.sd-task-card-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
  overflow: hidden;
}

/* Foreground content wrapper layering */
.sd-task-card-content {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  width: 100%;
  height: 100%;
}

/* Ensure teal-card uses relative and overflow hidden */
.sd-stat-card.teal-card {
  position: relative !important;
  overflow: hidden !important;
}

/* Ambient Glow Orb behind the typewriter */
.sd-task-glow-orb {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  width: 170px;
  height: 170px;
  background: radial-gradient(circle, rgba(45,212,191,0.24) 0%, rgba(45,212,191,0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: sd-task-glow-pulse 6s ease-in-out infinite;
  transform-origin: center right;
}

@keyframes sd-task-glow-pulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.85; }
  50% { transform: translateY(-50%) scale(1.25); opacity: 1.15; }
}

/* Faint Animated Gradient Sweep using transform for optimal performance */
.sd-task-gradient-sweep {
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(45,212,191,0) 30%,
    rgba(45,212,191,0.03) 45%,
    rgba(45,212,191,0.08) 50%,
    rgba(45,212,191,0.03) 55%,
    rgba(45,212,191,0) 70%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: -2;
  animation: sd-task-sweep-skew 9s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes sd-task-sweep-skew {
  0% { transform: translateX(0%) skewX(-20deg); }
  35%, 100% { transform: translateX(200%) skewX(-20deg); }
}

/* Tiny floating particles specifically around the typewriter */
.sd-task-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.sd-task-particle {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  background-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 4px rgba(var(--accent-rgb), 0.075);
  border-radius: 50%;
  bottom: 0;
  animation: sd-task-particle-float 4s infinite linear;
}

@keyframes sd-task-particle-float {
  0% {
    transform: translateY(10px) translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-90px) translateX(12px);
    opacity: 0;
  }
}

/* Typewriter Positioning & Constant Scaling Wrapper */
.sd-task-typewriter-container {
  position: absolute !important;
  top: 50% !important;
  right: 8% !important;
  transform: translateY(-50%) scale(0.9) !important;
  transform-origin: center right !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Original Typewriter styles from pract.html, adapted for the teal theme card */
.typewriter {
  --blue: #F59E0B;
  --blue-dark: #0f766e;
  --key: #ffffff;
  --paper: #F59E0B;
  --text: #F59E0B;
  --tool: #fbbf24;
  --duration: 3s;
  position: relative;
  opacity: 0.38;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  -webkit-animation: bounce05 var(--duration) linear infinite;
  animation: bounce05 var(--duration) linear infinite;
}

/* Slightly more visible on card hover - NO SIZE CHANGE animation */
.sd-stat-card.teal-card:hover .typewriter {
  opacity: 0.65;
}

/* Light mode adjustments */
.light .sd-task-card-bg .typewriter {
  --blue: #0d9488;
  --blue-dark: #115e59;
  --key: #0f766e;
  --paper: #ffffff;
  --text: #5eead4;
  --tool: #d97706;
  opacity: 0.22;
}

.light .sd-stat-card.teal-card:hover .typewriter {
  opacity: 0.45;
}

.typewriter .slide {
  width: 92px;
  height: 20px;
  border-radius: 3px;
  margin-left: 14px;
  transform: translateX(14px);
  background: linear-gradient(var(--blue), var(--blue-dark));
  -webkit-animation: slide05 var(--duration) ease infinite;
  animation: slide05 var(--duration) ease infinite;
}

.typewriter .slide:before,
.typewriter .slide:after,
.typewriter .slide i:before {
  content: "";
  position: absolute;
  background: var(--tool);
}

.typewriter .slide:before {
  width: 2px;
  height: 8px;
  top: 6px;
  left: 100%;
}

.typewriter .slide:after {
  left: 94px;
  top: 3px;
  height: 14px;
  width: 6px;
  border-radius: 3px;
}

.typewriter .slide i {
  display: block;
  position: absolute;
  right: 100%;
  width: 6px;
  height: 4px;
  top: 4px;
  background: var(--tool);
}

.typewriter .slide i:before {
  right: 100%;
  top: -2px;
  width: 4px;
  border-radius: 2px;
  height: 14px;
}

.typewriter .paper {
  position: absolute;
  left: 24px;
  top: -26px;
  width: 40px;
  height: 46px;
  border-radius: 5px;
  background: var(--paper);
  transform: translateY(46px);
  -webkit-animation: paper05 var(--duration) linear infinite;
  animation: paper05 var(--duration) linear infinite;
}

.typewriter .paper:before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 7px;
  border-radius: 2px;
  height: 4px;
  transform: scaleY(0.8);
  background: var(--text);
  box-shadow:
    0 12px 0 var(--text),
    0 24px 0 var(--text),
    0 36px 0 var(--text);
}

.typewriter .keyboard {
  width: 120px;
  height: 56px;
  margin-top: -10px;
  z-index: 1;
  position: relative;
}

.typewriter .keyboard:before,
.typewriter .keyboard:after {
  content: "";
  position: absolute;
}

.typewriter .keyboard:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  transform: perspective(10px) rotateX(2deg);
  transform-origin: 50% 100%;
}

.typewriter .keyboard:after {
  left: 2px;
  top: 25px;
  width: 11px;
  height: 4px;
  border-radius: 2px;
  box-shadow:
    15px 0 0 var(--key),
    30px 0 0 var(--key),
    45px 0 0 var(--key),
    60px 0 0 var(--key),
    75px 0 0 var(--key),
    90px 0 0 var(--key),
    22px 10px 0 var(--key),
    37px 10px 0 var(--key),
    52px 10px 0 var(--key),
    60px 10px 0 var(--key),
    68px 10px 0 var(--key),
    83px 10px 0 var(--key);
  -webkit-animation: keyboard05 var(--duration) linear infinite;
  animation: keyboard05 var(--duration) linear infinite;
}

/* Original keyframes from pract.html */
@keyframes bounce05 {
  85%,
  92%,
  100% {
    transform: translateY(0);
  }

  89% {
    transform: translateY(-4px);
  }

  95% {
    transform: translateY(2px);
  }
}

@keyframes slide05 {
  5% {
    transform: translateX(14px);
  }

  15%,
  30% {
    transform: translateX(6px);
  }

  40%,
  55% {
    transform: translateX(0);
  }

  65%,
  70% {
    transform: translateX(-4px);
  }

  80%,
  89% {
    transform: translateX(-12px);
  }

  100% {
    transform: translateX(14px);
  }
}

@keyframes paper05 {
  5% {
    transform: translateY(46px);
  }

  20%,
  30% {
    transform: translateY(34px);
  }

  40%,
  55% {
    transform: translateY(22px);
  }

  65%,
  70% {
    transform: translateY(10px);
  }

  80%,
  85% {
    transform: translateY(0);
  }

  92%,
  100% {
    transform: translateY(46px);
  }
}

@keyframes keyboard05 {
  5%,
  12%,
  21%,
  30%,
  39%,
  48%,
  57%,
  66%,
  75%,
  84% {
    box-shadow:
      15px 0 0 var(--key),
      30px 0 0 var(--key),
      45px 0 0 var(--key),
      60px 0 0 var(--key),
      75px 0 0 var(--key),
      90px 0 0 var(--key),
      22px 10px 0 var(--key),
      37px 10px 0 var(--key),
      52px 10px 0 var(--key),
      60px 10px 0 var(--key),
      68px 10px 0 var(--key),
      83px 10px 0 var(--key);
  }

  9% {
    box-shadow:
      15px 2px 0 var(--key),
      30px 0 0 var(--key),
      45px 0 0 var(--key),
      60px 0 0 var(--key),
      75px 0 0 var(--key),
      90px 0 0 var(--key),
      22px 10px 0 var(--key),
      37px 10px 0 var(--key),
      52px 10px 0 var(--key),
      60px 10px 0 var(--key),
      68px 10px 0 var(--key),
      83px 10px 0 var(--key);
  }

  18% {
    box-shadow:
      15px 0 0 var(--key),
      30px 0 0 var(--key),
      45px 0 0 var(--key),
      60px 2px 0 var(--key),
      75px 0 0 var(--key),
      90px 0 0 var(--key),
      22px 10px 0 var(--key),
      37px 10px 0 var(--key),
      52px 10px 0 var(--key),
      60px 10px 0 var(--key),
      68px 10px 0 var(--key),
      83px 10px 0 var(--key);
  }

  27% {
    box-shadow:
      15px 0 0 var(--key),
      30px 0 0 var(--key),
      45px 0 0 var(--key),
      60px 0 0 var(--key),
      75px 0 0 var(--key),
      90px 0 0 var(--key),
      22px 12px 0 var(--key),
      37px 10px 0 var(--key),
      52px 10px 0 var(--key),
      60px 10px 0 var(--key),
      68px 10px 0 var(--key),
      83px 10px 0 var(--key);
  }

  36% {
    box-shadow:
      15px 0 0 var(--key),
      30px 0 0 var(--key),
      45px 0 0 var(--key),
      60px 0 0 var(--key),
      75px 0 0 var(--key),
      90px 0 0 var(--key),
      22px 10px 0 var(--key),
      37px 10px 0 var(--key),
      52px 12px 0 var(--key),
      60px 12px 0 var(--key),
      68px 12px 0 var(--key),
      83px 10px 0 var(--key);
  }

  45% {
    box-shadow:
      15px 0 0 var(--key),
      30px 0 0 var(--key),
      45px 0 0 var(--key),
      60px 0 0 var(--key),
      75px 0 0 var(--key),
      90px 2px 0 var(--key),
      22px 10px 0 var(--key),
      37px 10px 0 var(--key),
      52px 10px 0 var(--key),
      60px 10px 0 var(--key),
      68px 10px 0 var(--key),
      83px 10px 0 var(--key);
  }

  54% {
    box-shadow:
      15px 0 0 var(--key),
      30px 2px 0 var(--key),
      45px 0 0 var(--key),
      60px 0 0 var(--key),
      75px 0 0 var(--key),
      90px 0 0 var(--key),
      22px 10px 0 var(--key),
      37px 10px 0 var(--key),
      52px 10px 0 var(--key),
      60px 10px 0 var(--key),
      68px 10px 0 var(--key),
      83px 10px 0 var(--key);
  }

  63% {
    box-shadow:
      15px 0 0 var(--key),
      30px 0 0 var(--key),
      45px 0 0 var(--key),
      60px 0 0 var(--key),
      75px 0 0 var(--key),
      90px 0 0 var(--key),
      22px 10px 0 var(--key),
      37px 10px 0 var(--key),
      52px 10px 0 var(--key),
      60px 10px 0 var(--key),
      83px 12px 0 var(--key);
  }

  72% {
    box-shadow:
      15px 0 0 var(--key),
      30px 0 0 var(--key),
      45px 2px 0 var(--key),
      60px 0 0 var(--key),
      75px 0 0 var(--key),
      90px 0 0 var(--key),
      22px 10px 0 var(--key),
      37px 10px 0 var(--key),
      52px 10px 0 var(--key),
      60px 10px 0 var(--key),
      68px 10px 0 var(--key),
      83px 10px 0 var(--key);
  }

  81% {
    box-shadow:
      15px 0 0 var(--key),
      30px 0 0 var(--key),
      45px 0 0 var(--key),
      60px 0 0 var(--key),
      75px 0 0 var(--key),
      90px 0 0 var(--key),
      22px 10px 0 var(--key),
      37px 12px 0 var(--key),
      52px 10px 0 var(--key),
      60px 10px 0 var(--key),
      68px 10px 0 var(--key),
      83px 10px 0 var(--key);
  }
}

/* ══════════════════════════════════════════════════
   Today's Agenda — Book Animation Background
   Extracted from pract.html (by anand_4957 / uiverse.io)
   Renamed to sd-book-* to avoid global conflicts.
   All em-values scale via font-size on .sd-book.
   ══════════════════════════════════════════════════ */

/* Wrapper: absolutely positioned, behind all card content */
.sd-agenda-book-anim {
  position: absolute;
  top: 50%;
  right: 10%;
  z-index: 0;
  pointer-events: none;
  /* Subtle in dark mode — premium, not distracting */
  opacity: 0.15;
  transform: translateY(-50%);
  transform-origin: center right;
  transition: opacity 0.3s ease;
}
/* Slightly more visible on card hover */
.sd-stat-card.purple-card:hover .sd-agenda-book-anim { opacity: 0.2; }

/* Light mode: even subtler so it doesn't clash with light bg */
.light .sd-agenda-book-anim { opacity: 0.07; }
.light .sd-stat-card.purple-card:hover .sd-agenda-book-anim { opacity: 0.12; }

/* ── Book structure ── */
.sd-book,
.sd-book__pg-shadow,
.sd-book__pg {
  animation: sd-book-cover 5s ease-in-out infinite;
}
.sd-book {
  /* Scale via font-size so all em units grow proportionally */
  font-size: 17px;
  background-color: hsl(268, 90%, 65%);
  border-radius: 0.25em;
  box-shadow:
    0 0.25em 0.5em hsla(0, 0%, 0%, 0.3),
    0 0 0 0.25em hsl(278, 100%, 57%) inset;
  padding: 0.25em;
  perspective: 37.5em;
  position: relative;
  width: 8em;
  height: 6em;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}
.sd-book__pg-shadow,
.sd-book__pg {
  position: absolute;
  left: 0.25em;
  width: calc(50% - 0.25em);
}
.sd-book__pg-shadow {
  animation-name: sd-book-shadow;
  background-image: linear-gradient(
    -45deg,
    hsla(0, 0%, 0%, 0) 50%,
    hsla(0, 0%, 0%, 0.3) 50%
  );
  filter: blur(0.25em);
  top: calc(100% - 0.25em);
  height: 3.75em;
  transform: scaleY(0);
  transform-origin: 100% 0%;
}
.sd-book__pg {
  animation-name: sd-book-pg1;
  background-color: hsl(223, 10%, 100%);
  background-image: linear-gradient(
    90deg,
    hsla(223, 10%, 90%, 0) 87.5%,
    hsl(223, 10%, 90%)
  );
  height: calc(100% - 0.5em);
  transform-origin: 100% 50%;
}
.sd-book__pg--2,
.sd-book__pg--3,
.sd-book__pg--4 {
  background-image: repeating-linear-gradient(
      hsl(223, 10%, 10%) 0 0.125em,
      hsla(223, 10%, 10%, 0) 0.125em 0.5em
    ),
    linear-gradient(90deg, hsla(223, 10%, 90%, 0) 87.5%, hsl(223, 10%, 90%));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.5em 4.125em, 100% 100%;
}
.sd-book__pg--2 { animation-name: sd-book-pg2; }
.sd-book__pg--3 { animation-name: sd-book-pg3; }
.sd-book__pg--4 { animation-name: sd-book-pg4; }
.sd-book__pg--5 { animation-name: sd-book-pg5; }

/* ── Book keyframes (prefixed sd-book-*) ── */
@keyframes sd-book-cover {
  from, 5%, 45%, 55%, 95%, to {
    animation-timing-function: ease-out;
    background-color: hsl(278, 84%, 67%);
  }
  10%, 40%, 60%, 90% {
    animation-timing-function: ease-in;
    background-color: hsl(271, 90%, 45%);
  }
}
@keyframes sd-book-shadow {
  from, 10.01%, 20.01%, 30.01%, 40.01% {
    animation-timing-function: ease-in;
    transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);
  }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 1px) scaleY(0.2) rotateY(90deg);
  }
  10%, 20%, 30%, 40%, 50%, to {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);
  }
  50.01%, 60.01%, 70.01%, 80.01%, 90.01% {
    animation-timing-function: ease-in;
    transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);
  }
  60%, 70%, 80%, 90%, to {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);
  }
}
@keyframes sd-book-pg1 {
  from, to {
    animation-timing-function: ease-in-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(0.4deg);
  }
  10%, 15% {
    animation-timing-function: ease-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(180deg);
  }
  20%, 80% {
    animation-timing-function: ease-in;
    background-color: hsl(223, 10%, 45%);
    transform: translate3d(0, 0, 1px) rotateY(180deg);
  }
  85%, 90% {
    animation-timing-function: ease-in-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(180deg);
  }
}
@keyframes sd-book-pg2 {
  from, to {
    animation-timing-function: ease-in;
    background-color: hsl(223, 10%, 45%);
    transform: translate3d(0, 0, 1px) rotateY(0.3deg);
  }
  5%, 10% {
    animation-timing-function: ease-in-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(0.3deg);
  }
  20%, 25% {
    animation-timing-function: ease-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(179.9deg);
  }
  30%, 70% {
    animation-timing-function: ease-in;
    background-color: hsl(223, 10%, 45%);
    transform: translate3d(0, 0, 1px) rotateY(179.9deg);
  }
  75%, 80% {
    animation-timing-function: ease-in-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(179.9deg);
  }
  90%, 95% {
    animation-timing-function: ease-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(0.3deg);
  }
}
@keyframes sd-book-pg3 {
  from, 10%, 90%, to {
    animation-timing-function: ease-in;
    background-color: hsl(223, 10%, 45%);
    transform: translate3d(0, 0, 1px) rotateY(0.2deg);
  }
  15%, 20% {
    animation-timing-function: ease-in-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(0.2deg);
  }
  30%, 35% {
    animation-timing-function: ease-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(179.8deg);
  }
  40%, 60% {
    animation-timing-function: ease-in;
    background-color: hsl(223, 10%, 45%);
    transform: translate3d(0, 0, 1px) rotateY(179.8deg);
  }
  65%, 70% {
    animation-timing-function: ease-in-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(179.8deg);
  }
  80%, 85% {
    animation-timing-function: ease-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(0.2deg);
  }
}
@keyframes sd-book-pg4 {
  from, 20%, 80%, to {
    animation-timing-function: ease-in;
    background-color: hsl(223, 10%, 45%);
    transform: translate3d(0, 0, 1px) rotateY(0.1deg);
  }
  25%, 30% {
    animation-timing-function: ease-in-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(0.1deg);
  }
  40%, 45% {
    animation-timing-function: ease-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(179.7deg);
  }
  50% {
    animation-timing-function: ease-in;
    background-color: hsl(223, 10%, 45%);
    transform: translate3d(0, 0, 1px) rotateY(179.7deg);
  }
  55%, 60% {
    animation-timing-function: ease-in-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(179.7deg);
  }
  70%, 75% {
    animation-timing-function: ease-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(0.1deg);
  }
}
@keyframes sd-book-pg5 {
  from, 30%, 70%, to {
    animation-timing-function: ease-in;
    background-color: hsl(223, 10%, 45%);
    transform: translate3d(0, 0, 1px) rotateY(0);
  }
  35%, 40% {
    animation-timing-function: ease-in-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(0deg);
  }
  50% {
    animation-timing-function: ease-in-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(179.6deg);
  }
  60%, 65% {
    animation-timing-function: ease-out;
    background-color: hsl(223, 10%, 100%);
    transform: translate3d(0, 0, 1px) rotateY(0);
  }
}

/* ── Live Class Tools ── */
.sd-tools-section { margin-bottom: 20px; }
.sd-section-header { margin-bottom: 14px; }
.sd-section-title {
  font-size: 1rem; font-weight: 700; color: var(--sd-text); margin-bottom: 3px;
  display: flex; align-items: center; gap: 7px;
}
.sd-section-sub { font-size: 0.76rem; color: var(--sd-text2); }
.sd-tools-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.sd-tool-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: 16px; padding: 22px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; transition: all 0.22s;
  position: relative; overflow: hidden;
  font-family: inherit; color: var(--sd-text);
  text-align: center;
}
.sd-tool-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.022), transparent);
  pointer-events: none;
}
.sd-tool-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 28px rgba(var(--accent-rgb), 0.035), 0 0 0 1px rgba(var(--accent-rgb), 0.025);
  transform: translateY(-4px);
  background: var(--sd-surface2);
}
.sd-tool-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.1) 0%, transparent 70%);
  pointer-events: none; opacity: 0; transition: opacity 0.22s;
}
.sd-tool-card:hover::after { opacity: 1; }
.sd-tool-icon {
  width: 54px; height: 54px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; position: relative; z-index: 1;
  transition: transform 0.22s;
}
.sd-tool-card:hover .sd-tool-icon { transform: scale(1.1); }
.sd-tool-label { font-size: 0.8rem; font-weight: 600; position: relative; z-index: 1; }

/* ── Learning Hub Section ── */
.sd-hub-section { margin-bottom: 16px; }
.sd-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sd-hub-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: 14px;
  cursor: pointer; transition: all 0.2s;
  position: relative; overflow: hidden;
}
.sd-hub-item::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.018), transparent);
  pointer-events: none;
}
.sd-hub-item:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 22px rgba(0,0,0,0.25);
  transform: translateY(-2px);
  background: var(--sd-surface2);
}
.sd-hub-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0; position: relative; z-index: 1;
}
.sd-hub-info { flex: 1; min-width: 0; padding-right: 14px; position: relative; z-index: 1; }
.sd-hub-title { font-size: 0.82rem; font-weight: 700; color: var(--sd-text); margin-bottom: 3px; }
.sd-hub-sub { font-size: 0.7rem; color: var(--sd-text2); line-height: 1.4; }
.sd-hub-arrow { font-size: 0.9rem; color: var(--sd-text3); flex-shrink: 0; position: relative; z-index: 1; transition: color 0.18s, transform 0.18s; }

/* ── Premium Analytics Cards ── */
.sd-analytics-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 24px; }
.sd-analytics-card {
  background: var(--sd-surface); border-radius: 18px; padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative; overflow: hidden;
  --sd-box-bg: rgba(255,255,255,0.06);
  --sd-box-border: rgba(255,255,255,0.08);
}
.sd-ac-mini-bar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.sd-analytics-empty-state {
  grid-column: 1 / -1;
  background: var(--sd-surface);
  border-radius: 18px;
  padding: 32px 24px;
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.sd-analytics-empty-state:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.sd-aes-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 12px;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.037);
  animation: float-slow 4s ease-in-out infinite;
}
.sd-aes-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.sd-aes-desc {
  font-size: 0.78rem;
  color: var(--text3);
  max-width: 380px;
  line-height: 1.45;
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.sd-analytics-card::before {
  content:''; position:absolute; inset:0; border-radius:18px;
  background: radial-gradient(ellipse at top left, var(--sd-ac-glow,rgba(var(--accent-rgb), 0.03)) 0%, transparent 65%);
  pointer-events:none;
}
.sd-analytics-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.sd-ac-purple { --sd-ac-glow: rgba(var(--accent-rgb), 0.037); border-color: rgba(var(--accent-rgb), 0.045); }
.sd-ac-teal   { --sd-ac-glow: rgba(var(--accent-rgb), 0.037);  border-color: rgba(var(--accent-rgb), 0.045); }
.sd-ac-orange { --sd-ac-glow: rgba(249,115,22,0.15);  border-color: rgba(249,115,22,0.18); }
.sd-ac-gold   { --sd-ac-glow: rgba(251,191,36,0.15);  border-color: rgba(251,191,36,0.18); }
.sd-ac-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; position: relative; z-index: 1; }
.sd-ac-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.sd-ac-meta { flex: 1; }
.sd-ac-label { font-size: 0.72rem; color: rgba(241,245,249,0.45); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.sd-ac-value { font-size: 1.55rem; font-weight: 800; color: var(--sv2-text); letter-spacing: -0.02em; line-height: 1.1; }
.sd-ac-bar-wrap { position: relative; z-index: 1; }
.sd-ac-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.sd-ac-bar-fill { height: 100%; border-radius: 6px; transition: width 0.8s cubic-bezier(.34,1.26,.64,1); }
.sd-bar-purple { background: linear-gradient(90deg,var(--accent),var(--accent2)); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.125); }
.sd-ac-bar-label { font-size: 0.68rem; color: rgba(241,245,249,0.35); }
.sd-ac-ring-row { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
@media(max-width:600px) { .sd-analytics-grid { grid-template-columns: 1fr; } }
.sd-hub-item:hover .sd-hub-arrow { color: var(--sd-purple-light); transform: translateX(3px); }
/* Legacy hub card wrapper - safe passthrough */
.sd-hub-card { display: contents; }

/* ── Inline page wrapper ── */
.sd-page-inner {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .sd-tools-row { grid-template-columns: repeat(3, 1fr); }
  .sd-hub-grid { grid-template-columns: repeat(2, 1fr); }
  .sd-hero-laptop { display: none !important; }
}
@media (max-width: 900px) {
  :root { --sd-sidebar-w: 190px; }
  .sd-stat-row { grid-template-columns: repeat(2, 1fr); }
  .sd-hero-left  { padding: 24px 22px; gap: 16px; }
  .sd-hero-right { min-width: 165px; padding: 22px 22px; }
  .sd-hero-avatar { width: 68px; height: 68px; font-size: 1.85rem; }
  .sd-hero-title { font-size: 1.7rem; }
  .sd-hero-stat-timer { font-size: 1.75rem; }
  .slch-orb-2 { display: none; }
}
@media (max-width: 768px) {
  .sd-sidebar { display: none; }
  .sd-tools-row { grid-template-columns: repeat(3, 1fr); }
  .sd-stat-row { grid-template-columns: 1fr; }
  .sd-hub-grid { grid-template-columns: repeat(2, 1fr); }
  .sd-hero { flex-direction: column; min-height: auto; }
  .sd-hero-divider { display: none; }
  .sd-hero-right {
    text-align: left;
    border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: row; gap: 12px; padding: 16px 22px;
  }
  .sd-hero-stat { text-align: left; flex: 1; }
  .sd-hero-stat-timer { font-size: 1.4rem; }
  .slch-orb-3 { display: none; }
}
@media (max-width: 480px) {
  .sd-hero-left  { padding: 18px 18px; gap: 14px; }
  .sd-hero-avatar { width: 58px; height: 58px; font-size: 1.6rem; }
  .sd-hero-title { font-size: 1.32rem; }
  .sd-hero-right { gap: 10px; }
}

/* Raise Hand premium button */
.sv2-raise-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 100px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  color: #fff; cursor: pointer; font-size: 0.82rem;
  font-weight: 700; font-family: inherit; transition: all 0.22s;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.1), 0 0 0 1px rgba(var(--accent-rgb), 0.05);
}
.sv2-raise-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent));
  box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.138), 0 0 0 1px rgba(var(--accent-rgb), 0.087);
  transform: translateY(-1px);
}
.sv2-raise-btn.raised {
  background: linear-gradient(135deg, #f97316, #fbbf24);
  box-shadow: 0 4px 18px rgba(249,115,22,0.45), 0 0 0 1px rgba(249,115,22,0.2);
}
.sv2-raise-btn.raised:hover {
  box-shadow: 0 6px 24px rgba(249,115,22,0.55);
}
.sv2-leave-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 10px;
  border: 1px solid rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.1);
  color: #fca5a5; cursor: pointer; font-size: 0.8rem;
  font-weight: 600; font-family: inherit; transition: all 0.2s;
  white-space: nowrap;
}
.sv2-leave-btn:hover {
  background: rgba(239,68,68,0.2);
  box-shadow: 0 0 16px rgba(239,68,68,0.25);
  color: #fff;
}
.sv2-session-code {
  padding: 5px 12px; border-radius: 100px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem; font-weight: 700;
  color: var(--sv2-blue); letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.2s;
}
.sv2-session-code:hover { border-color: rgba(var(--accent-rgb), 0.1); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.037); }
.sv2-ws-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sv2-ws-dot.online  { background: var(--sv2-green); box-shadow: 0 0 6px rgba(16,185,129,0.6); }
.sv2-ws-dot.offline { background: var(--sv2-red); animation: sv2-blink 1.2s infinite; }
@keyframes sv2-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── 3-Column Shell ── */
.sv2-shell {
  display: flex; width: 100%;
  height: calc(100vh - var(--sv2-nav-h) - 80px);
  background: var(--sv2-bg); overflow: hidden;
}

/* ── Left Sidebar ── */
.sv2-left {
  width: var(--sv2-sidebar-w); min-width: var(--sv2-sidebar-w);
  height: 100%; overflow-y: auto; overflow-x: hidden;
  background: rgba(11, 11, 11, 0.85);
  border-right: 1px solid var(--sv2-border);
  display: flex; flex-direction: column;
  padding: 12px 0; flex-shrink: 0;
  scrollbar-width: none;
}
.sv2-left::-webkit-scrollbar { display: none; }

/* Live class card in sidebar */
.sv2-live-card {
  margin: 0 10px 14px;
  padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.15));
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative; overflow: hidden;
}
.sv2-live-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent);
  pointer-events: none;
}
.sv2-live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 100px; font-size: 0.65rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.35);
  color: #34D399; margin-bottom: 6px;
}
.sv2-live-badge-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #34D399;
  animation: sv2-livepulse 1.5s ease infinite;
}
@keyframes sv2-livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} }
.sv2-live-title {
  font-size: 0.88rem; font-weight: 700; color: var(--sv2-text);
  margin-bottom: 3px; font-family: 'Syne', sans-serif;
}
.sv2-live-sub { font-size: 0.7rem; color: var(--sv2-text3); margin-bottom: 10px; }
.sv2-progress-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.sv2-progress-label { font-size: 0.68rem; color: var(--sv2-text3); font-weight: 600; }
.sv2-progress-val { font-size: 0.68rem; color: var(--sv2-text2); font-weight: 700; }
.sv2-progress-bar {
  height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08);
  overflow: hidden; margin-bottom: 10px;
}
.sv2-progress-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--sv2-blue), var(--sv2-purple));
  transition: width 0.5s ease;
}
.sv2-rank-row {
  display: flex; align-items: center; justify-content: space-between;
}
.sv2-rank-chip {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 700; color: var(--sv2-gold);
}
.sv2-teacher-pill {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.65rem; color: var(--sv2-purple); font-weight: 600;
}
.sv2-teacher-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--sv2-purple);
  box-shadow: 0 0 6px var(--sv2-purple-glow);
}

/* Sidebar section labels */
.sv2-section-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px 4px; margin-top: 4px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sv2-text3);
}
.sv2-section-add {
  width: 18px; height: 18px; border-radius: 5px; border: none;
  background: var(--sv2-surface2); color: var(--sv2-text3);
  cursor: pointer; font-size: 0.85rem; display: flex;
  align-items: center; justify-content: center;
  transition: all 0.2s;
}
.sv2-section-add:hover { background: var(--sv2-surface3); color: var(--sv2-text); }

/* Sidebar nav items */
.sv2-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; margin: 0 6px 2px; border-radius: 10px;
  cursor: pointer; transition: all 0.15s; border: none;
  background: transparent; width: calc(100% - 12px);
  color: var(--sv2-text2); font-size: 0.83rem; font-family: inherit;
  font-weight: 500; text-align: left; position: relative;
}
.sv2-nav-item:hover { background: var(--sv2-surface2); color: var(--sv2-text); }
.sv2-nav-item.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--sv2-text);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sv2-nav-item.active .sv2-item-icon { filter: drop-shadow(0 0 4px var(--sv2-purple-glow)); }
.sv2-item-icon { font-size: 0.9rem; flex-shrink: 0; width: 18px; text-align: center; }
.sv2-item-label { flex: 1; }
.sv2-item-badge {
  font-size: 0.55rem; padding: 1px 5px; border-radius: 100px;
  background: var(--sv2-purple); color: #fff; font-weight: 700;
}

/* DM items */
.sv2-dm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; margin: 0 6px 1px; border-radius: 10px;
  cursor: pointer; transition: all 0.15s;
  color: var(--sv2-text2); font-size: 0.82rem;
}
.sv2-dm-item:hover { background: var(--sv2-surface2); color: var(--sv2-text); }
.sv2-dm-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sv2-purple), var(--sv2-blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff; overflow: hidden;
  position: relative;
}
.sv2-dm-online {
  position: absolute; bottom: 0; right: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sv2-green); border: 1.5px solid var(--sv2-bg);
}
.sv2-dm-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Motivational card at bottom of sidebar */
.sv2-motivate-card {
  margin: auto 10px 0;
  padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.18));
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative; overflow: hidden;
  margin-top: 16px;
}
.sv2-motivate-card::before {
  content: ''; position: absolute;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.3), transparent);
  right: -20px; bottom: -20px; border-radius: 50%;
}
.sv2-motivate-emoji { font-size: 1.1rem; margin-bottom: 6px; display: block; }
.sv2-motivate-title {
  font-size: 0.78rem; font-weight: 700; color: var(--sv2-text);
  margin-bottom: 4px; font-family: 'Syne', sans-serif;
}
.sv2-motivate-text { font-size: 0.68rem; color: var(--sv2-text3); line-height: 1.5; }

/* ── Center Content ── */
.sv2-center {
  flex: 1; height: 100%; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  background: var(--sv2-bg);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
  min-width: 0;
}
.sv2-center::-webkit-scrollbar { width: 4px; }
.sv2-center::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Right Panel ── */
.sv2-right {
  width: var(--sv2-right-w); min-width: var(--sv2-right-w);
  height: 100%; overflow-y: auto; overflow-x: hidden;
  background: rgba(11, 11, 11, 0.85);
  border-left: 1px solid var(--sv2-border);
  padding: 14px 12px; flex-shrink: 0;
  scrollbar-width: none;
}
.sv2-right::-webkit-scrollbar { display: none; }

.sv2-panel-card {
  background: var(--sv2-surface);
  border: 1px solid var(--sv2-border);
  border-radius: 14px; padding: 14px; margin-bottom: 12px;
  transition: border-color 0.2s;
}
.sv2-panel-card:hover { border-color: var(--sv2-border2); }
.sv2-panel-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.78rem; font-weight: 700; color: var(--sv2-text);
  margin-bottom: 12px; font-family: 'Syne', sans-serif;
}
.sv2-panel-title-icon { font-size: 0.9rem; }

/* Participants */
.sv2-participants-row {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px;
}
.sv2-participant-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sv2-purple), var(--sv2-blue));
  border: 2px solid var(--sv2-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff;
  cursor: default; transition: transform 0.2s;
}
.sv2-participant-av:hover { transform: scale(1.15); z-index: 1; }
.sv2-participant-more {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sv2-surface3);
  border: 2px solid var(--sv2-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; color: var(--sv2-text3);
}
.sv2-invite-btn {
  width: 100%; padding: 8px; border-radius: 8px;
  border: 1px dashed var(--sv2-border2);
  background: transparent; color: var(--sv2-text3);
  cursor: pointer; font-size: 0.75rem; font-family: inherit;
  transition: all 0.2s; display: flex; align-items: center;
  justify-content: center; gap: 5px;
}
.sv2-invite-btn:hover { border-color: var(--sv2-purple); color: var(--sv2-purple); background: var(--sv2-purple-dim); }

/* Leaderboard */
.sv2-lb-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sv2-lb-row:last-child { border-bottom: none; }
.sv2-lb-rank {
  width: 18px; font-size: 0.7rem; font-weight: 700;
  color: var(--sv2-text3); text-align: center; flex-shrink: 0;
}
.sv2-lb-rank.top { color: var(--sv2-gold); }
.sv2-lb-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sv2-purple), var(--sv2-blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: #fff;
}
.sv2-lb-name { flex: 1; font-size: 0.78rem; color: var(--sv2-text2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv2-lb-xp { font-size: 0.72rem; font-weight: 700; color: var(--sv2-purple); }
.sv2-view-all-btn {
  width: 100%; padding: 7px; border-radius: 8px;
  border: 1px solid var(--sv2-border); background: transparent;
  color: var(--sv2-text3); cursor: pointer; font-size: 0.73rem;
  font-family: inherit; margin-top: 8px; transition: all 0.2s;
}
.sv2-view-all-btn:hover { border-color: var(--sv2-purple); color: var(--sv2-purple); }

/* Agenda */
.sv2-agenda-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sv2-agenda-item:last-child { border-bottom: none; }
.sv2-agenda-time { font-size: 0.68rem; color: var(--sv2-text3); font-family: 'JetBrains Mono', monospace; min-width: 50px; }
.sv2-agenda-label { font-size: 0.75rem; color: var(--sv2-text2); flex: 1; }
.sv2-agenda-check {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sv2-agenda-check.done { background: var(--sv2-blue); font-size: 0.55rem; color: #fff; }
.sv2-agenda-check.pending { border: 1.5px solid var(--sv2-border2); }

/* Motivational widget in right panel */
.sv2-motivate-widget {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.1));
  border: 1px solid rgba(var(--accent-rgb), 0.18); border-radius: 14px; padding: 14px;
}
.sv2-motivate-widget-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; color: var(--sv2-gold); margin-bottom: 6px;
}
.sv2-motivate-widget-text { font-size: 0.72rem; color: var(--sv2-text3); line-height: 1.6; }

/* ── Chat v2 (inside sv2-center) ── */
/* ═══════════════════════════════════════════════════════════════════
   STUDENT CHAT V2 — PREMIUM GLASSMORPHISM REDESIGN
   ═══════════════════════════════════════════════════════════════════ */
@keyframes sv2-chat-glow-pulse {
  0%,100% { opacity:0.6; }
  50% { opacity:1; }
}
@keyframes sv2-neon-border {
  0%,100% { box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.075), inset 0 0 8px rgba(var(--accent-rgb), 0.013); }
  50% { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.125), inset 0 0 16px rgba(var(--accent-rgb), 0.02); }
}
@keyframes sv2-send-ripple {
  0% { transform: scale(1); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.1); }
  50% { transform: scale(1.12); box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.175), 0 0 50px rgba(var(--accent-rgb), 0.075); }
  100% { transform: scale(1); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.1); }
}
@keyframes sv2-bubble-in {
  from { opacity:0; transform: translateY(6px) scale(0.96); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes sv2-header-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.sv2-chat-layout {
  display: flex; flex-direction: column; height: 100%;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.98) 0%, rgba(5, 5, 5, 1) 100%);
  position: relative;
}
/* Ambient glow behind the whole chat */
.sv2-chat-layout::before {
  content:''; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:400px; height:300px; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
  animation: sd-orb-drift 12s ease-in-out infinite;
}

/* ── Chat Header — premium glass bar ── */
.sv2-chat-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(11, 11, 11, 0.96), rgba(11, 11, 11, 0.96));
  flex-shrink: 0; position: relative; z-index: 2;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb), 0.037), 0 4px 20px rgba(0,0,0,0.4);
}
/* Header shimmer line */
.sv2-chat-header::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.6) 35%, rgba(var(--accent-rgb), 0.5) 65%, transparent 100%);
  background-size: 200% 100%;
  animation: sv2-header-shimmer 4s linear infinite;
}

.sv2-chat-header-avatar {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.8), rgba(var(--accent-rgb), 0.7));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.113), 0 0 32px rgba(var(--accent-rgb), 0.037);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sv2-chat-header-info { flex: 1; }
.sv2-chat-header-title {
  font-size: 0.95rem; font-weight: 700; color: #e2e8f0;
  font-family: 'Syne', sans-serif;
  background: linear-gradient(90deg, var(--accent2), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sv2-chat-header-sub { font-size: 0.7rem; color: rgba(148,163,184,0.6); margin-top: 1px; }
.sv2-chat-header-actions { display: flex; gap: 6px; align-items: center; }
.sv2-chat-icon-btn {
  width: 34px; height: 34px; border-radius: 10px; border: none;
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(148,163,184,0.7);
  cursor: pointer; font-size: 0.85rem; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.sv2-chat-icon-btn:hover {
  background: rgba(var(--accent-rgb), 0.35); border-color: rgba(255, 255, 255, 0.08);
  color: #e2e8f0; box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.05);
  transform: translateY(-1px);
}

/* Chat messages area */
.sv2-chat-messages {
  flex: 1; overflow-y: auto; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.2) transparent;
  position: relative; z-index: 1;
}
.sv2-chat-messages::-webkit-scrollbar { width: 3px; }
.sv2-chat-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.4), rgba(var(--accent-rgb), 0.3));
  border-radius: 2px;
}

/* System / join messages */
.sv2-msg-system {
  display: flex; justify-content: center; margin: 10px 0;
}
.sv2-msg-system-pill {
  padding: 4px 16px; border-radius: 100px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.025);
  font-size: 0.68rem; color: rgba(var(--accent-rgb), 0.8);
  display: flex; align-items: center; gap: 5px;
  letter-spacing: 0.02em;
}

/* Message groups */
.sv2-msg-group { margin-bottom: 20px; animation: sv2-bubble-in 0.22s cubic-bezier(0.22,1,0.36,1) both; }
.sv2-msg-row {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 2px;
}
.sv2-msg-row.mine { flex-direction: row-reverse; }

/* Premium avatar ring */
.sv2-msg-sender-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 700; color: #fff;
  align-self: flex-start; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.1),
    0 0 14px rgba(var(--accent-rgb), 0.3),
    0 3px 10px rgba(0,0,0,0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: default;
}
.sv2-msg-sender-av:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.05), 0 0 22px rgba(var(--accent-rgb), 0.125);
}
.sv2-msg-sender-av img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.sv2-msg-sender-av.teacher-av {
  background: linear-gradient(135deg, var(--accent2), #EF4444);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1), 0 0 14px rgba(var(--accent-rgb), 0.3), 0 3px 10px rgba(0,0,0,0.4);
}
.sv2-msg-row { gap: 14px; }
.sv2-msg-col { display: flex; flex-direction: column; max-width: 68%; }
.sv2-msg-row.mine .sv2-msg-col { align-items: flex-end; }
.sv2-msg-sender-name {
  font-size: 0.67rem; color: rgba(148,163,184,0.5); margin-bottom: 5px;
  font-weight: 600; padding: 0 4px; letter-spacing: 0.01em;
}
.sv2-msg-sender-name.teacher {
  color: rgba(251,191,36,0.8);
  text-shadow: 0 0 8px rgba(251,191,36,0.3);
}

/* ── Message bubbles — premium pill design ── */
.sv2-msg-bubble {
  padding: 11px 16px; border-radius: 20px;
  font-size: 0.875rem; line-height: 1.6; color: #e2e8f0;
  background: rgba(26, 26, 26, 0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom-left-radius: 6px;
  position: relative; word-break: break-word;
  transition: all 0.18s;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.sv2-msg-bubble:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 8px rgba(var(--accent-rgb), 0.025);
}
/* Own message — purple gradient glow */
.sv2-msg-bubble.mine {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.55) 0%, rgba(var(--accent-rgb), 0.35) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-right-radius: 6px; border-bottom-left-radius: 20px;
  box-shadow:
    0 4px 20px rgba(var(--accent-rgb), 0.25),
    0 0 0 1px rgba(var(--accent-rgb), 0.15),
    inset 0 1px 0 rgba(255,255,255,0.08);
  color: #f0f4ff;
}
.sv2-msg-bubble.mine:hover {
  box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.095), 0 0 16px rgba(var(--accent-rgb), 0.037);
  border-color: rgba(255, 255, 255, 0.08);
}
/* Teacher message — amber glass */
.sv2-msg-bubble.teacher {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.25);
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.1);
}
.sv2-msg-bubble.teacher:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.18);
}

.sv2-msg-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 0 4px;
}
.sv2-msg-time {
  font-size: 0.6rem; color: rgba(100,116,139,0.7);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.03em;
}
.sv2-msg-read { font-size: 0.6rem; color: rgba(var(--accent-rgb), 0.7); }

/* File card in chat */
.sv2-file-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 16px;
  background: rgba(26, 26, 26, 0.9); border: 1px solid rgba(255,255,255,0.09);
  text-decoration: none; color: #e2e8f0;
  transition: all 0.2s; cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.sv2-file-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.037);
}
.sv2-file-icon { font-size: 1.6rem; }
.sv2-file-name { font-size: 0.82rem; font-weight: 600; color: #e2e8f0; margin-bottom: 2px; }
.sv2-file-size { font-size: 0.68rem; color: rgba(100,116,139,0.7); }
.sv2-file-dl { margin-left: auto; font-size: 0.85rem; color: rgba(var(--accent-rgb), 0.7); opacity: 0.8; }

/* Reactions */
.sv2-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; padding: 0 4px; }
.sv2-reaction-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 100px;
  background: rgba(26, 26, 26, 0.8); border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; font-size: 0.78rem; transition: all 0.18s;
  backdrop-filter: blur(4px);
}
.sv2-reaction-pill:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.15);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.05);
}
.sv2-reaction-pill.reacted {
  background: rgba(var(--accent-rgb), 0.22);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.062);
}
.sv2-reaction-count { font-size: 0.64rem; color: rgba(148,163,184,0.7); font-weight: 600; }

/* New messages indicator */
.sv2-new-messages { display: flex; justify-content: center; padding: 6px; }
.sv2-new-messages-pill {
  padding: 5px 18px; border-radius: 100px; cursor: pointer;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.25));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.05);
  font-size: 0.72rem; font-weight: 600; color: rgba(var(--accent-rgb), 0.9);
  display: flex; align-items: center; gap: 5px;
  transition: all 0.2s; backdrop-filter: blur(8px);
}
.sv2-new-messages-pill:hover {
  background: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.087);
}

/* ── Chat input composer — floating glass bar ── */
.sv2-composer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.96), rgba(5, 5, 5, 0.98));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  position: relative; z-index: 2;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.sv2-composer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.4), transparent);
}
.sv2-reply-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px 0; font-size: 0.74rem;
  color: rgba(var(--accent-rgb), 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.05);
}
.sv2-reply-bar-dismiss {
  margin-left: auto; background: none; border: none;
  color: rgba(148,163,184,0.5); cursor: pointer; font-size: 1rem; padding: 2px 6px;
  border-radius: 4px; transition: all 0.15s;
}
.sv2-reply-bar-dismiss:hover { color: #e2e8f0; background: rgba(255,255,255,0.06); }

.sv2-composer-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
}
.sv2-composer-input {
  flex: 1;
  background: rgba(11, 11, 11, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 11px 20px; color: #e2e8f0;
  font-size: 0.875rem; font-family: inherit; outline: none;
  transition: all 0.22s; resize: none;
  min-height: 42px; max-height: 120px;
  scrollbar-width: none;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sv2-composer-input::placeholder { color: rgba(100,116,139,0.6); }
.sv2-composer-input:focus {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(26, 26, 26, 0.85);
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.1),
    0 0 16px rgba(var(--accent-rgb), 0.12),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.sv2-composer-btn {
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer; color: rgba(148,163,184,0.7);
  font-size: 1.1rem; padding: 7px; border-radius: 10px;
  transition: all 0.2s; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.sv2-composer-btn:hover {
  color: #e2e8f0;
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.045);
  transform: translateY(-1px);
}

/* Glowing send button */
.sv2-composer-send {
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  color: #fff; font-size: 1.05rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.22s;
  box-shadow:
    0 0 16px rgba(var(--accent-rgb), 0.5),
    0 0 32px rgba(var(--accent-rgb), 0.2),
    0 4px 14px rgba(0,0,0,0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sv2-composer-send:not(:disabled):hover {
  transform: scale(1.1) translateY(-1px);
  box-shadow:
    0 0 24px rgba(var(--accent-rgb), 0.7),
    0 0 48px rgba(var(--accent-rgb), 0.3),
    0 6px 20px rgba(0,0,0,0.5);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.sv2-composer-send:disabled { opacity: 0.3; transform: none; cursor: not-allowed; box-shadow: none; }

/* ── Doubt section — modern purple/indigo ── */
.sv2-doubt-section {
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.85), rgba(5, 5, 5, 0.95));
  backdrop-filter: blur(16px);
  position: relative; z-index: 1;
}
.sv2-doubt-section::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.4), transparent);
}
.sv2-doubt-label {
  font-size: 0.58rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(var(--accent-rgb), 0.7); margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px;
}
.sv2-doubt-row { display: flex; gap: 8px; }
.sv2-doubt-input {
  flex: 1;
  background: rgba(11, 11, 11, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 9px 14px; color: #e2e8f0;
  font-size: 0.8rem; font-family: inherit; outline: none;
  transition: all 0.25s;
  backdrop-filter: blur(6px);
}
.sv2-doubt-input::placeholder { color: rgba(100,116,139,0.45); }
.sv2-doubt-input:focus {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(11, 11, 11, 0.85);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.025), 0 0 16px rgba(var(--accent-rgb), 0.037);
}
.sv2-doubt-btn {
  padding: 9px 16px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.12));
  color: var(--accent2);
  cursor: pointer; font-size: 0.78rem; font-family: inherit;
  font-weight: 700; white-space: nowrap; transition: all 0.2s;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.037);
}
.sv2-doubt-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.22));
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.075), 0 0 6px rgba(var(--accent-rgb), 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  color: var(--accent2);
}
.sv2-doubt-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; box-shadow: none; }
/* Attach button inside doubt */
.sv2-doubt-attach-btn {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; font-size: 0.68rem; font-weight: 700;
  color: rgba(var(--accent-rgb), 0.35); padding: 3px 10px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.07); transition: all 0.2s; user-select: none;
}
.sv2-doubt-attach-btn:hover {
  background: rgba(var(--accent-rgb), 0.35); border-color: rgba(255, 255, 255, 0.08);
  color: var(--accent2);
}

/* ══════════════════════════════════════════════════════════════════
   SV3 — Premium Student Chat Redesign (header + right panel)
   ══════════════════════════════════════════════════════════════════ */
.sv3-chat-shell {
  display: flex; flex-direction: column; height: 100%; gap: 14px;
  padding: 14px 16px; box-sizing: border-box; overflow: hidden;
}
.sv3-top-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; border-radius: 18px; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(11, 11, 11, 0.85), rgba(11, 11, 11, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 24px rgba(var(--accent-rgb), 0.02);
}
.sv3-top-title { font-size: 1.05rem; font-weight: 800; color: #f1f5f9; font-family: 'Syne', sans-serif; }
.sv3-top-sub { font-size: 0.75rem; color: rgba(148,163,184,0.65); margin-top: 2px; }
.sv3-top-actions { display: flex; align-items: center; gap: 12px; }
.sv3-raise-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.85));
  color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer;
  font-family: inherit; transition: all 0.2s; white-space: nowrap;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.1), 0 4px 14px rgba(0,0,0,0.3);
}
.sv3-raise-btn:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.15), 0 6px 18px rgba(0,0,0,0.35); }
.sv3-raise-btn.raised { background: linear-gradient(135deg, #EAB308, var(--accent2)); border-color: rgba(234,179,8,0.5); box-shadow: 0 0 18px rgba(234,179,8,0.4); }
.sv3-bell-btn {
  position: relative; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1; font-size: 1rem; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.sv3-bell-btn:hover { background: rgba(var(--accent-rgb), 0.05); border-color: rgba(var(--accent-rgb), 0.1); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.05); }
.sv3-bell-dot {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 50%; background: #EF4444; color: #fff; font-size: 0.58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #050505;
}
.sv3-top-profile { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); }
.sv3-top-profile-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent)); display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700; color: #fff; overflow: hidden;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.1);
}
.sv3-top-profile-name { font-size: 0.82rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; }

.sv3-chat-body { display: flex; gap: 14px; flex: 1; min-height: 0; }
.sv3-chat-main { flex: 1; min-width: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.sv3-chat-right { width: 290px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; scrollbar-width: none; }
.sv3-chat-right::-webkit-scrollbar { display: none; }

.sv3-card {
  border-radius: 18px; padding: 16px 16px;
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sv3-card:hover { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25); }
.sv3-card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sv3-card-title { font-size: 0.85rem; font-weight: 700; color: #e2e8f0; font-family: 'Syne', sans-serif; }
.sv3-live-pill { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; color: #34D399; }
.sv3-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; animation: sv2-blink 1.4s infinite; }

.sv3-info-row { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: rgba(203,213,225,0.85); padding: 6px 0; }

.sv3-participants-row { display: flex; gap: 14px; flex-wrap: wrap; }
.sv3-participant { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 52px; }
.sv3-participant-av {
  width: 42px; height: 42px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.062);
}
.sv3-participant-more { background: rgba(var(--accent-rgb), 0.35); border: 2px solid rgba(255, 255, 255, 0.08); font-size: 0.78rem; }
.sv3-online-dot { position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: #34D399; border: 2px solid #050505; box-shadow: 0 0 6px #34D399; }
.sv3-participant-name { font-size: 0.65rem; color: rgba(148,163,184,0.75); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52px; }

.sv3-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sv3-qa-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.06); color: #cbd5e1; font-size: 0.74rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all 0.2s;
}
.sv3-qa-icon { font-size: 1.25rem; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.1)); }
.sv3-qa-btn:hover { background: rgba(var(--accent-rgb), 0.04); border-color: rgba(var(--accent-rgb), 0.1); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.05); }
.sv3-qa-btn.active { background: rgba(234,179,8,0.14); border-color: rgba(234,179,8,0.4); color: #FCD34D; }

.sv3-resource-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  text-decoration: none; color: #e2e8f0; border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02); margin-bottom: 8px; transition: all 0.2s;
}
.sv3-resource-row:last-child { margin-bottom: 0; }
.sv3-resource-row:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); }
.sv3-resource-icon { font-size: 1.25rem; flex-shrink: 0; }
.sv3-resource-info { flex: 1; min-width: 0; }
.sv3-resource-name { font-size: 0.76rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv3-resource-size { font-size: 0.65rem; color: rgba(100,116,139,0.7); }
.sv3-resource-dl { font-size: 0.85rem; color: rgba(var(--accent-rgb), 0.7); flex-shrink: 0; }
.sv3-empty-note { font-size: 0.75rem; color: rgba(148,163,184,0.5); text-align: center; padding: 10px 0; }

@media (max-width: 900px) {
  .sv3-chat-body { flex-direction: column; }
  .sv3-chat-right { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .sv3-chat-right .sv3-card { flex: 1 1 240px; }
  .sv3-chat-main { min-height: 480px; }
}
@media (max-width: 700px) {
  .sv3-chat-shell { padding: 8px; gap: 8px; }
  .sv3-top-header { flex-wrap: wrap; padding: 12px 14px; }
  .sv3-top-profile-name { display: none; }
  .sv3-raise-btn { padding: 8px 14px; font-size: 0.78rem; }
}

/* ── Library v2 (inside sv2-center) ── */
.sv2-library-layout { display: flex; flex-direction: column; height: 100%; }

/* ── Content area padding for non-chat pages ── */
.sv2-content-pad { padding: 20px 24px; flex: 1; }

/* ── HUD adjustments in new layout ── */
.sv2-hud-wrap { flex-shrink: 0; }

/* ── Announcement bar override ── */
.sv2-announce {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; background: rgba(234,179,8,0.1);
  border-bottom: 1px solid rgba(234,179,8,0.2); flex-shrink: 0;
}

/* ── Session ended overlay ── */
.sv2-ended {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; flex: 1; padding: 40px;
  text-align: center;
}

/* ── Responsive: collapse sidebars on smaller screens ── */
@media (max-width: 1100px) {
  :root { --sv2-right-w: 230px; }
}
@media (max-width: 900px) {
  .sv2-right { display: none; }
}
@media (max-width: 700px) {
  .sv2-left { display: none; }
  .sv2-shell { display: block; }
  .sv2-center { height: auto; overflow: visible; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE ENHANCEMENT LAYER — additive only, desktop unchanged
   Breakpoints: 480px / 768px / 1024px
   ══════════════════════════════════════════════════════════════════ */

/* ── Touch targets — globally enforced on mobile ── */
@media(max-width:768px){
  .btn{ min-height:44px; padding:10px 16px; }
  .btn-sm{ min-height:36px; padding:7px 12px; font-size:0.82rem; }
  .btn-lg{ min-height:52px; }
  input, select, textarea{ min-height:44px; padding:11px 14px; font-size:1rem; }
  .option-btn{ min-height:48px; padding:14px 16px; font-size:0.95rem; }
  .nav-btn{ min-height:36px; }
  .tab{ min-height:40px; padding:10px 14px; }
}

/* ── Active/tap feedback ── */
@media(hover:none){
  .btn:active:not(:disabled){ transform:scale(0.96); opacity:0.85; }
  .option-btn:active{ transform:scale(0.98); }
  .nav-btn:active{ background:var(--surface2); }
  .role-card:active{ transform:scale(0.98); border-color:var(--accent); }
}

/* ─────────────────────────────────────────────────────────────────
   1024px — small laptops / large tablets landscape
   ───────────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .page{ padding:20px 18px; }
  .grid-4{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
}

/* ─────────────────────────────────────────────────────────────────
   768px — tablets / phablets
   ───────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* layout */
  .page, .page-sm{ padding:16px 14px; }
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }

  /* stat cards */
  .stat-value{ font-size:1.7rem; }

  /* landing */
  .landing-logo{ font-size:2.6rem; }
  .landing-sub{ font-size:1rem; margin-bottom:28px; }
  .role-cards{ gap:14px; }
  .role-card{ padding:24px 20px; }
  .role-icon{ font-size:2.4rem; }

  /* meter */
  .meter-value{ font-size:3rem; }

  /* chart */
  .chart-container{ height:220px; }

  /* chat area */
  .chat-area{ height:360px; }

  /* student HUD wrapping fix */
  .student-hud{ padding:6px 14px; gap:10px; flex-wrap:wrap; }
  .hud-sep{ display:none; }
}

/* ─────────────────────────────────────────────────────────────────
   480px — phones
   ───────────────────────────────────────────────────────────────── */
@media(max-width:480px){
  /* layout */
  .page, .page-sm{ padding:12px 10px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .role-cards{ grid-template-columns:1fr; gap:12px; }

  /* typography scaling */
  .landing-logo{ font-size:2rem; }
  .landing-sub{ font-size:0.9rem; margin-bottom:24px; }
  .meter-value{ font-size:2.4rem; }
  .stat-value{ font-size:1.5rem; }
  .section-title{ font-size:1rem; }
  .card-title{ font-size:0.95rem; }
  .timer{ font-size:1.8rem; }

  /* cards */
  .card{ padding:14px 12px; }
  .card-sm{ padding:10px 10px; }

  /* chat area */
  .chat-area{ height:300px; }

  /* chat messages */
  .chat-msg-wrap{ max-width:92%; }
  .chat-bubble{ font-size:0.875rem; }

  /* input rows */
  .input-row{ flex-direction:column; }
  .input-row input{ width:100%; }

  /* tabs: horizontally scrollable on tiny screens */
  .tabs{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; gap:2px; padding-bottom:2px; }
  .tab{ white-space:nowrap; flex-shrink:0; font-size:0.82rem; padding:8px 12px; }

  /* perf panel */
  .perf-stats{ flex-wrap:wrap; }
  .perf-stat{ min-width:50%; }

  /* HUD */
  .student-hud{ flex-wrap:wrap; gap:8px; padding:6px 10px; top:56px; }
  .hud-sep{ display:none; }
  .hud-progress-track{ width:60px; }

  /* intervention popup */
  .intervention-popup{ left:12px; right:12px; width:auto; bottom:76px; }

  /* section header stacking */
  .section-header{ flex-direction:column; align-items:flex-start; gap:8px; }

  /* leaderboard rows */
  .leaderboard-row{ padding:8px 10px; gap:8px; }
}

/* ─────────────────────────────────────────────────────────────────
   NAV — hamburger on mobile
   ───────────────────────────────────────────────────────────────── */

/* hamburger button — hidden on desktop */
.nav-hamburger{
  display:none;
  background:none;border:none;cursor:pointer;
  color:var(--text);font-size:1.4rem;padding:4px 6px;
  border-radius:6px;transition:background 0.15s;
  flex-shrink:0;
}
.nav-hamburger:hover{ background:var(--surface2); }

/* mobile nav drawer container */
.nav-mobile-drawer{
  display:none; /* shown by JS class toggle */
  flex-direction:column;
  width:100%;
  padding:8px 0 12px;
  border-top:1px solid var(--border);
  background:var(--surface);
  gap:2px;
}
.nav-mobile-drawer.open{ display:flex; }

/* mobile nav item styling */
.nav-mobile-drawer .nav-btn{
  width:100%;
  text-align:left;
  border-radius:8px;
  padding:10px 14px;
  font-size:0.9rem;
  display:flex;
  align-items:center;
  gap:8px;
}

/* mobile nav-right row */
.nav-mobile-right{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:8px 14px 4px;
  border-top:1px solid var(--border);
  margin-top:4px;
}

@media(max-width:768px){
  /* hide default desktop nav buttons and right area */
  .nav > .nav-btn{ display:none; }
  .nav > .nav-right{ display:none; }
  /* show hamburger */
  .nav-hamburger{ display:flex; align-items:center; justify-content:center; }
  /* nav becomes a flex-col wrapper */
  .nav{
    flex-wrap:wrap;
    height:auto;
    padding:0 14px;
    position:sticky;top:0;z-index:100;
  }
  /* brand + hamburger on same row */
  .nav-brand{ padding:12px 0; flex:1; }
  .nav-hamburger{ margin-left:auto; }
}

/* ─────────────────────────────────────────────────────────────────
   FLOATING COMPONENTS — bottom sheets on mobile
   ───────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* Copilot FABs — move up to clear bottom nav (mobile only) */
  .copilot-fab{ bottom:72px !important; right:14px !important; }
  .student-copilot-fab{ bottom:72px !important; right:14px !important; }

  /* Copilot windows — full-width bottom sheets */
  .copilot-window{
    width:100vw !important;
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    border-radius:20px 20px 0 0 !important;
    max-height:75vh !important;
    transform-origin:bottom center !important;
  }
  .student-copilot-panel{
    width:100vw !important;
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    border-radius:20px 20px 0 0 !important;
    max-height:80vh !important;
    transform-origin:bottom center !important;
  }

  /* PDF modal — full-screen on small devices */
  .pdf-modal-overlay{ padding:0; align-items:flex-end; }
  .pdf-modal{
    max-width:100vw;
    border-radius:20px 20px 0 0;
    max-height:92vh;
    padding:20px 16px;
  }

  /* Intervention popup — bottom sheet */
  .intervention-popup{
    left:0 !important; right:0 !important;
    bottom:0 !important; width:100% !important;
    border-radius:20px 20px 0 0 !important;
    max-width:100vw;
  }

  /* Toast — full-width on mobile */
  .toasts{ right:8px; left:8px; top:64px; }
  .toast{ min-width:unset; max-width:100%; width:100%; }

  /* Task send dropdown */
  .task-send-dropdown{
    right:0 !important; left:0 !important;
    width:100% !important;
    border-radius:16px 16px 0 0 !important;
    bottom:0 !important; top:auto !important;
    position:fixed !important;
    z-index:9999 !important;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
}

/* ─────────────────────────────────────────────────────────────────
   BOTTOM NAVIGATION BAR — mobile only
   ───────────────────────────────────────────────────────────────── */
.mobile-bottom-nav{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:999;
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));
  justify-content:space-around;
  align-items:center;
}
.mobile-bottom-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;
  color:var(--text2);font-size:0.65rem;font-family:inherit;
  padding:4px 8px;border-radius:8px;transition:all 0.15s;
  min-width:52px;position:relative;
}
.mobile-bottom-nav-item span.icon{ font-size:1.35rem; line-height:1; }
.mobile-bottom-nav-item.active{ color:var(--accent); }
.mobile-bottom-nav-item .notif-dot{
  position:absolute;top:2px;right:10px;
  width:8px;height:8px;background:var(--red);
  border-radius:50%;border:2px solid var(--surface);
  animation:blink 1.5s infinite;
}

@media(max-width:768px){
  .mobile-bottom-nav{ display:flex; }
  /* push page content above bottom nav */
  .main-content{ padding-bottom:68px; }
  /* push student HUD below sticky nav on mobile */
  .student-hud{ top:56px; }
}

/* ─────────────────────────────────────────────────────────────────
   SCROLL & OVERFLOW FIXES
   ───────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* prevent body from having nested scroll traps */
  body{ -webkit-overflow-scrolling:touch; overflow-x:hidden; }

  /* chat scroll areas */
  .chat-messages{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .students-list{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .copilot-messages{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

  /* code editor */
  .code-editor{ overflow:auto; -webkit-overflow-scrolling:touch; }
  .code-output{ overflow:auto; -webkit-overflow-scrolling:touch; }

  /* tables inside reports */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; }

  /* quiz navigation dots — scrollable */
  .quiz-nav-dots-row{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap !important; padding-bottom:4px;
  }

  /* content preview */
  .content-preview-enhanced iframe{ height:200px; }
}

/* ─────────────────────────────────────────────────────────────────
   WAITING ROOM — mobile centered layout
   ───────────────────────────────────────────────────────────────── */
@media(max-width:480px){
  .page-sm{ padding:16px 12px; }
  .waiting-pulse{ width:48px; height:48px; margin-bottom:12px; }
}

/* ─────────────────────────────────────────────────────────────────
   UPLOAD ZONE — smaller on mobile
   ───────────────────────────────────────────────────────────────── */
@media(max-width:480px){
  .upload-zone{ padding:20px 14px; }
  .upload-icon{ font-size:2rem; }
}

/* ─────────────────────────────────────────────────────────────────
   STICKY ACTION BUTTON (mobile FAB-style helper)
   ───────────────────────────────────────────────────────────────── */
.mobile-sticky-action{
  display:none;
}
@media(max-width:480px){
  .mobile-sticky-action{
    display:block;
    position:sticky;
    bottom:76px;
    z-index:200;
    margin-top:12px;
  }
  .mobile-sticky-action .btn{
    width:100%;
    justify-content:center;
    box-shadow:0 4px 16px rgba(0,0,0,0.3);
  }
}

/* ─────────────────────────────────────────────────────────────────
   QUIZ REPORT GRID — single column on phones
   ───────────────────────────────────────────────────────────────── */
@media(max-width:480px){
  .quiz-report-stat-row{ grid-template-columns:1fr 1fr; gap:8px; }
}

/* ─────────────────────────────────────────────────────────────────
   AT-RISK PANEL — compact on mobile
   ───────────────────────────────────────────────────────────────── */
@media(max-width:480px){
  .at-risk-bar{ width:40px; }
  .at-risk-row{ flex-wrap:wrap; }
}

/* ─────────────────────────────────────────────────────────────────
   SAFE AREA INSETS for notched phones
   ───────────────────────────────────────────────────────────────── */
@supports(padding:env(safe-area-inset-bottom)){
  @media(max-width:768px){
    .mobile-bottom-nav{
      padding-bottom:calc(8px + env(safe-area-inset-bottom));
    }
    .copilot-window,
    .student-copilot-panel,
    .intervention-popup,
    .task-send-dropdown{
      padding-bottom:env(safe-area-inset-bottom,0px);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FEATURE 1 — CHAT CONTROL  (additive only)
   ═══════════════════════════════════════════════════════════════════ */
.chat-disabled-banner{
  padding:10px 16px;
  background:rgba(239,68,68,0.08);
  border:1px solid rgba(239,68,68,0.25);
  border-radius:10px;
  color:var(--red);
  font-size:0.82rem;
  font-weight:600;
  text-align:center;
  margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  letter-spacing:0.2px;
}
.chat-toggle-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;margin-bottom:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 1px 6px rgba(0,0,0,0.08);
}
.chat-toggle-label{font-size:0.85rem;font-weight:600;display:flex;align-items:center;gap:8px;}
.chat-toggle-status{font-size:0.75rem;font-weight:700;padding:2px 8px;border-radius:20px;}
.chat-toggle-status.enabled{color:var(--green);background:rgba(34,197,94,0.1);}
.chat-toggle-status.disabled{color:var(--red);background:rgba(239,68,68,0.1);}

/* ═══════════════════════════════════════════════════════════════════
   FEATURE 2 — WEEKLY REPORT  (additive only)
   ═══════════════════════════════════════════════════════════════════ */
.wr-section-title{
  font-size:1.1rem;font-weight:700;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.wr-stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  margin-bottom:16px;
}
.wr-stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 14px;text-align:center;
}
.wr-stat-value{
  font-size:1.8rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.wr-stat-label{font-size:0.78rem;color:var(--text2);margin-top:4px;}
.wr-session-row{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-radius:var(--radius-sm);background:var(--surface2);margin-bottom:6px;
  border:1px solid var(--border);flex-wrap:wrap;
}
.wr-session-name{flex:1;font-size:0.875rem;font-weight:600;min-width:120px;}
.wr-session-date{font-size:0.78rem;color:var(--text2);}
.wr-progress-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.wr-progress-label{font-size:0.82rem;color:var(--text2);width:130px;flex-shrink:0;}
.wr-progress-val{font-size:0.82rem;font-weight:700;color:var(--text);width:40px;text-align:right;}
.wr-export-bar{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--border);
}
.wr-chart-wrap{height:220px;margin-top:8px;}

/* ═══════════════════════════════════════════════════════════════
   ADMIN DASHBOARD — missing utility classes
   ═══════════════════════════════════════════════════════════════ */
.admin-page{}
.page-title{font-size:1.5rem;font-weight:800;color:var(--text);letter-spacing:-0.02em}
.page-subtitle{font-size:0.9rem;color:var(--text2);margin-top:4px}
.alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:0.875rem;font-weight:600;
  border:1px solid transparent}
.alert-error{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.35);color:var(--red)}
.alert-success{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.35);color:var(--green)}
.form-row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.form-row label{font-size:0.85rem;color:var(--text2)}
.text-lg{font-size:1.1rem}
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border)}
.table{width:100%;border-collapse:collapse;font-size:0.875rem}
.table thead tr{border-bottom:1px solid var(--border);background:var(--surface2)}
.table th{padding:10px 14px;text-align:left;font-weight:700;font-size:0.78rem;color:var(--text2);
  text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap}
.table tbody tr{border-bottom:1px solid var(--border);transition:background 0.15s}
.table tbody tr:last-child{border-bottom:none}
.table tbody tr:hover{background:var(--surface2)}
.table td{padding:10px 14px;color:var(--text);font-size:0.875rem}

/* ── Premium Enhancements ── */
/* NOTE: lp-animate.lp-visible is handled above (line ~272).
   The transition-based override was removed — it broke dynamically rendered elements.
   The IntersectionObserver still adds lp-visible for scroll-reveal sections below the hero. */
.lp-delay-1 { transition-delay: 0.1s; }
.lp-delay-2 { transition-delay: 0.2s; }
.lp-delay-3 { transition-delay: 0.3s; }

/* Light mode card overrides are handled in the comprehensive .landing.light block below */

.landing-hero { --mx: 0px; --my: 0px; }
.landing-logo {
  transform: translate(calc(var(--mx) * 0.4), calc(var(--my) * 0.4));
  transition: transform 0.15s ease-out;
}
.landing-hero-grid {
  transform: translate(calc(var(--mx) * -0.15), calc(var(--my) * -0.15)) scale(1.05);
  transition: transform 0.2s ease-out;
}

.copilot-window {
  border: 1px solid var(--border);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  background: #050505 !important;
  backdrop-filter: blur(20px);
}
.copilot-bubble {
  border-radius: 18px;
  padding: 12px 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 88%;
  color: var(--accent2) !important;
}
.copilot-msg.bot .copilot-bubble {
  background: #2a2a2a !important;
  color: var(--accent2) !important;
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.copilot-msg.user .copilot-bubble {
  background: #2a2a2a !important;
  color: var(--accent2) !important;
  border-bottom-right-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.copilot-typing {
  display: flex; gap: 5px; padding: 14px 20px;
  background: var(--surface2); border-radius: 20px; width: fit-content;
}
.copilot-dot {
  width: 7px; height: 7px; background: var(--text3); border-radius: 50%;
  animation: copilot-blink 1.4s infinite both;
}
.copilot-dot:nth-child(2) { animation-delay: 0.2s; }
.copilot-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes copilot-blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

/* ── Landing Page Light Mode — Warm Academic Luxe ── */
.landing.light {
  --bg: #F8F3ED;
  --surface: #FFFDF9;
  --surface2: #F3E9DD;
  --surface3: #EAD9C8;
  --text: #2B1B12;
  --text2: #6B5648;
  --text3: #9C8778;
  --border: #E6D5C3;
  --accent: #6E2C12;
  --accent2: #8B451E;
  --shadow: 0 10px 30px rgba(110, 44, 18, 0.09);
}
.landing.light .landing-hero {
  background: radial-gradient(ellipse at 50% -10%, rgba(110,44,18,0.10) 0%, rgba(216,155,91,0.06) 40%, #F0E5D5 70%);
}
/* Landing page hero text */
.landing.light .landing-logo {
  background: linear-gradient(135deg, #4A1A06, #6E2C12, #A3471B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing.light .landing-eyebrow {
  color: #6E2C12;
  background: rgba(110, 44, 18, 0.08);
  border-color: rgba(110, 44, 18, 0.25);
}
.landing.light .landing-sub {
  color: #2B1B12;
}
/* Role cards */
.landing.light .role-card {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 20px rgba(110, 44, 18, 0.07);
}
.landing.light .role-card:hover {
  border-color: rgba(110, 44, 18, 0.4);
  box-shadow: 0 8px 32px rgba(110, 44, 18, 0.12);
}
.landing.light .role-title { color: #2B1B12; }
.landing.light .role-desc { color: #6B5648; }
/* Cards */
.landing.light .card {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 8px 28px rgba(110, 44, 18, 0.07);
}
.landing.light .card-title { color: #2B1B12; }
.landing.light input,
.landing.light select,
.landing.light textarea {
  background: #F8F3ED;
  border-color: #D8C3AD;
  color: #2B1B12;
}
.landing.light label { color: #6B5648; }
/* Tags/badges */
.landing.light .lp-tag {
  color: #6E2C12;
  background: rgba(110, 44, 18, 0.08);
  border-color: rgba(110, 44, 18, 0.22);
}
/* Section headings */
.landing.light .lp-h2 { color: #2B1B12; }
.landing.light .lp-h2 span {
  background: linear-gradient(135deg, #6E2C12, #A3471B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Descriptions */
.landing.light .lp-lead,
.landing.light .lp-role-sub,
.landing.light .lp-slide-title,
.landing.light .lp-mock-metric span { color: #6B5648; }
/* Feature cards */
.landing.light .lp-feat {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110, 44, 18, 0.05);
}
.landing.light .lp-feat-title { color: #2B1B12; }
.landing.light .lp-feat-desc { color: #6B5648; }
.landing.light .lp-feat-icon { background: rgba(110, 44, 18, 0.08); }
/* Role blocks */
.landing.light .lp-role-block {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110, 44, 18, 0.05);
}
.landing.light .lp-role-name { color: #2B1B12; }
.landing.light .lp-role-list li { color: #6B5648; }
/* CTA */
.landing.light .lp-cta {
  background: radial-gradient(ellipse at 50% 0%, rgba(110, 44, 18, 0.07), transparent 60%);
}
.landing.light .lp-cta-h { color: #2B1B12; }
.landing.light .lp-cta-sub { color: #6B5648; }
/* Features background strip */
.landing.light .lp-features-bg {
  background: #F3E9DD;
  border-top-color: #E6D5C3;
  border-bottom-color: #E6D5C3;
}
/* Slide cards */
.landing.light .lp-slide {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110, 44, 18, 0.05);
}
/* Pills */
.landing.light .lp-pill {
  background: #F3E9DD;
  border-color: #E6D5C3;
  color: #2B1B12;
}
/* Buttons */
.landing.light .btn-primary {
  background: #6E2C12;
  color: #FFFDF9;
}
.landing.light .btn-ghost {
  color: #6B5648;
  border-color: #D8C3AD;
}
.landing.light .btn-ghost:hover {
  background: #F3E9DD;
  color: #2B1B12;
}
/* Nav */
.landing.light .nav {
  background: rgba(255, 253, 249, 0.93) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #E6D5C3;
}
.landing.light .nav-brand {
  background: linear-gradient(135deg, #6E2C12, #A3471B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing.light .nav-btn { color: #6B5648; }
.landing.light .nav-btn:hover { background: #F3E9DD; color: #2B1B12; }

/* Mock metrics */
.landing.light .lp-mock-metric {
  background: #F3E9DD;
  color: #6B5648;
}
.landing.light .lp-visual-card {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110, 44, 18, 0.05);
}
.landing.light .lp-mock-bar { background: #E6D5C3; }
/* Profile icon */
.landing.light .profile-icon-btn {
  background: linear-gradient(135deg, #6E2C12, #A3471B);
  color: #FFFDF9;
}
/* Stat cards */
.landing.light .stat {
  background: #FFFDF9;
  border-color: #E6D5C3;
  box-shadow: 0 4px 16px rgba(110, 44, 18, 0.05);
}
.landing.light .stat-label { color: #6B5648; }

/* ── About Us Nav Link — premium glassmorphism ── */
.about-us-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--accent2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: color 0.22s ease, border-color 0.22s ease,
              background 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.22s ease;
}
/* Subtle inner sheen */
.about-us-nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.about-us-nav-link:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(255, 255, 255, 0.08);
  color: #e0e7ff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.07), 0 0 0 1px rgba(var(--accent-rgb), 0.03);
}
.about-us-nav-link:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}
/* Light mode adjustments */
.light .about-us-nav-link {
  background: rgba(110,44,18,0.07);
  border-color: rgba(110,44,18,0.22);
  color: #6E2C12;
}
.light .about-us-nav-link:hover {
  background: rgba(110,44,18,0.13);
  border-color: rgba(110,44,18,0.4);
  color: #4A1A06;
  box-shadow: 0 6px 20px rgba(110,44,18,0.15);
}
@media(max-width:480px){
  .about-us-nav-link { padding: 6px 11px; font-size: 0.78rem; }
}
@media(max-width:360px){
  .about-us-nav-link { display: none; }
}

/* Theme Toggle — inline inside nav-right, beside profile button */
.lp-theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  flex-shrink: 0;
}
.lp-theme-toggle:hover {
  transform: scale(1.1) rotate(15deg);
  border-color: var(--accent);
  background: var(--surface3);
}
.landing {
  transition: background 0.4s ease, color 0.4s ease;
}
.landing * {
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* ── AI Explain Modal ── */
.ai-explain-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);
  z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:16px;animation:fadeIn 0.18s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.ai-explain-modal{
  background:linear-gradient(145deg,var(--surface),var(--surface2));
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:18px;max-width:680px;width:100%;
  max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,0.5);overflow:hidden;
}
.ai-explain-header{
  background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.2),rgba(var(--accent-rgb), 0.15));
  border-bottom:1px solid rgba(255, 255, 255, 0.08);
  padding:18px 20px 14px;
}
.ai-explain-title{
  font-size:1.05rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:4px;
}
.ai-explain-question{
  font-size:0.82rem;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ai-explain-tabs{
  display:flex;gap:4px;padding:12px 20px 0;
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.ai-explain-tab{
  padding:7px 14px;border-radius:8px 8px 0 0;border:none;
  background:transparent;color:var(--text2);cursor:pointer;
  font-size:0.8rem;font-weight:600;font-family:inherit;
  border:1px solid transparent;border-bottom:none;transition:all 0.15s;
}
.ai-explain-tab:hover{background:var(--surface3);color:var(--text)}
.ai-explain-tab.active{
  background:var(--surface);color:var(--accent);
  border-color:var(--border);border-bottom-color:var(--surface);
}
.ai-explain-body{
  flex:1;overflow-y:auto;padding:20px;
}
.ai-explain-content{
  font-size:0.9rem;line-height:1.7;color:var(--text);
  white-space:pre-wrap;word-break:break-word;
}
.ai-explain-content strong,.ai-explain-content b{color:var(--accent);font-weight:700}
.ai-typing-cursor{
  display:inline-block;width:2px;height:1em;background:var(--accent);
  margin-left:2px;vertical-align:middle;
  animation:blink 0.7s step-end infinite;
}
.ai-explain-footer{
  padding:12px 20px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:var(--surface);flex-wrap:wrap;
}
.ai-explain-btn-explain{
  background:linear-gradient(135deg,var(--accent),var(--accent));
  color:#fff;border:none;padding:8px 18px;border-radius:8px;
  cursor:pointer;font-weight:700;font-size:0.82rem;font-family:inherit;
  transition:opacity 0.15s;
}
.ai-explain-btn-explain:hover{opacity:0.85}
.ai-explain-btn-explain:disabled{opacity:0.5;cursor:not-allowed}

/* ── Explanation Panel (student side) ── */
@keyframes explain-pulse {
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
  50%{box-shadow:0 0 0 6px rgba(34,197,94,0.18)}
}
.explanation-panel-new {
  animation: explain-pulse 1.5s ease 3;
}

/* ── Session name in badge ── */
.session-badge-name {
  font-size:0.68rem;color:var(--text2);font-family:inherit;
  letter-spacing:normal;font-weight:700;text-transform:none;
}


/* ═══════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════
   CONTENT HUB — Learning Library  (Teacher + Student)
═══════════════════════════════════════════════════════════════════ */

/* ── Hub Page Wrapper ── */
.ch-page { padding: 0; max-width: 100%; margin: 0; }

/* ── Hero Banner (Student) ── */
.ch-hero {
  position: relative; overflow: hidden;
  background: #050505; /* dark fallback while images load */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 60px rgba(var(--accent-rgb), 0.03), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 40px 32px 32px;
}

/* ══════════════════════════════════════════════════════════════
   ch-hero — CINEMATIC BACKGROUND SYSTEM
   (mirrors the db-hero-card visual treatment exactly)
   Z-INDEX:
     0  .ch-hero-slide    (image slideshow + Ken Burns)
     1  .ch-hero-overlay  (dark cinematic vignette)
     2  .ch-hero::before  (ambient glow orbs — animated)
     3  .ch-hero-inner    (foreground content — always on top)
══════════════════════════════════════════════════════════════ */

/* ── Slideshow layer ── */
.ch-hero-slide {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 0;
}
.ch-hero-slide.active { opacity: 1; }
/* Ken Burns — reuse same 3 paths from db-hero */
.ch-hero-slide.kb-a { animation: db-kb-a 22s ease-in-out infinite alternate; }
.ch-hero-slide.kb-b { animation: db-kb-b 25s ease-in-out infinite alternate; }
.ch-hero-slide.kb-c { animation: db-kb-c 20s ease-in-out infinite alternate; }

/* ── Dark cinematic overlay ── */
.ch-hero-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(5, 5, 5, 0.88) 0%,
      rgba(5, 5, 5, 0.72) 40%,
      rgba(5, 5, 5, 0.88) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 15%, rgba(5, 5, 5, 0.65) 100%);
}

/* ── Ambient glow orbs (animated sweep) ── */
.ch-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse 70% 80% at 85% 50%, rgba(var(--accent-rgb), 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 80%, rgba(var(--accent-rgb), 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 10%, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%);
  animation: hero-orb-drift 8s ease-in-out infinite alternate;
}

/* ── Floating particles overlay ── */
.ch-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 30%, rgba(var(--accent-rgb), 0.55) 0%, transparent 100%),
    radial-gradient(1px   1px   at 38% 68%, rgba(var(--accent-rgb), 0.45) 0%, transparent 100%),
    radial-gradient(2px   2px   at 62% 22%, rgba(var(--accent-rgb), 0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 78% 72%, rgba(var(--accent-rgb), 0.48) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 42%, rgba(var(--accent-rgb), 0.38) 0%, transparent 100%),
    radial-gradient(1px   1px   at 48% 88%, rgba(var(--accent-rgb), 0.28) 0%, transparent 100%),
    radial-gradient(2px   2px   at 22% 78%, rgba(var(--accent-rgb), 0.33) 0%, transparent 100%),
    radial-gradient(1px   1px   at 94% 18%, rgba(var(--accent-rgb), 0.38) 0%, transparent 100%);
  animation: hero-particles-float 12s ease-in-out infinite alternate;
}

/* ── Foreground content — always on top ── */
.ch-hero-inner { position: relative; z-index: 3; }

/* ── Text readability enhancements on cinematic bg ── */
.ch-hero-sub {
  font-size: 0.95rem; max-width: 560px; line-height: 1.65; margin-bottom: 24px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.8);
  color: #c8d4ea;
}
.ch-hero-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.ch-hero-stat { text-align: center; }
.ch-hero-stat-num {
  font-size: 1.7rem; font-weight: 800; color: var(--accent);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.125);
}
.ch-hero-stat-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
  color: rgba(148,163,184,0.85);
}
.ch-hero-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px;
  color: var(--accent2);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  background: rgba(var(--accent-rgb), 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.062), inset 0 1px 0 rgba(255,255,255,0.12);
}
.ch-hero-title {
  font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 800;
  line-height: 1.15; margin-bottom: 10px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.9), 0 1px 6px rgba(0,0,0,0.8);
  background: linear-gradient(135deg, #f0f2ff 0%, rgba(var(--accent-rgb), 0.95) 60%, rgba(var(--accent-rgb), 0.9) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Search & Filter Bar ── */
.ch-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 18px 32px;
  border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap;
  position: sticky; top: 60px; z-index: 50;
}
.ch-search-wrap {
  position: relative; flex: 1; min-width: 200px;
}
.ch-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text3); font-size: 0.9rem; pointer-events: none;
}
.ch-search {
  width: 100%; padding: 9px 12px 9px 36px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-size: 0.88rem; outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}
.ch-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.03); }
.ch-filter-select {
  padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-size: 0.85rem; outline: none; cursor: pointer;
  min-width: 120px;
}
.ch-sort-btn {
  padding: 8px 14px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text2); font-size: 0.82rem; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.ch-sort-btn:hover { background: var(--surface3); color: var(--text); }
.ch-sort-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Category Tabs ── */
.ch-cats {
  display: flex; gap: 0; padding: 0 32px;
  border-bottom: 1px solid var(--border); background: var(--surface);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ch-cats::-webkit-scrollbar { display: none; }
.ch-cat-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 18px; border: none; background: transparent;
  color: var(--text2); cursor: pointer; font-size: 0.85rem; font-weight: 500;
  border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap;
  font-family: inherit;
}
.ch-cat-btn:hover { color: var(--text); }
.ch-cat-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.ch-cat-count {
  background: var(--surface2); color: var(--text3); font-size: 0.68rem;
  font-weight: 700; padding: 1px 6px; border-radius: 20px;
}
.ch-cat-btn.active .ch-cat-count { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }

/* ── Content Grid ── */
.ch-body { padding: 28px 32px; }
.ch-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.ch-section-title {
  font-size: 1rem; font-weight: 700; color: var(--text);
}
.ch-section-sub { font-size: 0.8rem; color: var(--text3); }
.ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.ch-grid-lg { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ── Content Card ── */
.ch-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s, border-color 0.22s;
  cursor: pointer;
  position: relative;
}
.ch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25), 0 4px 12px rgba(var(--accent-rgb), 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.ch-card-thumb {
  width: 100%; height: 160px; background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; position: relative; overflow: hidden;
}
.ch-card-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.ch-card-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.45) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.22s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.ch-card:hover .ch-card-thumb-overlay { opacity: 1; }
.ch-thumb-action {
  background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2); color: #fff;
  padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.ch-thumb-action:hover { background: rgba(255,255,255,0.28); }
.ch-card-body { padding: 16px; }
.ch-card-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.ch-type-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 6px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ch-badge-pdf { background: rgba(239,68,68,0.15); color: #f87171; }
.ch-badge-image { background: rgba(34,197,94,0.15); color: #4ade80; }
.ch-badge-video { background: rgba(var(--accent-rgb), 0.15); color: var(--accent2); }
.ch-badge-doc { background: rgba(var(--accent-rgb), 0.15); color: var(--accent2); }
.ch-badge-link { background: rgba(234,179,8,0.15); color: #fbbf24; }
.ch-badge-assignment { background: rgba(249,115,22,0.15); color: #fb923c; }
.ch-badge-note { background: rgba(var(--accent-rgb), 0.15); color: var(--accent2); }
.ch-badge-presentation { background: rgba(var(--accent-rgb), 0.15); color: var(--accent2); }
.ch-badge-ai { background: rgba(var(--accent-rgb), 0.15); color: var(--accent2); font-style: italic; }
.ch-badge-pinned { background: rgba(234,179,8,0.15); color: #fbbf24; }
.ch-badge-subject { background: var(--surface2); color: var(--text2); }
.ch-card-title {
  font-size: 0.92rem; font-weight: 700; margin-bottom: 5px;
  line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ch-card-desc {
  font-size: 0.8rem; color: var(--text2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 12px;
}
.ch-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.ch-card-teacher { display: flex; align-items: center; gap: 6px; }
.ch-teacher-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.6rem; font-weight: 800;
}
.ch-teacher-name { font-size: 0.75rem; color: var(--text2); font-weight: 500; }
.ch-card-date { font-size: 0.72rem; color: var(--text3); }
.ch-card-actions { display: flex; gap: 6px; margin-top: 10px; }
.ch-btn-preview {
  flex: 1; padding: 7px 10px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text2); font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s; font-family: inherit;
}
.ch-btn-preview:hover { background: var(--surface3); color: var(--text); }
.ch-btn-open {
  flex: 1; padding: 7px 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; border-radius: 8px;
  color: #fff; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s; font-family: inherit;
}
.ch-btn-open:hover { opacity: 0.88; }

/* ── Featured Card ── */
.ch-featured {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, var(--surface) 60%, rgba(var(--accent-rgb), 0.06));
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(var(--accent-rgb), 0.025);
}
.ch-featured-thumb {
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  font-size: 5rem; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  position: relative; overflow: hidden;
}
.ch-featured-body { padding: 28px 24px; display: flex; flex-direction: column; justify-content: center; }
.ch-featured-label {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.ch-featured-title { font-size: 1.3rem; font-weight: 800; line-height: 1.3; margin-bottom: 10px; }
.ch-featured-desc { font-size: 0.88rem; color: var(--text2); line-height: 1.6; margin-bottom: 18px; flex: 1; }

/* ── Pin indicator ── */
.ch-pin-indicator {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(234,179,8,0.9); color: #000;
  font-size: 0.62rem; font-weight: 800; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ── Skeleton Loaders ── */
.ch-skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: ch-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes ch-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.ch-skel-thumb { width: 100%; height: 160px; border-radius: 8px 8px 0 0; }
.ch-skel-body { padding: 14px; }
.ch-skel-line { height: 12px; margin-bottom: 8px; }
.ch-skel-line.short { width: 60%; }
.ch-skel-line.medium { width: 80%; }

/* ── Upload Zone (Teacher) ── */
.ch-upload-zone {
  border: 2px dashed rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 40px 24px;
  text-align: center; cursor: pointer;
  background: rgba(var(--accent-rgb), 0.04);
  transition: all 0.2s; position: relative;
}
.ch-upload-zone:hover, .ch-upload-zone.dragover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.ch-upload-icon { font-size: 2.8rem; margin-bottom: 12px; }
.ch-upload-text { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ch-upload-sub { font-size: 0.8rem; color: var(--text3); }
.ch-progress-bar {
  height: 4px; background: var(--surface2); border-radius: 4px;
  overflow: hidden; margin-top: 12px;
}
.ch-progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 0.3s ease;
}

/* ── Content Modal (Preview) ── */
.ch-modal-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: ch-fade-in 0.18s ease;
}
@keyframes ch-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ch-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; width: 100%; max-width: 900px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: ch-modal-up 0.22s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
}
@keyframes ch-modal-up { from { transform: translateY(24px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.ch-modal-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ch-modal-title { flex: 1; font-size: 0.95rem; font-weight: 700; min-width: 0; }
.ch-modal-close {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--surface2); color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
  transition: all 0.15s; flex-shrink: 0;
}
.ch-modal-close:hover { background: var(--surface3); color: var(--text); transform: scale(1.1); }
.ch-modal-body { flex-shrink: 0; padding: 18px 20px; }
.ch-modal-preview-area {
  width: 100%; min-height: 280px; background: var(--surface2);
  border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex: 1; position: relative;
}
.ch-modal-img { max-width: 100%; max-height: 520px; object-fit: contain; display: block; }
.ch-modal-video { width: 100%; max-height: 520px; border-radius: 0; display: block; background: #000; }
.ch-modal-pdf-frame { width: 100%; height: min(60vh, 560px); border: none; display: block; }
.ch-modal-icon-big {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; gap: 8px; font-size: 5rem; color: var(--text2);
}
.ch-modal-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
@media (max-width: 600px) {
  .ch-modal { border-radius: 14px; max-height: 96vh; }
  .ch-modal-pdf-frame { height: 50vh; }
  .ch-modal-footer { gap: 6px; }
  .ch-modal-footer .btn { font-size: 0.78rem; padding: 7px 12px; }
}

/* ── Teacher Upload Form ── */
.ch-form-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 20px; }
.ch-form-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.ch-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch-form-full { grid-column: 1 / -1; }
.ch-preview-mode-bar {
  display: flex; gap: 8px; align-items: center; padding: 10px 14px;
  background: var(--surface2); border-radius: 10px; margin-bottom: 14px;
}
.ch-preview-device-btn {
  padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--text2); font-size: 0.78rem; cursor: pointer;
  transition: all 0.2s; font-family: inherit;
}
.ch-preview-device-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   SCH — STUDENT CONTENT HUB v2 (sch- prefix, fully isolated)
══════════════════════════════════════════════════════════════ */
.sch-page {
  display: flex; flex-direction: column;
  height: 100%; background: var(--sd-bg, #080a14);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
}

/* ── Hero ── */
.sch-hero {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px 20px;
  background: linear-gradient(135deg, #050505 0%, #050505 60%, #050505 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0; position: relative; overflow: hidden;
  gap: 20px;
}
.sch-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 10% 60%, rgba(var(--accent-rgb), 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(var(--accent-rgb), 0.07) 0%, transparent 50%);
  pointer-events: none;
}
.sch-hero-left { flex: 1; min-width: 0; position: relative; z-index: 1; }
.sch-hero-title-row { display: flex; align-items: center; margin-bottom: 5px; }
.sch-hero-title {
  font-family: 'Syne', sans-serif; font-size: 1.75rem; font-weight: 800;
  color: #f1f5f9; line-height: 1;
}
.sch-hero-sub { font-size: 0.82rem; color: #8F8F8F; margin-bottom: 16px; }
.sch-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.sch-hero-stat-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 10px 16px; min-width: 100px;
  transition: border-color 0.2s;
}
.sch-hero-stat-card:hover { border-color: rgba(255, 255, 255, 0.08); }
.sch-hero-stat-icon { font-size: 1.2rem; flex-shrink: 0; }
.sch-hero-stat-num {
  font-size: 1.15rem; font-weight: 800; color: #f1f5f9; line-height: 1;
}
.sch-hero-stat-label { font-size: 0.7rem; color: #8F8F8F; margin-top: 1px; }
.sch-hero-illus {
  width: 260px; height: 180px; flex-shrink: 0;
  position: relative; z-index: 1;
}
.sch-hero-illus svg { width: 100%; height: 100%; }

/* ── Toolbar (Search + Filter) ── */
.sch-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 28px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sch-search-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 0 14px; height: 40px;
  transition: border-color 0.2s;
}
.sch-search-wrap:focus-within { border-color: rgba(var(--accent-rgb), 0.105); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.025); }
.sch-search-icon { font-size: 0.85rem; color: #3A3A3A; flex-shrink: 0; }
.sch-search {
  flex: 1; background: none; border: none; outline: none;
  font-family: inherit; font-size: 0.84rem; color: #f1f5f9;
}
.sch-search::placeholder { color: #3A3A3A; }
.sch-toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sch-sort-wrap {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 0 10px; height: 38px; cursor: pointer;
  font-size: 0.8rem; color: #8F8F8F;
}
.sch-sort-select {
  background: none; border: none; outline: none; color: #8F8F8F;
  font-family: inherit; font-size: 0.8rem; cursor: pointer; padding: 0;
}
.sch-filter-btn {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 0 14px; height: 38px;
  color: #8F8F8F; font-family: inherit; font-size: 0.82rem; cursor: pointer;
  transition: all 0.2s;
}
.sch-filter-btn:hover { border-color: rgba(255, 255, 255, 0.08); color: #f1f5f9; }

/* ── Category Chips ── */
.sch-cats {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 28px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sch-cats::-webkit-scrollbar { display: none; }
.sch-cat-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color: #8F8F8F;
  font-family: inherit; font-size: 0.79rem; font-weight: 500;
  cursor: pointer; transition: all 0.18s; white-space: nowrap;
}
.sch-cat-chip:hover { color: #f1f5f9; border-color: rgba(255, 255, 255, 0.08); }
.sch-cat-chip.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.15));
  border-color: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 700;
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.045);
}
.sch-cat-chip-count {
  background: rgba(255,255,255,0.08); color: #8F8F8F;
  font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 100px;
}
.sch-cat-chip.active .sch-cat-chip-count {
  background: rgba(255,255,255,0.18); color: #e2e8f0;
}

/* ── Main Body — 2-col ── */
.sch-body {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
}
.sch-list-col {
  flex: 1; overflow-y: auto; padding: 16px 20px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.sch-list-col::-webkit-scrollbar { width: 4px; }
.sch-list-col::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.35); border-radius: 3px; }
.sch-featured-col {
  width: 340px; min-width: 300px; max-width: 380px;
  border-left: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto; flex-shrink: 0;
}
.sch-featured-col::-webkit-scrollbar { width: 3px; }
.sch-featured-col::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.35); border-radius: 3px; }

/* ── Content Row Card ── */
.sch-row {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(11, 11, 11, 0.9); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; padding: 16px; cursor: pointer;
  transition: all 0.2s; position: relative; overflow: hidden;
}
.sch-row:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  background: rgba(11, 11, 11, 0.95);
}
.sch-row.sch-row-featured {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.045);
}
.sch-row-thumb {
  width: 120px; height: 88px; border-radius: 10px; flex-shrink: 0;
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.sch-row-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.sch-row-ai-badge {
  position: absolute; top: 4px; right: 4px;
  background: rgba(var(--accent-rgb), 0.35); border-radius: 6px;
  padding: 1px 5px; font-size: 0.65rem; color: #fff;
}
.sch-row-body { flex: 1; min-width: 0; }
.sch-row-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.sch-row-title {
  font-size: 0.92rem; font-weight: 700; color: #f1f5f9;
  margin-bottom: 5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.sch-row-desc {
  font-size: 0.76rem; color: #8F8F8F; line-height: 1.5; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sch-row-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.7rem; color: #3A3A3A; flex-wrap: wrap;
}
.sch-row-actions {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; flex-shrink: 0;
}
.sch-row-icon-btn {
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.04);
  color: #8F8F8F; cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s; flex-shrink: 0;
}
.sch-row-icon-btn:hover, .sch-row-icon-btn.active { border-color: rgba(255, 255, 255, 0.08); color: var(--accent2); background: rgba(var(--accent-rgb), 0.35); }

/* Empty state card */
.sch-empty-card {
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 30px; text-align: center;
  background: rgba(var(--accent-rgb), 0.04);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px; min-height: 100px;
}

/* ── Featured Resource Panel ── */
.sch-featured-panel {
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.sch-featured-empty {
  align-items: center; justify-content: center;
  min-height: 300px;
}
.sch-featured-header {
  display: flex; align-items: center; justify-content: space-between;
}
.sch-featured-header-left {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 700; color: #f1f5f9;
}
.sch-featured-label { color: #f1f5f9; }
.sch-featured-nav { display: flex; gap: 4px; }
.sch-nav-btn {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: #8F8F8F; cursor: pointer; font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.sch-nav-btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.08); color: #fff; background: rgba(var(--accent-rgb), 0.35); }
.sch-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.sch-featured-img-wrap {
  border-radius: 12px; overflow: hidden; position: relative;
  background: rgba(11, 11, 11, 0.9); border: 1px solid rgba(255, 255, 255, 0.08);
  height: 200px;
}
.sch-featured-img { width: 100%; height: 100%; object-fit: cover; }
.sch-featured-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.05));
}
.sch-featured-expand {
  position: absolute; bottom: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s;
}
.sch-featured-expand:hover { background: rgba(var(--accent-rgb), 0.6); }
.sch-featured-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.sch-featured-title {
  font-size: 1.05rem; font-weight: 800; color: #f1f5f9; line-height: 1.3;
}
.sch-featured-desc {
  font-size: 0.78rem; color: #8F8F8F; line-height: 1.6;
}
.sch-featured-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sch-featured-open-btn {
  flex: 1; min-width: 0;
  padding: 10px 12px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  color: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.087);
}
.sch-featured-open-btn:hover { box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.125); transform: translateY(-1px); }
.sch-featured-save-btn {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  color: #8F8F8F; font-family: inherit; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.sch-featured-save-btn:hover { border-color: rgba(255, 255, 255, 0.08); color: var(--accent2); }
.sch-featured-save-btn.saved { color: var(--accent2); border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); }

/* Responsive */
@media (max-width: 1100px) {
  .sch-featured-col { width: 290px; min-width: 260px; }
  .sch-hero-illus { width: 200px; height: 140px; }
}
@media (max-width: 900px) {
  .sch-featured-col { display: none; }
  .sch-hero-illus { display: none; }
}

/* ── Teacher Content Manager List ── */
.ch-mgr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  margin-bottom: 8px; transition: border-color 0.2s;
}
.ch-mgr-row:hover { border-color: rgba(255, 255, 255, 0.08); }
.ch-mgr-thumb {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--surface2); display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0; overflow: hidden;
}
.ch-mgr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ch-mgr-info { flex: 1; min-width: 0; }
.ch-mgr-name {
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-mgr-meta { font-size: 0.75rem; color: var(--text3); margin-top: 2px; }
.ch-mgr-actions { display: flex; gap: 5px; }
.ch-mgr-btn {
  padding: 5px 9px; border-radius: 7px; border: 1px solid var(--border);
  background: transparent; color: var(--text2); font-size: 0.78rem; cursor: pointer;
  transition: all 0.18s; font-family: inherit;
}
.ch-mgr-btn:hover { background: var(--surface2); color: var(--text); }
.ch-mgr-btn.danger:hover { background: rgba(239,68,68,0.12); color: var(--red); border-color: rgba(239,68,68,0.3); }

/* ── AI Description Card ── */
.ch-ai-desc-box {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.06));
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
  padding: 14px 16px; margin-top: 10px;
}
.ch-ai-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;
}
.ch-ai-text { font-size: 0.85rem; color: var(--text2); line-height: 1.6; }
.ch-ai-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.08); border-top-color: var(--accent);
  border-radius: 50%; animation: ch-spin 0.7s linear infinite;
}
@keyframes ch-spin { to { transform: rotate(360deg); } }

/* ── Empty State ── */
.ch-empty {
  text-align: center; padding: 60px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ch-empty-icon { font-size: 3.5rem; opacity: 0.5; }
.ch-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--text2); }
.ch-empty-sub { font-size: 0.85rem; color: var(--text3); max-width: 360px; line-height: 1.6; }

/* ── Bookmark button ── */
.ch-bookmark-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
  color: #fff; font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.ch-bookmark-btn:hover, .ch-bookmark-btn.active { background: var(--accent); }

/* ── Responsive ── */
@media(max-width: 900px) {
  .ch-hero, .ch-toolbar, .ch-cats, .ch-body { padding-left: 16px; padding-right: 16px; }
  .ch-featured { grid-template-columns: 1fr; }
  .ch-featured-thumb { min-height: 150px; }
  .ch-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .ch-form-row { grid-template-columns: 1fr; }
}
@media(max-width: 580px) {
  .ch-hero { padding: 24px 16px; }
  .ch-grid { grid-template-columns: 1fr; }
  .ch-hero-stats { gap: 16px; }
  .ch-modal { border-radius: 14px; }
  .ch-toolbar { flex-direction: column; align-items: stretch; }
  .ch-search-wrap { min-width: unset; }
  .ch-cats { padding-left: 8px; padding-right: 8px; }
}

/* ── Content Hub Light Mode Overrides ── */
.light .ch-hero-label {
  color: var(--accent) !important;
  font-weight: 900 !important;
  font-size: 0.78rem !important;
  background: rgba(var(--accent-rgb), 0.15) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.light .ch-ai-label {
  color: var(--accent);
}
.light .ch-badge-pdf { background: rgba(239,68,68,0.1); color: var(--red); }
.light .ch-badge-image { background: rgba(34,197,94,0.1); color: var(--green); }
.light .ch-badge-video { background: rgba(139,92,246,0.1); color: var(--accent2); }
.light .ch-badge-doc { background: rgba(59,130,246,0.1); color: var(--blue); }
.light .ch-badge-link { background: rgba(234,179,8,0.1); color: var(--orange); }
.light .ch-badge-assignment { background: rgba(249,115,22,0.1); color: var(--orange); }
.light .ch-badge-note { background: rgba(20,184,166,0.1); color: #0d9488; }
.light .ch-badge-presentation { background: rgba(236,72,153,0.1); color: #db2777; }
.light .ch-badge-ai { background: rgba(110,44,18,0.09); color: var(--accent); }
.light .ch-badge-pinned { background: rgba(234,179,8,0.1); color: var(--orange); }

/* ── Student Content Hub Light Mode (sch- components) ── */
.light .sch-page {
  --sch-bg: #F8F5EF;
  --sch-surface: #FFFFFF;
  --sch-surface2: #F3EDE2;
  --sch-border: rgba(11, 45, 99, 0.08);
  --sch-text: #1A1A1A;
  --sch-text2: #5B6475;
  --sch-accent: #C2410C;
  --sch-accent2: #D4A017;
  --sch-shadow: 0 4px 24px rgba(11, 45, 99, 0.04);
  background: var(--sch-bg);
  color: var(--sch-text);
}

.light .sch-hero {
  background: linear-gradient(135deg, var(--sch-surface) 0%, var(--sch-surface2) 100%);
  border-bottom: 1px solid var(--sch-border);
}
.light .sch-hero::before {
  background: radial-gradient(ellipse at 10% 60%, rgba(var(--accent-rgb), 0.04) 0%, transparent 55%);
}
.light .sch-hero-title {
  color: var(--sch-text);
}
.light .sch-hero-sub {
  color: var(--sch-text2);
}
.light .sch-hero-stat-card {
  background: var(--sch-surface);
  border-color: var(--sch-border);
}
.light .sch-hero-stat-card:hover {
  border-color: var(--sch-accent);
}
.light .sch-hero-stat-num {
  color: var(--sch-text);
}
.light .sch-hero-stat-label {
  color: var(--sch-text2);
}

.light .sch-toolbar {
  border-bottom-color: var(--sch-border);
}
.light .sch-search-wrap {
  background: var(--sch-surface);
  border-color: var(--sch-border);
}
.light .sch-search-wrap:focus-within {
  border-color: var(--sch-accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.025);
}
.light .sch-search-icon {
  color: var(--sch-text2);
}
.light .sch-search {
  color: var(--sch-text);
}
.light .sch-search::placeholder {
  color: var(--sch-text2);
}

.light .sch-sort-wrap {
  background: var(--sch-surface);
  border-color: var(--sch-border);
  color: var(--sch-text2);
}
.light .sch-sort-select {
  color: var(--sch-text2);
}
.light .sch-filter-btn {
  background: var(--sch-surface);
  border-color: var(--sch-border);
  color: var(--sch-text2);
}
.light .sch-filter-btn:hover {
  border-color: var(--sch-accent);
  color: var(--sch-text);
}

.light .sch-cats {
  border-bottom-color: var(--sch-border);
}
.light .sch-cat-chip {
  background: var(--sch-surface);
  border-color: var(--sch-border);
  color: var(--sch-text2);
}
.light .sch-cat-chip:hover {
  color: var(--sch-text);
  border-color: var(--sch-accent);
}
.light .sch-cat-chip.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.06));
  border-color: var(--sch-accent);
  color: var(--sch-accent);
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.02);
}
.light .sch-cat-chip-count {
  background: var(--sch-surface2);
  color: var(--sch-text2);
}
.light .sch-cat-chip.active .sch-cat-chip-count {
  background: var(--sch-accent);
  color: #ffffff;
}

.light .sch-featured-col {
  border-left-color: var(--sch-border);
}

.light .sch-row {
  background: var(--sch-surface);
  border-color: var(--sch-border);
  box-shadow: var(--sch-shadow);
}
.light .sch-row:hover {
  border-color: var(--sch-accent);
  background: var(--sch-surface2);
  box-shadow: 0 6px 20px rgba(11, 45, 99, 0.05);
}
.light .sch-row.sch-row-featured {
  border-color: var(--sch-accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.037);
}
.light .sch-row-thumb {
  background: var(--sch-surface2);
  border-color: var(--sch-border);
}
.light .sch-row-title {
  color: var(--sch-text);
}
.light .sch-row-desc {
  color: var(--sch-text2);
}
.light .sch-row-meta {
  color: var(--sch-text2);
}
.light .sch-row-meta span {
  color: var(--sch-text2);
}
.light .sch-row-icon-btn {
  border-color: var(--sch-border);
  background: var(--sch-surface);
  color: var(--sch-text2);
}
.light .sch-row-icon-btn:hover,
.light .sch-row-icon-btn.active {
  border-color: var(--sch-accent);
  color: var(--sch-accent);
  background: var(--sch-surface2);
}

.light .sch-empty-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.02);
}

.light .sch-featured-panel {
  background: var(--sch-surface);
}
.light .sch-featured-header-left {
  color: var(--sch-text);
}
.light .sch-featured-label {
  color: var(--sch-text);
}
.light .sch-nav-btn {
  border-color: var(--sch-border);
  background: var(--sch-surface2);
  color: var(--sch-text2);
}
.light .sch-nav-btn:hover:not(:disabled) {
  border-color: var(--sch-accent);
  color: var(--sch-accent);
  background: var(--sch-surface);
}
.light .sch-featured-img-wrap {
  background: var(--sch-surface2);
  border-color: var(--sch-border);
}
.light .sch-featured-title {
  color: var(--sch-text);
}
.light .sch-featured-desc {
  color: var(--sch-text2);
}
.light .sch-featured-open-btn {
  background: linear-gradient(135deg, var(--sch-accent), var(--accent));
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.05);
}
.light .sch-featured-open-btn:hover {
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.087);
}
.light .sch-featured-save-btn {
  border-color: var(--sch-border);
  background: var(--sch-surface);
  color: var(--sch-text2);
}
.light .sch-featured-save-btn:hover {
  border-color: var(--sch-accent);
  color: var(--sch-accent);
}
.light .sch-featured-save-btn.saved {
  color: var(--sch-accent);
  border-color: var(--sch-accent);
  background: rgba(var(--accent-rgb), 0.06);
}


/* ═══════════════════════════════════════════════════════════════
   SMART ATTENDANCE SYSTEM — Full Design System
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   ATTENDANCE PAGE — Modern Dashboard UI (Reference Match)
   ══════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.att-page { padding: 28px; max-width: 1400px; margin: 0 auto; }

/* ── HERO BANNER ── */
.att-hero {
  background: #050505; /* dark fallback while images load */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(var(--accent-rgb), 0.03), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ══════════════════════════════════════════════════════════════
   att-hero — CINEMATIC BACKGROUND SYSTEM
   (mirrors the db-hero-card visual treatment exactly)
   Z-INDEX:
     0  .att-hero-slide    (image slideshow + Ken Burns)
     1  .att-hero-overlay  (dark cinematic vignette)
     2  .att-hero::before  (ambient glow orbs — animated)
     2  .att-hero::after   (floating particles)
     3  grid children      (foreground content — always on top)
══════════════════════════════════════════════════════════════ */

/* ── Slideshow layer ── */
.att-hero-slide {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 0;
}
.att-hero-slide.active { opacity: 1; }
/* Ken Burns — reuse same 3 paths from db-hero */
.att-hero-slide.kb-a { animation: db-kb-a 22s ease-in-out infinite alternate; }
.att-hero-slide.kb-b { animation: db-kb-b 25s ease-in-out infinite alternate; }
.att-hero-slide.kb-c { animation: db-kb-c 20s ease-in-out infinite alternate; }

/* ── Dark cinematic overlay ── */
.att-hero-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(5, 5, 5, 0.86) 0%,
      rgba(5, 5, 5, 0.68) 40%,
      rgba(5, 5, 5, 0.86) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 15%, rgba(5, 5, 5, 0.62) 100%);
}

/* ── Ambient glow orbs (animated sweep) ── */
.att-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse 70% 80% at 85% 50%, rgba(var(--accent-rgb), 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 80%, rgba(var(--accent-rgb), 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 10%, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%);
  animation: hero-orb-drift 8s ease-in-out infinite alternate;
}

/* ── Floating particles overlay ── */
.att-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 28%, rgba(var(--accent-rgb), 0.55) 0%, transparent 100%),
    radial-gradient(1px   1px   at 34% 66%, rgba(var(--accent-rgb), 0.45) 0%, transparent 100%),
    radial-gradient(2px   2px   at 58% 20%, rgba(var(--accent-rgb), 0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 74% 74%, rgba(var(--accent-rgb), 0.48) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 44%, rgba(var(--accent-rgb), 0.38) 0%, transparent 100%),
    radial-gradient(1px   1px   at 46% 86%, rgba(var(--accent-rgb), 0.28) 0%, transparent 100%),
    radial-gradient(2px   2px   at 20% 76%, rgba(var(--accent-rgb), 0.33) 0%, transparent 100%),
    radial-gradient(1px   1px   at 92% 16%, rgba(var(--accent-rgb), 0.38) 0%, transparent 100%);
  animation: hero-particles-float 12s ease-in-out infinite alternate;
}

/* ── All grid children above the background layers ── */
.att-hero > *:not(.att-hero-slide):not(.att-hero-overlay) {
  position: relative;
  z-index: 3;
}

/* ── Text readability on cinematic background ── */
.att-hero-title {
  font-size: 1.6rem; font-weight: 800; color: #f0f2ff;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0,0,0,0.95), 0 1px 6px rgba(0,0,0,0.8);
}
.att-hero-sub {
  font-size: 0.875rem; color: #c8d4ea; line-height: 1.4;
  text-shadow: 0 1px 12px rgba(0,0,0,0.85);
}
/* Glassmorphism icon box on dark bg */
.att-hero-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.20));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.062);
}
/* Premium phone graphic on dark bg */
.att-hero-phone {
  width: 70px; height: 100px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent-rgb), 0.12));
  border: 2px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  position: relative;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.05);
}
.att-hero-left { display: flex; flex-direction: column; gap: 6px; }
.att-hero-icon-wrap {
  display: flex; align-items: center; gap: 14px; margin-bottom: 4px;
}

/* Status badge */
.att-state-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 20px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  width: fit-content;
}
.att-state-badge.inactive { background: rgba(100,116,139,0.12); color: var(--text3); border: 1px solid rgba(100,116,139,0.2); }
.att-state-badge.active   { background: rgba(34,197,94,0.12);  color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.att-state-badge.paused   { background: rgba(234,179,8,0.12);  color: var(--yellow); border: 1px solid rgba(234,179,8,0.3); }
.att-state-badge.ended    { background: rgba(var(--accent-rgb), 0.35); color: var(--blue); border: 1px solid rgba(255, 255, 255, 0.08); }
.att-state-badge.locked   { background: rgba(239,68,68,0.12);  color: var(--red); border: 1px solid rgba(239,68,68,0.3); }

/* Pulse dot */
.att-pulse-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.att-pulse-dot.green  { background: var(--green);  animation: att-pulse 2s ease infinite; }
.att-pulse-dot.yellow { background: var(--yellow); animation: att-pulse 2s ease infinite; }
.att-pulse-dot.red    { background: var(--red);    animation: att-pulse 2s ease infinite; }
.att-pulse-dot.grey   { background: var(--text3); }
.att-pulse-dot.blue   { background: var(--blue); }
@keyframes att-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Hero illustration (right side phone graphic) */
.att-hero-graphic {
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 110px;
  position: relative;
}
.att-hero-phone-dot {
  width: 28px; height: 7px; border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.25);
}
.att-hero-phone-dot:nth-child(1) { background: rgba(var(--accent-rgb), 0.4); }
.att-hero-phone-dot:nth-child(2) { background: rgba(var(--accent-rgb), 0.3); }
.att-hero-phone-dot:nth-child(3) { background: rgba(var(--accent-rgb), 0.2); }
.att-hero-check {
  position: absolute; bottom: -10px; right: -10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: #fff; font-weight: 700;
}

/* Hero right: start button + info */
.att-hero-actions {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.att-start-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; border: none; border-radius: 12px;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.087);
  font-family: inherit;
}
.att-start-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.113); }
.att-start-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.att-start-btn.danger { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 16px rgba(239,68,68,0.3); }
.att-start-btn.warn   { background: linear-gradient(135deg, #eab308, #ca8a04); color: #000; box-shadow: 0 4px 16px rgba(234,179,8,0.3); }
.att-start-btn.ghost  { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); box-shadow: none; }
.att-hero-info {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: rgba(148,163,184,0.85);
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

/* ── CONFIG ROW ── */
.att-config-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 20px;
  font-size: 0.83rem; color: var(--text2);
}
.att-config-row input[type=number] {
  width: 70px; padding: 5px 8px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  font-size: 0.85rem;
}

/* ── STAT CARDS (4 cards: Present, Late, Left Early, Attendance Rate) ── */
.att-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .att-stats-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .att-stats-row { grid-template-columns: 1fr; } }

.att-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.att-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.att-stat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 14px;
}
.att-stat-icon.green  { background: rgba(34,197,94,0.12); }
.att-stat-icon.orange { background: rgba(249,115,22,0.12); }
.att-stat-icon.red    { background: rgba(239,68,68,0.12); }
.att-stat-icon.blue   { background: rgba(var(--accent-rgb), 0.12); }
.att-stat-val {
  font-size: 2rem; font-weight: 800; line-height: 1;
  margin-bottom: 5px;
  transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.att-stat-card.present .att-stat-val { color: var(--green); }
.att-stat-card.late    .att-stat-val { color: var(--orange); }
.att-stat-card.exited  .att-stat-val { color: var(--red); }
.att-stat-card.pct     .att-stat-val { color: var(--blue); }
.att-stat-label { font-size: 0.8rem; color: var(--text2); font-weight: 500; }
.att-stat-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 0 0 16px 16px;
}
.att-stat-card.present .att-stat-bar { background: var(--green); }
.att-stat-card.late    .att-stat-bar { background: var(--orange); }
.att-stat-card.exited  .att-stat-bar { background: var(--red); }
.att-stat-card.pct     .att-stat-bar { background: var(--blue); }

/* Live indicator on active stat cards */
.att-stat-live {
  position: absolute; top: 12px; right: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
  animation: att-pulse 2s ease infinite;
}

/* ── MIDDLE ROW: Activity Feed | Snapshot | Session Details ── */
.att-mid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .att-mid-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .att-mid-row { grid-template-columns: 1fr; } }

/* ── Activity Feed ── */
.att-feed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.att-feed-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.att-feed-title {
  font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; gap: 8px;
}
.att-feed-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: att-pulse 2s ease infinite;
}
.att-feed-filter {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  font-size: 0.76rem; color: var(--text2); cursor: pointer;
}
.att-feed-body {
  flex: 1; overflow-y: auto; padding: 12px;
  min-height: 180px; max-height: 260px;
}
.att-feed-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; padding: 32px 20px; text-align: center; gap: 10px;
}
.att-feed-empty-icon { font-size: 2.2rem; opacity: 0.5; }
.att-feed-empty-title { font-weight: 600; font-size: 0.95rem; color: var(--text2); }
.att-feed-empty-sub   { font-size: 0.8rem; color: var(--text3); }
.att-feed-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px; margin-bottom: 4px;
  transition: background 0.15s;
  animation: att-card-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
.att-feed-item:hover { background: var(--surface2); }
.att-feed-item-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.att-feed-item-dot.green  { background: var(--green); }
.att-feed-item-dot.orange { background: var(--orange); }
.att-feed-item-dot.red    { background: var(--red); }
.att-feed-item-dot.blue   { background: var(--blue); }
.att-feed-item-dot.purple { background: var(--accent); }
.att-feed-item-text { font-size: 0.82rem; color: var(--text2); flex: 1; line-height: 1.4; }
.att-feed-item-time { font-size: 0.7rem; color: var(--text3); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

/* ── Donut Snapshot ── */
.att-snapshot-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.att-snapshot-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 0.95rem;
}
.att-snapshot-body {
  padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.att-donut-wrap { position: relative; width: 160px; height: 160px; }
.att-donut-svg { transform: rotate(-90deg); }
.att-donut-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); text-align: center;
}
.att-donut-pct { font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.att-donut-lbl { font-size: 0.7rem; color: var(--text3); }
.att-snapshot-legend { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.att-snap-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; padding: 2px 0;
}
.att-snap-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.att-snap-legend-label { flex: 1; color: var(--text2); }
.att-snap-legend-val { font-weight: 600; color: var(--text); }

/* ── Session Details ── */
.att-session-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.att-session-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 0.95rem;
}
.att-session-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.att-session-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.att-session-row-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.83rem; color: var(--text2);
}
.att-session-row-label svg, .att-session-row-label span.icon { font-size: 0.9rem; opacity: 0.7; }
.att-session-row-val { font-size: 0.83rem; font-weight: 600; color: var(--text); text-align: right; }
.att-session-row-val.code { font-family: monospace; color: var(--accent); font-size: 0.9rem; letter-spacing: 1px; }
.att-session-secure {
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; padding: 10px 12px;
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 4px;
}
.att-session-secure-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.att-session-secure-text { font-size: 0.78rem; color: var(--text3); line-height: 1.4; }
.att-session-secure-title { font-weight: 700; color: var(--text2); font-size: 0.8rem; display: block; margin-bottom: 2px; }

/* ── HOW IT WORKS ── */
.att-how-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.att-how-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 20px; color: var(--text2); }
.att-how-steps {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
}
.att-how-step {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 160px;
}
.att-how-step-num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800; color: var(--accent);
}
.att-how-step-text { display: flex; flex-direction: column; gap: 2px; }
.att-how-step-name { font-weight: 700; font-size: 0.88rem; color: var(--text); }
.att-how-step-sub  { font-size: 0.75rem; color: var(--text3); line-height: 1.35; max-width: 160px; }
.att-how-arrow {
  font-size: 1rem; color: var(--text3); flex-shrink: 0;
  margin: 0 8px;
}

.att-sheet-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.att-sheet-actions.inline { justify-content: flex-start; }
.att-sheet-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: var(--shadow, 0 12px 36px rgba(0,0,0,0.14));
}
.att-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.att-sheet-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.att-sheet-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 5px;
}
.att-sheet-title { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.att-sheet-subtitle { font-size: 0.78rem; color: var(--text3); margin-top: 2px; }
.att-sheet-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.att-sheet-meta {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.att-sheet-meta span {
  display: block;
  font-size: 0.68rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.att-sheet-meta strong {
  display: block;
  color: var(--text);
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-sheet-table-wrap { overflow-x: auto; padding: 0 0 2px; }
.att-sheet-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text2);
}
.att-sheet-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface3);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
}
.att-sheet-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  vertical-align: middle;
}
.att-sheet-table tbody tr:nth-child(even) { background: var(--surface2); }
.att-sheet-name { color: var(--text); font-weight: 700; }
.att-sheet-status {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
}
.att-sheet-status.present { color: var(--green); }
.att-sheet-status.exited { color: var(--orange); }
.att-sheet-status.revoked { color: var(--yellow); }
.att-sheet-status.absent,
.att-sheet-status.not_marked { color: var(--red); }
.att-sheet-mobile-list { display: none; }
.att-sheet-mobile-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  color: var(--text2);
  font-size: 0.78rem;
  line-height: 1.6;
}
.att-sheet-mobile-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 6px;
  color: var(--text);
}
@media (max-width: 1100px) {
  .att-sheet-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .att-sheet-top { align-items: flex-start; flex-direction: column; }
  .att-sheet-meta-grid { grid-template-columns: 1fr; padding: 12px; }
  .att-sheet-table-wrap { display: none; }
  .att-sheet-mobile-list { display: grid; gap: 10px; padding: 12px; }
  .att-sheet-actions { width: 100%; justify-content: stretch; }
  .att-sheet-actions .att-start-btn { flex: 1; justify-content: center; }
}

/* ── STUDENT SECTION (bottom) ── */
.att-student-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
}
.att-student-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.att-student-title { font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.att-student-search {
  flex: 1; min-width: 160px; max-width: 280px;
  padding: 7px 12px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 0.85rem; font-family: inherit;
  outline: none; transition: border-color 0.2s;
}
.att-student-search:focus { border-color: var(--accent); }
.att-student-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 12px; padding: 16px;
  max-height: 480px; overflow-y: auto;
}
.att-student-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
  display: flex; align-items: center; gap: 12px;
  position: relative; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  animation: att-card-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
.att-student-card:hover { border-color: rgba(var(--accent-rgb), 0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-1px); }
.att-student-card.status-present  { border-left: 3px solid var(--green); }
.att-student-card.status-exited   { border-left: 3px solid var(--red); opacity: 0.85; }
.att-student-card.status-revoked  { border-left: 3px solid var(--yellow); opacity: 0.8; }
.att-student-card.status-not_marked { border-left: 3px solid var(--text3); }
.att-student-card.status-absent   { border-left: 3px solid rgba(100,116,139,0.4); }
@keyframes att-card-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.att-student-avatar {
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: #fff; flex-shrink: 0; position: relative;
}
.att-avatar-status {
  position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface2);
}
.att-avatar-status.green  { background: var(--green); animation: att-pulse 2s ease infinite; }
.att-avatar-status.red    { background: var(--red); }
.att-avatar-status.yellow { background: var(--yellow); }
.att-avatar-status.grey   { background: var(--text3); }
.att-student-info { flex: 1; min-width: 0; }
.att-student-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-student-meta { font-size: 0.72rem; color: var(--text3); margin-top: 2px; }
.att-student-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 700; margin-top: 5px;
}
.att-student-status-pill.present  { background: rgba(34,197,94,0.12);  color: var(--green); }
.att-student-status-pill.exited   { background: rgba(239,68,68,0.12);  color: var(--red); }
.att-student-status-pill.revoked  { background: rgba(234,179,8,0.12);  color: var(--yellow); }
.att-student-status-pill.not_marked { background: rgba(100,116,139,0.12); color: var(--text3); }
.att-student-status-pill.absent   { background: rgba(239,68,68,0.12); color: var(--red); }
.att-student-join-time { font-size: 0.68rem; color: var(--text3); text-align: right; flex-shrink: 0; }
.att-student-card.status-present .att-student-avatar::after {
  content: ''; position: absolute; inset: -3px; border-radius: 12px;
  border: 2px solid var(--green); opacity: 0.4;
  animation: att-glow 2.5s ease-in-out infinite;
}
@keyframes att-glow { 0%,100% { opacity: 0.15; } 50% { opacity: 0.55; } }
.att-net-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: att-pulse 1.5s ease-in-out infinite; flex-shrink: 0;
}

/* ── Banners & misc ── */
.att-locked-banner {
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25);
  border-radius: 12px; padding: 12px 18px; color: var(--red);
  font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.att-toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 18px;
  font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3); z-index: 9999;
  animation: att-toast-in 0.4s cubic-bezier(0.34,1.56,0.64,1);
  display: flex; align-items: center; gap: 8px;
}
@keyframes att-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Legacy compatibility (keep for any stray references) */
.att-counters { display: none; }
.att-ring-wrap { display: none; }
.att-control-panel {
  background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 20px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.att-min-dur-badge {
  padding: 4px 10px; border-radius: 20px;
  background: rgba(var(--accent-rgb), 0.1); color: var(--accent);
  font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.08);
}
/* old header - kept for compat */
.att-header {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   VYOM — PREMIUM MOBILE EXPERIENCE v2.0
   Cyberpunk-meets-EdTech: buttery smooth, native-app feel
   ADDITIVE ONLY — all rules scoped to @media(max-width:768px) or global keyframes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Premium CSS Variables (mobile-specific neon palette) ── */
@media(max-width:768px){
  :root{
    --neon-sky:var(--accent2);
    --neon-violet:var(--accent);
    --neon-green:var(--green);
    --neon-pink:var(--accent2);
    --neon-gold:var(--yellow);
    --glass-bg:var(--surface2);
    --glass-border:var(--border);
    --glass-glow:0 0 24px var(--accent-glow);
    --spring:cubic-bezier(0.34,1.56,0.64,1);
    --smooth:cubic-bezier(0.4,0,0.2,1);
    --bounce:cubic-bezier(0.68,-0.55,0.265,1.55);
  }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL MOBILE KEYFRAMES (not scoped — needed everywhere)
   ══════════════════════════════════════════════════════════════ */

@keyframes cm-shimmer{
  0%{background-position:-400px 0}
  100%{background-position:400px 0}
}
@keyframes cm-pulse-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb), 0.15),0 0 0 0 rgba(var(--accent-rgb), 0.1)}
  50%{box-shadow:0 0 0 8px rgba(var(--accent-rgb), 0.0),0 0 20px rgba(var(--accent-rgb), 0.087)}
}
@keyframes cm-glow-ring{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb), 0.175)}
  70%{box-shadow:0 0 0 12px rgba(var(--accent-rgb), 0.0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb), 0.0)}
}
@keyframes cm-bounce-in{
  0%{transform:scale(0.85) translateY(8px);opacity:0}
  60%{transform:scale(1.04) translateY(-2px);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes cm-slide-up{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes cm-slide-down{
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(100%);opacity:0}
}
@keyframes cm-liquid-fill{
  0%{transform:scaleX(0);transform-origin:left}
  100%{transform:scaleX(1);transform-origin:left}
}
@keyframes cm-neon-text{
  0%,100%{text-shadow:0 0 8px rgba(var(--accent-rgb), 0.225),0 0 20px rgba(var(--accent-rgb), 0.15),0 0 40px rgba(var(--accent-rgb), 0.075)}
  50%{text-shadow:0 0 12px rgba(var(--accent-rgb), 0.225),0 0 28px rgba(var(--accent-rgb), 0.15),0 0 56px rgba(var(--accent-rgb), 0.075)}
}
@keyframes cm-rotate-border{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes cm-ripple{
  0%{transform:scale(0);opacity:0.6}
  100%{transform:scale(4);opacity:0}
}
@keyframes cm-confetti-burst{
  0%{transform:translate(0,0) rotate(0deg);opacity:1}
  100%{transform:translate(var(--cx,50px),var(--cy,-80px)) rotate(var(--cr,180deg));opacity:0}
}
@keyframes cm-timer-danger{
  0%,100%{transform:scale(1);color:#EF4444}
  50%{transform:scale(1.08);color:#FF6B6B;text-shadow:0 0 12px rgba(239,68,68,0.8)}
}
@keyframes cm-sparkle{
  0%{transform:scale(0) rotate(0deg);opacity:0}
  50%{transform:scale(1) rotate(180deg);opacity:1}
  100%{transform:scale(0) rotate(360deg);opacity:0}
}
@keyframes cm-wave-progress{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
@keyframes cm-typing-gradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes cm-skeleton-shimmer{
  0%{background-position:-300px 0}
  100%{background-position:300px 0}
}
@keyframes cm-waveform{
  0%,100%{height:4px}
  50%{height:var(--wh,20px)}
}
@keyframes cm-msg-pop{
  0%{transform:scale(0.7) translateY(10px);opacity:0}
  70%{transform:scale(1.05) translateY(-2px);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes cm-scroll-glow{
  0%,100%{box-shadow:none}
  50%{box-shadow:0 0 8px rgba(var(--accent-rgb), 0.175)}
}

/* ══════════════════════════════════════════════════════════════
   1. BOTTOM NAVIGATION BAR — Premium Glow & Liquid Fill
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Premium glass bottom nav base ── */
  .mobile-bottom-nav{
    background:rgba(11, 11, 11, 0.95) !important;
    backdrop-filter:blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(180%) !important;
    border-top:1px solid rgba(255, 255, 255, 0.08) !important;
    padding:10px 8px calc(10px + env(safe-area-inset-bottom,0px)) !important;
    box-shadow:0 -4px 32px rgba(0,0,0,0.4),0 -1px 0 rgba(255,255,255,0.04) !important;
    /* Liquid indicator track */
    position:relative;
  }

  /* ── Liquid fill indicator (sliding pill) ── */
  .mobile-bottom-nav::before{
    content:'';
    position:absolute;
    top:0;left:0;
    height:2px;
    width:25%;
    background:linear-gradient(90deg,transparent,var(--neon-sky),var(--neon-violet),transparent);
    border-radius:0 0 4px 4px;
    transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    transform:translateX(calc(var(--cm-nav-active,0) * 100%));
    box-shadow:0 0 12px rgba(var(--accent-rgb), 0.2),0 0 24px rgba(var(--accent-rgb), 0.1);
  }

  /* ── Nav items premium styling ── */
  .mobile-bottom-nav-item{
    min-width:56px !important;
    padding:6px 10px 4px !important;
    border-radius:14px !important;
    transition:all 0.18s var(--spring) !important;
    position:relative;overflow:hidden;
  }

  /* ── Active state: neon glow ── */
  .mobile-bottom-nav-item.active{
    color:#fff !important;
    background:rgba(var(--accent-rgb), 0.12) !important;
    border:1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .mobile-bottom-nav-item.active .icon{
    filter:drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.225)) drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.125));
    animation:cm-pulse-glow 2.5s ease-in-out infinite;
    display:inline-block;
  }
  .mobile-bottom-nav-item.active::after{
    content:'';
    position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(circle at 50% 100%,rgba(var(--accent-rgb), 0.15),transparent 70%);
    pointer-events:none;
  }

  /* ── Tap micro-bounce ── */
  .mobile-bottom-nav-item:active{
    transform:scale(0.88) !important;
  }

  /* ── Ripple on tap ── */
  .mobile-bottom-nav-item .cm-ripple-el{
    position:absolute;
    width:50px;height:50px;
    border-radius:50%;
    background:rgba(var(--accent-rgb), 0.3);
    animation:cm-ripple 0.5s ease-out forwards;
    pointer-events:none;
    transform-origin:center;
    left:50%;top:50%;
    margin:-25px 0 0 -25px;
  }

  /* Student mobile nav matching styles */
  .s-mobile-nav{
    background:rgba(5, 5, 5, 0.96) !important;
    backdrop-filter:blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter:blur(28px) saturate(200%) !important;
    border-top:1px solid rgba(255, 255, 255, 0.08) !important;
    padding:10px 8px calc(10px + env(safe-area-inset-bottom,0px)) !important;
    box-shadow:0 -4px 40px rgba(0,0,0,0.5) !important;
  }
  .s-mobile-tab{
    border-radius:14px !important;
    transition:all 0.18s var(--spring) !important;
    position:relative;overflow:hidden;
  }
  .s-mobile-tab.active{
    background:rgba(var(--accent-rgb), 0.14) !important;
    color:#fff !important;
    border:1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:0 0 16px rgba(var(--accent-rgb), 0.05) !important;
  }
  .s-mobile-tab.active .s-mobile-tab-icon{
    filter:drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.25)) drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.15));
    animation:cm-pulse-glow 2s ease-in-out infinite;
    display:inline-block;
  }
  .s-mobile-tab:active{transform:scale(0.88) !important;}
}

/* ══════════════════════════════════════════════════════════════
   2. CARDS — Glassmorphism, lift, sparkle
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Glass card base ── */
  .card, .card-sm{
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    transition:transform 0.22s var(--spring), box-shadow 0.22s ease !important;
    will-change:transform;
    position:relative;overflow:hidden;
  }
  /* Top-edge shimmer line */
  .card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb), 0.4),rgba(var(--accent-rgb), 0.4),transparent);
    pointer-events:none;
  }
  .card:active{
    transform:scale(0.98) !important;
    box-shadow:0 8px 40px rgba(var(--accent-rgb), 0.062) !important;
  }

  /* ── Understanding meter neon glow ── */
  .meter-value{
    animation:cm-neon-text 3s ease-in-out infinite;
  }

  /* ── Progress bar liquid wave ── */
  .progress-fill.accent{
    background-size:200% 100% !important;
    background-image:linear-gradient(90deg,var(--accent),var(--accent),var(--accent),var(--accent)) !important;
    animation:cm-wave-progress 2s linear infinite !important;
  }

  /* ── Stat cards premium ── */
  .stat{
    background:var(--glass-bg) !important;
    backdrop-filter:blur(16px) !important;
    border:1px solid var(--glass-border) !important;
    box-shadow:var(--glass-glow) !important;
    transition:transform 0.2s var(--spring), box-shadow 0.2s ease !important;
  }
  .stat:active{transform:scale(0.96) translateY(-2px) !important;}

  /* ── Neon stat values ── */
  .stat-value{
    font-size:1.6rem !important;
    filter:drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.15));
  }
}

/* ══════════════════════════════════════════════════════════════
   3. TEACHER DASHBOARD — Masonry, sparkle, glow
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Masonry stagger on teacher cards ── */
  .grid .card:nth-child(odd){ margin-top:0; }
  .grid .card:nth-child(even){ margin-top:8px; }

  /* ── Student chip premium ── */
  .student-chip{
    transition:all 0.18s var(--spring) !important;
    border:1px solid transparent !important;
  }
  .student-chip:active{
    transform:scale(0.95) translateX(4px) !important;
    border-color:var(--neon-green) !important;
    box-shadow:0 0 12px rgba(16,185,129,0.25) !important;
  }

  /* ── Sparkle wrapper for 100% understanding ── */
  .cm-sparkle-container{
    position:absolute;pointer-events:none;inset:0;overflow:hidden;border-radius:inherit;
  }
  .cm-sparkle-dot{
    position:absolute;width:6px;height:6px;border-radius:50%;
    animation:cm-sparkle 0.7s ease forwards;
    background:var(--neon-gold);
    box-shadow:0 0 8px rgba(var(--accent-rgb), 0.8);
  }

  /* ── AI insights panel mobile glow ── */
  .ai-insights-panel{
    backdrop-filter:blur(12px) !important;
    border:1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:0 0 20px rgba(var(--accent-rgb), 0.03),0 8px 32px rgba(0,0,0,0.3) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   4. TASK CARDS — Swipe deck, timer ring, tilt parallax
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Swipeable card deck base ── */
  .s-task-card, .card.task-card, [class*="task-card"]{
    transition:transform 0.3s var(--smooth), box-shadow 0.3s ease, opacity 0.3s ease !important;
    will-change:transform;
    cursor:grab;
    user-select:none;
  }
  .s-task-card:active, .card.task-card:active{ cursor:grabbing !important; }

  /* ── Swipe states ── */
  .cm-swipe-right{
    transform:translateX(60px) rotate(6deg) !important;
    box-shadow:0 8px 40px rgba(16,185,129,0.4) !important;
    border-color:rgba(16,185,129,0.6) !important;
  }
  .cm-swipe-left{
    transform:translateX(-60px) rotate(-6deg) !important;
    box-shadow:0 8px 40px rgba(239,68,68,0.4) !important;
    border-color:rgba(239,68,68,0.6) !important;
  }

  /* ── Swipe hint overlay ── */
  .cm-swipe-hint-right{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:rgba(16,185,129,0.9);color:#fff;
    padding:8px 20px;border-radius:99px;font-weight:800;font-size:1.1rem;
    letter-spacing:0.08em;pointer-events:none;
    transition:opacity 0.2s ease;opacity:0;
    text-transform:uppercase;
    box-shadow:0 4px 20px rgba(16,185,129,0.5);
    z-index:10;
  }
  .cm-swipe-hint-left{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:rgba(239,68,68,0.9);color:#fff;
    padding:8px 20px;border-radius:99px;font-weight:800;font-size:1.1rem;
    letter-spacing:0.08em;pointer-events:none;
    transition:opacity 0.2s ease;opacity:0;
    text-transform:uppercase;
    box-shadow:0 4px 20px rgba(239,68,68,0.5);
    z-index:10;
  }

  /* ── Timer danger pulse ── */
  .timer.danger, .s-test-timer:not(.safe){
    animation:cm-timer-danger 0.8s ease-in-out infinite !important;
  }

  /* ── Option buttons — premium mobile touch ── */
  .option-btn, .s-option{
    min-height:52px !important;
    border-radius:14px !important;
    transition:all 0.18s var(--spring) !important;
    position:relative;overflow:hidden;
  }
  .option-btn::after, .s-option::after{
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:rgba(255,255,255,0);transition:background 0.15s;pointer-events:none;
  }
  .option-btn:active::after{ background:rgba(255,255,255,0.06) !important; }

  /* ── Submit button magnetic effect ── */
  .s-btn-submit, .btn-primary.btn-lg{
    position:relative;overflow:hidden;
  }
  .s-btn-submit::before, .btn-primary.btn-lg::before{
    content:'';position:absolute;inset:-2px;
    background:linear-gradient(135deg,var(--accent),var(--accent),var(--accent),var(--accent));
    background-size:300% 300%;
    animation:cm-rotate-border 3s ease infinite;
    border-radius:inherit;z-index:-1;
    opacity:0;transition:opacity 0.3s;
  }
  .s-btn-submit:focus::before, .btn-primary.btn-lg:focus::before{ opacity:1; }
}

/* ══════════════════════════════════════════════════════════════
   5. CHAT — Bubble pop, typing gradient, voice waveform
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Message bubble pop-in ── */
  .chat-msg-wrap{
    animation:cm-msg-pop 0.32s var(--spring) both !important;
  }
  .s-chat-msg{
    animation:cm-msg-pop 0.28s var(--spring) both !important;
  }
  .sc-msg{
    animation:cm-msg-pop 0.28s var(--spring) both !important;
  }

  /* ── Chat area full height ── */
  .chat-area{
    height:calc(100vh - 240px) !important;
    max-height:600px;
    border-radius:20px !important;
    backdrop-filter:blur(10px);
    border:1px solid var(--glass-border) !important;
  }
  .s-chat-wrap{
    height:calc(100vh - 200px) !important;
  }

  /* ── Premium typing indicator ── */
  .s-typing-dots{
    background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.15),rgba(var(--accent-rgb), 0.15)) !important;
    border:1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter:blur(8px);
  }
  .s-typing-dot{
    background:linear-gradient(135deg,var(--accent),var(--accent)) !important;
    box-shadow:0 0 6px rgba(var(--accent-rgb), 0.15);
  }

  /* ── Gradient typing indicator (teacher copilot style) ── */
  .cm-typing-gradient{
    background:linear-gradient(90deg,var(--accent),var(--accent),var(--accent),var(--accent));
    background-size:300% 100%;
    animation:cm-typing-gradient 2s ease-in-out infinite;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:700;
    font-size:0.75rem;
    letter-spacing:0.06em;
  }

  /* ── Voice waveform bars ── */
  .cm-voice-waveform{
    display:flex;align-items:center;gap:2px;padding:4px;height:32px;
  }
  .cm-wave-bar{
    width:3px;border-radius:2px;
    background:linear-gradient(180deg,var(--accent),var(--accent));
    animation:cm-waveform 0.6s ease-in-out infinite alternate;
    box-shadow:0 0 4px rgba(var(--accent-rgb), 0.125);
  }
  .cm-wave-bar:nth-child(1){--wh:8px;animation-delay:0s}
  .cm-wave-bar:nth-child(2){--wh:16px;animation-delay:0.1s}
  .cm-wave-bar:nth-child(3){--wh:24px;animation-delay:0.05s}
  .cm-wave-bar:nth-child(4){--wh:18px;animation-delay:0.15s}
  .cm-wave-bar:nth-child(5){--wh:28px;animation-delay:0.08s}
  .cm-wave-bar:nth-child(6){--wh:14px;animation-delay:0.12s}
  .cm-wave-bar:nth-child(7){--wh:20px;animation-delay:0.04s}
  .cm-wave-bar:nth-child(8){--wh:10px;animation-delay:0.18s}

  /* ── Voice record button ── */
  .cm-voice-btn{
    width:44px;height:44px;border-radius:50%;
    background:linear-gradient(135deg,rgba(239,68,68,0.15),rgba(239,68,68,0.08));
    border:1px solid rgba(239,68,68,0.3);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all 0.2s var(--spring);
    flex-shrink:0;color:var(--red);font-size:1.1rem;
  }
  .cm-voice-btn.recording{
    background:rgba(239,68,68,0.25) !important;
    border-color:rgba(239,68,68,0.7) !important;
    animation:cm-glow-ring 1.2s ease infinite !important;
    box-shadow:0 0 0 0 rgba(239,68,68,0.7) !important;
  }

  /* ── Swipe-to-reply indicator ── */
  .cm-reply-indicator{
    position:absolute;right:-40px;top:50%;transform:translateY(-50%);
    width:32px;height:32px;border-radius:50%;
    background:rgba(var(--accent-rgb), 0.35);border:1px solid rgba(255, 255, 255, 0.08);
    display:flex;align-items:center;justify-content:center;
    font-size:0.9rem;color:var(--accent);
    transition:opacity 0.2s ease;opacity:0;
    pointer-events:none;
  }
  .chat-msg-wrap:hover .cm-reply-indicator,
  .chat-msg-wrap.cm-swiping .cm-reply-indicator{
    opacity:1;
  }

  /* ── Chat input premium focus ── */
  .chat-input-row input:focus,
  .s-chat-input:focus{
    box-shadow:0 0 0 2px rgba(var(--accent-rgb), 0.1),0 0 20px rgba(var(--accent-rgb), 0.03) !important;
  }

  /* ── Scrollbar glow ── */
  .chat-messages::-webkit-scrollbar-thumb:active{
    background:var(--neon-sky) !important;
    box-shadow:0 0 8px rgba(var(--accent-rgb), 0.2) !important;
    animation:cm-scroll-glow 0.3s ease;
  }
  .s-chat-messages::-webkit-scrollbar{ width:4px !important; }
  .s-chat-messages::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--accent),var(--accent)) !important;
    border-radius:4px !important;
    opacity:0;transition:opacity 0.3s;
  }
}

/* ══════════════════════════════════════════════════════════════
   6. SKELETON LOADERS — Shimmer like crazy
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .cm-skeleton{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.12) 40%,
      rgba(var(--accent-rgb), 0.1) 50%,
      rgba(255,255,255,0.12) 60%,
      rgba(255,255,255,0.04) 100%
    );
    background-size:600px 100%;
    animation:cm-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius:8px;
  }
  .cm-skeleton-card{
    border-radius:16px;
    background:linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 0%,
      rgba(255,255,255,0.09) 35%,
      rgba(var(--accent-rgb), 0.08) 50%,
      rgba(255,255,255,0.09) 65%,
      rgba(255,255,255,0.03) 100%
    );
    background-size:600px 100%;
    animation:cm-skeleton-shimmer 1.6s ease-in-out infinite;
    padding:20px;
    border:1px solid rgba(255,255,255,0.05);
  }
  .cm-skeleton-text{
    height:12px;border-radius:6px;margin-bottom:8px;
    background:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.10),rgba(255,255,255,0.04));
    background-size:400px 100%;
    animation:cm-skeleton-shimmer 1.3s ease-in-out infinite;
  }
  .cm-skeleton-text.w60{ width:60%; }
  .cm-skeleton-text.w80{ width:80%; }
  .cm-skeleton-text.w40{ width:40%; }

  /* Pulsing avatar while loading */
  .cm-skeleton-avatar{
    border-radius:50%;
    animation:cm-pulse-glow 1.8s ease-in-out infinite;
    background:rgba(255,255,255,0.08);
  }
}

/* ══════════════════════════════════════════════════════════════
   7. BOTTOM SHEET MODALS
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Universal bottom sheet ── */
  .cm-bottom-sheet{
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:8000;
    background:rgba(11, 11, 11, 0.96);
    backdrop-filter:blur(32px) saturate(200%);
    -webkit-backdrop-filter:blur(32px) saturate(200%);
    border-radius:24px 24px 0 0;
    border-top:1px solid rgba(255, 255, 255, 0.08);
    box-shadow:0 -8px 48px rgba(0,0,0,0.6),0 -1px 0 rgba(255,255,255,0.05),
               inset 0 1px 0 rgba(255,255,255,0.06);
    padding:0 16px calc(24px + env(safe-area-inset-bottom,0px));
    max-height:85vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    animation:cm-slide-up 0.38s var(--spring) both;
    transform-origin:bottom center;
  }
  .cm-bottom-sheet.dismissing{
    animation:cm-slide-down 0.28s var(--smooth) forwards;
  }

  /* ── Drag handle ── */
  .cm-sheet-handle{
    width:40px;height:4px;border-radius:2px;
    background:rgba(255,255,255,0.2);
    margin:12px auto 16px;
    transition:background 0.15s, width 0.15s;
  }
  .cm-bottom-sheet:hover .cm-sheet-handle,
  .cm-bottom-sheet:focus-within .cm-sheet-handle{
    background:rgba(var(--accent-rgb), 0.6);
    width:52px;
  }

  /* ── Sheet overlay backdrop ── */
  .cm-sheet-backdrop{
    position:fixed;inset:0;z-index:7999;
    background:rgba(0,0,0,0);
    backdrop-filter:blur(2px);
    transition:background 0.3s ease;
  }
  .cm-sheet-backdrop.open{
    background:rgba(0,0,0,0.5);
  }
}

/* ══════════════════════════════════════════════════════════════
   8. GESTURES & TOUCH — Edge indicators, swipe states
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Tab swipe indicator ── */
  .cm-tab-swipe-indicator{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    width:4px;height:80px;border-radius:2px;
    background:linear-gradient(180deg,transparent,var(--neon-sky),transparent);
    opacity:0;
    transition:opacity 0.2s ease;
    pointer-events:none;
    z-index:9000;
    box-shadow:0 0 8px rgba(var(--accent-rgb), 0.2);
  }
  .cm-tab-swipe-indicator.left{ left:0; }
  .cm-tab-swipe-indicator.right{ right:0; }
  .cm-tab-swipe-indicator.show{ opacity:1; }

  /* ── Haptic visual ripple (long press) ── */
  .cm-haptic-ripple{
    position:fixed;
    pointer-events:none;
    z-index:99999;
    width:60px;height:60px;
    margin-top:-30px;margin-left:-30px;
    border-radius:50%;
    border:2px solid rgba(255, 255, 255, 0.08);
    animation:cm-ripple 0.6s ease-out forwards;
  }

  /* ── Pull-to-refresh indicator ── */
  .cm-ptr-indicator{
    position:fixed;top:60px;left:50%;transform:translateX(-50%);
    z-index:8000;
    background:rgba(11, 11, 11, 0.9);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255, 255, 255, 0.08);
    border-radius:99px;
    padding:8px 20px;
    display:flex;align-items:center;gap:8px;
    color:rgba(241,245,249,0.8);font-size:0.8rem;font-weight:600;
    transition:opacity 0.3s ease, transform 0.3s ease;
    opacity:0;
    box-shadow:0 4px 20px rgba(0,0,0,0.4);
  }
  .cm-ptr-indicator.show{opacity:1;}
  .cm-ptr-spinner{
    width:16px;height:16px;border-radius:50%;
    border:2px solid rgba(255, 255, 255, 0.08);
    border-top-color:var(--accent);
    animation:spin 0.7s linear infinite;
  }
}

/* ══════════════════════════════════════════════════════════════
   9. CONFETTI & XP BURST — Enhanced particle burst
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .cm-confetti-piece{
    position:fixed;
    width:8px;height:8px;
    border-radius:2px;
    pointer-events:none;
    z-index:99998;
    animation:cm-confetti-burst 0.9s ease-out forwards;
  }
  .cm-confetti-piece:nth-child(3n)  { background:var(--neon-sky); border-radius:50%; }
  .cm-confetti-piece:nth-child(3n+1){ background:var(--neon-violet); transform:rotate(45deg); }
  .cm-confetti-piece:nth-child(3n+2){ background:var(--neon-gold); border-radius:50%; width:6px;height:6px; }

  /* ── XP burst number ── */
  .cm-xp-burst{
    position:fixed;
    font-family:'Plus Jakarta Sans','Syne',sans-serif;
    font-weight:900;font-size:1.8rem;
    color:var(--neon-gold);
    text-shadow:0 0 12px rgba(var(--accent-rgb), 0.8),0 0 24px rgba(var(--accent-rgb), 0.5);
    pointer-events:none;z-index:99999;
    animation:cm-confetti-burst 0.85s ease-out forwards;
    --cx:-10px;--cy:-60px;--cr:5deg;
  }
}

/* ══════════════════════════════════════════════════════════════
   10. PREMIUM VISUAL POLISH
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Neon text glow for key numbers ── */
  .cm-neon-value{
    animation:cm-neon-text 3s ease-in-out infinite;
    font-weight:800;
  }

  /* ── Animated gradient border on focus ── */
  .cm-gradient-border{
    position:relative;
  }
  .cm-gradient-border::before{
    content:'';
    position:absolute;inset:-1px;
    border-radius:calc(var(--radius) + 1px);
    background:linear-gradient(135deg,var(--accent),var(--accent),var(--accent),#10B981,var(--accent));
    background-size:300% 300%;
    animation:cm-rotate-border 3s ease infinite;
    z-index:-1;
    opacity:0;
    transition:opacity 0.3s;
  }
  .cm-gradient-border:focus-within::before{ opacity:1; }

  /* ── Smooth scroll snap list ── */
  .cm-scroll-snap{
    scroll-snap-type:y mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .cm-scroll-snap > *{
    scroll-snap-align:start;
  }

  /* ── Glowing custom scrollbar ── */
  .cm-glow-scroll::-webkit-scrollbar{ width:3px; }
  .cm-glow-scroll::-webkit-scrollbar-track{ background:transparent; }
  .cm-glow-scroll::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--neon-sky),var(--neon-violet));
    border-radius:3px;
    box-shadow:0 0 6px rgba(var(--accent-rgb), 0.15);
  }
  .cm-glow-scroll::-webkit-scrollbar-thumb:hover{
    box-shadow:0 0 10px rgba(var(--accent-rgb), 0.225);
  }

  /* ── Safe area padding ── */
  .cm-safe-bottom{
    padding-bottom:env(safe-area-inset-bottom,0px) !important;
  }
  .cm-safe-top{
    padding-top:env(safe-area-inset-top,0px) !important;
  }

  /* ── Button magnetic effect ── */
  .cm-magnetic-btn{
    transition:transform 0.15s var(--spring) !important;
  }

  /* ── Premium page transitions ── */
  .cm-page-enter{
    animation:cm-bounce-in 0.45s var(--spring) both;
  }

  /* ── Glass cards for modals ── */
  .s-profile-card, .s-waiting-card{
    backdrop-filter:blur(24px) saturate(180%) !important;
    border:1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:0 24px 64px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04),
               inset 0 1px 0 rgba(255,255,255,0.06) !important;
  }

  /* ── Premium waiting room orb ── */
  .s-waiting-orb{
    box-shadow:0 0 40px rgba(var(--accent-rgb), 0.125),0 0 80px rgba(var(--accent-rgb), 0.075) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   11. LANDING PAGE MOBILE — Hero cinematic
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .landing-hero{
    min-height:calc(100svh - 60px) !important;
    padding:40px 20px !important;
  }
  .role-card{
    border:1.5px solid rgba(255, 255, 255, 0.08) !important;
    transition:all 0.25s var(--spring) !important;
  }
  .role-card:active{
    transform:scale(0.96) !important;
    border-color:rgba(255, 255, 255, 0.08) !important;
    box-shadow:0 0 32px rgba(var(--accent-rgb), 0.075) !important;
  }
  .landing-logo{
    font-size:2.8rem !important;
    filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   12. HUD BAR — Premium mobile treatment
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .student-hud{
    background:rgba(11, 11, 11, 0.9) !important;
    backdrop-filter:blur(16px) !important;
    border-bottom:1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:0 2px 16px rgba(0,0,0,0.3) !important;
  }
  .hud-dot.green{
    box-shadow:0 0 8px var(--green),0 0 16px rgba(34,197,94,0.4) !important;
  }

  /* ── Score bump animation enhanced ── */
  .s-hud-score-bump{
    animation:s-scoreAnim 0.4s var(--spring) !important;
    filter:drop-shadow(0 0 8px rgba(255,209,102,0.8));
  }
}

/* ══════════════════════════════════════════════════════════════
   13. TRANSITION LAYER for tab-swipe
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .cm-tab-slide-left{
    animation:cm-tab-out-left 0.25s var(--smooth) both;
  }
  .cm-tab-slide-right{
    animation:cm-tab-out-right 0.25s var(--smooth) both;
  }
  .cm-tab-enter-left{
    animation:cm-tab-in-left 0.28s var(--spring) both;
  }
  .cm-tab-enter-right{
    animation:cm-tab-in-right 0.28s var(--spring) both;
  }
}
@keyframes cm-tab-out-left{to{transform:translateX(-28px);opacity:0}}
@keyframes cm-tab-out-right{to{transform:translateX(28px);opacity:0}}
@keyframes cm-tab-in-left{from{transform:translateX(28px);opacity:0}}
@keyframes cm-tab-in-right{from{transform:translateX(-28px);opacity:0}}

/* ══════════════════════════════════════════════════════════════════
   AI LESSON PLANNER — styles
   ══════════════════════════════════════════════════════════════════ */

/* Glow pulse for AI generation */
@keyframes lp-glow-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.0); }
  50%      { box-shadow: 0 0 32px 8px rgba(var(--accent-rgb), 0.087); }
}
@keyframes lp-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes lp-spin {
  to { transform: rotate(360deg); }
}
@keyframes lp-fade-in {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes lp-bar {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Main page wrapper */
.lp-page { padding: 24px; max-width: 1200px; margin: 0 auto; }

/* Input form card */
.lp-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.lp-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent), var(--accent));
  background-size: 200% auto;
  animation: lp-shimmer 3s linear infinite;
}

/* Generate button with glow */
.lp-generate-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
}
.lp-generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  animation: lp-glow-pulse 2s infinite;
}
.lp-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Loading overlay */
.lp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  gap: 20px;
}
.lp-spinner {
  width: 48px; height: 48px;
  border: 4px solid var(--surface3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lp-spin 0.9s linear infinite;
}
.lp-progress-track {
  width: 280px;
  height: 6px;
  background: var(--surface2);
  border-radius: 20px;
  overflow: hidden;
}
.lp-progress-fill {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  animation: lp-bar 4s ease-out forwards;
}

/* ══════════════════════════════════════════════════════════════════
   VYOM PENCIL LOADER — reusable animated loading component
   Animations match practice.html (Uiverse.io / gustavofusco)
   Used across all major content-loading states.
   ══════════════════════════════════════════════════════════════════ */

/* Outer wrapper: centers the glass card */
.cm-loader-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  min-height: 200px;
  animation: cm-loader-fadein 0.3s ease;
}

/* Glassmorphism card */
.cm-loader-glass {
  background: rgba(26, 26, 26, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 36px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.light .cm-loader-glass {
  background: rgba(255,255,255,0.8);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   VYOM — COMPREHENSIVE LIGHT MODE THEME FIX v2
   Covers: Student Header · Dashboard Hero · Stat Cards · Quick Actions ·
           Analytics · Content Hub · Reports · Chat · Sidebar top
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Override ALL student CSS variables in light mode ── */
.light {
  --sd-bg: var(--bg);
  --sd-bg2: var(--surface);
  --sd-surface: var(--surface2);
  --sd-surface2: var(--surface2);
  --sd-surface3: var(--surface3);
  --sd-purple: var(--accent);
  --sd-purple2: var(--accent);
  --sd-purple-light: var(--accent2);
  --sd-purple-glow: var(--accent-glow);
  --sd-purple-dim: var(--accent-glow);
  --sd-pink: var(--accent2);
  --sd-sky: var(--accent2);
  --sd-sky2: var(--accent2);
  --sd-green: var(--green);
  --sd-teal: var(--green);
  --sd-orange: var(--orange);
  --sd-text: var(--text);
  --sd-text2: var(--text2);
  --sd-text3: var(--text3);
  --sd-border: var(--border);
  --sd-border2: rgba(255, 255, 255, 0.08);
  --sd-border3: var(--border);
  --sv2-bg: var(--bg);
  --sv2-surface: var(--surface);
  --sv2-surface2: var(--surface2);
  --sv2-surface3: var(--surface3);
  --sv2-border: var(--border);
  --sv2-border2: rgba(255, 255, 255, 0.08);
  --sv2-text: var(--text);
  --sv2-text2: var(--text2);
  --sv2-text3: var(--text3);
  --sv2-purple: var(--accent);
  --sv2-purple-dim: var(--accent-glow);
  --sv2-purple-glow: rgba(var(--accent-rgb), 0.087);
  --sv2-blue: var(--accent2);
  --sv2-blue-dim: rgba(var(--accent-rgb), 0.12);
  --sv2-blue-glow: var(--accent-glow);
  --sv2-green: var(--green);
  --sv2-gold: var(--yellow);
}

/* ── 2. Student App — tone down ambient mesh in light mode ── */
.light .sd-app {
  background: var(--sd-bg);
}
.light .sd-app::before {
  background:
    radial-gradient(ellipse at 15% 25%, rgba(11,45,99,0.035) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(212,160,23,0.025) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(11,45,99,0.018) 0%, transparent 70%);
}

/* ── 3. Student Header — Premium Light Navbar ── */
.light .sd-header {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f8fafc 100%);
  border-bottom: 1px solid rgba(11,45,99,0.09);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.light .sd-header::after {
  background: linear-gradient(90deg, transparent, rgba(11,45,99,0.12), rgba(212,160,23,0.18), transparent);
}
.light .sd-header-hi { color: #1A1A1A; }
.light .sd-header-sub { color: #444444; }
.light .sd-notif-btn {
  border-color: rgba(11,45,99,0.14);
  background: rgba(11,45,99,0.04);
  color: #444444;
}
.light .sd-notif-btn:hover {
  border-color: rgba(11,45,99,0.32);
  color: #1A1A1A;
  background: rgba(11,45,99,0.08);
}
.light .sd-notif-badge { border-color: #eef2ff; }
.light .sd-profile-chip {
  border-color: rgba(11,45,99,0.14);
  background: rgba(11,45,99,0.04);
  color: #1A1A1A;
}
.light .sd-profile-chip:hover {
  border-color: rgba(11,45,99,0.28);
  background: rgba(11,45,99,0.08);
}
.light .sd-profile-caret { color: #666666; }
.light .sd-header-avatar {
  background: linear-gradient(135deg, rgba(11,45,99,0.18), rgba(212,160,23,0.14));
  border-color: rgba(11,45,99,0.32);
  box-shadow: 0 0 12px rgba(11,45,99,0.1);
}
.light .sd-header-avatar:hover { box-shadow: 0 0 22px rgba(11,45,99,0.2); }
.light .sd-content::-webkit-scrollbar-thumb { background: rgba(11,45,99,0.15); }

/* ── 4. Student Dashboard Hero — Navy Premium ── */
.light .sd-hero {
  background: linear-gradient(138deg, #0B2D63 0%, #163975 50%, #0B2D63 100%);
  border-color: rgba(212,160,23,0.38);
  box-shadow:
    0 0 0 1px rgba(212,160,23,0.08),
    0 8px 48px rgba(11,45,99,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06);
  animation: none;
}
.light .sd-hero::before {
  background:
    radial-gradient(ellipse 55% 90% at 5% 65%, rgba(212,160,23,0.18) 0%, transparent 100%),
    radial-gradient(ellipse 42% 65% at 88% 18%, rgba(255,255,255,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 50% 70% at 48% 110%, rgba(212,160,23,0.1) 0%, transparent 100%),
    radial-gradient(ellipse 30% 50% at 22% -10%, rgba(255,255,255,0.04) 0%, transparent 100%);
  animation: none;
}
.light .sd-hero::after {
  background-image:
    linear-gradient(rgba(212,160,23,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,23,0.055) 1px, transparent 1px);
}
.light .sd-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,45,99,0.52) 0%, rgba(11,45,99,0.28) 40%, rgba(11,45,99,0.52) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 10%, rgba(11, 11, 11, 0.45) 100%);
}
.light .sd-hero-title {
  background: linear-gradient(130deg, #ffffff 0%, #fde68a 55%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.light .sd-hero-subtitle { color: rgba(255,255,255,0.62); }
.light .sd-hero-code-label { color: rgba(253,230,138,0.68); }
.light .sd-hero-code {
  background: rgba(255,255,255,0.09);
  border-color: rgba(212,160,23,0.52);
  color: #fde68a;
  box-shadow: 0 2px 12px rgba(212,160,23,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}
.light .sd-hero-copy-btn {
  border-color: rgba(212,160,23,0.32);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.72);
}
.light .sd-hero-copy-btn:hover {
  border-color: rgba(212,160,23,0.68);
  color: #fff;
  background: rgba(212,160,23,0.14);
  box-shadow: 0 0 14px rgba(212,160,23,0.28);
}
.light .sd-hero-live-badge {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.28);
  color: #22c55e;
  animation: none;
}
.light .sd-hero-divider {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(212,160,23,0.42) 28%,
    rgba(255,255,255,0.22) 72%,
    transparent 100%);
}
.light .sd-hero-right {
  background: rgba(0,0,0,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.light .sd-hero-stat {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03);
}
.light .sd-hero-stat:hover {
  border-color: rgba(212,160,23,0.32);
  box-shadow: 0 2px 18px rgba(212,160,23,0.1);
}
.light .sd-hero-stat-label { color: rgba(255,255,255,0.48); }
.light .sd-hero-stat-timer {
  color: #4ade80;
  text-shadow: 0 0 20px rgba(74,222,128,0.55), 0 0 40px rgba(74,222,128,0.2);
}
.light .sd-hero-stat-num {
  background: linear-gradient(135deg, #ffffff 0%, #fde68a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.light .sd-hero-stat-sub { color: rgba(255,255,255,0.42); }
.light .sd-hero-avatar {
  background: linear-gradient(135deg, rgba(212,160,23,0.32), rgba(255,255,255,0.18));
  border-color: rgba(212,160,23,0.62);
  box-shadow:
    0 0 0 5px rgba(212,160,23,0.09),
    0 0 0 10px rgba(212,160,23,0.04),
    0 0 26px rgba(212,160,23,0.38),
    0 0 55px rgba(212,160,23,0.12);
  animation: none;
}
.light .slch-orbs,
.light .slch-ptcl-layer { opacity: 0.28; }

/* ── 5. Stat Cards — Remove Hardcoded Dark Gradients ── */
.light .sd-stat-card.purple-card {
  background: linear-gradient(145deg, #ecf0ff, #e4eafc) !important;
  border-color: rgba(11,45,99,0.18) !important;
  box-shadow: 0 4px 18px rgba(11,45,99,0.06) !important;
}
.light .sd-stat-card.purple-card:hover {
  box-shadow: 0 10px 32px rgba(11,45,99,0.12) !important;
  border-color: rgba(11,45,99,0.3) !important;
}
.light .sd-stat-card.purple-card::before {
  background:
    radial-gradient(ellipse 80px 80px at 85% 20%, rgba(11,45,99,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 50px 50px at 15% 80%, rgba(11,45,99,0.07) 0%, transparent 70%);
  animation: none;
}
.light .sd-stat-card.purple-card::after { display: none; }
.light .sd-stat-card.purple-card .sd-stat-label { color: #1a4090; }
.light .sd-stat-card.purple-card .sd-stat-cta  { color: #0B2D63; }
.light .sd-stat-card.purple-card .sd-stat-value { color: #0a1f4d; }
.light .sd-stat-card.purple-card .sd-stat-sub { color: #444; }
.light .sd-stat-icon.purple {
  background: rgba(11,45,99,0.1);
  border-color: rgba(11,45,99,0.2);
  box-shadow: 0 0 12px rgba(11,45,99,0.08);
}

.light .sd-stat-card.teal-card {
  background: linear-gradient(145deg, #ecfdf8, #e2f7f2) !important;
  border-color: rgba(13,122,110,0.2) !important;
  box-shadow: 0 4px 18px rgba(13,122,110,0.05) !important;
}
.light .sd-stat-card.teal-card:hover {
  box-shadow: 0 10px 32px rgba(13,122,110,0.12) !important;
  border-color: rgba(13,122,110,0.35) !important;
}
.light .sd-stat-card.teal-card::before {
  background:
    radial-gradient(ellipse 70px 70px at 80% 15%, rgba(var(--accent-rgb), 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 45px 45px at 10% 75%, rgba(var(--accent-rgb), 0.12) 0%, transparent 70%);
  animation: none;
}
.light .sd-stat-card.teal-card::after { display: none; }
.light .sd-stat-card.teal-card .sd-stat-label { color: #0d7a6e; }
.light .sd-stat-card.teal-card .sd-stat-cta  { color: #0d5c53; }
.light .sd-stat-card.teal-card .sd-stat-value { color: #063e38; }
.light .sd-stat-card.teal-card .sd-stat-sub { color: #444; }
.light .sd-stat-icon.green {
  background: rgba(13,122,110,0.1);
  border-color: rgba(13,122,110,0.2);
  box-shadow: 0 0 12px rgba(13,122,110,0.08);
}

.light .sd-stat-card.red-card {
  background: linear-gradient(145deg, #fdf0f7, #f9e6f2) !important;
  border-color: rgba(157,23,77,0.18) !important;
  box-shadow: 0 4px 18px rgba(157,23,77,0.05) !important;
}
.light .sd-stat-card.red-card:hover {
  box-shadow: 0 10px 32px rgba(157,23,77,0.1) !important;
  border-color: rgba(157,23,77,0.3) !important;
}
.light .sd-stat-card.red-card::before {
  background:
    radial-gradient(ellipse 75px 75px at 88% 18%, rgba(157,23,77,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40px 40px at 12% 70%, rgba(157,23,77,0.09) 0%, transparent 70%);
  animation: none;
}
.light .sd-stat-card.red-card::after {
  border-color: rgba(157,23,77,0.08);
  box-shadow:
    0 0 0 20px rgba(157,23,77,0.03),
    0 0 0 40px rgba(157,23,77,0.015);
}
.light .sd-stat-card.red-card .sd-stat-label { color: #9d174d; }
.light .sd-stat-card.red-card .sd-stat-cta  { color: #831843; }
.light .sd-stat-card.red-card .sd-stat-value { color: #500724; }
.light .sd-stat-card.red-card .sd-stat-sub { color: #444; }
.light .sd-stat-icon.orange {
  background: rgba(157,23,77,0.09);
  border-color: rgba(157,23,77,0.18);
  box-shadow: 0 0 12px rgba(157,23,77,0.07);
}

/* ── 6. Quick Action Tool Cards ── */
.light .sd-tool-card {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.11);
  color: #1A1A1A;
}
.light .sd-tool-card::before {
  background: linear-gradient(135deg, rgba(11,45,99,0.025), transparent);
}
.light .sd-tool-card:hover {
  border-color: rgba(11,45,99,0.26);
  box-shadow: 0 4px 22px rgba(11,45,99,0.08), 0 0 0 1px rgba(11,45,99,0.06);
  transform: translateY(-4px);
  background: #eef2ff;
}
.light .sd-tool-card::after {
  background: radial-gradient(circle at 50% 0%, rgba(11,45,99,0.055) 0%, transparent 70%);
}
.light .sd-tool-label { color: #1A1A1A; }

/* ── 7. Analytics Cards ── */
.light .sd-analytics-card {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.11);
  box-shadow: 0 2px 12px rgba(11,45,99,0.04);
}
.light .sd-analytics-card::before {
  background: radial-gradient(ellipse at top left, rgba(11,45,99,0.05) 0%, transparent 65%);
}
.light .sd-analytics-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(11,45,99,0.09);
}
.light .sd-ac-purple { --sd-ac-glow: rgba(11,45,99,0.05);   border-color: rgba(11,45,99,0.15); }
.light .sd-ac-teal   { --sd-ac-glow: rgba(13,122,110,0.05); border-color: rgba(13,122,110,0.18); }
.light .sd-ac-orange { --sd-ac-glow: rgba(230,81,0,0.05);   border-color: rgba(230,81,0,0.15); }
.light .sd-ac-gold   { --sd-ac-glow: rgba(212,160,23,0.06); border-color: rgba(212,160,23,0.22); }
.light .sd-ac-icon   { background: rgba(11,45,99,0.06); border-color: rgba(11,45,99,0.1); }
.light .sd-ac-label  { color: #666666; }
.light .sd-ac-value  { color: #1A1A1A; }
.light .sd-ac-bar    { background: rgba(11,45,99,0.07); }
.light .sd-ac-bar-label { color: #666666; }
.light .sd-bar-purple { background: linear-gradient(90deg, #0B2D63, #1a4090); box-shadow: 0 0 8px rgba(11,45,99,0.3); }

/* ── 8. Section Headers & Hub Grid ── */
.light .sd-section-title  { color: #1A1A1A; }
.light .sd-section-sub    { color: #444444; }
.light .sd-stat-value     { color: #1A1A1A; }
.light .sd-stat-sub       { color: #444444; }
.light .sd-hub-item {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.1);
  color: #444444;
}
.light .sd-hub-item:hover {
  background: #eef2ff;
  border-color: rgba(11,45,99,0.22);
  box-shadow: 0 4px 16px rgba(11,45,99,0.06);
}
.light .sd-hub-title { color: #1A1A1A; }
.light .sd-hub-sub   { color: #444444; }
.light .sd-hub-arrow { color: #888888; }
.light .sd-hub-item:hover .sd-hub-arrow { color: #0B2D63; transform: translateX(3px); }

/* ════════════════════════════════════════════════════
   CONTENT HUB — Full Light Mode
════════════════════════════════════════════════════ */
.light .ch-hero {
  background: #0B2D63;
  border-bottom-color: rgba(212,160,23,0.28);
  box-shadow: 0 0 40px rgba(11,45,99,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
}
.light .ch-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,45,99,0.58) 0%, rgba(11,45,99,0.32) 40%, rgba(11,45,99,0.58) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 15%, rgba(11, 11, 11, 0.45) 100%);
}
.light .ch-hero::before {
  background:
    radial-gradient(ellipse 70% 80% at 85% 50%, rgba(212,160,23,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 80%, rgba(212,160,23,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 10%, rgba(255,255,255,0.06) 0%, transparent 50%);
  animation: none;
}
.light .ch-hero::after { opacity: 0.25; animation: none; }
.light .ch-hero-label {
  color: #fde68a !important;
  background: rgba(212,160,23,0.2) !important;
  border-color: rgba(212,160,23,0.45) !important;
  box-shadow: 0 0 10px rgba(212,160,23,0.15) !important;
}
.light .ch-hero-title {
  background: linear-gradient(135deg, #ffffff 0%, #fde68a 60%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}
.light .ch-hero-sub { color: rgba(255,255,255,0.78); text-shadow: none; }
.light .ch-hero-stat-num { color: #fde68a; text-shadow: 0 0 10px rgba(212,160,23,0.35); }
.light .ch-hero-stat-label { color: rgba(255,255,255,0.68); text-shadow: none; }

/* Content Hub toolbar */
.light .ch-toolbar {
  background: #FFFDF9;
  border-bottom-color: rgba(11,45,99,0.09);
}
.light .ch-search {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #1A1A1A;
}
.light .ch-search::placeholder { color: #888888; }
.light .ch-search:focus {
  border-color: rgba(11,45,99,0.38);
  box-shadow: 0 0 0 3px rgba(11,45,99,0.07);
}
.light .ch-search-icon { color: #888888; }
.light .ch-filter-select {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #1A1A1A;
}
.light .ch-sort-btn {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #444444;
}
.light .ch-sort-btn:hover { background: #EAD9C8; color: #1A1A1A; }
.light .ch-sort-btn.active { background: #0B2D63; border-color: #0B2D63; color: #fff; }

/* Category tabs row */
.light .ch-cats {
  background: #FFFDF9;
  border-bottom-color: rgba(11,45,99,0.09);
}
.light .ch-cat-btn { color: #666666; }
.light .ch-cat-btn:hover { color: #1A1A1A; }
.light .ch-cat-btn.active { color: #0B2D63; border-bottom-color: #0B2D63; }
.light .ch-cat-count { background: #F3EDE2; color: #888888; }
.light .ch-cat-btn.active .ch-cat-count { background: rgba(11,45,99,0.1); color: #0B2D63; }

/* Content body & grid */
.light .ch-body { background: #F8F5EF; }
.light .ch-section-title { color: #1A1A1A; }
.light .ch-section-sub   { color: #666666; }

/* Content cards */
.light .ch-card {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.1);
  box-shadow: 0 2px 8px rgba(11,45,99,0.04);
}
.light .ch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(11,45,99,0.1), 0 2px 8px rgba(11,45,99,0.06);
  border-color: rgba(11,45,99,0.24);
}
.light .ch-card-thumb { background: #F3EDE2; }
.light .ch-card-title { color: #1A1A1A; }
.light .ch-card-desc  { color: #444444; }
.light .ch-card-meta  { border-top-color: rgba(11,45,99,0.08); }
.light .ch-teacher-name { color: #444444; }
.light .ch-card-date    { color: #666666; }
.light .ch-btn-preview {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.12);
  color: #444444;
}
.light .ch-btn-preview:hover { background: #EAD9C8; color: #1A1A1A; }
.light .ch-btn-open { background: linear-gradient(135deg, #0B2D63, #1a3a6b); }
.light .ch-featured {
  border-color: rgba(11,45,99,0.18);
  background: linear-gradient(135deg, #FFFDF9 60%, rgba(11,45,99,0.03));
  box-shadow: 0 6px 28px rgba(11,45,99,0.08), 0 0 0 1px rgba(11,45,99,0.07);
}
.light .ch-featured-label { color: #0B2D63; }
.light .ch-featured-title { color: #1A1A1A; }
.light .ch-featured-desc  { color: #444444; }

/* Empty state */
.light .ch-empty-title { color: #444444; }
.light .ch-empty-sub   { color: #666666; }
.light .ch-empty-icon  { opacity: 0.6; }

/* Skeleton loaders */
.light .ch-skeleton {
  background: linear-gradient(90deg, #F3EDE2 25%, #EAD9C8 50%, #F3EDE2 75%);
  background-size: 200% 100%;
}

/* ════════════════════════════════════════════════════
   REPORTS PAGE — Full Light Mode
════════════════════════════════════════════════════ */
.light .rc-wrap { background: #F8F5EF; }
.light .rc-title {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.light .rc-tab {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #444444;
}
.light .rc-tab:hover { background: #EAD9C8; color: #1A1A1A; }
.light .rc-tab.active {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b);
  color: #fff;
  border-color: transparent;
}
.light .rc-stat {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.1);
}
.light .rc-stat-val {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.light .rc-stat-lbl { color: #666666; }
.light .rc-card {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.1);
}
.light .rc-card:hover {
  background: #f5f1ea;
  border-color: rgba(11,45,99,0.24);
  box-shadow: 0 4px 18px rgba(11,45,99,0.08);
}
.light .rc-card-top   { color: #1A1A1A; }
.light .rc-card-title { color: #1A1A1A; }
.light .rc-card-meta  { color: #666666; }
.light .rc-chip-test  { background: rgba(11,45,99,0.09);   color: #0B2D63;  border-color: rgba(11,45,99,0.18); }
.light .rc-chip-quiz  { background: rgba(109,40,217,0.09); color: #5b21b6;  border-color: rgba(109,40,217,0.18); }
.light .rc-chip-task  { background: rgba(46,125,50,0.09);  color: #1b5e20;  border-color: rgba(46,125,50,0.18); }
.light .rc-chip-green { background: rgba(46,125,50,0.09);  color: #1b5e20;  border-color: rgba(46,125,50,0.18); }
.light .rc-chip-red   { background: rgba(198,40,40,0.09);  color: #b71c1c;  border-color: rgba(198,40,40,0.18); }
.light .rc-chip-yellow{ background: rgba(230,81,0,0.09);   color: #bf360c;  border-color: rgba(230,81,0,0.18); }
.light .rc-dl-btn {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #444444;
}
.light .rc-dl-btn:hover { background: #EAD9C8; color: #1A1A1A; }
.light .rc-review   { background: #F8F5EF; border-top-color: rgba(11,45,99,0.1); }
.light .rc-q-row    { color: #1A1A1A; border-bottom-color: rgba(11,45,99,0.07); }
.light .rc-q-correct { background: rgba(46,125,50,0.06); border-color: rgba(46,125,50,0.18); }
.light .rc-q-wrong   { background: rgba(198,40,40,0.05); border-color: rgba(198,40,40,0.15); }
.light .rc-q-skip    { background: rgba(230,81,0,0.04);  border-color: rgba(230,81,0,0.12); }
.light .rc-q-text    { color: #1A1A1A; }
.light .rc-q-meta    { color: #666666; }
.light .rc-q-opt {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.1);
  color: #444444;
}
.light .rc-q-opt.opt-correct { background: rgba(46,125,50,0.1); border-color: rgba(46,125,50,0.3); color: #1b5e20; font-weight: 700; }
.light .rc-q-opt.opt-wrong   { background: rgba(198,40,40,0.1); border-color: rgba(198,40,40,0.28); color: #b71c1c; font-weight: 700; }
.light .rc-q-ans .mine    { color: #b71c1c; }
.light .rc-q-ans .correct { color: #1b5e20; }
.light .rc-q-ans .skip    { color: #bf360c; }
.light .rc-topic-name { color: #444444; }
.light .rc-topic-bar  { background: rgba(11,45,99,0.08); }
.light .rc-topic-pct  { color: #666666; }
.light .rc-empty      { color: #666666; }
.light .rc-empty-title { color: #444444; }
.light .rc-empty-sub   { color: #888888; }

/* ════════════════════════════════════════════════════
   CHAT PAGE — Text Visibility Overrides
════════════════════════════════════════════════════ */
/* sv3 header + right panel */
.light .sv3-top-header    { background: #FFFDF9; border-bottom-color: rgba(11,45,99,0.09); }
.light .sv3-top-title     { color: #1A1A1A; }
.light .sv3-top-sub       { color: #444444; }
.light .sv3-chat-right    { background: #FFFDF9; border-left-color: rgba(11,45,99,0.09); }
.light .sv3-card          { background: #F3EDE2; border-color: rgba(11,45,99,0.1); }
.light .sv3-card-title    { color: #1A1A1A; }
.light .sv3-info-row      { color: #444444; border-bottom-color: rgba(11,45,99,0.07); }
.light .sv3-qa-btn        { background: #F3EDE2; border-color: rgba(11,45,99,0.12); color: #444444; }
.light .sv3-qa-btn:hover  { background: #EAD9C8; border-color: rgba(11,45,99,0.22); color: #1A1A1A; }
.light .sv3-raise-btn     { background: rgba(11,45,99,0.07); border-color: rgba(11,45,99,0.18); color: #0B2D63; }
.light .sv3-resource-row  { background: #F3EDE2; border-color: rgba(11,45,99,0.1); }
.light .sv3-resource-name { color: #1A1A1A; }
.light .sv3-resource-size { color: #666666; }
.light .sv3-empty-note    { color: #888888; }
/* Chat messages area */
.light .sv2-chat-layout   { background: #FFFDF9; border-color: rgba(11,45,99,0.09); }
.light .sv2-chat-messages { background: #F8F5EF; }
.light .sv2-msg-bubble    { background: #FFFDF9; border-color: rgba(11,45,99,0.1); color: #1A1A1A; }
.light .sv2-msg-time      { color: #888888; }
.light .sv2-msg-sender-name { color: #666666; }
.light .sv2-msg-sender-name.teacher { color: #0B2D63; }
.light .sv2-msg-bubble.mine {
  background: linear-gradient(135deg, rgba(11,45,99,0.08), rgba(11,45,99,0.04));
  color: #1A1A1A;
  border-color: rgba(11,45,99,0.16);
}
.light .sv2-msg-bubble.teacher {
  background: rgba(212,160,23,0.07);
  color: #1A1A1A;
  border-color: rgba(212,160,23,0.2);
}
.light .sv2-msg-system-pill { background: #F3EDE2; color: #666666; border-color: rgba(11,45,99,0.1); }
.light .sv2-chat-header       { background: #FFFDF9; border-bottom-color: rgba(11,45,99,0.09); }
.light .sv2-chat-header-title { color: #1A1A1A; }
.light .sv2-chat-header-sub   { color: #666666; }
.light .sv2-chat-icon-btn     { color: #666666; border-color: rgba(11,45,99,0.12); background: #F3EDE2; }
/* Composer row */
.light .sv2-composer       { background: #FFFDF9; border-top-color: rgba(11,45,99,0.09); }
.light .sv2-composer-input { background: #F3EDE2; border-color: rgba(11,45,99,0.14); color: #1A1A1A; }
.light .sv2-composer-input::placeholder { color: #888888; }
.light .sv2-composer-btn   { background: #F3EDE2; border-color: rgba(11,45,99,0.12); color: #444444; }
.light .sv2-composer-send  { background: linear-gradient(135deg, #0B2D63, #1a3a6b); }
/* Doubt section */
.light .sv2-doubt-section { background: #FFFDF9; border-top-color: rgba(11,45,99,0.09); }
.light .sv2-doubt-label   { color: #444444; }
.light .sv2-doubt-input   { background: #F3EDE2; border-color: rgba(11,45,99,0.14); color: #1A1A1A; }
.light .sv2-doubt-input::placeholder { color: #888888; }
.light .sv2-doubt-input:focus { border-color: rgba(11,45,99,0.38); }
.light .sv2-doubt-btn { background: linear-gradient(135deg, #0B2D63, #1a3a6b); }

/* ════════════════════════════════════════════════════
   TOP HEADER BAR (sv2 shell / general student header)
════════════════════════════════════════════════════ */
.light .sv2-top-bar {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f8fafc 100%) !important;
  border-bottom-color: rgba(11,45,99,0.09) !important;
}
.light .sv2-welcome-text  { color: #1A1A1A; }
.light .sv2-welcome-sub   { color: #444444; }
.light .sv2-profile-name  { color: #1A1A1A; }
/* Session badge already covered above */

/* Sidebar join card code color */
.light .sd-join-code { color: #0B2D63; font-weight: 800; }

/* ════════════════════════════════════════════════════
   MISC — Photo upload, Settings, Tooltips in light mode
════════════════════════════════════════════════════ */
.light .s-photo-upload-wrap {
  background: rgba(11,45,99,0.04);
  border-color: rgba(11,45,99,0.1);
}
.light .s-photo-upload-btn {
  border-color: rgba(11,45,99,0.3);
  background: rgba(11,45,99,0.07);
  color: #0B2D63;
}
.light .s-photo-upload-btn:hover { background: rgba(11,45,99,0.14); }
.light .s-photo-remove-btn {
  border-color: rgba(198,40,40,0.3);
  background: rgba(198,40,40,0.07);
  color: #c62828;
}

/* ════════════════════════════════════════════════════
   ATTENDANCE PAGE — Student header fix
════════════════════════════════════════════════════ */
.light .att-student-header { background: #FFFDF9; border-bottom-color: rgba(11,45,99,0.09); }

/* ════════════════════════════════════════════════════
   LIGHT MODE FIX v3 — Tasks, Video Call, Attendance,
   Chat Bottom Bar, FAB, Logo, Typography
════════════════════════════════════════════════════ */

/* ── 1. TASKS PAGE — Create Task & Task List ── */
.light .tk2-form-section {
  background: #FFFDF9;
  border: 1px solid rgba(11,45,99,0.08);
  box-shadow: 0 6px 24px rgba(11,45,99,0.05);
}
.light .tk2-form-section::before {
  background: linear-gradient(90deg, #0B2D63, #D4A017, transparent);
}
.light .tk2-section-heading { color: #1A1A1A; }
.light .tk2-section-num {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b);
}
.light .tk2-type-card {
  background: #F8F5EF;
  border-color: rgba(11,45,99,0.14);
}
.light .tk2-type-card:hover {
  background: #F0EAE0;
  border-color: rgba(11,45,99,0.3);
}
.light .tk2-type-card.active {
  background: rgba(11,45,99,0.07);
  border-color: #0B2D63;
  box-shadow: 0 0 0 3px rgba(11,45,99,0.08), 0 8px 24px rgba(11,45,99,0.1);
}
.light .tk2-type-card-icon.mcq   { background: rgba(11,45,99,0.10); }
.light .tk2-type-card-icon.short { background: rgba(212,160,23,0.12); }
.light .tk2-type-card-icon.long  { background: rgba(16,185,129,0.10); }
.light .tk2-type-card-icon.coding{ background: rgba(139,92,246,0.10); }
.light .tk2-type-card-name  { color: #1A1A1A; }
.light .tk2-type-card-desc  { color: #666666; }
.light .tk2-type-card.active .tk2-type-card-name { color: #0B2D63; }
.light .tk2-input {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #1A1A1A;
}
.light .tk2-input:focus {
  border-color: rgba(11,45,99,0.45);
  box-shadow: 0 0 0 3px rgba(11,45,99,0.06);
}
.light .tk2-input::placeholder { color: #A89888; }
.light .tk2-textarea { background: #F3EDE2; border-color: rgba(11,45,99,0.14); color: #1A1A1A; }
.light .tk2-field-label { color: #444444; }
.light .tk2-field-required { color: #C65A3D; }
.light .tk2-option-row label { color: #1A1A1A; }
.light .tk2-task-row {
  background: rgba(250,248,244,0.92);
  border-color: rgba(11,45,99,0.09);
  border-left-color: rgba(11,45,99,0.25);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.light .tk2-task-row:hover {
  border-left-color: #0B2D63;
  border-color: rgba(11,45,99,0.18);
  box-shadow: 0 6px 24px rgba(11,45,99,0.10);
}
.light .tk2-task-row.easy  { border-left-color: rgba(34,197,94,0.7); }
.light .tk2-task-row.medium{ border-left-color: rgba(212,160,23,0.75); }
.light .tk2-task-row.hard  { border-left-color: rgba(198,90,61,0.75); }
.light .tk2-task-num {
  background: rgba(11,45,99,0.08);
  border-color: rgba(11,45,99,0.18);
  color: #0B2D63;
}
.light .tk2-task-q  { color: #1A1A1A; }
.light .tk2-tag-mcq    { background: rgba(11,45,99,0.08); color: #0B2D63; border-color: rgba(11,45,99,0.15); }
.light .tk2-tag-short  { background: rgba(212,160,23,0.10); color: #8B6400; border-color: rgba(212,160,23,0.2); }
.light .tk2-tag-long   { background: rgba(16,185,129,0.08); color: #0f6b4b; border-color: rgba(16,185,129,0.18); }
.light .tk2-tag-coding { background: rgba(139,92,246,0.08); color: #5B21B6; border-color: rgba(139,92,246,0.18); }
.light .tk2-tag-easy   { background: rgba(34,197,94,0.08); color: #166534; border-color: rgba(34,197,94,0.18); }
.light .tk2-tag-medium { background: rgba(212,160,23,0.08); color: #8B6400; border-color: rgba(212,160,23,0.18); }
.light .tk2-tag-hard   { background: rgba(198,90,61,0.08); color: #9A1515; border-color: rgba(198,90,61,0.18); }
.light .tk2-task-score { color: #166534; }
.light .tk2-task-score-label { color: #888888; }
.light .tk2-task-attempts { color: #888888; }
.light .tk2-stat-card {
  background: rgba(250,248,244,0.9);
  box-shadow: 0 0 0 1px rgba(11,45,99,0.09), 0 4px 20px rgba(0,0,0,0.06);
}
.light .tk2-stat-card:hover { box-shadow: 0 0 0 1px rgba(11,45,99,0.18), 0 8px 30px rgba(0,0,0,0.10); }
.light .tk2-stat-sub { color: #888888; }
.light .tk2-breadcrumb { color: #666; background: rgba(11,45,99,0.05); border-color: rgba(11,45,99,0.10); }
.light .tk2-breadcrumb-current { color: #0B2D63; }
.light .tk2-title {
  background: linear-gradient(135deg, #0B2D63, #D4A017);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.light .tk2-filters-row { background: rgba(11,45,99,0.04); border-color: rgba(11,45,99,0.10); }
.light .tk2-search-input {
  background: rgba(11,45,99,0.05);
  border-color: rgba(11,45,99,0.12);
  color: #1A1A1A;
}
.light .tk2-search-input:focus { border-color: rgba(11,45,99,0.35); box-shadow: 0 0 0 3px rgba(11,45,99,0.07); }
.light .tk2-select { background: rgba(11,45,99,0.05); border-color: rgba(11,45,99,0.12); color: #1A1A1A; }
.light .tk2-filter-btn { background: rgba(11,45,99,0.05); border-color: rgba(11,45,99,0.12); color: #444; }
.light .tk2-filter-btn:hover { background: rgba(11,45,99,0.09); color: #0B2D63; border-color: rgba(11,45,99,0.25); }
.light .tk2-page-btn {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #444444;
}
.light .tk2-page-btn:hover { background: rgba(11,45,99,0.08); color: #0B2D63; border-color: rgba(11,45,99,0.3); }
.light .tk2-page-btn.active {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b);
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(11,45,99,0.25);
}
.light .tk2-action-btn {
  background: rgba(11,45,99,0.06);
  border-color: rgba(11,45,99,0.14);
  color: #0B2D63;
}
.light .tk2-action-btn:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(11,45,99,0.12); }
.light .tk2-action-btn.send { background: rgba(34,197,94,0.10); color: #166534; border-color: rgba(34,197,94,0.25); }
.light .tk2-action-btn.del { background: rgba(198,90,61,0.08); color: #9A1515; border-color: rgba(198,90,61,0.2); }
.light .tk2-save-task-btn {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b);
  color: #fff;
}
.light .tk2-ai-btn-inline {
  background: linear-gradient(135deg, rgba(11,45,99,0.12), rgba(212,160,23,0.12));
  border-color: rgba(11,45,99,0.2);
  color: #0B2D63;
}
/* difficulty/timer chips inside task form */
.light .tk2-chip, .light .tk2-diff-btn, .light .tk2-timer-btn {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #444444;
}
.light .tk2-chip.active, .light .tk2-diff-btn.active, .light .tk2-timer-btn.active {
  background: rgba(11,45,99,0.1);
  border-color: #0B2D63;
  color: #0B2D63;
}
/* MCQ option rows */
.light .tk2-option-row input[type="radio"] { accent-color: #0B2D63; }

/* ── 2. VIDEO CALL FLOATING WINDOW ── */
.light .vc-floating-window {
  background: rgba(255,253,249,0.93);
  border-color: rgba(11,45,99,0.14);
  box-shadow:
    0 36px 90px rgba(11,45,99,0.14),
    0 10px 28px rgba(11,45,99,0.08),
    0 0 0 1px rgba(255,255,255,0.9);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.light .vc-floating-window::before {
  background: radial-gradient(circle, rgba(11,45,99,0.06) 0%, transparent 68%);
}
.light .vc-floating-window::after {
  background: radial-gradient(circle, rgba(212,160,23,0.07) 0%, transparent 68%);
}
.light .vc-floating-window:hover {
  border-color: rgba(11,45,99,0.28);
  box-shadow:
    0 44px 110px rgba(11,45,99,0.16),
    0 14px 36px rgba(11,45,99,0.1),
    0 0 0 1px rgba(255,255,255,0.95);
}
.light .vc-floating-window.vc-dragging {
  border-color: rgba(11,45,99,0.4);
  box-shadow:
    0 52px 130px rgba(11,45,99,0.2),
    0 0 60px rgba(212,160,23,0.1);
}
.light .vc-float-header {
  background: linear-gradient(135deg, rgba(11,45,99,0.1) 0%, rgba(212,160,23,0.08) 100%);
  border-bottom: 1px solid rgba(11,45,99,0.1);
}
.light .vc-float-header::after {
  background: rgba(11,45,99,0.08);
}
.light .vc-float-title { color: #1A1A1A; }
.light .vc-float-subtitle { color: #666666; }
.light .vc-live-badge {
  background: rgba(34,197,94,0.12);
  color: #166534;
  border-color: rgba(34,197,94,0.25);
}
.light .vc-float-btn {
  background: rgba(11,45,99,0.07);
  border-color: rgba(11,45,99,0.14);
  color: #444444;
}
.light .vc-float-btn:hover {
  background: rgba(11,45,99,0.14);
  color: #1A1A1A;
}
.light .vc-float-body { background: rgba(248,245,239,0.8); }
.light .vc-participant-tile { background: #EDE7DC; border-color: rgba(11,45,99,0.1); }
.light .vc-participant-name { color: #1A1A1A; }
.light .vc-waiting-text { color: #666666; }
.light .vc-you-label {
  background: rgba(11,45,99,0.12);
  color: #0B2D63;
  border-color: rgba(11,45,99,0.2);
}
.light .vc-float-controls {
  background: rgba(248,245,239,0.95);
  border-top: 1px solid rgba(11,45,99,0.1);
  backdrop-filter: blur(12px);
}
.light .vc-float-controls::before {
  background: linear-gradient(to right, rgba(11,45,99,0.04), rgba(212,160,23,0.04), rgba(11,45,99,0.04));
}
.light .vc-ctrl-btn {
  background: #FFFDF9;
  border: 1px solid rgba(11,45,99,0.14);
  color: #444444;
  box-shadow: 0 2px 8px rgba(11,45,99,0.06);
}
.light .vc-ctrl-btn:hover {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.28);
  color: #1A1A1A;
}
.light .vc-ctrl-btn.muted, .light .vc-ctrl-btn.cam-off {
  background: rgba(198,90,61,0.1);
  border-color: rgba(198,90,61,0.25);
  color: #C65A3D;
}
.light .vc-ctrl-btn.end-call {
  background: #C65A3D;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(198,90,61,0.3);
}
.light .vc-status-text { color: #666666; }
.light .vc-status-dot { background: #22c55e; }
.light .vc-minimized-pill {
  background: rgba(255,253,249,0.95);
  border-color: rgba(11,45,99,0.18);
  box-shadow: 0 8px 24px rgba(11,45,99,0.12);
}

/* ── 3. ATTENDANCE PAGE — Hero / Banner ── */
.light .att-hero {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 45%, #fdf8f2 100%) !important;
  border-bottom: 1px solid rgba(11,45,99,0.08);
}
.light .att-hero-slide {
  display: block !important;
  filter: grayscale(0.15) brightness(1.05) contrast(0.95);
}
.light .att-hero-slide.active {
  opacity: 0.35 !important;
}
.light .att-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(240,244,255,0.7) 0%,
    rgba(248,250,255,0.55) 50%,
    rgba(240,244,255,0.7) 100%
  ) !important;
  z-index: 1;
}
.light .att-hero::before {
  background: radial-gradient(circle, rgba(11,45,99,0.05) 0%, transparent 68%) !important;
}
.light .att-hero::after { display: none; }
.light .att-hero-title { color: #1A1A1A; text-shadow: none; }
.light .att-hero-sub   { color: #444444; text-shadow: none; }
.light .att-hero-info  { color: #4b5563 !important; text-shadow: none !important; }
.light .att-hero-icon-wrap {
  background: rgba(11,45,99,0.08);
  border-color: rgba(11,45,99,0.14);
  box-shadow: 0 4px 16px rgba(11,45,99,0.08);
}
.light .att-hero-actions .att-start-btn {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b);
  color: #fff;
  box-shadow: 0 4px 16px rgba(11,45,99,0.25);
  border-color: transparent;
}
.light .att-hero-actions .att-start-btn:hover {
  box-shadow: 0 6px 22px rgba(11,45,99,0.35);
}
.light .att-hero-check {
  background: rgba(11,45,99,0.1);
  border-color: rgba(11,45,99,0.2);
  color: #0B2D63;
}
.light .att-hero-phone-dot:nth-child(1) { background: rgba(11,45,99,0.3); }
.light .att-hero-phone-dot:nth-child(2) { background: rgba(11,45,99,0.2); }
.light .att-hero-phone-dot:nth-child(3) { background: rgba(11,45,99,0.12); }
/* Attendance stat cards */
.light .att-stat-card {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.08);
  box-shadow: 0 4px 16px rgba(11,45,99,0.04);
}
.light .att-stat-value { color: #1A1A1A; }
.light .att-stat-label { color: #666666; }
.light .att-section-title { color: #1A1A1A; }
.light .att-live-badge  { background: rgba(34,197,94,0.1); color: #166534; border-color: rgba(34,197,94,0.2); }
/* How it works steps */
.light .att-step-card {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.08);
}
.light .att-step-num {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b);
  color: #fff;
}
.light .att-step-title { color: #1A1A1A; }
.light .att-step-desc  { color: #666666; }
.light .att-step-arrow { color: rgba(11,45,99,0.25); }
/* Session details panel */
.light .att-session-card {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.08);
}
.light .att-session-label { color: #666666; }
.light .att-session-value { color: #1A1A1A; }
.light .att-class-code    { color: #0B2D63; font-weight: 800; }
.light .att-secure-badge  {
  background: rgba(11,45,99,0.05);
  border-color: rgba(11,45,99,0.1);
  color: #444444;
}
/* Activity feed */
.light .att-feed-card {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.08);
}
.light .att-feed-empty { color: #888888; }
.light .att-feed-row { border-bottom-color: rgba(11,45,99,0.06); }
.light .att-filter-btn {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #444444;
}
.light .att-filter-btn.active {
  background: rgba(11,45,99,0.1);
  color: #0B2D63;
  border-color: rgba(11,45,99,0.25);
}
/* Min stay input */
.light .att-min-stay-input {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.18);
  color: #1A1A1A;
}

/* ── 4. CHAT PAGE — Bottom Input Bar & Toolbar ── */
/* Teacher-side comm-v2 bottom bar */
.light .comm-v2-toggle-bar {
  background: #FFFDF9;
  border-color: rgba(11,45,99,0.12);
  backdrop-filter: none;
}
.light .comm-v2-tab-btn { color: #444444; }
.light .comm-v2-tab-btn.active {
  background: rgba(11,45,99,0.08);
  color: #0B2D63;
  border-color: rgba(11,45,99,0.2);
}
.light .comm-v2-input-area {
  background: #FFFDF9;
  border-top-color: rgba(11,45,99,0.1);
}
.light .comm-v2-input-field {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #1A1A1A;
}
.light .comm-v2-input-field:focus {
  border-color: rgba(11,45,99,0.38);
  box-shadow: 0 0 0 3px rgba(11,45,99,0.05);
}
.light .comm-v2-input-field::placeholder { color: #A89888; }
.light .comm-v2-send-btn {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b);
  color: #fff;
}
.light .comm-v2-attach-btn,
.light .comm-v2-emoji-btn,
.light .comm-v2-gif-btn {
  color: #666666;
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.12);
}
.light .comm-v2-attach-btn:hover,
.light .comm-v2-emoji-btn:hover,
.light .comm-v2-gif-btn:hover {
  color: #0B2D63;
  background: rgba(11,45,99,0.08);
}
/* Plus / action button left of input */
.light .comm-v2-plus-btn {
  background: #F3EDE2;
  border-color: rgba(11,45,99,0.14);
  color: #444444;
}
.light .comm-v2-plus-btn:hover {
  background: rgba(11,45,99,0.08);
  color: #0B2D63;
}
/* Dark message shadows */
.light .comm-v2-msg-wrap .chat-bubble {
  box-shadow: 0 2px 8px rgba(11,45,99,0.06);
}
/* Chat page outer layout */
.light .comm-v2-container,
.light .teacher-chat-shell {
  background: #F8F5EF;
}
.light .comm-v2-sidebar {
  background: #FFFDF9;
  border-right-color: rgba(11,45,99,0.1);
}

/* ── 5. COPILOT / CHATBOT FAB — Light Mode ── */
.light .copilot-fab {
  background: linear-gradient(135deg, #0B2D63 0%, #D4A017 100%);
  box-shadow:
    0 8px 24px rgba(11,45,99,0.22),
    0 0 0 1px rgba(212,160,23,0.2);
}
.light .copilot-fab:hover {
  box-shadow:
    0 12px 32px rgba(11,45,99,0.32),
    0 0 0 1px rgba(212,160,23,0.35),
    0 0 48px rgba(212,160,23,0.12);
}
.light .copilot-fab .copilot-pulse  { background: rgba(11,45,99,0.2); }
.light .copilot-fab .copilot-pulse2 { background: rgba(212,160,23,0.15); }
.light .copilot-fab.is-thinking {
  background: linear-gradient(135deg, #0B2D63 0%, #8B6400 100%);
}

/* ── 6. LOGO — Rounded & Polished ── */
.light .sidebar-logo-icon {
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #0B2D63, #1a3a6b);
  box-shadow: 0 4px 14px rgba(11,45,99,0.22);
}
/* base also get rounded in dark */
.sidebar-logo-icon {
  border-radius: 14px;
  overflow: hidden;
}

/* ── 7. TYPOGRAPHY — Light Mode Text Colors ── */
/* Labels, subtitles, helper text across all pages */
.light .field-label,
.light .form-label,
.light label { color: #444444; }

.light .helper-text,
.light .hint-text,
.light .form-hint { color: #666666; }

.light .placeholder-text,
.light .empty-state-text,
.light .empty-label { color: #888888; }

.light .section-title,
.light .card-title { color: #1A1A1A; }

.light .section-subtitle,
.light .card-subtitle { color: #444444; }

.light .timestamp,
.light .time-label,
.light .chat-time { color: #888888; }

.light .panel-desc,
.light .panel-description { color: #666666; }

/* Breadcrumb text */
.light .breadcrumb-item,
.light .page-breadcrumb { color: #666666; }

/* Input placeholders via attribute */
.light input::placeholder,
.light textarea::placeholder { color: #A89888; }

/* Ensure no hardcoded white text leaks in light */
.light .tk2-type-card-name,
.light .tk2-section-heading,
.light .tk2-task-q { color: #1A1A1A; }

.light .tk2-stat-card:nth-child(1) .tk2-stat-val { color: #0B2D63 !important; }
.light .tk2-stat-card:nth-child(2) .tk2-stat-val { color: #5B21B6 !important; }
.light .tk2-stat-card:nth-child(3) .tk2-stat-val { color: #8B6400 !important; }
.light .tk2-stat-card:nth-child(4) .tk2-stat-val { color: #166534 !important; }

/* Global helper overrides for problematic light/neon inline colors in Light Mode */
.light [style*="color: #4ade80"],
.light [style*="color:#4ade80"],
.light [style*="color: '#4ade80'"],
.light [style*="color:'#4ade80'"],
.light [style*="color: #4ADE80"],
.light [style*="color:#4ADE80"],
.light [style*="color: '#4ADE80'"],
.light [style*="color:'#4ADE80'"],
.light [style*="color: #34D399"],
.light [style*="color:#34D399"],
.light [style*="color: '#34D399'"],
.light [style*="color:'#34D399'"],
.light [style*="color: #6EE7B7"],
.light [style*="color:#6EE7B7"],
.light [style*="color: '#6EE7B7'"],
.light [style*="color:'#6EE7B7'"],
.light [style*="color: #10B981"],
.light [style*="color:#10B981"],
.light [style*="color: '#10B981'"],
.light [style*="color:'#10B981'"] {
  color: var(--green) !important;
}

.light [style*="color: #f87171"],
.light [style*="color:#f87171"],
.light [style*="color: '#f87171'"],
.light [style*="color:'#f87171'"],
.light [style*="color: #F87171"],
.light [style*="color:#F87171"],
.light [style*="color: '#F87171'"],
.light [style*="color:'#F87171'"],
.light [style*="color: #FCA5A5"],
.light [style*="color:#FCA5A5"],
.light [style*="color: '#FCA5A5'"],
.light [style*="color:'#FCA5A5'"],
.light [style*="color: #ef4444"],
.light [style*="color:#ef4444"],
.light [style*="color: '#ef4444'"],
.light [style*="color:'#ef4444'"] {
  color: var(--red) !important;
}

.light [style*="color: #EAB308"],
.light [style*="color:#EAB308"],
.light [style*="color: '#EAB308'"],
.light [style*="color:'#EAB308'"],
.light [style*="color: #FFD166"],
.light [style*="color:#FFD166"],
.light [style*="color: '#FFD166'"],
.light [style*="color:'#FFD166'"],
.light [style*="color: #FBBF24"],
.light [style*="color:#FBBF24"],
.light [style*="color: '#FBBF24'"],
.light [style*="color:'#FBBF24'"] {
  color: #b45309 !important; /* Dark amber/brown for readable yellow/gold text */
}

.light [style*="color: #0EA5E9"],
.light [style*="color:#0EA5E9"],
.light [style*="color: '#0EA5E9'"],
.light [style*="color:'#0EA5E9'"],
.light [style*="color: #22d3ee"],
.light [style*="color:#22d3ee"],
.light [style*="color: '#22d3ee'"],
.light [style*="color:'#22d3ee'"] {
  color: var(--blue) !important;
}

.light [style*="color: #fb923c"],
.light [style*="color:#fb923c"],
.light [style*="color: '#fb923c'"],
.light [style*="color:'#fb923c'"] {
  color: var(--orange) !important;
}

.light [style*="color: #818cf8"],
.light [style*="color:#818cf8"],
.light [style*="color: '#818cf8'"],
.light [style*="color:'#818cf8'"] {
  color: var(--accent) !important;
}

.light [style*="color: #94A3B8"],
.light [style*="color:#94A3B8"],
.light [style*="color: '#94A3B8'"],
.light [style*="color:'#94A3B8'"],
.light [style*="color: #94a3b8"],
.light [style*="color:#94a3b8"],
.light [style*="color: '#94a3b8'"],
.light [style*="color:'#94a3b8'"],
.light [style*="color: #cbd5e1"],
.light [style*="color:#cbd5e1"],
.light [style*="color: '#cbd5e1'"],
.light [style*="color:'#cbd5e1'"],
.light [style*="color: #c9d1d9"],
.light [style*="color:#c9d1d9"],
.light [style*="color: '#c9d1d9'"],
.light [style*="color:'#c9d1d9'"] {
  color: var(--text3) !important;
}

/* ════════════════════════════════════════════════════
   END VYOM LIGHT MODE FIX v3
   ════════════════════════════════════════════════════ */

/* ── COMPREHENSIVE LIGHT THEME OVERRIDES FOR VYOM ── */

/* 1. General Student and UI Elements */
.light .s-text-muted { color: var(--text3) !important; }
.light .s-nav-student-name { color: var(--text) !important; }
.light .s-nav-tab { color: var(--text3) !important; }
.light .s-nav-tab:hover { color: var(--text2) !important; background: rgba(11, 45, 99, 0.05) !important; }
.light .s-nav-tab.active { color: #fff !important; background: var(--accent) !important; }
.light .s-session-chip { color: var(--text2) !important; background: var(--surface3) !important; border-color: var(--border) !important; }
.light .s-hand-btn { color: var(--text2) !important; border-color: var(--border) !important; background: var(--surface) !important; }
.light .s-hud-item { color: var(--text3) !important; }
.light .s-hud-rank { color: var(--accent2) !important; font-weight: 800 !important; }
.light .s-main .section-title { color: var(--text) !important; }
.light .s-perf-lbl { color: var(--text3) !important; }
.light .s-option { color: var(--text2) !important; background: var(--surface2) !important; border-color: var(--border) !important; }
.light .s-option:hover { background: var(--surface3) !important; border-color: var(--accent) !important; }
.light .s-option-letter { color: var(--text3) !important; background: rgba(11, 45, 99, 0.08) !important; }
.light .s-option.selected { background: rgba(11, 45, 99, 0.08) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.light .s-option.selected .s-option-letter { color: #fff !important; background: var(--accent) !important; }
.light .s-option.correct-ans { background: rgba(46, 125, 50, 0.1) !important; border-color: var(--green) !important; color: var(--green) !important; }
.light .s-option.correct-ans .s-option-letter { color: #fff !important; background: var(--green) !important; }
.light .s-option.wrong-ans { background: rgba(211, 47, 47, 0.1) !important; border-color: var(--red) !important; color: var(--red) !important; }
.light .s-option.wrong-ans .s-option-letter { color: #fff !important; background: var(--red) !important; }
.light .s-btn-submit { color: #fff !important; }
.light .s-short-area { color: var(--text) !important; background: var(--surface) !important; border: 1.5px solid var(--border) !important; }
.light .s-code-lang { color: var(--text3) !important; }
.light .s-quiz-dot { color: var(--text3) !important; background: var(--surface3) !important; }
.light .s-quiz-dot.answered { background: var(--accent) !important; color: #fff !important; }
.light .s-quiz-nav-btn { color: var(--text2) !important; background: var(--surface2) !important; }
.light .s-quiz-finish { color: #fff !important; }
.light .s-empty { color: var(--text3) !important; }
.light .s-empty-title { color: var(--text2) !important; }
.light .s-empty-sub { color: var(--text3) !important; }

/* 2. Chat and Doubt Sections */
.light .s-chat-input { color: var(--text) !important; background: var(--surface) !important; }
.light .s-chat-msg.theirs { color: var(--text2) !important; background: var(--surface2) !important; }
.light .s-chat-msg.teacher { color: var(--text) !important; background: rgba(212, 160, 23, 0.1) !important; border: 1px solid rgba(212, 160, 23, 0.25) !important; }
.light .sv2-doubt-label { color: var(--text) !important; }
.light .sv2-composer-input { color: var(--text) !important; background: var(--surface2) !important; border-color: var(--border) !important; }
.light .sv2-file-name { color: var(--text) !important; }
.light .sv2-file-size { color: var(--text3) !important; }
.light .sv3-top-title { color: var(--text) !important; }
.light .sv3-resource-name { color: var(--text) !important; }
.light .sv3-resource-size { color: var(--text3) !important; }
.light .sv3-empty-note { color: var(--text3) !important; }
.light .sv2-msg-sender-name { color: var(--text2) !important; }
.light .sv2-msg-sender-name.teacher { color: var(--accent) !important; font-weight: 700 !important; }
.light .sv2-file-card { background: var(--surface2) !important; border-color: var(--border) !important; }
.light .sv2-msg-bubble { background: var(--surface2) !important; color: var(--text) !important; }
.light .sv2-msg-bubble.mine { background: var(--accent) !important; color: #fff !important; }
.light .sv2-msg-bubble.teacher { background: rgba(212, 160, 23, 0.1) !important; border: 1px solid rgba(212, 160, 23, 0.25) !important; color: var(--text) !important; }
.light .sv2-doubt-input { color: var(--text) !important; background: var(--surface2) !important; border-color: var(--border) !important; }
.light .sv2-doubt-input:focus { border-color: var(--accent) !important; }
.light .s-doubt-card { background: var(--surface) !important; border-color: var(--border) !important; }
.light .s-doubt-card.s-doubt-resolved { background: rgba(46, 125, 50, 0.05) !important; border-color: rgba(46, 125, 50, 0.18) !important; }
.light .s-doubt-text { color: var(--text) !important; }
.light .s-doubt-answer { color: var(--green) !important; font-weight: 600 !important; }

/* Teacher Chat / Doubt Panel */
.light .comm-v2-chat-hdr-title { color: var(--text) !important; }
.light .comm-v2-sender { color: var(--text) !important; }
.light .comm-v2-time { color: var(--text3) !important; }
.light .comm-v2-bubble { background: var(--surface2) !important; color: var(--text) !important; }
.light .comm-v2-bubble.teacher-bubble { background: var(--accent) !important; color: #fff !important; }
.light .comm-v2-bubble.student-bubble { background: var(--surface3) !important; color: var(--text) !important; border-color: var(--border) !important; }
.light .chat-file-card { background: var(--surface3) !important; border-color: var(--border) !important; }
.light .chat-file-info .fn { color: var(--text) !important; }
.light .chat-file-info .fs { color: var(--text3) !important; }
.light .comm-v2-doubt-card { background: var(--surface) !important; border-color: var(--border) !important; }
.light .comm-v2-doubt-card:hover { border-color: var(--accent) !important; }
.light .comm-v2-doubt-card span[style*="color"] { color: var(--text) !important; }

/* 3. Reports & Analytics Overrides */
.light .rc-tab { color: var(--text3) !important; }
.light .rc-tab:hover { color: var(--text2) !important; }
.light .rc-tab.active { color: #fff !important; background: var(--accent) !important; border-color: var(--accent) !important; }
.light .rc-empty { color: var(--text3) !important; }
.light .rc-empty-title { color: var(--text2) !important; }
.light .rc-stat-lbl { color: var(--text3) !important; }
.light .rc-card-title { color: var(--text) !important; }
.light .rc-card-meta { color: var(--text3) !important; }
.light .rc-q-text { color: var(--text) !important; }
.light .rc-q-meta { color: var(--text3) !important; }
.light .rc-q-opt { color: var(--text2) !important; }
.light .rc-topic-name { color: var(--text2) !important; }
.light .rc-topic-pct { color: var(--text3) !important; }
.light .rc-dl-btn { color: var(--text2) !important; background: var(--surface2) !important; border-color: var(--border) !important; }
.light .rc-dl-btn:hover { color: var(--text) !important; background: var(--surface3) !important; }

/* Session Activity Cards & Stats */
.light .sd-analytics-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  --sd-box-bg: rgba(11,45,99,0.05);
  --sd-box-border: rgba(11,45,99,0.12);
}
.light .sd-ac-label { color: var(--text3) !important; }
.light .sd-ac-value { color: var(--text) !important; }
.light .sd-ac-meta { color: var(--text2) !important; }
.light .sd-ac-bar-label { color: var(--text3) !important; }
.light .sd-ac-mini-bar { background: rgba(11,45,99,0.07); }
.light .sd-analytics-empty-state {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(11,45,99,0.04);
}
.light .sd-analytics-empty-state:hover {
  box-shadow: 0 12px 36px rgba(11,45,99,0.09);
}
.light .sd-aes-icon {
  background: rgba(11,45,99,0.05);
  border-color: rgba(11,45,99,0.12);
  box-shadow: 0 0 12px rgba(11,45,99,0.06);
}


/* 4. Student Attendance Page */
.light .s-attendance-container { color: var(--text) !important; }
.light .s-att-title {
  background: linear-gradient(135deg, #0B2D63, #8B6400) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.light .s-att-subtitle { color: var(--text3) !important; }
.light .s-btn-back {
  background: rgba(11, 45, 99, 0.05) !important;
  border-color: rgba(11, 45, 99, 0.15) !important;
  color: var(--text2) !important;
}
.light .s-btn-back:hover { background: rgba(11, 45, 99, 0.1) !important; }
.light .s-att-hero {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 30px rgba(11, 45, 99, 0.08) !important;
}
.light .s-att-hero-main h3 { color: var(--text) !important; }
.light .s-att-hero-main p { color: var(--text3) !important; }
.light .s-att-hero-info { border-left-color: var(--border) !important; }
.light .s-att-hero-info-label { color: var(--text3) !important; }
.light .s-att-hero-info-val { color: var(--text) !important; }
.light .s-att-hero-info-val.code-pill {
  background: rgba(11, 45, 99, 0.08) !important;
  color: #0B2D63 !important;
  border-color: rgba(11, 45, 99, 0.2) !important;
}
.light .s-att-hero-badge { border-left-color: var(--border) !important; }
.light .s-att-badge-text p { color: var(--text3) !important; }
.light .s-att-quick-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 15px rgba(11, 45, 99, 0.04) !important;
}
.light .s-att-quick-card:hover {
  background: var(--surface2) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 8px 24px rgba(11, 45, 99, 0.08) !important;
}
.light .s-att-qc-info h6 { color: var(--text3) !important; }
.light .s-att-qc-info h4 { color: var(--text) !important; }
.light .s-att-qc-info p { color: var(--text3) !important; }
.light .s-att-panel {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 30px rgba(11, 45, 99, 0.04) !important;
}
.light .s-att-panel-title { color: var(--text) !important; }
.light .s-att-timeline-name { color: var(--text) !important; }
.light .s-att-timeline-desc { color: var(--text3) !important; }
.light .s-att-timeline-time { color: var(--text3) !important; }
.light .s-att-feedback-quote {
  color: var(--text) !important;
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}
.light .s-att-feedback-quote p { color: var(--text) !important; }
.light .s-att-feedback-quote::after { color: rgba(11, 45, 99, 0.03) !important; }
.light .s-att-author-name h6 { color: var(--text) !important; }
.light .s-att-author-name p { color: var(--text3) !important; }
.light .s-att-ai-card {
  background: linear-gradient(135deg, rgba(11, 45, 99, 0.05) 0%, rgba(212, 160, 23, 0.03) 100%) !important;
  border-color: rgba(11, 45, 99, 0.15) !important;
}
.light .s-att-ai-info h5 { color: var(--accent) !important; }
.light .s-att-ai-info p { color: var(--text2) !important; }
.light .s-att-banner {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text3) !important;
}

/* 5. Tasks & Test Mode */
.light .s-task-topic { color: var(--text3) !important; }
.light .s-task-q { color: var(--text) !important; }
.light .s-task-hint { color: var(--text2) !important; }
.light .s-test-q-btn { color: var(--text2) !important; }
.light .student-copilot-no-task { color: var(--text3) !important; }
.light .s-task-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 15px rgba(11, 45, 99, 0.04) !important;
}
.light .s-task-meta { color: var(--text3) !important; }

/* Leaderboard */
.light .s-lb-name { color: var(--text) !important; }
.light .s-lb-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.light .s-lb-row.me {
  background: var(--surface2) !important;
  border-color: var(--accent) !important;
}
.light .s-lb-rank {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
.light .s-lb-rank.gold { background: rgba(212,160,23,0.1) !important; border-color: rgba(212,160,23,0.3) !important; color: #B45309 !important; }
.light .s-lb-rank.silver { background: rgba(100,116,139,0.1) !important; border-color: rgba(100,116,139,0.3) !important; color: #475569 !important; }
.light .s-lb-rank.bronze { background: rgba(var(--accent-rgb), 0.1) !important; border-color: rgba(var(--accent-rgb), 0.3) !important; color: #B45309 !important; }
.light .s-lb-track { background: rgba(11, 45, 99, 0.08) !important; }

/* Explain Container */
.light .s-explain {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}
.light .s-explain-badge {
  background: rgba(11, 45, 99, 0.08) !important;
  color: var(--accent) !important;
}
.light .s-explain-content {
  color: var(--text2) !important;
}

/* Status / Result boxes */
.light .s-awaiting-evaluation {
  padding: 16px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #B45309 !important;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.light .s-result.correct .s-result-headline { color: var(--green) !important; }
.light .s-result.wrong .s-result-headline { color: var(--red) !important; }

/* Performance HUD Chips */
.light .s-perf-chip {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.light .s-perf-chip span {
  color: var(--text2) !important;
}
.light .s-perf-chip .val {
  color: inherit;
}
.light .s-streak-bar {
  background: rgba(var(--accent-rgb), 0.08) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #B45309 !important;
}

/* Badges and Chips */
.light .s-chip-mcq {
  background: rgba(11, 45, 99, 0.08) !important;
  color: var(--accent) !important;
  border-color: rgba(11, 45, 99, 0.18) !important;
}
.light .s-chip-coding {
  background: rgba(110, 44, 18, 0.08) !important;
  color: #6E2C12 !important;
  border-color: rgba(110, 44, 18, 0.18) !important;
}
.light .s-chip-short {
  background: rgba(46, 125, 50, 0.08) !important;
  color: #2e7d32 !important;
  border-color: rgba(46, 125, 50, 0.18) !important;
}
.light .s-badge-diff-easy {
  background: rgba(46, 125, 50, 0.08) !important;
  color: #2e7d32 !important;
}
.light .s-badge-diff-medium {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: #B45309 !important;
}
.light .s-badge-diff-hard {
  background: rgba(211, 47, 47, 0.08) !important;
  color: #d32f2f !important;
}
.light .s-badge-topic {
  background: rgba(11, 45, 99, 0.08) !important;
  color: var(--accent) !important;
  border-color: rgba(11, 45, 99, 0.2) !important;
}

/* Code Editor */
.light .s-code-editor {
  background: #FFFDF9 !important;
  border-color: var(--border) !important;
}
.light .s-code-editor-header {
  background: rgba(11, 45, 99, 0.04) !important;
  border-bottom-color: var(--border) !important;
}
.light .s-code-textarea {
  color: var(--text) !important;
  caret-color: var(--accent) !important;
}
.light .s-code-textarea::placeholder {
  color: rgba(11, 45, 99, 0.25) !important;
}
.light .s-code-output {
  background: rgba(46, 125, 50, 0.04) !important;
  color: #2e7d32 !important;
  border-top-color: var(--border) !important;
}
.light .s-code-output.err {
  background: rgba(211, 47, 47, 0.04) !important;
  color: #d32f2f !important;
}

.light .s-lb-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.light .s-lb-item.mine {
  background: var(--surface2) !important;
  border-color: var(--accent) !important;
}
.light .sc-quick-btn {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
.light .sc-quick-btn:hover {
  background: var(--surface3) !important;
  color: var(--text) !important;
}

/* Ensure no hardcoded white text leaks in light */
.light .tk2-type-card-name,
.light .tk2-section-heading,
.light .tk2-task-q { color: #1A1A1A; }

/* ── 8. NEW LIGHT MODE POLISHES (Tasks, Video Call, Attendance, Chat, Logo) ── */

/* Brand logo rounding */
.sidebar-brand img,
.brand-logo,
.sidebar-logo,
.logo,
img[src="/vyom_logo.png"] {
  border-radius: 50% !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  overflow: hidden;
}

/* ── 9. PREMIUM NOTIFICATION DROPDOWN SYSTEM (Linear/SaaS inspired) ── */
.vyom-notif-container {
  position: relative;
  display: inline-block;
}

.vyom-notif-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 340px;
  max-height: 480px;
  background: rgba(11, 11, 11, 0.85);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 
    0 16px 40px -10px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(var(--accent-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10000;
  animation: vyomNotifIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
  pointer-events: all;
  color: #f1f5f9;
}

@keyframes vyomNotifIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.vyom-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.03);
}

.vyom-notif-title {
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.vyom-notif-actions {
  display: flex;
  gap: 8px;
}

.vyom-notif-action-btn {
  background: none;
  border: none;
  color: rgba(var(--accent-rgb), 0.8);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vyom-notif-action-btn:hover {
  color: var(--accent2);
  background: rgba(var(--accent-rgb), 0.12);
}

.vyom-notif-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.vyom-notif-list::-webkit-scrollbar {
  display: none;
}

.vyom-notif-item {
  display: flex;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  align-items: flex-start;
}

.vyom-notif-item:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-left: 3px solid var(--accent);
  padding-left: 17px;
}

.vyom-notif-item.unread::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.vyom-notif-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: all 0.2s;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.05);
}

.vyom-notif-item:hover .vyom-notif-item-icon {
  background: rgba(var(--accent-rgb), 0.25);
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.113);
}

.vyom-notif-item-body {
  flex: 1;
  min-width: 0;
}

.vyom-notif-item-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 3px;
  line-height: 1.3;
}

.vyom-notif-item-desc {
  font-size: 0.76rem;
  color: rgba(241, 245, 249, 0.65);
  line-height: 1.4;
  margin-bottom: 4px;
}

.vyom-notif-item-meta {
  font-size: 0.68rem;
  color: rgba(241, 245, 249, 0.35);
  font-family: 'JetBrains Mono', monospace;
}

.vyom-notif-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  background: rgba(11, 11, 11, 0.95);
}

.vyom-notif-clear-all {
  background: none;
  border: none;
  color: rgba(241, 245, 249, 0.4);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.vyom-notif-clear-all:hover {
  color: #ef4444;
}

/* Empty State */
.vyom-notif-empty {
  padding: 48px 24px;
  text-align: center;
  color: rgba(241, 245, 249, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vyom-notif-empty-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  opacity: 0.5;
  animation: vyomNotifFloat 3s ease-in-out infinite;
}

@keyframes vyomNotifFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.vyom-notif-empty-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: rgba(241, 245, 249, 0.6);
  margin-bottom: 4px;
}

.vyom-notif-empty-desc {
  font-size: 0.75rem;
  color: rgba(241, 245, 249, 0.35);
  max-width: 200px;
  margin: 0 auto;
}

/* ── LIGHT MODE STYLING (Luxury warm-monochrome with soft indigo details) ── */
.light .vyom-notif-popover {
  background: radial-gradient(circle at 10% 10%, rgba(var(--accent-rgb), 0.06) 0%, transparent 65%),
              linear-gradient(135deg, rgba(255, 253, 249, 0.96) 0%, rgba(245, 240, 234, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 32px 72px -16px rgba(110, 44, 18, 0.16),
    0 10px 30px -10px rgba(110, 44, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: #1e293b;
}

.light .vyom-notif-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.02);
}

.light .vyom-notif-title {
  color: #0f172a;
}

.light .vyom-notif-action-btn {
  color: rgba(var(--accent-rgb), 0.85);
}

.light .vyom-notif-action-btn:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.light .vyom-notif-item {
  border-bottom: 1px solid rgba(11, 45, 99, 0.04);
  background: transparent;
  transition: all 0.2s;
}

.light .vyom-notif-item.unread {
  background: rgba(var(--accent-rgb), 0.03);
}

.light .vyom-notif-item:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
  border-left: 3px solid var(--accent);
  padding-left: 17px;
}

.light .vyom-notif-item.unread::after {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.15);
}

.light .vyom-notif-item-icon {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.05));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.015);
}

.light .vyom-notif-item:hover .vyom-notif-item-icon {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.12));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.037);
}

.light .vyom-notif-item-title {
  color: #0f172a;
}

.light .vyom-notif-item-desc {
  color: #475569;
}

.light .vyom-notif-item-meta {
  color: #94a3b8;
}

.light .vyom-notif-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 253, 249, 0.98);
}

.light .vyom-notif-clear-all {
  color: #94a3b8;
}
.light .vyom-notif-clear-all:hover {
  color: #ef4444;
}

.light .vyom-notif-empty-title {
  color: #475569;
}

.light .vyom-notif-empty-desc {
  color: #94a3b8;
}

/* Unified bell buttons */
.sd-notif-btn, .hdr-icon-btn {
  position: relative;
}

/* Tasks Page (Create Task & AI Question Generator) */
.light .tk2-diff-pill {
  background: #F3EDE2;
  border: 1.5px solid rgba(11, 45, 99, 0.14);
  color: #444444;
}
.light .tk2-diff-pill.easy.active { background: rgba(34,197,94,0.12); color: #166534; border-color: rgba(34,197,94,0.3); }
.light .tk2-diff-pill.medium.active { background: rgba(212,160,23,0.12); color: #8B6400; border-color: rgba(212,160,23,0.35); }
.light .tk2-diff-pill.hard.active { background: rgba(198,90,61,0.12); color: #9A1515; border-color: rgba(198,90,61,0.3); }

.light .tk2-timer-chip {
  background: #F3EDE2;
  border: 1.5px solid rgba(11, 45, 99, 0.14);
  color: #444444;
}
.light .tk2-timer-chip.active, .light .tk2-timer-chip:hover {
  background: rgba(11, 45, 99, 0.08);
  border-color: #0B2D63;
  color: #0B2D63;
}

.light .tk2-send-btn {
  background: #F3EDE2;
  border: 2px solid rgba(11, 45, 99, 0.14);
  color: #444444;
}
.light .tk2-send-btn.active, .light .tk2-send-btn:hover {
  background: rgba(11, 45, 99, 0.08);
  border-color: #0B2D63;
  color: #0B2D63;
}

.light .tk2-select,
.light .tk2-hint-select {
  background: #F3EDE2;
  border: 1.5px solid rgba(11, 45, 99, 0.14);
  color: #1A1A1A;
}

.light .tk2-save-draft-btn {
  background: #F3EDE2;
  border: 1.5px solid rgba(11, 45, 99, 0.14);
  color: #444444;
}
.light .tk2-save-draft-btn:hover { background: rgba(11, 45, 99, 0.08); color: #0B2D63; }
.light .tk2-reset-btn {
  background: rgba(198,90,61,0.08);
  border: 1px solid rgba(198,90,61,0.18);
  color: #C65A3D;
}
.light .tk2-reset-btn:hover { background: rgba(198,90,61,0.15); color: #9A1515; }

.light .tk2-save-send-btn {
  background: rgba(11, 45, 99, 0.05);
  border: 2px solid rgba(11, 45, 99, 0.22);
  color: #0B2D63;
}
.light .tk2-save-send-btn:hover { background: rgba(11, 45, 99, 0.1); }

.light .tk2-option-letter { color: #666666; }
.light .tk2-option-del { color: rgba(198,90,61,0.6); }
.light .tk2-option-del:hover { background: rgba(198,90,61,0.08); color: #C65A3D; }

/* AI Generator items */
.light .tk2-ai-hero {
  background: linear-gradient(135deg, rgba(11,45,99,0.05), rgba(212,160,23,0.03), rgba(11,45,99,0.02));
  border: 1px solid rgba(11, 45, 99, 0.1);
}
.light .tk2-ai-hero-title {
  background: linear-gradient(135deg, #0B2D63, #8B6400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.light .tk2-ai-hero-sub { color: #666666; }
.light .tk2-ai-search-input {
  background: #FFFDF9;
  border: 2px solid rgba(11, 45, 99, 0.14);
  color: #1A1A1A;
}
.light .tk2-ai-search-input:focus { border-color: rgba(11, 45, 99, 0.45); }
.light .tk2-ai-pill {
  background: #F3EDE2;
  border: 2px solid rgba(11, 45, 99, 0.2);
  color: #444444;
}
.light .tk2-ai-pill.active {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(11, 45, 99, 0.22);
}
.light .tk2-q-gen-card {
  background: #FFFDF9;
  border: 1px solid rgba(11, 45, 99, 0.1);
}
.light .tk2-q-gen-card:hover {
  border-color: rgba(11, 45, 99, 0.22);
  box-shadow: 0 4px 18px rgba(11, 45, 99, 0.05);
}
.light .tk2-q-gen-text { color: #1A1A1A; }
.light .tk2-q-gen-options {
  background: #F3EDE2;
  color: #666666;
}
.light .tk2-q-edit-btn {
  background: #F3EDE2;
  border: 1px solid rgba(11, 45, 99, 0.2);
  color: #444444;
}
.light .tk2-q-edit-btn:hover { background: rgba(11, 45, 99, 0.08); color: #0B2D63; }
.light .tk2-q-add-btn {
  background: rgba(11, 45, 99, 0.06);
  border: 1px solid rgba(11, 45, 99, 0.18);
  color: #0B2D63;
}
.light .tk2-q-add-btn:hover { background: rgba(11, 45, 99, 0.12); }
.light .tk2-q-add-btn.added {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.25);
  color: #166534;
}

/* Video Call floating widget */
.light .vc-hdr-btn {
  background: rgba(11,45,99,0.06);
  border: 1px solid rgba(11,45,99,0.1);
  color: #444444;
}
.light .vc-hdr-btn:hover {
  background: rgba(11,45,99,0.12);
  border-color: rgba(11,45,99,0.2);
  color: #1A1A1A;
}
.light .vc-hdr-btn.danger {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.2);
  color: #ef4444;
}
.light .vc-hdr-btn.danger:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}
.light .vc-float-body {
  background: #f8fafc;
}
.light .vc-tile {
  background: #ffffff;
  border: 1px solid rgba(11,45,99,0.08);
  box-shadow: 0 4px 12px rgba(11,45,99,0.03);
}
.light .vc-tile:hover {
  border-color: rgba(11,45,99,0.2);
  box-shadow: 0 8px 24px rgba(11,45,99,0.06);
}
.light .vc-tile.speaking {
  border-color: #0B2D63 !important;
  box-shadow: 0 0 0 2.5px rgba(11,45,99,0.2), 0 8px 24px rgba(11,45,99,0.12) !important;
}
.light .vc-tile-name {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(11,45,99,0.1);
  color: #1A1A1A;
  box-shadow: 0 2px 8px rgba(11,45,99,0.04);
}
.light .vc-tile-empty {
  color: #666666;
}
.light .vc-tile-empty-ring {
  background: rgba(11,45,99,0.05);
  border-color: rgba(11,45,99,0.15);
}
.light .vc-self-pip {
  border: 1.5px solid #0B2D63;
  box-shadow: 0 4px 12px rgba(11,45,99,0.15);
  background: #ffffff;
}
.light .vc-self-pip::after {
  background: rgba(255,255,255,0.85);
  color: #1A1A1A;
  border: 1px solid rgba(11,45,99,0.1);
}
.light .vc-live-pill {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #c2410c;
}
.light .vc-participant-count {
  background: rgba(11,45,99,0.05);
  border: 1px solid rgba(11,45,99,0.1);
  color: #444444;
}
.light .vc-floating-window.vc-minimized {
  background: rgba(255,255,255,0.95);
  border-color: rgba(11,45,99,0.18);
  box-shadow: 0 8px 24px rgba(11,45,99,0.12);
}

/* Attendance Page additions */
.light .att-how-row {
  background: #FFFDF9;
  border: 1px solid rgba(11,45,99,0.08);
}
.light .att-how-step-num {
  background: rgba(11,45,99,0.06);
  border-color: rgba(11,45,99,0.18);
  color: #0B2D63;
}
.light .att-snapshot-card {
  background: #FFFDF9;
  border: 1px solid rgba(11,45,99,0.08);
}
.light .att-snapshot-header {
  border-bottom: 1px solid rgba(11,45,99,0.08);
}
.light .att-student-section {
  background: #FFFDF9;
  border: 1px solid rgba(11,45,99,0.08);
}
.light .att-student-header {
  border-bottom: 1px solid rgba(11,45,99,0.08);
}
.light .att-student-card {
  background: #F8F5EF;
  border: 1px solid rgba(11,45,99,0.1);
}
.light .att-student-card:hover {
  border-color: rgba(11,45,99,0.25);
  box-shadow: 0 4px 16px rgba(11,45,99,0.05);
}
.light .att-student-search {
  background: #F3EDE2;
  border: 1px solid rgba(11,45,99,0.14);
  color: #1A1A1A;
}
.light .att-session-secure {
  background: rgba(11,45,99,0.04);
  border-color: rgba(11,45,99,0.12);
}
.light .att-feed-header {
  border-bottom: 1px solid rgba(11,45,99,0.08);
}
.light .att-feed-filter {
  background: #F3EDE2;
  border: 1px solid rgba(11,45,99,0.14);
  color: #444444;
}
.light .att-locked-banner {
  background: rgba(11,45,99,0.05);
  border: 1px solid rgba(11,45,99,0.1);
  color: #0B2D63;
}

/* Teacher Chat input bar and reply previews */
.light .tk2-chat-input-wrap {
  background: #FFFDF9;
  border-top: 1px solid rgba(11, 45, 99, 0.09);
}
.light .tk2-chat-reply-preview {
  background: rgba(11, 45, 99, 0.05);
  border-left: 3px solid #0B2D63;
  color: #444444;
}
.light .tk2-chat-reply-close {
  color: #888888;
}
.light .tk2-chat-add-btn {
  background: #F3EDE2;
  border: 1px solid rgba(11, 45, 99, 0.14);
  color: #0B2D63;
}
.light .tk2-chat-input-container {
  background: #F3EDE2;
  border: 1px solid rgba(11, 45, 99, 0.14);
}
.light .tk2-chat-input-container:focus-within {
  border-color: rgba(11, 45, 99, 0.38);
  box-shadow: 0 0 0 3px rgba(11, 45, 99, 0.05);
}
.light .tk2-chat-msg-input {
  color: #1A1A1A;
}
.light .tk2-chat-emoji-btn,
.light .tk2-chat-gif-btn {
  color: #666666;
}
.light .tk2-chat-send-btn {
  background: linear-gradient(135deg, #0B2D63, #1a3a6b);
  color: #fff;
  box-shadow: 0 4px 14px rgba(11, 45, 99, 0.2);
}
.light .tk2-chat-send-btn:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(11, 45, 99, 0.35);
}

/* Chatbot FAB Hover styling */
.light .copilot-fab:hover {
  transform: translateZ(0) scale(1.1) translateY(-2px);
  box-shadow:
    0 12px 32px rgba(11, 45, 99, 0.32),
    0 0 0 1px rgba(212, 160, 23, 0.35),
    0 0 48px rgba(212, 160, 23, 0.15);
}

/* Helper overrides for hardcoded dark mode colors in inline React styles */
.light [style*="color: #a5b4fc"],
.light [style*="color:#a5b4fc"],
.light [style*="color: '#a5b4fc'"],
.light [style*="color:'#a5b4fc'"] {
  color: var(--accent) !important;
}
.light [style*="color: #e2e8f0"],
.light [style*="color:#e2e8f0"],
.light [style*="color: '#e2e8f0'"],
.light [style*="color:'#e2e8f0'"] {
  color: var(--text) !important;
}
.light [style*="color: rgba(148, 163, 184, 0.5)"],
.light [style*="color:rgba(148,163,184,0.5)"],
.light [style*="color: rgba(148, 163, 184, 0.6)"],
.light [style*="color:rgba(148,163,184,0.6)"] {
  color: var(--text3) !important;
}
.light [style*="color: #a5b0d0"],
.light [style*="color:#a5b0d0"],
.light [style*="color: '#a5b0d0'"],
.light [style*="color:'#a5b0d0'"] {
  color: var(--text2) !important;
}
.light [style*="color: #c4b5fd"],
.light [style*="color:#c4b5fd"],
.light [style*="color: '#c4b5fd'"],
.light [style*="color:'#c4b5fd'"] {
  color: var(--accent) !important;
}
.light .tk2-stat-card:nth-child(1) .tk2-stat-val { color: #0B2D63 !important; }
.light .tk2-stat-card:nth-child(2) .tk2-stat-val { color: #5B21B6 !important; }
.light .tk2-stat-card:nth-child(3) .tk2-stat-val { color: #8B6400 !important; }
.light .tk2-stat-card:nth-child(4) .tk2-stat-val { color: #166534 !important; }

/* ════════════════════════════════════════════════════
   END VYOM LIGHT MODE FIX v3
════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   END VYOM LIGHT MODE FIX v2
════════════════════════════════════════════════════ */

.cm-loader-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.02em;
  text-align: center;
}

@keyframes cm-loader-fadein {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Pencil SVG element animations ── */
.cm-pencil {
  display: block;
  width: 7em;
  height: 7em;
  flex-shrink: 0;
}
.cm-pencil__body1,
.cm-pencil__body2,
.cm-pencil__body3,
.cm-pencil__eraser,
.cm-pencil__eraser-skew,
.cm-pencil__point,
.cm-pencil__rotate,
.cm-pencil__stroke {
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.cm-pencil__body1,
.cm-pencil__body2,
.cm-pencil__body3 { transform: rotate(-90deg); }
.cm-pencil__body1 { animation-name: cm-pencilBody1; }
.cm-pencil__body2 { animation-name: cm-pencilBody2; }
.cm-pencil__body3 { animation-name: cm-pencilBody3; }
.cm-pencil__eraser {
  animation-name: cm-pencilEraser;
  transform: rotate(-90deg) translate(49px,0);
}
.cm-pencil__eraser-skew {
  animation-name: cm-pencilEraserSkew;
  animation-timing-function: ease-in-out;
}
.cm-pencil__point {
  animation-name: cm-pencilPoint;
  transform: rotate(-90deg) translate(49px,-30px);
}
.cm-pencil__rotate { animation-name: cm-pencilRotate; }
.cm-pencil__stroke {
  animation-name: cm-pencilStroke;
  transform: translate(100px,100px) rotate(-113deg);
}

@keyframes cm-pencilBody1 {
  from,to { stroke-dashoffset:351.86; transform:rotate(-90deg); }
  50%     { stroke-dashoffset:150.8;  transform:rotate(-225deg); }
}
@keyframes cm-pencilBody2 {
  from,to { stroke-dashoffset:406.84; transform:rotate(-90deg); }
  50%     { stroke-dashoffset:174.36; transform:rotate(-225deg); }
}
@keyframes cm-pencilBody3 {
  from,to { stroke-dashoffset:296.88; transform:rotate(-90deg); }
  50%     { stroke-dashoffset:127.23; transform:rotate(-225deg); }
}
@keyframes cm-pencilEraser {
  from,to { transform:rotate(-45deg) translate(49px,0); }
  50%     { transform:rotate(0deg)   translate(49px,0); }
}
@keyframes cm-pencilEraserSkew {
  from,32.5%,67.5%,to { transform:skewX(0); }
  35%,65%             { transform:skewX(-4deg); }
  37.5%,62.5%         { transform:skewX(8deg); }
  40%,45%,50%,55%,60% { transform:skewX(-15deg); }
  42.5%,47.5%,52.5%,57.5% { transform:skewX(15deg); }
}
@keyframes cm-pencilPoint {
  from,to { transform:rotate(-90deg)  translate(49px,-30px); }
  50%     { transform:rotate(-225deg) translate(49px,-30px); }
}
@keyframes cm-pencilRotate {
  from { transform:translate(100px,100px) rotate(0); }
  to   { transform:translate(100px,100px) rotate(720deg); }
}
@keyframes cm-pencilStroke {
  from { stroke-dashoffset:439.82; transform:translate(100px,100px) rotate(-113deg); }
  50%  { stroke-dashoffset:164.93; transform:translate(100px,100px) rotate(-113deg); }
  75%,to { stroke-dashoffset:439.82; transform:translate(100px,100px) rotate(112deg); }
}

/* Small inline pencil variant (used inside lp-loading) */
.cm-pencil-sm {
  display: block;
  width: 4em;
  height: 4em;
  flex-shrink: 0;
}

/* Sections grid */
.lp-sections { display: flex; flex-direction: column; gap: 12px; }

/* Individual section card */
.lp-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  animation: lp-fade-in 0.4s ease both;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-section-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.03);
}
.lp-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  transition: background 0.15s;
}
.lp-section-header:hover { background: var(--surface2); }
.lp-section-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.lp-section-chevron {
  color: var(--text3);
  transition: transform 0.25s;
  font-size: 0.85rem;
}
.lp-section-chevron.open { transform: rotate(90deg); }
.lp-section-body {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
}
.lp-section-body.open {
  padding: 0 18px 18px;
  max-height: 2000px;
}
.lp-section-content {
  font-size: 0.9rem;
  color: var(--text2);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}
.lp-section-actions {
  display: flex;
  gap: 6px;
  padding: 0 18px 14px;
  flex-wrap: wrap;
}

/* Section action buttons */
.lp-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.lp-action-btn:hover { background: var(--surface3); color: var(--text); }
.lp-action-btn.accent { border-color: var(--accent); color: var(--accent); }
.lp-action-btn.accent:hover { background: rgba(var(--accent-rgb), 0.12); }

/* Inline editor */
.lp-editor {
  width: 100%;
  min-height: 120px;
  background: var(--surface2);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.7;
  padding: 12px 14px;
  resize: vertical;
  outline: none;
}

/* Export bar */
.lp-export-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 20px;
}
.lp-export-bar-label { font-size:0.85rem; color:var(--text2); font-weight:600; margin-right:4px; }

/* Autosave indicator */
.lp-autosave {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--green);
  opacity: 0;
  transition: opacity 0.5s;
}
.lp-autosave.visible { opacity: 1; }

/* Templates panel */
.lp-templates-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.lp-template-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
}
.lp-template-card:hover { border-color: var(--accent); background: var(--surface3); }
.lp-template-card.fav { border-color: var(--yellow); }
.lp-template-meta { flex: 1; min-width: 0; }
.lp-template-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-template-tags { font-size: 0.75rem; color: var(--text3); margin-top: 2px; }

/* Send panel */
.lp-send-panel {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.08));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 20px;
}

/* Student lesson viewer */
.slv-wrap { padding: 20px; max-width: 900px; margin: 0 auto; }
.slv-hero {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  animation: lp-fade-in 0.5s ease;
}
.slv-progress-bar {
  height: 8px;
  background: var(--surface2);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 12px;
}
.slv-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 20px;
  transition: width 0.5s ease;
}
.slv-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  animation: lp-fade-in 0.4s ease both;
  transition: border-color 0.2s;
}
.slv-section.done { border-color: rgba(34,197,94,0.4); }
.slv-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
}
.slv-section-header:hover { background: var(--surface2); }
.slv-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: all 0.2s;
  cursor: pointer;
}
.slv-check.done { background: var(--green); border-color: var(--green); color: #fff; }
.slv-section-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
  padding: 0 16px;
}
.slv-section-body.open { max-height: 2000px; padding: 0 16px 16px; }
.slv-section-content { font-size: 0.9rem; color: var(--text2); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }

/* Tabs inside LP */
.lp-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.lp-tab {
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  margin-bottom: -1px;
}
.lp-tab:hover { color: var(--text); }
.lp-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

/* AI extras row */
.lp-extras-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* search & filter row for templates */
.lp-filter-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.lp-filter-row input, .lp-filter-row select { flex: 1; min-width: 140px; }

/* ══════════════════════════════════════════════════════════════
   VIDEO CALL — Premium 2026 Enterprise Meeting UI
   ══════════════════════════════════════════════════════════════ */

/* ── Core Keyframes ── */
@keyframes vcPulse        { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(0.75)} }
@keyframes vc-live-ring   { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.55),0 0 0 0 rgba(239,68,68,0.25)} 50%{box-shadow:0 0 0 5px rgba(239,68,68,0.08),0 0 0 10px rgba(239,68,68,0)} }
@keyframes vc-tile-in     { from{opacity:0;transform:scale(0.92) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes vc-btn-press   { 0%{transform:scale(1)} 45%{transform:scale(0.89)} 100%{transform:scale(1)} }
@keyframes vc-glow-ring   { 0%,100%{box-shadow:0 0 0 2px rgba(var(--accent-rgb), 0.113),0 0 18px rgba(var(--accent-rgb), 0.05)} 50%{box-shadow:0 0 0 4px rgba(var(--accent-rgb), 0.163),0 0 32px rgba(var(--accent-rgb), 0.095)} }
@keyframes vc-status-in   { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
@keyframes vc-orb-drift   { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(22px,-16px) scale(1.09)} 66%{transform:translate(-14px,11px) scale(0.95)} 100%{transform:translate(0,0) scale(1)} }
@keyframes vc-ambient     { 0%,100%{opacity:0.45;transform:scale(1)} 50%{opacity:0.75;transform:scale(1.12)} }
@keyframes vc-fade-up     { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes vc-shake       { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* ── Floating Window Container ── */
.vc-floating-window {
  position: fixed !important;
  z-index: 9999 !important;
  background: rgba(5, 5, 5, 0.93);
  backdrop-filter: blur(36px) saturate(200%);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.045),
    inset 0 1.5px 0 rgba(255,255,255,0.08),
    0 36px 90px rgba(0,0,0,0.75),
    0 10px 28px rgba(0,0,0,0.55),
    0 0 70px rgba(var(--accent-rgb), 0.09);
  overflow: hidden;
  min-width: 264px;
  min-height: 206px;
  max-width: 84vw;
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.32s ease, border-color 0.32s ease;
  font-family: 'Plus Jakarta Sans','DM Sans',var(--font),system-ui,sans-serif;
  isolation: isolate;
}
/* Ambient glow orb top-left */
.vc-floating-window::before {
  content:'';
  position:absolute; width:280px; height:280px;
  background:radial-gradient(circle,rgba(var(--accent-rgb), 0.11) 0%,transparent 68%);
  top:-75px; left:-75px; border-radius:50%;
  pointer-events:none; z-index:0;
  animation:vc-orb-drift 20s ease-in-out infinite;
  will-change:transform;
}
/* Ambient glow orb bottom-right */
.vc-floating-window::after {
  content:'';
  position:absolute; width:200px; height:200px;
  background:radial-gradient(circle,rgba(var(--accent-rgb), 0.09) 0%,transparent 68%);
  bottom:-55px; right:-55px; border-radius:50%;
  pointer-events:none; z-index:0;
  animation:vc-ambient 14s ease-in-out infinite;
  will-change:transform,opacity;
}
.vc-floating-window:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 1.5px 0 rgba(255,255,255,0.1),
    0 44px 110px rgba(0,0,0,0.78),
    0 14px 36px rgba(0,0,0,0.58),
    0 0 90px rgba(var(--accent-rgb), 0.15);
}
.vc-floating-window.vc-dragging {
  opacity: 0.97;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 52px 130px rgba(0,0,0,0.88),
    0 0 110px rgba(var(--accent-rgb), 0.22);
  transition: none !important;
  cursor: grabbing !important;
}
.vc-floating-window.vc-fullscreen {
  max-width:100vw !important; max-height:100vh !important;
  border-radius:0 !important; border:none !important; box-shadow:none !important;
}

/* ── Premium Header / Drag Handle ── */
.vc-float-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.24) 0%,rgba(var(--accent-rgb), 0.19) 55%,rgba(var(--accent-rgb), 0.14) 100%);
  cursor:grab;
  user-select:none;
  flex-shrink:0;
  border-bottom:1px solid rgba(255, 255, 255, 0.08);
  position:relative; z-index:2;
}
/* Shimmering bottom border */
.vc-float-header::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(var(--accent-rgb), 0.55) 50%,transparent 100%);
  pointer-events:none;
}

/* ── Title area ── */
.vc-float-title {
  font-size:0.78rem; font-weight:700; color:#e2e8f0;
  display:flex; align-items:center; gap:7px;
  letter-spacing:0.01em;
}
/* LIVE pill */
.vc-live-pill {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(239,68,68,0.16);
  border:1px solid rgba(239,68,68,0.4);
  color:#fca5a5;
  border-radius:20px;
  padding:2px 8px 2px 6px;
  font-size:0.66rem; font-weight:800; letter-spacing:0.07em; text-transform:uppercase;
  animation:vc-live-ring 2.4s ease-in-out infinite;
}
.vc-live-dot {
  width:6px; height:6px; border-radius:50%; background:#ef4444; flex-shrink:0;
  animation:vcPulse 1.5s ease-in-out infinite;
  box-shadow:0 0 6px rgba(239,68,68,0.7);
}
/* Participant count chip */
.vc-participant-count {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:2px 8px;
  font-size:0.69rem; font-weight:600;
  color:rgba(226,232,240,0.82);
}

/* ── Header action buttons ── */
.vc-float-btns { display:flex; align-items:center; gap:5px; }
.vc-hdr-btn {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.11);
  border-radius:8px;
  color:rgba(203,213,225,0.88);
  cursor:pointer;
  padding:5px 9px;
  font-size:0.72rem; font-weight:600;
  transition:all 0.18s cubic-bezier(0.4,0,0.2,1);
  line-height:1.4;
  display:flex; align-items:center; justify-content:center; min-width:28px;
}
.vc-hdr-btn:hover {
  background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.22);
  color:#fff; transform:translateY(-1px);
}
.vc-hdr-btn:active { transform:scale(0.88); }
.vc-hdr-btn.danger:hover {
  background:rgba(239,68,68,0.62); border-color:rgba(239,68,68,0.52); color:#fff;
}

/* ── Video Body ── */
.vc-float-body {
  flex:1; overflow:hidden;
  background:linear-gradient(180deg,#04050f 0%,#060712 100%);
  display:flex; flex-direction:column; position:relative; z-index:1;
}

/* ── Video Grid ── */
.vc-video-grid {
  flex:1; display:grid; gap:8px; padding:10px; overflow:hidden;
}
.vc-video-grid.solo  { grid-template-columns:1fr; }
.vc-video-grid.duo   { grid-template-columns:1fr 1fr; }
.vc-video-grid.trio  { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.vc-video-grid.multi { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }

/* ── Video Tiles ── */
.vc-tile {
  position:relative;
  background:linear-gradient(148deg,#050505,#050505);
  border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.062);
  min-height:60px;
  box-shadow:0 4px 18px rgba(0,0,0,0.42),inset 0 1px 0 rgba(255,255,255,0.048);
  transition:all 0.28s cubic-bezier(0.4,0,0.2,1);
  animation:vc-tile-in 0.38s cubic-bezier(0.34,1.56,0.64,1) both;
  will-change:transform;
}
/* Bottom gradient overlay for name readability */
.vc-tile::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.58) 100%);
  z-index:2; pointer-events:none; border-radius:16px;
}
.vc-tile:hover {
  border-color:rgba(255, 255, 255, 0.08);
  box-shadow:0 8px 30px rgba(0,0,0,0.52),inset 0 0 0 1px rgba(var(--accent-rgb), 0.035),inset 0 1px 0 rgba(255,255,255,0.07);
  transform:translateY(-1px) scale(1.005);
}
/* Speaking highlight ring */
.vc-tile.speaking {
  border-color:rgba(255, 255, 255, 0.08) !important;
  box-shadow:0 0 0 2.5px rgba(var(--accent-rgb), 0.13),0 10px 32px rgba(var(--accent-rgb), 0.07),0 0 55px rgba(var(--accent-rgb), 0.03) !important;
  animation:vc-glow-ring 1.8s ease-in-out infinite,vc-tile-in 0.38s cubic-bezier(0.34,1.56,0.64,1) both;
}
.vc-tile video { width:100%; height:100%; object-fit:cover; border-radius:15px; display:block; }

/* ── Participant name badge ── */
.vc-tile-label {
  position:absolute; bottom:8px; left:8px; right:8px;
  display:flex; align-items:center; justify-content:space-between; gap:5px;
  z-index:3;
}
.vc-tile-name {
  background:rgba(5, 5, 5, 0.7);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  color:#e2e8f0; padding:3px 10px; border-radius:20px;
  font-size:0.68rem; font-weight:700;
  border:1px solid rgba(255,255,255,0.11);
  box-shadow:0 2px 10px rgba(0,0,0,0.45);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  letter-spacing:0.01em;
}
.vc-tile-mic-badge {
  background:rgba(239,68,68,0.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(239,68,68,0.38); border-radius:50%;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
/* Empty / waiting state */
.vc-tile-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:rgba(148,163,184,0.48); font-size:0.77rem; font-weight:500;
  height:100%; min-height:60px; letter-spacing:0.01em;
}
.vc-tile-empty-ring {
  width:44px; height:44px;
  background:rgba(var(--accent-rgb), 0.35); border:1.5px solid rgba(255, 255, 255, 0.08);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* ── Self PiP ── */
.vc-self-pip {
  position:absolute; bottom:54px; right:10px;
  width:90px; height:64px; border-radius:12px; overflow:hidden;
  border:1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow:0 4px 18px rgba(0,0,0,0.62),0 0 0 1px rgba(var(--accent-rgb), 0.045),0 0 22px rgba(var(--accent-rgb), 0.035);
  background:#050505; z-index:5;
  transition:all 0.24s ease;
}
.vc-self-pip:hover {
  transform:scale(1.05);
  box-shadow:0 7px 26px rgba(0,0,0,0.68),0 0 0 2px rgba(var(--accent-rgb), 0.12),0 0 32px rgba(var(--accent-rgb), 0.055);
}
.vc-self-pip::after {
  content:'YOU';
  position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.72);
  color:rgba(255,255,255,0.88);
  font-size:0.55rem; font-weight:800; padding:1px 6px; border-radius:8px;
  z-index:2; letter-spacing:0.06em;
}
.vc-self-pip video { width:100%; height:100%; object-fit:cover; }

/* ── Premium Floating Control Bar ── */
.vc-float-controls {
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 16px 9px;
  background:rgba(255,255,255,0.022);
  border-top:1px solid rgba(255,255,255,0.05);
  flex-shrink:0; position:relative; z-index:2;
}
/* Glassmorphism dock pill under controls */
.vc-float-controls::before {
  content:''; position:absolute;
  bottom:5px; left:50%; transform:translateX(-50%);
  height:46px; width:calc(100% - 36px); max-width:290px;
  background:rgba(255,255,255,0.025);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:26px; border:1px solid rgba(255,255,255,0.055);
  pointer-events:none; z-index:-1;
}

/* Control buttons — premium circular style */
.vc-ctrl-btn {
  position:relative; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.1); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.22s cubic-bezier(0.34,1.56,0.64,1);
  background:rgba(255,255,255,0.09); color:#fff;
  flex-shrink:0; outline:none;
  will-change:transform;
}
.vc-ctrl-btn svg { width:17px; height:17px; flex-shrink:0; pointer-events:none; }
.vc-ctrl-btn.danger svg { width:16px; height:16px; }
.vc-hdr-btn svg { width:11px; height:11px; display:block; }
.vc-tile-empty-ring svg { width:18px; height:18px; stroke:rgba(var(--accent-rgb), 0.55); }
.vc-participant-count svg { width:10px; height:10px; stroke:rgba(var(--accent-rgb), 0.65); margin-top:1px; flex-shrink:0; }
.vc-ctrl-btn:hover {
  background:rgba(255,255,255,0.19); border-color:rgba(255,255,255,0.24);
  transform:scale(1.11) translateY(-2px);
  box-shadow:0 7px 22px rgba(0,0,0,0.42);
}
.vc-ctrl-btn:active { animation:vc-btn-press 0.18s ease forwards; }
.vc-ctrl-btn.vc-btn-on {
  background:rgba(var(--accent-rgb), 0.35); border-color:rgba(255, 255, 255, 0.08);
  box-shadow:0 0 16px rgba(var(--accent-rgb), 0.08),inset 0 1px 0 rgba(255,255,255,0.1);
}
.vc-ctrl-btn.muted {
  background:rgba(239,68,68,0.24); border-color:rgba(239,68,68,0.48);
  color:#fca5a5; box-shadow:0 0 16px rgba(239,68,68,0.22);
}
.vc-ctrl-btn.muted:hover {
  background:rgba(239,68,68,0.38); border-color:rgba(239,68,68,0.65);
  transform:scale(1.11) translateY(-2px);
  box-shadow:0 7px 22px rgba(239,68,68,0.34);
}
.vc-ctrl-btn.danger {
  background:linear-gradient(135deg,#ef4444,#dc2626);
  border-color:rgba(239,68,68,0.52);
  box-shadow:0 4px 18px rgba(239,68,68,0.42);
  width:46px; height:46px;
}
.vc-ctrl-btn.danger:hover {
  background:linear-gradient(135deg,#f87171,#ef4444);
  transform:scale(1.12) translateY(-2px);
  box-shadow:0 9px 28px rgba(239,68,68,0.58);
}

/* Tooltip labels */
.vc-ctrl-btn::after {
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) scale(0.84) translateY(3px);
  background:rgba(5, 5, 5, 0.92); backdrop-filter:blur(10px);
  color:#e2e8f0; font-size:0.63rem; font-weight:700;
  padding:3px 9px; border-radius:8px; white-space:nowrap;
  pointer-events:none; opacity:0;
  transition:all 0.2s ease;
  border:1px solid rgba(255,255,255,0.09);
  letter-spacing:0.03em;
}
.vc-ctrl-btn[data-tip]:hover::after {
  opacity:1; transform:translateX(-50%) scale(1) translateY(0);
}

/* Separator between button groups */
.vc-ctrl-sep {
  width:1px; height:24px;
  background:rgba(255,255,255,0.1); border-radius:1px;
  flex-shrink:0; margin:0 2px;
}

/* ── Status bar ── */
.vc-status-text {
  font-size:0.64rem; color:rgba(148,163,184,0.48);
  text-align:center; padding:1px 12px 4px; flex-shrink:0;
  letter-spacing:0.03em; font-weight:500;
  animation:vc-status-in 0.3s ease;
  z-index:2; position:relative;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
/* Connection quality dot */
.vc-conn-dot {
  width:5px; height:5px; border-radius:50%; flex-shrink:0;
  background:#22c55e; box-shadow:0 0 7px rgba(34,197,94,0.55);
}
.vc-conn-dot.warn  { background:#eab308; box-shadow:0 0 7px rgba(234,179,8,0.55); }
.vc-conn-dot.error { background:#ef4444; box-shadow:0 0 7px rgba(239,68,68,0.55); }

/* ── Minimized floating circle ── */
.vc-floating-window.vc-minimized {
  width:58px !important; height:58px !important;
  min-width:58px !important; min-height:58px !important;
  border-radius:50%; overflow:hidden; resize:none; cursor:pointer;
  border-color:rgba(255, 255, 255, 0.08);
  box-shadow:0 0 0 2.5px rgba(var(--accent-rgb), 0.07),0 10px 32px rgba(0,0,0,0.65),0 0 34px rgba(var(--accent-rgb), 0.055);
  animation:vc-glow-ring 2.6s ease-in-out infinite;
}
.vc-floating-window.vc-minimized::before,
.vc-floating-window.vc-minimized::after { display:none; }
.vc-floating-window.vc-minimized .vc-float-body,
.vc-floating-window.vc-minimized .vc-float-controls,
.vc-floating-window.vc-minimized .vc-status-text,
.vc-floating-window.vc-minimized .vc-float-btns { display:none; }
.vc-floating-window.vc-minimized .vc-float-header {
  height:58px; padding:0; justify-content:center; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent));
  border-bottom:none;
}
.vc-floating-window.vc-minimized .vc-float-header::after { display:none; }
.vc-floating-window.vc-minimized .vc-float-title { font-size:1.45rem; }

/* ── Resize handle ── */
.vc-resize-handle {
  position:absolute; bottom:0; right:0;
  width:16px; height:16px; cursor:nwse-resize; z-index:10;
  background:linear-gradient(135deg,transparent 48%,rgba(var(--accent-rgb), 0.32) 50%);
  border-radius:0 0 22px 0; opacity:0.55;
  transition:opacity 0.2s;
}
.vc-floating-window:hover .vc-resize-handle { opacity:1; }

/* ── Student join banner ── */
.vc-banner {
  position:fixed; top:74px; left:50%; transform:translateX(-50%);
  z-index:8000;
  background:linear-gradient(135deg,rgba(11, 11, 11, 0.96),rgba(11, 11, 11, 0.96));
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255, 255, 255, 0.08); border-radius:18px;
  padding:13px 22px; display:flex; align-items:center; gap:14px;
  box-shadow:0 20px 52px rgba(0,0,0,0.58),inset 0 0 0 1px rgba(255,255,255,0.05),0 0 44px rgba(var(--accent-rgb), 0.03);
  min-width:300px; max-width:94vw;
  animation:vc-fade-up 0.3s ease;
}
.vc-banner-icon {
  width:38px; height:38px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb), 0.32),rgba(var(--accent-rgb), 0.32));
  border:1px solid rgba(255, 255, 255, 0.08); border-radius:11px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.vc-banner-content { flex:1; }
.vc-banner-text { font-size:0.87rem; color:#e2e8f0; font-weight:700; }
.vc-banner-sub  { font-size:0.72rem; color:rgba(148,163,184,0.72); font-weight:400; margin-top:1px; }
.vc-banner-actions { display:flex; gap:8px; align-items:center; }

/* ── Glowing join nav button ── */
.s-vc-join-nav-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,#EF4444,var(--accent));
  border:none; border-radius:100px; font-weight:700; font-size:0.75rem;
  padding:6px 14px; cursor:pointer; color:#fff;
  box-shadow:0 0 12px rgba(239,68,68,0.4);
  transition:all 0.3s ease; animation:s-vc-pulse 2s infinite;
}
.s-vc-join-nav-btn:hover { transform:translateY(-1px); box-shadow:0 0 18px rgba(239,68,68,0.6); opacity:0.95; }
.s-vc-join-nav-btn:active { transform:translateY(1px); }
@keyframes s-vc-pulse {
  0%   { box-shadow:0 0 0 0 rgba(239,68,68,0.5); }
  70%  { box-shadow:0 0 0 8px rgba(239,68,68,0); }
  100% { box-shadow:0 0 0 0 rgba(239,68,68,0); }
}



/* ═══════════════════════════════════════════════════════════════════════════
   VYOM — COMPREHENSIVE MOBILE RESPONSIVENESS OVERHAUL v3.0
   Priority: Student side first, then teacher, then shared.
   Rules: additive, desktop unchanged, no new animations.
   Breakpoints: 320px / 375px / 480px / 600px / 768px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   0. GLOBAL MOBILE FOUNDATIONS
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  html { overflow-x: hidden; }
  body { overflow-x: hidden; width: 100%; }
  
  /* Prevent all horizontal scroll at root level */
  .app { overflow-x: hidden; width: 100%; max-width: 100vw; }
  .main-content { overflow-x: hidden; }
  
  /* All images scale within their containers */
  img { max-width: 100%; height: auto; }
  
  /* Ensure all inline-flex/flex rows wrap */
  .nav-right { flex-wrap: wrap; }
  
  /* Section headers: stack label + controls vertically */
  .section-header,
  .rc-header,
  .ch-section-hd,
  .wr-section-title {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* Tab rows: horizontal scroll, no wrap */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex-shrink: 0; }
  
  /* Export bars: wrap */
  .wr-export-bar,
  .prof-export-bar { flex-wrap: wrap; gap: 8px; }
  .wr-export-bar .btn,
  .prof-export-bar .btn { flex: 1; min-width: 120px; justify-content: center; }
  
  /* All button groups: wrap */
  .s-answer-actions,
  .s-code-actions,
  .s-quiz-prev-next { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════
   1. LANDING PAGE — Mobile Fixes
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* What is VYOM — 2-col grid → single col */
  .lp-what { grid-template-columns: 1fr !important; gap: 32px; }
  .lp-visual-card { margin-top: 0; }
  
  /* For Teachers / Students — 2-col → single col */
  .lp-roles { grid-template-columns: 1fr !important; gap: 20px; margin-top: 32px; }
  
  /* Section padding */
  .lp-section { padding: 40px 16px; }
  .lp-section-full { padding: 40px 0; }
  
  /* H2 font scaling */
  .lp-h2 { font-size: 1.8rem; }
  
  /* Features grid: 1-col on small phones, 2-col on tablets */
  .lp-features-grid { grid-template-columns: 1fr; margin-top: 28px; }
  
  /* Slide/carousel section */
  .lp-slides-row { flex-direction: column; gap: 16px; }
  
  /* CTA section */
  .lp-cta-btns { flex-direction: column; align-items: stretch; }
  .lp-cta-btns .btn { width: 100%; justify-content: center; }
  
  /* What pills wrap */
  .lp-what-pills { gap: 8px; }
  
  /* Roles section: role-block */
  .lp-role-block { padding: 24px 20px; }
  
  /* Hero form card */
  .lp-form-fade-card { padding: 20px 16px; }
  
  /* Landing section what mock visual */
  .lp-mock-students { gap: 4px; }
}

@media(max-width:480px){
  .lp-h2 { font-size: 1.55rem; }
  .lp-lead { font-size: 0.95rem; }
  .lp-feat { padding: 18px 16px; }
  .lp-section { padding: 32px 14px; }
  
  /* Role cards in hero: single column */
  .role-cards { grid-template-columns: 1fr !important; max-width: 100%; gap: 12px; }
  .role-card { padding: 24px 20px; }
}

/* ══════════════════════════════════════════════════════
   2. TEACHER NAV — Mobile improvements
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Nav height auto so drawer can expand */
  .nav { min-height: 56px; padding: 0 12px; }
  .nav-brand { font-size: 1rem; }
  
  /* Mobile drawer improvements */
  .nav-mobile-drawer { gap: 2px; padding: 8px 8px 12px; }
  .nav-mobile-drawer .nav-btn {
    padding: 12px 16px;
    font-size: 0.88rem;
    min-height: 48px;
    border-radius: 10px;
    margin: 0 4px;
  }
  .nav-mobile-right {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px 6px;
  }
  .nav-mobile-right .btn { flex: 1; min-width: 100px; justify-content: center; }
  .nav-mobile-right .session-badge { width: 100%; text-align: center; justify-content: center; }
  .session-badge { font-size: 0.78rem; padding: 5px 14px; }
}

/* ══════════════════════════════════════════════════════
   3. TEACHER DASHBOARD — Mobile Layout
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Dashboard grid stat cards */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-2 { grid-template-columns: 1fr 1fr !important; }
  
  /* Stat cards compact */
  .stat { padding: 14px 12px; }
  .stat-value { font-size: 1.6rem; }
  
  /* Weekly report stat grid */
  .wr-stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .wr-stat { padding: 12px; }
  .wr-stat-value { font-size: 1.5rem; }
  
  /* Progress rows in weekly report */
  .wr-progress-row { flex-wrap: wrap; gap: 4px; }
  .wr-progress-label { width: 100%; }
  
  /* Session rows in weekly report */
  .wr-session-row { flex-wrap: wrap; gap: 8px; }
  .wr-session-name { min-width: unset; width: 100%; }
  
  /* AI insights panel */
  .ai-insights-panel { padding: 12px; }
  .ai-insights-meta { flex-direction: column; gap: 8px; align-items: flex-start; }
}

@media(max-width:480px){
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .stat { padding: 12px 10px; }
  .stat-value { font-size: 1.4rem; }
  .stat-label { font-size: 0.72rem; }
}

/* ══════════════════════════════════════════════════════
   4. TASK MANAGEMENT PAGE — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Task send bar: wrap */
  .task-send-bar,
  [class*="task-send"] > div:first-child { flex-wrap: wrap; gap: 8px; }
  
  /* Quiz builder: drag items full width */
  .quiz-order-item { padding: 10px 12px; font-size: 0.85rem; }
  
  /* Task card actions */
  .task-card-actions { flex-direction: column; gap: 6px; }
  .task-card-actions .btn { width: 100%; justify-content: center; }
  
  /* Code editor minimum height reduction */
  .code-editor { min-height: 140px; font-size: 0.8rem; }
  .code-editor textarea { min-height: 140px; }
  .code-output { max-height: 150px; }
}

/* ══════════════════════════════════════════════════════
   5. CONTENT HUB (Teacher + Student) — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Hero section */
  .ch-hero { padding: 24px 16px 20px; }
  .ch-hero-title { font-size: 1.5rem; }
  .ch-hero-sub { font-size: 0.88rem; margin-bottom: 16px; }
  .ch-hero-stats { gap: 16px; }
  .ch-hero-stat-num { font-size: 1.4rem; }
  
  /* Toolbar: stack vertically */
  .ch-toolbar {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
    top: 56px;
  }
  .ch-search-wrap { min-width: 100% !important; order: -1; }
  .ch-filter-select { flex: 1; min-width: 0; }
  .ch-sort-btn { font-size: 0.78rem; padding: 7px 10px; }
  
  /* Category tabs */
  .ch-cats { padding: 0 16px; }
  .ch-cat-btn { padding: 10px 14px; font-size: 0.8rem; }
  
  /* Content body padding */
  .ch-body { padding: 16px; }
  
  /* Content grid: 1-col on phones */
  .ch-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .ch-grid-lg { grid-template-columns: 1fr !important; }
  
  /* Featured card: stack thumbnail + text */
  .ch-featured {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column;
  }
  .ch-featured-thumb { height: 160px; }
  
  /* Card thumbnail smaller */
  .ch-card-thumb { height: 130px; }
  
  /* Card actions */
  .ch-card-actions { flex-direction: row; }
  
  /* Section header */
  .ch-section-hd { flex-direction: row !important; align-items: center !important; }
}

@media(max-width:480px){
  .ch-hero { padding: 18px 14px 16px; }
  .ch-hero-title { font-size: 1.25rem; }
  .ch-hero-stats { gap: 12px; }
  .ch-hero-stat-num { font-size: 1.2rem; }
  .ch-body { padding: 12px; }
  .ch-grid { gap: 10px; }
}

/* ══════════════════════════════════════════════════════
   6. ATTENDANCE PAGE — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Counter strip: 3-col on tablets */
  .att-counters { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .att-counter-card { padding: 12px 10px; }
  .att-counter-val { font-size: 1.6rem; }
  .att-counter-label { font-size: 0.65rem; }
  
  /* Ring + legend: stack */
  .att-ring-wrap { flex-direction: column; gap: 16px; padding: 16px; }
  
  /* Student grid: 1-col on phones */
  .att-student-grid { grid-template-columns: 1fr !important; gap: 8px; padding: 12px; }
  
  /* Student card compact */
  .att-student-card { padding: 10px 12px; }
  
  /* Header */
  .att-student-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .att-student-search { max-width: 100% !important; min-width: unset !important; width: 100%; }
  
  /* Control panel wrap */
  .att-control-panel { flex-direction: column; gap: 8px; }
  .att-config-row { flex-wrap: wrap; gap: 8px; }
}

@media(max-width:480px){
  .att-counters { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .att-counter-card { padding: 10px 8px; }
  .att-counter-val { font-size: 1.4rem; }
}

/* ══════════════════════════════════════════════════════
   7. REPORTS PAGE (Teacher) — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Chart containers */
  .chart-container { height: 200px !important; }
  .wr-chart-wrap { height: 180px; }
  
  /* Quiz report stat row */
  .quiz-report-stat-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  
  /* Report section */
  .quiz-report-section { margin-top: 16px; }
  .quiz-report-q { padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════
   8. COMMUNICATION PAGE (Teacher) — Mobile  
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Chat area height */
  .chat-area { height: 300px !important; }
  
  /* Doubt panel */
  .doubt-card { padding: 10px; }
  
  /* Tabs for communication */
  .comm-tabs,
  [class*="comm-tab"] { overflow-x: auto; flex-wrap: nowrap !important; }
}

/* ══════════════════════════════════════════════════════
   9. TEST MODE (Teacher) — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Leaderboard row */
  .leaderboard-row { padding: 8px 10px; gap: 8px; }
  
  /* Timer */
  .timer { font-size: 2rem; padding: 10px; }
  
  /* Quiz nav dots: scrollable row */
  .quiz-nav-dots-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    gap: 4px !important;
    scrollbar-width: none;
  }
  .quiz-nav-dots-row::-webkit-scrollbar { display: none; }
}

/* ══════════════════════════════════════════════════════
   10. GROUPS PAGE — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  .group-card { padding: 14px; }
  /* Group cards: single column */
  .grid .group-card { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════
   11. PROFILE DRAWER — Mobile Full Screen
   ══════════════════════════════════════════════════════ */
@media(max-width:480px){
  .profile-drawer { width: 100vw !important; right: -100vw; }
  .profile-drawer.open { right: 0; }
  .prof-stat-grid { grid-template-columns: 1fr 1fr; }
  .prof-role-switch { grid-template-columns: 1fr 1fr; }
  .profile-drawer-body { padding: 12px; }
}

/* ══════════════════════════════════════════════════════
   12. STUDENT NAV — Mobile Enhanced
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Student top nav compact */
  .s-nav {
    padding: 0 12px !important;
    height: 52px !important;
    gap: 6px !important;
  }
  .s-nav-brand { font-size: 1rem !important; margin-right: 6px !important; }
  
  /* Session chip compact */
  .s-session-chip { padding: 4px 8px !important; }
  .s-session-code { font-size: 0.78rem !important; }
  
  /* Hand button compact */
  .s-hand-btn { padding: 5px 10px !important; font-size: 0.75rem !important; }
  
  /* HUD bar compact */
  .s-hud {
    padding: 6px 12px !important;
    gap: 10px !important;
    top: 52px !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .s-hud::-webkit-scrollbar { display: none; }
  .s-hud-item { flex-shrink: 0; white-space: nowrap; }
  .s-hud-sep { flex-shrink: 0; }
  
  /* Student mobile bottom nav: improve touch targets */
  .s-mobile-nav {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    min-height: 56px !important;
    height: auto !important;
  }
  .s-mobile-nav-inner { gap: 2px !important; }
  .s-mobile-tab {
    padding: 5px 8px !important;
    min-width: 48px !important;
    border-radius: 10px !important;
  }
  .s-mobile-tab-icon { font-size: 1.15rem !important; }
  
  /* Announcement banner: wraps text */
  .s-announce {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    padding: 10px 14px;
    font-size: 0.82rem;
  }
  
  /* Paused/ended bar */
  .s-paused-bar { padding: 10px 14px; font-size: 0.82rem; }
  
  /* Main content area: larger bottom padding for bottom nav */
  .s-main { padding: 14px 12px calc(80px + env(safe-area-inset-bottom)) !important; }
  .s-main-wide { max-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════
   13. STUDENT DASHBOARD (MAIN PAGE) — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Performance stats row: 2-col */
  .s-perf-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .s-perf-card { padding: 10px 12px !important; }
  .s-perf-val { font-size: 1.2rem !important; }
  .s-perf-lbl { font-size: 0.6rem !important; }
  
  /* Task card */
  .s-task-card { padding: 18px 16px !important; }
  .s-task-q { font-size: 0.92rem !important; margin-bottom: 18px !important; }
  
  /* Task meta: wrap */
  .s-task-meta { gap: 6px !important; }
  .s-task-topic { margin-left: 0 !important; width: 100%; }
  
  /* MCQ options */
  .s-option { padding: 12px 14px !important; font-size: 0.88rem !important; gap: 10px !important; }
  .s-option-letter { width: 28px !important; height: 28px !important; font-size: 0.78rem !important; flex-shrink: 0; }
  
  /* Answer actions */
  .s-answer-actions { flex-direction: column !important; gap: 8px !important; }
  .s-answer-actions .s-btn-submit,
  .s-answer-actions .s-btn-ghost { width: 100% !important; justify-content: center !important; }
  
  /* Hint block */
  .s-task-hint { padding: 10px 12px; font-size: 0.83rem; }
  
  /* Empty state */
  .s-empty { padding: 40px 16px; }
  .s-empty-icon { font-size: 2.5rem; }
  
  /* Explanation panel */
  .s-explain { padding: 14px; }
  .s-explain-content { font-size: 0.83rem; }
  
  /* Glass cards */
  .s-glass-card { padding: 16px !important; }
  
  /* Perf chips: wrap */
  .s-perf-chips { gap: 6px; }
  .s-perf-chip { padding: 7px 10px; font-size: 0.75rem; }
  
  /* Content preview */
  .s-content-preview img { max-height: 200px; }
  .s-content-preview iframe { height: 220px; }
  .s-content-iframe { height: 50vh !important; }
}

@media(max-width:480px){
  .s-perf-row { grid-template-columns: repeat(2, 1fr) !important; }
  .s-task-card { padding: 14px 12px !important; }
  .s-option { padding: 10px 12px !important; }
  .s-glass-card { padding: 14px !important; border-radius: 14px !important; }
}

/* ══════════════════════════════════════════════════════
   14. STUDENT CHAT — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Chat wrap: fill available height */
  .s-chat-wrap {
    height: calc(100vh - 180px) !important;
    min-height: 300px;
  }
  
  /* Chat messages area */
  .s-chat-messages { padding: 12px !important; gap: 8px !important; }
  
  /* Chat bubbles: no overflow */
  .s-chat-msg {
    max-width: 85% !important;
    font-size: 0.85rem !important;
    padding: 9px 12px !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  
  /* Chat input row */
  .s-chat-input-row { padding: 10px 12px !important; gap: 8px !important; }
  .s-chat-input { font-size: 0.85rem !important; padding: 9px 12px !important; }
  .s-chat-send { width: 34px !important; height: 34px !important; font-size: 0.9rem !important; }
  
  /* Doubt cards */
  .s-doubt-card { padding: 12px; }
  .s-doubt-text { font-size: 0.85rem; }
}

/* ══════════════════════════════════════════════════════
   15. STUDENT QUIZ/TEST — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Quiz header: stack navigation */
  .s-quiz-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  
  /* Quiz nav dots: scrollable */
  .s-quiz-nav-dots {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 4px;
    scrollbar-width: none;
    gap: 3px !important;
  }
  .s-quiz-nav-dots::-webkit-scrollbar { display: none; }
  .s-quiz-dot { flex-shrink: 0 !important; }
  
  /* Quiz prev/next */
  .s-quiz-prev-next { width: 100%; gap: 6px !important; }
  .s-quiz-nav-btn { flex: 1 !important; text-align: center !important; padding: 9px 12px !important; }
  .s-quiz-finish { width: 100% !important; }
  
  /* Test header: stack timer + info */
  .s-test-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }
  .s-test-timer { font-size: 1.6rem !important; }
  
  /* Test question nav: scrollable */
  .s-test-q-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 4px !important;
    scrollbar-width: none;
  }
  .s-test-q-nav::-webkit-scrollbar { display: none; }
  .s-test-q-btn { flex-shrink: 0 !important; }
  
  /* Test submit section */
  .s-quiz-finish,
  [class*="s-btn-submit"] { width: 100% !important; justify-content: center !important; }
}

@media(max-width:480px){
  .s-test-timer { font-size: 1.4rem !important; }
  .s-quiz-dot { width: 22px !important; height: 22px !important; font-size: 0.6rem !important; }
  .s-test-q-btn { width: 30px !important; height: 30px !important; font-size: 0.72rem !important; }
}

/* ══════════════════════════════════════════════════════
   16. STUDENT CODING LAB — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Code editor: smaller, scrollable */
  .s-code-editor-wrap {
    border-radius: 12px !important;
    overflow: hidden;
  }
  .s-code-area {
    min-height: 160px !important;
    font-size: 0.78rem !important;
    -webkit-overflow-scrolling: touch;
  }
  .s-code-output {
    max-height: 140px !important;
    font-size: 0.78rem !important;
  }
  
  /* Code actions */
  .s-code-actions { gap: 8px !important; }
  .s-btn-run { padding: 10px 12px !important; font-size: 0.8rem !important; }
}

/* ══════════════════════════════════════════════════════
   17. STUDENT REPORTS (Report Center) — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Wrap: remove side padding */
  .rc-wrap { padding: 12px 12px 100px !important; }
  
  /* Header: stack title + tabs */
  .rc-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .rc-title { font-size: 1.1rem !important; }
  
  /* Tabs: scrollable */
  .rc-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px !important;
    padding-bottom: 2px;
  }
  .rc-tabs::-webkit-scrollbar { display: none; }
  .rc-tab { flex-shrink: 0 !important; white-space: nowrap !important; }
  
  /* Stats row: 2-col */
  .rc-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .rc-stat { padding: 12px 10px !important; }
  .rc-stat-val { font-size: 1.4rem !important; }
  .rc-stat-lbl { font-size: 0.65rem !important; }
  
  /* Report cards: full width */
  .rc-card { padding: 12px !important; }
  .rc-card-title { font-size: 0.85rem !important; }
  
  /* Review panel */
  .rc-review { padding-top: 10px !important; margin-top: 10px !important; }
  .rc-q-row { padding: 8px !important; gap: 8px !important; }
  
  /* Charts in report center */
  .rc-chart-wrap,
  [class*="rc-chart"] { height: 180px !important; overflow: hidden; }
}

@media(max-width:480px){
  .rc-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .rc-stat-val { font-size: 1.2rem !important; }
}

/* ══════════════════════════════════════════════════════
   18. STUDENT LEADERBOARD — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  .s-lb-row { padding: 10px 12px !important; gap: 8px !important; }
  .s-lb-name { font-size: 0.82rem !important; }
  .s-lb-score { font-size: 0.82rem !important; }
  .s-lb-progress { padding-left: 40px !important; }
  
  /* Leaderboard rank badge */
  .s-lb-rank { width: 24px !important; height: 24px !important; font-size: 0.72rem !important; }
}

/* ══════════════════════════════════════════════════════
   19. STUDENT WAITING ROOM — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  .s-waiting-card { padding: 24px 18px !important; margin: 12px; }
  .s-waiting-students { gap: 5px; }
  .s-student-pip { font-size: 0.75rem !important; padding: 4px 10px !important; }
  .s-tip-carousel { font-size: 0.82rem !important; padding: 12px 14px !important; }
  .s-waiting-count { font-size: 0.8rem !important; }
}

@media(max-width:480px){
  .s-waiting-card { padding: 20px 14px !important; }
  .s-waiting-orb { width: 64px !important; height: 64px !important; font-size: 1.6rem !important; }
}

/* ══════════════════════════════════════════════════════
   20. STUDENT GROUPS PAGE — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Group task card */
  .s-glass-card .s-section-title { font-size: 0.95rem !important; }
}

/* ══════════════════════════════════════════════════════
   21. MODALS & OVERLAYS — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Review modal */
  .s-review-card { padding: 20px 16px !important; max-width: 100% !important; }
  .s-review-overlay { padding: 16px !important; }
  
  /* Profile overlay */
  .s-profile-overlay { padding: 12px !important; }
  .s-profile-card { padding: 20px 16px !important; }
  
  /* AI explain modal */
  .ai-explain-modal { max-height: 85vh !important; }
  .ai-explain-header { padding: 14px 16px 10px !important; }
  .ai-explain-body { padding: 14px 16px !important; }
  .ai-explain-footer { padding: 10px 16px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .ai-explain-tabs { padding: 8px 16px 0 !important; gap: 2px !important; }
  .ai-explain-tab { padding: 6px 10px !important; font-size: 0.75rem !important; }
  
  /* Content modal */
  .s-content-modal { max-width: 100% !important; max-height: 92vh !important; }
  .s-content-modal-body { padding: 14px !important; }
  
  /* PDF modal: bottom sheet on mobile (already handled, just padding) */
  .pdf-modal { padding: 18px 14px !important; }
}

/* ══════════════════════════════════════════════════════
   22. LOGIN PAGE — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:480px){
  .login-card { border-radius: 20px !important; }
  .login-card-head { padding: 24px 20px 18px !important; }
  .login-card-body { padding: 18px 20px 22px !important; }
  .login-card-footer { padding: 12px 20px 16px !important; }
  .login-brand-mark { width: 52px !important; height: 52px !important; font-size: 1.6rem !important; }
  .login-card-title { font-size: 0.95rem !important; }
  .login-accounts-list { gap: 6px; }
  .login-account-row { padding: 9px 12px !important; }
  .login-role-row { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   23. JOIN / WAITING PAGE (Student) — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:480px){
  .s-code-input { font-size: 1.6rem !important; letter-spacing: 0.15em !important; }
}

/* ══════════════════════════════════════════════════════
   24. COPILOT WINDOWS — Mobile positioning
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Push copilot FABs above bottom nav + safe area */
  .copilot-fab {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 1.3rem !important;
  }
  .student-copilot-fab {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.2rem !important;
  }
}

/* ══════════════════════════════════════════════════════
   25. LANDING PAGE FORMS (join/create) — Mobile
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  .page-sm { padding: 14px 12px !important; }
  
  /* Input rows: stack */
  .input-row { flex-direction: column !important; gap: 8px; }
  .input-row input, .input-row select { width: 100% !important; }
  
  /* Form card in hero */
  .lp-form-fade-card { padding: 18px 14px !important; }
  
  /* Session code display */
  .session-badge { 
    font-size: 0.8rem;
    padding: 4px 10px;
    letter-spacing: 1px;
  }
}

/* ══════════════════════════════════════════════════════
   26. CHART CONTAINERS — Universal mobile fix
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  .chart-container { height: 200px !important; }
  canvas { max-width: 100% !important; }
  
  /* Tables: horizontal scroll container */
  .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table { min-width: 360px; }
}

/* ══════════════════════════════════════════════════════
   27. SMALL PHONE TWEAKS (320px – 374px)
   ══════════════════════════════════════════════════════ */
@media(max-width:374px){
  .s-nav { padding: 0 8px !important; }
  .s-nav-brand { font-size: 0.9rem !important; margin-right: 4px !important; }
  .s-session-chip { display: none !important; }
  
  /* Compact mobile tabs */
  .s-mobile-tab { padding: 4px 4px !important; min-width: 40px !important; font-size: 0.55rem !important; }
  .s-mobile-tab-icon { font-size: 1.05rem !important; }
  
  /* Performance row: 2-col still but tighter */
  .s-perf-row { gap: 6px !important; }
  .s-perf-val { font-size: 1.1rem !important; }
  
  /* Task card */
  .s-task-card { padding: 12px 10px !important; }
  .s-task-q { font-size: 0.88rem !important; }
  
  /* Copilot FABs: smaller, more inline */
  .copilot-fab { width: 46px !important; height: 46px !important; font-size: 1.15rem !important; }
  .student-copilot-fab { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; }
  
  /* Stat cards */
  .stat { padding: 10px 8px; }
  .stat-value { font-size: 1.3rem; }
  
  /* Attendance counters: 2-col always */
  .att-counters { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* RC stats: 2-col */
  .rc-stats { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Page padding minimum */
  .page, .page-sm { padding: 10px 8px !important; }
  .s-main { padding: 10px 8px calc(80px + env(safe-area-inset-bottom)) !important; }
  
  /* Card padding minimum */
  .card { padding: 12px 10px; }
  .card-sm { padding: 8px 10px; }
  
  /* Button: ensure they don't overflow */
  .btn { max-width: 100%; }
  
  /* Prevent any button group overflow */
  .btn-group, [class*="action-row"], [class*="btn-row"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  [class*="action-row"] .btn,
  [class*="btn-row"] .btn { flex: 1; justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   28. TEACHER BOTTOM NAV — Prevent z-index conflict with student copilot
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Teacher bottom nav: push main content */
  .main-content { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
  
  /* Ensure bottom nav doesn't overlap copilot window */
  .mobile-bottom-nav { z-index: 250 !important; }
  .s-mobile-nav { z-index: 250 !important; }
}

/* ══════════════════════════════════════════════════════
   29. MISCELLANEOUS OVERFLOW FIXES
   ══════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Any overflowing flex/grid row */
  .card { overflow: hidden; word-break: break-word; }
  .card-title { word-break: break-word; }
  
  /* Prevent long words from overflowing */
  p, span, h1, h2, h3, h4, h5, h6, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Long text truncation in table cells */
  .table td, .table th {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Prevent fixed-width elements from overflowing */
  .at-risk-bar { width: 48px !important; }
  
  /* Upload zone compact */
  .upload-zone { padding: 20px 12px !important; }
  .upload-icon { font-size: 2rem !important; }
  
  /* Feedback cards */
  .feedback-card { padding: 12px 14px !important; font-size: 0.85rem !important; }
  
  /* HUD progress track */
  .hud-progress-track { width: 56px !important; }
  .s-hud-track { width: 56px !important; }
}

/* ══════════════════════════════════════════════════════
   30. TABLET BREAKPOINT (601px - 768px) — Fine-tuning
   ══════════════════════════════════════════════════════ */
@media(min-width:601px) and (max-width:768px){
  /* Features: 2 columns on tablet */
  .lp-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Content grid: 2-col */
  .ch-grid { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Perf row: all 4 cols */
  .s-perf-row { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Stat grids */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Attendance counters: 3-col */
  .att-counters { grid-template-columns: repeat(3, 1fr) !important; }
  
  /* Student grid: 2-col */
  .att-student-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   BB-8 TOGGLE — copied verbatim from practice.html (Uiverse.io / Galahhad)
   Size variants (.bb8-toggle-sm / .bb8-toggle-md) added for app contexts.
   DO NOT modify the core BB-8 rules below.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Size variants — override --toggle-size to scale the toggle ── */
.bb8-toggle.bb8-toggle-sm { --toggle-size: 6px; font-size: 6px; margin-top: 0; }
.bb8-toggle.bb8-toggle-md { --toggle-size: 8px; font-size: 8px; margin-top: 0; }

/* ── Container wrapper for header/nav contexts ── */
.bb8-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.bb8-toggle {
  --toggle-size: 16px;
  --toggle-width: 10.625em;
  --toggle-height: 5.625em;
  --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
  --toggle-bg: linear-gradient(#2c4770, #050505 35%, #628cac 50% 70%, #8F8F8F) no-repeat;
  --bb8-diameter: 4.375em;
  --radius: 99em;
  --transition: 0.4s;
  --accent: #de7d2f;
  --bb8-bg: #fff;
}

.bb8-toggle,
.bb8-toggle *,
.bb8-toggle *::before,
.bb8-toggle *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.bb8-toggle {
  cursor: pointer;
  margin-top: 0;
  font-size: var(--toggle-size);
  display: inline-block;
}

.bb8-toggle__checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bb8-toggle__container {
  width: var(--toggle-width);
  height: var(--toggle-height);
  background: var(--toggle-bg);
  background-size: 100% 11.25em;
  background-position-y: -5.625em;
  border-radius: var(--radius);
  position: relative;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: calc(var(--toggle-offset) - 1.688em + 0.188em);
  left: var(--toggle-offset);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 2;
}

.bb8__head-container {
  position: relative;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 2;
  -webkit-transform-origin: 1.25em 3.75em;
  -ms-transform-origin: 1.25em 3.75em;
  transform-origin: 1.25em 3.75em;
}

.bb8__head {
  overflow: hidden;
  margin-bottom: -0.188em;
  width: 2.5em;
  height: 1.688em;
  background: linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    linear-gradient(
      45deg,
      transparent 0.188em,
      var(--bb8-bg) 0.188em 1.25em,
      transparent 1.25em
    ),
    linear-gradient(
      -45deg,
      transparent 0.188em,
      var(--bb8-bg) 0.188em 1.25em,
      transparent 1.25em
    ),
    linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  z-index: 1;
  -webkit-filter: drop-shadow(0 0.063em 0.125em gray);
  filter: drop-shadow(0 0.063em 0.125em gray);
}

.bb8__head::before {
  content: "";
  position: absolute;
  width: 0.563em;
  height: 0.563em;
  background: radial-gradient(
      0.125em circle at 0.25em 0.375em,
      red,
      transparent
    ),
    radial-gradient(
      0.063em circle at 0.375em 0.188em,
      var(--bb8-bg) 50%,
      transparent 100%
    ),
    linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  border-radius: var(--radius);
  top: 0.413em;
  left: 50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
  -webkit-box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  z-index: 1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__head::after {
  content: "";
  position: absolute;
  bottom: 0.375em;
  left: 0;
  width: 100%;
  height: 0.188em;
  background: linear-gradient(
    to right,
    var(--accent) 0.125em,
    transparent 0.125em 0.188em,
    var(--accent) 0.188em 0.313em,
    transparent 0.313em 0.375em,
    var(--accent) 0.375em 0.938em,
    transparent 0.938em 1em,
    var(--accent) 1em 1.125em,
    transparent 1.125em 1.875em,
    var(--accent) 1.875em 2em,
    transparent 2em 2.063em,
    var(--accent) 2.063em 2.25em,
    transparent 2.25em 2.313em,
    var(--accent) 2.313em 2.375em,
    transparent 2.375em 2.438em,
    var(--accent) 2.438em
  );
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__antenna {
  position: absolute;
  -webkit-transform: translateY(-90%);
  -ms-transform: translateY(-90%);
  transform: translateY(-90%);
  width: 0.059em;
  border-radius: var(--radius) var(--radius) 0 0;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__antenna:nth-child(1) {
  height: 0.938em;
  right: 0.938em;
  background: linear-gradient(#000 0.188em, silver 0.188em);
}

.bb8__antenna:nth-child(2) {
  height: 0.375em;
  left: 50%;
  -webkit-transform: translate(-50%, -90%);
  -ms-transform: translate(-50%, -90%);
  transform: translate(-50%, -90%);
  background: silver;
}

.bb8__body {
  width: 4.375em;
  height: 4.375em;
  background: var(--bb8-bg);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: linear-gradient(
      -90deg,
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      to right,
      transparent 2.156em,
      silver 2.156em 2.219em,
      transparent 2.188em
    ),
    linear-gradient(
      transparent 2.156em,
      silver 2.156em 2.219em,
      transparent 2.188em
    );
  background-color: var(--bb8-bg);
}

.bb8__body::after {
  content: "";
  bottom: 1.5em;
  left: 0.563em;
  position: absolute;
  width: 0.188em;
  height: 0.188em;
  background: rgb(236, 236, 236);
  color: rgb(236, 236, 236);
  border-radius: 50%;
  -webkit-box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em,
    2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
  box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em,
    3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
}

.bb8__body::before {
  content: "";
  width: 2.625em;
  height: 2.625em;
  position: absolute;
  border-radius: 50%;
  z-index: 0.1;
  overflow: hidden;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0.313em solid var(--accent);
  background: radial-gradient(
      1em circle at center,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
    linear-gradient(
      -90deg,
      transparent 42%,
      var(--accent) 42% 58%,
      transparent 58%
    ),
    linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
}

.artificial__hidden {
  position: absolute;
  border-radius: inherit;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bb8__shadow {
  content: "";
  width: var(--bb8-diameter);
  height: 20%;
  border-radius: 50%;
  background: #3a271c;
  -webkit-box-shadow: 0.313em 0 3.125em #3a271c;
  box-shadow: 0.313em 0 3.125em #3a271c;
  opacity: 0.25;
  position: absolute;
  bottom: 0;
  left: calc(var(--toggle-offset) - 0.938em);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: skew(-70deg);
  -ms-transform: skew(-70deg);
  transform: skew(-70deg);
  z-index: 1;
}

.bb8-toggle__scenery {
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  position: relative;
  border-radius: inherit;
}

.bb8-toggle__scenery::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: #b18d71;
  z-index: 1;
}

.bb8-toggle__cloud {
  z-index: 1;
  position: absolute;
  border-radius: 50%;
}

.bb8-toggle__cloud:nth-last-child(1) {
  width: 0.875em;
  height: 0.625em;
  -webkit-filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
  filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
  right: 1.875em;
  top: 2.813em;
  background: linear-gradient(to top right, #ffffffae, #ffffffae);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8-toggle__cloud:nth-last-child(2) {
  top: 0.625em;
  right: 4.375em;
  width: 0.875em;
  height: 0.375em;
  background: #dfdedeae;
  -webkit-filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.bb8-toggle__cloud:nth-last-child(3) {
  top: 1.25em;
  right: 0.938em;
  width: 0.875em;
  height: 0.375em;
  background: #ffffffae;
  -webkit-filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
    drop-shadow(-0.625em 0.313em #ffffffae);
  filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
    drop-shadow(-0.625em 0.313em #ffffffae);
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

.gomrassen,
.hermes,
.chenini {
  position: absolute;
  border-radius: var(--radius);
  background: linear-gradient(#fff, #6e8ea2);
  top: 100%;
}

.gomrassen {
  left: 0.938em;
  width: 1.875em;
  height: 1.875em;
  -webkit-box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.gomrassen::before,
.gomrassen::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  -webkit-box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  background: rgb(184, 196, 200);
}

.gomrassen::before {
  left: 0.313em;
  top: 0.313em;
  width: 0.438em;
  height: 0.438em;
}

.gomrassen::after {
  width: 0.25em;
  height: 0.25em;
  left: 1.25em;
  top: 0.75em;
}

.hermes {
  left: 3.438em;
  width: 0.625em;
  height: 0.625em;
  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.chenini {
  left: 4.375em;
  width: 0.5em;
  height: 0.5em;
  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

.tatto-1,
.tatto-2 {
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  border-radius: var(--radius);
}

.tatto-1 {
  background: #fefefe;
  right: 3.125em;
  top: 0.625em;
  -webkit-box-shadow: 0 0 0.438em #fdf4e1;
  box-shadow: 0 0 0.438em #fdf4e1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.tatto-2 {
  background: linear-gradient(#e6ac5c, #d75449);
  right: 1.25em;
  top: 2.188em;
  -webkit-box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bb8-toggle__star {
  position: absolute;
  width: 0.063em;
  height: 0.063em;
  background: #fff;
  border-radius: var(--radius);
  -webkit-filter: drop-shadow(0 0 0.063em #fff);
  filter: drop-shadow(0 0 0.063em #fff);
  color: #fff;
  top: 100%;
}

.bb8-toggle__star:nth-child(1) {
  left: 3.75em;
  -webkit-box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
    -3.125em 1.875em, 1.25em 2.813em;
  box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
    -3.125em 1.875em, 1.25em 2.813em;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.bb8-toggle__star:nth-child(2) {
  left: 4.688em;
  -webkit-box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
    -3.125em 1.25em, 1.25em -1.563em;
  box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
    -3.125em 1.25em, 1.25em -1.563em;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.bb8-toggle__star:nth-child(3) {
  left: 5.313em;
  -webkit-box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0,
    -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em,
    -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8-toggle__star:nth-child(4) {
  left: 1.875em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.bb8-toggle__star:nth-child(5) {
  left: 5em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.bb8-toggle__star:nth-child(6) {
  left: 2.5em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bb8-toggle__star:nth-child(7) {
  left: 3.438em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

/* ── BB-8 toggle: checked-state animations ── */
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(1) { top: 0.625em; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(2) { top: 1.875em; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(3) { top: 1.25em; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(4) { top: 3.438em; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(5) { top: 3.438em; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(6) { top: 0.313em; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(7) { top: 1.875em; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud { right: -100%; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen { top: 0.938em; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes { top: 2.5em; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini { top: 2.75em; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container { background-position-y: 0; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 { top: 100%; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 { top: 100%; }
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset));
}
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em);
  -webkit-transform: skew(70deg);
  -ms-transform: skew(70deg);
  transform: skew(70deg);
}
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {
  -webkit-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

/* ── BB-8 toggle: hover-state animations ── */
.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before { left: 100%; }
.bb8-toggle__checkbox:not(:checked):hover + .bb8-toggle__container .bb8__antenna:nth-child(1) { right: 1.5em; }
.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__antenna:nth-child(2) { left: 0.938em; }
.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after { background-position: 1.375em 0; }
.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::before { left: 0; }
.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__antenna:nth-child(2) { left: calc(100% - 0.938em); }
.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after { background-position: -1.375em 0; }
.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {
  -webkit-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  transform: rotate(25deg);
}
.bb8-toggle__checkbox:checked:active + .bb8-toggle__container .bb8__head-container {
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-25deg);
}
.bb8:hover .bb8__head::before,
.bb8:hover .bb8__antenna:nth-child(2) { left: 50% !important; }
.bb8:hover .bb8__antenna:nth-child(1) { right: 0.938em !important; }
.bb8:hover .bb8__head::after { background-position: 0 0 !important; }

/* ── Responsive: never clip the toggle's head on small screens ── */
.teacher-header { overflow: visible !important; }
.nav { overflow: visible !important; }

/* ═══════════════════════════════════════════════════════════════════════
   VYOM PREMIUM MOBILE REDESIGN
   Matching reference screenshots exactly:
   - Dark #050505 background with deep purple/indigo accents
   - Bottom navigation matching reference style
   - Card-based layout with rounded corners and purple highlights
   - iOS/Android native app feel
   ═══════════════════════════════════════════════════════════════════════ */

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

/* ── Mobile Design Tokens ── */
:root {
  --mob-bg: var(--bg);
  --mob-surface: var(--surface);
  --mob-surface2: var(--surface2);
  --mob-surface3: var(--surface3);
  --mob-accent: var(--accent);
  --mob-accent2: var(--accent2);
  --mob-accent-glow: var(--accent-glow);
  --mob-green: var(--green);
  --mob-red: var(--red);
  --mob-yellow: var(--yellow);
  --mob-blue: var(--blue);
  --mob-text: var(--text);
  --mob-text2: var(--text2);
  --mob-text3: var(--text3);
  --mob-border: var(--border);
  --mob-radius: 16px;
  --mob-radius-sm: 12px;
  --mob-shadow: var(--shadow);
  --mob-shadow-accent: var(--accent-glow);
  --mob-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION — Premium redesign matching reference
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    background: rgba(11, 11, 11, 0.97) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 8px 4px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6), 0 -1px 0 rgba(var(--accent-rgb), 0.03) !important;
    height: auto !important;
  }

  .mobile-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 8px 6px 6px !important;
    border-radius: 14px !important;
    min-width: 52px !important;
    color: rgba(148,163,184,0.6) !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    font-family: var(--mob-font) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .mobile-bottom-nav-item span.icon {
    font-size: 1.3rem !important;
    line-height: 1 !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .mobile-bottom-nav-item.active {
    color: #fff !important;
    background: rgba(var(--accent-rgb), 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .mobile-bottom-nav-item.active span.icon {
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.225)) !important;
    transform: scale(1.15) translateY(-1px) !important;
  }

  .mobile-bottom-nav-item:active {
    transform: scale(0.88) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TEACHER LAYOUT — Mobile full redesign
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    background: #121212 !important;
    font-family: var(--mob-font) !important;
  }

  /* Hide desktop sidebar completely */
  .teacher-sidebar {
    display: none !important;
  }

  /* Teacher main takes full width */
  .teacher-main {
    width: 100% !important;
    background: #121212 !important;
  }

  /* ── TOP HEADER — Mobile redesign ── */
  .teacher-header {
    background: rgba(11, 11, 11, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    height: 64px !important;
    padding: 0 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }

  .teacher-header-greeting {
    flex: 1 !important;
  }

  .teacher-header-greeting h2 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }

  .teacher-header-greeting p {
    font-size: 0.72rem !important;
    color: var(--mob-text2) !important;
  }

  /* ── DASHBOARD PAGE ── */
  .db-page {
    padding: 14px 14px calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    background: #121212 !important;
  }

  /* ── HERO CLASSROOM CARD — matches reference screenshot ── */
  .db-hero-card {
    background: linear-gradient(135deg, #050505 0%, #050505 40%, #050505 70%, #050505 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    min-height: auto !important;
    flex-direction: column !important;
    gap: 16px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .db-hero-divider {
    display: none !important;
  }

  .db-hero-left-group {
    width: 100% !important;
    gap: 16px !important;
  }

  .db-hero-meta {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    gap: 16px !important;
  }

  .db-hero-meta-item {
    flex: 1 !important;
  }

  .db-hero-card::before {
    background:
      radial-gradient(ellipse 80% 80% at 100% 50%, rgba(var(--accent-rgb), 0.3) 0%, transparent 60%),
      radial-gradient(ellipse 50% 60% at 15% 80%, rgba(var(--accent-rgb), 0.2) 0%, transparent 55%) !important;
  }

  /* ── Live session badge ── */
  .db-hero-subtitle {
    font-size: 0.68rem !important;
    color: var(--mob-green) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .db-hero-title {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    font-family: monospace !important;
    color: #fff !important;
    margin-bottom: 8px !important;
  }

  .db-hero-code-row {
    font-size: 0.78rem !important;
    color: var(--mob-text2) !important;
    margin-bottom: 12px !important;
  }

  .db-hero-code-badge {
    background: rgba(var(--accent-rgb), 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--mob-text) !important;
    font-size: 0.85rem !important;
    padding: 4px 12px !important;
    border-radius: 8px !important;
    letter-spacing: 2px !important;
  }

  /* Meta row (student count, time) */
  .db-hero-meta {
    flex-direction: row !important;
    gap: 20px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .db-hero-meta-item {
    text-align: left !important;
    min-width: auto !important;
  }

  .db-hero-meta-value {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #fff !important;
  }

  .db-hero-meta-label {
    font-size: 0.65rem !important;
    color: var(--mob-text2) !important;
  }

  .db-hero-time-value {
    font-size: 1.0rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 2px !important;
  }

  /* Start/pause button on hero */
  .db-hero-start-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
    box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.113) !important;
  }

  /* ── STATS ROW — 2×2 grid ── */
  .db-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .db-stat-card {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .db-stat-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    margin-bottom: 12px !important;
    font-size: 1.2rem !important;
  }

  .db-stat-value {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
  }

  .db-stat-label {
    font-size: 0.72rem !important;
    color: var(--mob-text2) !important;
  }

  /* ── AI BANNER ── */
  .db-ai-banner {
    background: linear-gradient(120deg, rgba(11, 11, 11, 0.95), rgba(26, 26, 26, 0.9)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .db-ai-badge {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 1.2rem !important;
  }

  .db-ai-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
  }

  .db-ai-subtitle {
    font-size: 0.72rem !important;
  }

  .db-ai-view-btn {
    padding: 8px 14px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── BOTTOM PANELS — stack single column ── */
  .db-bottom-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .db-panel {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 16px !important;
  }

  .db-panel-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--mob-text) !important;
  }

  /* ── HERO ILLUSTRATION — hide on mobile ── */
  .db-hero-illustration {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ALL PAGES — Universal mobile improvements
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Base page */
  .page, .page-sm {
    padding: 14px 14px calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    background: #121212 !important;
  }

  /* Main content push-up above nav */
  .main-content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    background: #121212 !important;
  }

  /* ── Cards redesign ── */
  .card {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
  }

  .card-sm {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
  }

  .card-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--mob-text) !important;
  }

  /* Grids → single column on mobile */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Sections padding */
  .lp-section {
    padding: 32px 16px !important;
  }

  /* ── Buttons ── */
  .btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
  }

  .btn-lg {
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    border-radius: 14px !important;
  }

  /* ── Section headers ── */
  .section-header {
    margin-bottom: 14px !important;
  }

  .section-title {
    font-size: 1.0rem !important;
    font-weight: 700 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TEST MODE PAGE — Mobile redesign
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Test mode page cards */
  .page [class*="test-"], .page [class*="quiz-"] {
    border-radius: 16px !important;
  }

  /* Timer buttons — pill style */
  .btn.btn-primary[style*="background"] {
    border-radius: 12px !important;
  }

  /* Test Start button */
  .btn-lg.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    font-size: 1rem !important;
    box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.1) !important;
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
  }

  /* Test settings card */
  .card .form-group label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--mob-text2) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 8px !important;
  }

  /* Duration pill buttons */
  .input-row .btn {
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    padding: 8px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LIVE TEST (Student view) — Mobile redesign
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* MCQ options */
  .option-btn {
    background: rgba(26, 26, 26, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
  }

  .option-btn.selected {
    border-color: var(--mob-accent) !important;
    background: rgba(var(--accent-rgb), 0.15) !important;
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.05) !important;
  }

  .option-btn.correct {
    border-color: var(--mob-green) !important;
    background: rgba(34,197,94,0.12) !important;
  }

  .option-btn.wrong {
    border-color: var(--mob-red) !important;
    background: rgba(239,68,68,0.12) !important;
  }

  /* Previous/Next nav buttons */
  .btn.btn-ghost {
    background: rgba(26, 26, 26, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: var(--mob-text) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TASKS PAGE — Mobile redesign
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Task filter tabs */
  .tabs {
    background: #1A1A1A !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 4px !important;
    gap: 2px !important;
    border-bottom: none !important;
    margin-bottom: 16px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .tab {
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    color: var(--mob-text2) !important;
    border-bottom: none !important;
  }

  .tab.active {
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
    color: #fff !important;
    border-bottom: none !important;
  }

  /* Task cards */
  .card.task-card, .card[class*="task"] {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
  }

  /* Badge pills */
  .badge {
    border-radius: 20px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
  }

  /* FAB add button */
  .btn.btn-primary[style*="border-radius: 50%"],
  .btn.btn-primary[style*="border-radius:50%"] {
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
    box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.125) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ATTENDANCE PAGE — Mobile redesign
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Calendar styling */
  .att-calendar, [class*="att-calendar"] {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
  }

  /* Attendance ring */
  .att-ring-wrap, [class*="att-ring"] {
    filter: drop-shadow(0 0 20px rgba(var(--accent-rgb), 0.075)) !important;
  }

  /* Counter cards */
  .att-counter, [class*="att-counter"] {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
  }

  /* Student list items */
  .att-student-row, [class*="att-student"] {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
    padding: 10px 12px !important;
  }

  /* Search field */
  input[type="text"], input[type="search"] {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: var(--mob-text) !important;
    font-size: 0.88rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CHAT PAGE — Mobile redesign
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Chat container */
  .chat-area {
    height: calc(100vh - 200px) !important;
    border-radius: 16px !important;
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* Chat header tabs */
  .chat-tabs, [class*="chat-tab"] {
    background: #1A1A1A !important;
    border-radius: 12px !important;
  }

  /* Message bubbles */
  .chat-msg-wrap.other .chat-bubble-col .chat-bubble {
    background: rgba(26, 26, 26, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px 16px 16px 4px !important;
    font-size: 0.88rem !important;
  }

  .chat-msg-wrap.own .chat-bubble-col .chat-bubble {
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
    border-radius: 16px 16px 4px 16px !important;
    font-size: 0.88rem !important;
  }

  /* Chat input */
  .chat-input-area, [class*="chat-input"] {
    background: rgba(11, 11, 11, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 12px !important;
  }

  /* Send button */
  .chat-send, [class*="chat-send"] {
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.1) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REPORTS PAGE — Mobile redesign
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* RC wrap */
  .rc-wrap {
    padding: 14px 14px calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Report stats row */
  .rc-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .rc-stat {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 12px 10px !important;
  }

  .rc-stat-val {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
  }

  .rc-stat-lbl {
    font-size: 0.65rem !important;
    color: var(--mob-text2) !important;
  }

  /* Tab bar */
  .rc-tabs {
    background: #1A1A1A !important;
    border-radius: 12px !important;
    padding: 4px !important;
    gap: 4px !important;
  }

  .rc-tab {
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
  }

  .rc-tab.active {
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.087) !important;
  }

  /* Report cards */
  .rc-card {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 14px !important;
  }

  .rc-card:hover {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(26, 26, 26, 0.9) !important;
  }

  /* Chart area */
  .chart-container {
    height: 200px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS / PROFILE DRAWER — Mobile redesign
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Profile drawer */
  [class*="drawer"], [class*="profile-drawer"] {
    background: #121212 !important;
    border-radius: 24px 24px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* Settings items */
  [class*="settings-item"], [class*="setting-row"] {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
  }

  /* Toggle switches */
  input[type="checkbox"]:not(.bb8-toggle__checkbox) {
    accent-color: var(--accent) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS — Mobile position fix
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .toasts {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    right: 12px !important;
    left: 12px !important;
  }

  .toast {
    min-width: auto !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    background: rgba(11, 11, 11, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STUDENT BOTTOM NAV MATCHING TEACHER STYLE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .s-mobile-nav {
    background: rgba(11, 11, 11, 0.97) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 8px 4px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6) !important;
  }

  .s-mobile-tab {
    border-radius: 14px !important;
    color: rgba(148,163,184,0.6) !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    font-family: var(--mob-font) !important;
    min-width: 52px !important;
    padding: 8px 6px 6px !important;
  }

  .s-mobile-tab.active {
    color: #fff !important;
    background: rgba(var(--accent-rgb), 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .s-mobile-tab.active .s-mobile-tab-icon {
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.225)) !important;
    transform: scale(1.15) translateY(-1px) !important;
  }

  .s-mobile-tab-icon {
    font-size: 1.3rem !important;
    line-height: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FORM INPUTS — Mobile improvements
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not(.bb8-toggle__checkbox),
  select,
  textarea {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: #E8ECF5 !important;
    font-size: 0.9rem !important;
    padding: 11px 14px !important;
  }

  input:focus:not([type="checkbox"]):not([type="radio"]):not(.bb8-toggle__checkbox),
  select:focus,
  textarea:focus {
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.03) !important;
    outline: none !important;
  }

  /* Labels */
  label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: rgba(148,163,184,0.8) !important;
    letter-spacing: 0.04em !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UNDERSTANDING METER — Neon glow
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .understanding-meter {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
  }

  .meter-value {
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--accent2), var(--accent2), var(--accent2)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.125)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS — Premium mobile feel
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .stat {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 16px !important;
  }

  .stat-value {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--accent2), var(--accent2)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  .stat-label {
    font-size: 0.72rem !important;
    color: var(--mob-text2) !important;
    font-weight: 600 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BARS — Purple gradient
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .progress-bar {
    background: #1A1A1A !important;
    border-radius: 20px !important;
    height: 6px !important;
  }

  .progress-fill.accent {
    background: linear-gradient(90deg, var(--accent), var(--accent), var(--accent2)) !important;
    border-radius: 20px !important;
  }

  .progress-fill.green {
    background: linear-gradient(90deg, #22C55E, #16A34A) !important;
  }

  .progress-fill.red {
    background: linear-gradient(90deg, #EF4444, #DC2626) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STUDENT CHIPS & ROWS — Clean dark cards
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .student-chip {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .student-chip .dot {
    background: var(--mob-green) !important;
    box-shadow: 0 0 8px rgba(34,197,94,0.5) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COPILOT FAB — z-index & positioning fix
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .copilot-fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
    box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.138), 0 0 60px rgba(var(--accent-rgb), 0.037) !important;
  }

  .student-copilot-fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }

  .copilot-window {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    border-radius: 20px !important;
    background: #050505 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE — Mobile improvements
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .role-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .role-card {
    border-radius: 18px !important;
    padding: 22px 16px !important;
  }

  .landing-logo {
    font-size: 2.8rem !important;
  }

  .lp-h2 {
    font-size: 1.7rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TEACHER DASHBOARD — Mobile stat sparkline
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .db-sparkline svg path {
    stroke-width: 1.5 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BADGES — Pill redesign
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .badge-green {
    background: rgba(34,197,94,0.12) !important;
    color: #4ADE80 !important;
    border: 1px solid rgba(34,197,94,0.25) !important;
    border-radius: 20px !important;
  }

  .badge-red {
    background: rgba(239,68,68,0.12) !important;
    color: #F87171 !important;
    border: 1px solid rgba(239,68,68,0.25) !important;
    border-radius: 20px !important;
  }

  .badge-yellow {
    background: rgba(234,179,8,0.12) !important;
    color: #FCD34D !important;
    border: 1px solid rgba(234,179,8,0.25) !important;
    border-radius: 20px !important;
  }

  .badge-blue {
    background: rgba(var(--accent-rgb), 0.12) !important;
    color: var(--accent2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
  }

  .badge-purple {
    background: rgba(var(--accent-rgb), 0.12) !important;
    color: var(--accent2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR HIDE ON MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
  * { scrollbar-width: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   360px–430px MICRO OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {
  .db-stat-value { font-size: 1.4rem !important; }
  .db-hero-title { font-size: 1.9rem !important; }
  .mobile-bottom-nav-item { min-width: 44px !important; padding: 6px 4px 5px !important; font-size: 0.55rem !important; }
  .mobile-bottom-nav-item span.icon { font-size: 1.15rem !important; }
  .db-stats-row { gap: 10px !important; }
  .rc-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
}

@media (max-width: 360px) {
  .mobile-bottom-nav-item { min-width: 40px !important; font-size: 0.5rem !important; }
  .mobile-bottom-nav-item span.icon { font-size: 1.05rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   STUDENT MAIN AREA — Dark background
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .s-main {
    background: transparent !important;
    --bg: #050505 !important;
    padding: 14px 14px calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CM2 — Premium Content Management Dashboard v2
   Deep navy glassmorphism, purple accents, modern SaaS aesthetic
══════════════════════════════════════════════════════════════════ */

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

:root {
  --cm2-bg0: var(--bg);
  --cm2-bg1: var(--surface);
  --cm2-bg2: var(--surface2);
  --cm2-bg3: var(--surface3);
  --cm2-border: var(--border);
  --cm2-border2: rgba(255, 255, 255, 0.08);
  --cm2-purple: var(--accent);
  --cm2-purple2: var(--accent2);
  --cm2-green: var(--green);
  --cm2-orange: var(--accent-orange);
  --cm2-cyan: var(--accent2);
  --cm2-text1: var(--text);
  --cm2-text2: var(--text2);
  --cm2-text3: var(--text3);
  --cm2-glass: rgba(var(--accent-rgb), 0.035);
  --cm2-glass2: rgba(var(--accent-rgb), 0.055);
}

/* Wrap */
.cm2-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--cm2-bg0);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  color: var(--cm2-text1);
}

/* ── Top Header ── */
.cm2-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  background: var(--cm2-bg1);
  border-bottom: 1px solid var(--cm2-border);
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.cm2-header-left { flex-shrink: 0; }
.cm2-welcome-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--cm2-text1);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.cm2-welcome-title .cm2-wave { display: inline-block; }
.cm2-welcome-sub {
  font-size: 0.8rem;
  color: var(--cm2-text2);
  margin-top: 2px;
  font-weight: 400;
}
.cm2-header-center {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
}
.cm2-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cm2-search-icon {
  position: absolute;
  left: 13px;
  font-size: 0.82rem;
  color: var(--cm2-text3);
  pointer-events: none;
}
.cm2-search-input {
  width: 100%;
  background: var(--cm2-bg2);
  border: 1px solid var(--cm2-border);
  border-radius: 10px;
  padding: 9px 42px 9px 36px;
  color: var(--cm2-text1);
  font-size: 0.85rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cm2-search-input:focus {
  border-color: var(--cm2-purple);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.03);
}
.cm2-search-input::placeholder { color: var(--cm2-text3); }
.cm2-search-kbd {
  position: absolute;
  right: 10px;
  font-size: 0.7rem;
  color: var(--cm2-text3);
  background: var(--cm2-bg3);
  border: 1px solid var(--cm2-border);
  border-radius: 5px;
  padding: 1px 6px;
  pointer-events: none;
}
.cm2-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cm2-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--cm2-border);
  background: var(--cm2-glass);
  color: var(--cm2-text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s;
  position: relative;
}
.cm2-icon-btn:hover { background: var(--cm2-bg3); color: var(--cm2-text1); }
.cm2-notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 1.5px solid var(--cm2-bg1);
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
.cm2-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--cm2-purple), var(--cm2-purple2));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.087);
  white-space: nowrap;
}
.cm2-create-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.113); }
.cm2-create-plus {
  width: 18px; height: 18px;
  background: rgba(255,255,255,0.2);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
}

/* ── Stats Row ── */
.cm2-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px 28px;
  background: var(--cm2-bg1);
  border-bottom: 1px solid var(--cm2-border);
}
.cm2-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--cm2-glass);
  border: 1px solid var(--cm2-border);
  border-radius: 14px;
  cursor: default;
  transition: all 0.22s;
  position: relative;
  overflow: hidden;
}
.cm2-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.3s;
}
.cm2-stat-card:hover::before { opacity: 1; }
.cm2-stat-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.08); }
.cm2-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.cm2-stat-body { flex: 1; min-width: 0; }
.cm2-stat-label {
  font-size: 0.75rem;
  color: var(--cm2-text2);
  font-weight: 500;
  margin-bottom: 4px;
}
.cm2-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--cm2-text1);
  line-height: 1;
  letter-spacing: -0.02em;
}
.cm2-stat-sub {
  font-size: 0.72rem;
  color: var(--cm2-green);
  margin-top: 4px;
  font-weight: 600;
}

/* ── Category Tabs ── */
.cm2-tabs-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 28px;
  background: var(--cm2-bg1);
  border-bottom: 1px solid var(--cm2-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cm2-tabs-bar::-webkit-scrollbar { display: none; }
.cm2-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 16px;
  border: none;
  background: transparent;
  color: var(--cm2-text2);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.18s;
  white-space: nowrap;
  font-family: inherit;
  position: relative;
}
.cm2-tab-btn:hover { color: var(--cm2-text1); }
.cm2-tab-btn.active {
  color: var(--cm2-purple);
  border-bottom-color: var(--cm2-purple);
  font-weight: 700;
}
.cm2-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cm2-purple);
  margin-right: -2px;
}

/* ── Filter Bar ── */
.cm2-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--cm2-bg1);
  border-bottom: 1px solid var(--cm2-border);
  flex-wrap: wrap;
}
.cm2-filter-search {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cm2-bg2);
  border: 1px solid var(--cm2-border);
  border-radius: 10px;
  padding: 9px 14px;
  color: var(--cm2-text2);
  font-size: 0.85rem;
  transition: border-color 0.2s;
}
.cm2-filter-search:focus-within {
  border-color: var(--cm2-purple);
}
.cm2-filter-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--cm2-text1);
  font-size: 0.85rem;
  outline: none;
  font-family: inherit;
  min-width: 0;
}
.cm2-filter-search input::placeholder { color: var(--cm2-text3); }
.cm2-dropdown {
  background: var(--cm2-bg2);
  border: 1px solid var(--cm2-border);
  border-radius: 10px;
  padding: 8px 14px;
  color: var(--cm2-text1);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  min-width: 130px;
  transition: border-color 0.2s;
}
.cm2-dropdown:focus { border-color: var(--cm2-purple); }
.cm2-filter-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--cm2-bg2);
  border: 1px solid var(--cm2-border);
  border-radius: 10px;
  color: var(--cm2-text1);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s;
  font-weight: 500;
  white-space: nowrap;
}
.cm2-filter-btn:hover { background: var(--cm2-bg3); border-color: rgba(255, 255, 255, 0.08); }

/* ── Main 2-Column Area ── */
.cm2-main-area {
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--cm2-bg0);
}
.cm2-content-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  min-width: 0;
}
.cm2-content-list::-webkit-scrollbar { width: 4px; }
.cm2-content-list::-webkit-scrollbar-track { background: transparent; }
.cm2-content-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.35); border-radius: 4px; }

/* Content Row Card */
.cm2-content-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--cm2-glass);
  border: 1px solid var(--cm2-border);
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.22s;
  position: relative;
}
.cm2-content-row:hover {
  background: var(--cm2-bg2);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}
.cm2-content-row.selected {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: var(--cm2-purple);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.075);
}
.cm2-content-row.uploaded-by-teacher {
  border-left: 4px solid var(--accent);
  border-color: rgba(255, 255, 255, 0.08);
}
.cm2-content-row.uploaded-by-student {
  border-left: 4px solid #10b981;
  border-color: rgba(16, 185, 129, 0.25);
}
.light .cm2-content-row.uploaded-by-teacher {
  border-left: 4px solid var(--accent);
  border-color: rgba(11, 45, 99, 0.2);
}
.light .cm2-content-row.uploaded-by-student {
  border-left: 4px solid #059669;
  border-color: rgba(16, 185, 129, 0.2);
}

.sch-row.uploaded-by-teacher {
  border-left: 4px solid var(--accent);
  border-color: rgba(255, 255, 255, 0.08);
}
.sch-row.uploaded-by-student {
  border-left: 4px solid #10b981;
  border-color: rgba(16, 185, 129, 0.25);
}
.light .sch-row.uploaded-by-teacher {
  border-left: 4px solid var(--accent);
  border-color: rgba(11, 45, 99, 0.2);
}
.light .sch-row.uploaded-by-student {
  border-left: 4px solid #059669;
  border-color: rgba(16, 185, 129, 0.2);
}

.resource-origin-indicator {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.85rem;
  opacity: 0.85;
  z-index: 2;
  transition: transform 0.2s;
}
.resource-origin-indicator:hover {
  transform: scale(1.15);
}

.cm2-tag-teacher, .ch-badge-teacher {
  background: rgba(212, 160, 23, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(212, 160, 23, 0.3) !important;
}
.light .cm2-tag-teacher, .light .ch-badge-teacher {
  background: rgba(11, 45, 99, 0.08) !important;
  color: #0b2d63 !important;
  border: 1px solid rgba(11, 45, 99, 0.2) !important;
}
.cm2-tag-student, .ch-badge-student {
  background: rgba(var(--accent-rgb), 0.15) !important;
  color: var(--accent2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.light .cm2-tag-student, .light .ch-badge-student {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.cm2-tag:hover, .ch-type-badge:hover {
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.087);
  transform: translateY(-1px);
}
@keyframes uploadPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.new-resource-pulse {
  animation: uploadPulse 2s infinite;
}

.cm2-row-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: var(--cm2-bg2);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  position: relative;
}
.cm2-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm2-row-info { flex: 1; min-width: 0; }
.cm2-row-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.cm2-row-title {
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--cm2-text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm2-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent2);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cm2-row-desc {
  font-size: 0.8rem;
  color: var(--cm2-text2);
  line-height: 1.5;
  margin-bottom: 7px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cm2-row-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cm2-tag {
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.cm2-tag-image { background: rgba(34,197,94,0.12); color: #4ade80; border-color: rgba(34,197,94,0.2); }
.cm2-tag-pdf { background: rgba(239,68,68,0.12); color: #f87171; border-color: rgba(239,68,68,0.2); }
.cm2-tag-video { background: rgba(var(--accent-rgb), 0.35); color: var(--accent2); border-color: rgba(255, 255, 255, 0.08); }
.cm2-tag-note { background: rgba(var(--accent-rgb), 0.35); color: var(--accent2); border-color: rgba(255, 255, 255, 0.08); }
.cm2-tag-link { background: rgba(234,179,8,0.12); color: #fbbf24; border-color: rgba(234,179,8,0.2); }
.cm2-tag-presentation { background: rgba(var(--accent-rgb), 0.35); color: var(--accent2); border-color: rgba(255, 255, 255, 0.08); }
.cm2-tag-assignment { background: rgba(249,115,22,0.12); color: #fb923c; border-color: rgba(249,115,22,0.2); }
.cm2-tag-subject { background: rgba(var(--accent-rgb), 0.35); color: var(--accent2); border-color: rgba(255, 255, 255, 0.08); }
.cm2-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
  min-width: 110px;
}
.cm2-row-date { font-size: 0.75rem; color: var(--cm2-text2); white-space: nowrap; }
.cm2-row-status-published {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cm2-green);
}
.cm2-row-status-draft {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cm2-orange);
}
.cm2-row-counts {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.73rem;
  color: var(--cm2-text3);
}
.cm2-row-count { display: flex; align-items: center; gap: 3px; }
.cm2-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.cm2-row-menu-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--cm2-border);
  background: transparent;
  color: var(--cm2-text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.18s;
  font-family: inherit;
}
.cm2-row-menu-btn:hover { background: var(--cm2-bg3); color: var(--cm2-text1); }
.cm2-row-menu-btn.danger:hover { background: rgba(239,68,68,0.12); color: #f87171; }

/* Dropdown menu for row actions */
.cm2-action-menu {
  position: relative;
}
.cm2-action-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: rgba(26, 26, 26, 0.82) !important; /* Premium glass */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px;
  min-width: 200px;
  z-index: 100;
  box-shadow: 
    0 16px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  animation: cm2-dropdown-entrance 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
  padding: 4px;
}
.light .cm2-action-dropdown {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04);
}
@keyframes cm2-dropdown-entrance {
  from { opacity: 0; transform: translateY(-8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cm2-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--cm2-text1);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.cm2-action-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  transform: translateX(2px);
}
.light .cm2-action-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  transform: translateX(2px);
}
.cm2-action-item.danger {
  color: #f87171 !important;
}
.cm2-action-item.danger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
}
.cm2-action-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 4px 4px; }
.light .cm2-action-divider { background: rgba(0, 0, 0, 0.06); }

/* ── Right Preview Panel ── */
.cm2-preview-panel {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--cm2-border);
  background: var(--cm2-bg1);
  overflow-y: auto;
  position: sticky;
  top: var(--header-h);
  align-self: flex-start;
  max-height: calc(100vh - var(--header-h));
  scrollbar-width: none;
}
.cm2-preview-panel::-webkit-scrollbar { display: none; }
.cm2-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  color: var(--cm2-text3);
  font-size: 0.88rem;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
}
.cm2-preview-empty-icon { font-size: 3rem; opacity: 0.3; }
.cm2-preview-empty-text { font-weight: 600; color: var(--cm2-text2); }
.cm2-preview-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
  overflow: hidden;
}
.cm2-preview-img-wrap.img-bg-blue { background: linear-gradient(135deg, var(--accent), #4338ca); }
.cm2-preview-img-wrap.img-bg-green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.cm2-preview-img-wrap.img-bg-purple { background: linear-gradient(135deg, var(--accent), var(--accent)); }
.cm2-preview-img-wrap.img-bg-cyan { background: linear-gradient(135deg, var(--accent), var(--accent)); }
.cm2-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm2-preview-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  opacity: 0.5;
}
.cm2-preview-btn-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-family: inherit;
}
.cm2-preview-expand-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  backdrop-filter: blur(10px);
  font-family: inherit;
}
.cm2-preview-body { padding: 18px 18px 0; }
.cm2-preview-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cm2-preview-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--cm2-text1);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.cm2-preview-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cm2-add-tag-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: transparent;
  border: 1px dashed var(--cm2-text3);
  border-radius: 20px;
  color: var(--cm2-text3);
  font-size: 0.7rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
}
.cm2-add-tag-btn:hover { border-color: var(--cm2-purple); color: var(--cm2-purple); }
.cm2-preview-desc {
  font-size: 0.82rem;
  color: var(--cm2-text2);
  line-height: 1.65;
  margin-bottom: 14px;
}
.cm2-show-more {
  color: var(--cm2-purple);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8rem;
}
.cm2-details-section { padding: 14px 18px; border-top: 1px solid var(--cm2-border); }
.cm2-details-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cm2-text1);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.cm2-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  gap: 10px;
}
.cm2-detail-row:last-child { border-bottom: none; }
.cm2-detail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--cm2-text2);
  flex-shrink: 0;
}
.cm2-detail-label-icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cm2-text3);
  flex-shrink: 0;
}
.cm2-detail-val {
  font-size: 0.78rem;
  color: var(--cm2-text1);
  font-weight: 500;
  text-align: right;
  min-width: 0;
  word-break: break-word;
}
.cm2-detail-uploader {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--cm2-text1);
  font-weight: 500;
}
.cm2-uploader-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cm2-purple), var(--cm2-purple2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.cm2-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 20px;
  border-top: 1px solid var(--cm2-border);
}
.cm2-edit-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--cm2-purple), var(--cm2-purple2));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.075);
}
.cm2-edit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.cm2-action-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--cm2-border);
  background: var(--cm2-glass);
  color: var(--cm2-text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.18s;
  font-family: inherit;
}
.cm2-action-icon-btn:hover { background: var(--cm2-bg3); color: var(--cm2-text1); }
.cm2-action-icon-btn.del:hover { background: rgba(239,68,68,0.12); color: #f87171; border-color: rgba(239,68,68,0.3); }

/* Upload panel inside cm2 */
.cm2-upload-panel {
  flex: 1;
  padding: 24px 28px;
  background: var(--cm2-bg0);
  overflow-y: auto;
}
.cm2-upload-grid {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr);
  gap: 20px;
  max-width: 900px;
}
.cm2-upload-card {
  background: var(--cm2-glass);
  border: 1px solid var(--cm2-border);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 0;
}
.cm2-upload-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cm2-text1);
}
.cm2-upload-zone {
  border: 2px dashed rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  background: rgba(var(--accent-rgb), 0.04);
  transition: all 0.2s;
  position: relative;
  margin-bottom: 16px;
}
.cm2-upload-zone:hover, .cm2-upload-zone.dragover {
  border-color: var(--cm2-purple);
  background: rgba(var(--accent-rgb), 0.1);
}
.cm2-form-group { margin-bottom: 12px; }
.cm2-form-group label {
  display: block;
  font-size: 0.78rem;
  color: var(--cm2-text2);
  margin-bottom: 6px;
  font-weight: 600;
}
.cm2-form-group input,
.cm2-form-group textarea {
  width: 100%;
  background: var(--cm2-bg2);
  border: 1px solid var(--cm2-border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--cm2-text1);
  font-size: 0.85rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
.cm2-form-group input:focus,
.cm2-form-group textarea:focus { border-color: var(--cm2-purple); }

/* Section label */
.cm2-section-heading {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cm2-text2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 20px 6px;
}

/* Empty state */
.cm2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  gap: 12px;
  color: var(--cm2-text2);
}
.cm2-empty-icon { font-size: 3.5rem; opacity: 0.3; }
.cm2-empty-title { font-size: 1.1rem; font-weight: 700; }
.cm2-empty-sub { font-size: 0.85rem; color: var(--cm2-text3); max-width: 340px; line-height: 1.6; }

/* Link bar */
.cm2-link-bar {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.cm2-link-bar input {
  flex: 1;
  background: var(--cm2-bg2);
  border: 1px solid var(--cm2-border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--cm2-text1);
  font-size: 0.83rem;
  outline: none;
  font-family: inherit;
}
.cm2-add-link-btn {
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--cm2-purple), var(--cm2-purple2));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1100px) {
  .cm2-preview-panel { width: 300px; }
  .cm2-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cm2-preview-panel { display: none; }
  .cm2-stats-row { grid-template-columns: repeat(2, 1fr); }
  .cm2-header { flex-wrap: wrap; gap: 12px; }
  .cm2-header-center { order: 3; width: 100%; max-width: none; }
}
@media (max-width: 600px) {
  .cm2-stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
  .cm2-header { padding: 14px; }
  .cm2-content-list { padding: 10px; }
  .cm2-row-thumb { width: 54px; height: 54px; }
  .cm2-row-meta { display: none; }
  .cm2-tabs-bar { padding: 0 14px; }
  .cm2-filter-bar { padding: 10px 14px; }
}

/* ═══════════════════════════════════════════════════════════
   TI2 — Teaching Intelligence v2 (Carousel + Neural Mesh)
   ═══════════════════════════════════════════════════════════ */
.ti2-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.03), transparent), var(--surface) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.25) !important;
  border-radius: 16px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.05), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  transition: all 0.3s ease;
}
.ti2-banner:hover {
  border-color: rgba(var(--accent-rgb), 0.40) !important;
  box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.10), 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Pulsing AI badge */
.ti2-badge {
  animation: ti2-badge-glow 3s ease-in-out infinite alternate;
}
@keyframes ti2-badge-glow {
  0% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.6)); }
  100% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.9)); }
}

/* Data waves moving */
.ti2-wave-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ti2-wave-svg {
  width: 100%;
  height: 100%;
}
.ti2-wave-p1 {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: ti2-wave-dash 12s linear infinite;
}
.ti2-wave-p2 {
  stroke-dasharray: 150;
  stroke-dashoffset: -150;
  animation: ti2-wave-dash-reverse 8s linear infinite;
}
@keyframes ti2-wave-dash {
  to { stroke-dashoffset: 0; }
}
@keyframes ti2-wave-dash-reverse {
  to { stroke-dashoffset: 0; }
}

/* AI Engine active badge */
.ti2-engine-badge {
  position: absolute;
  top: 14px;
  right: 140px; /* Left of the View Insights button */
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent-orange-light, var(--accent2));
  letter-spacing: 0.05em;
  z-index: 2;
}
.ti2-engine-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-orange-light, var(--accent2));
  box-shadow: 0 0 6px var(--accent-orange-light, var(--accent2));
  animation: ti2-dot-pulse 1.8s infinite;
}
@keyframes ti2-dot-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Particles */
.ti2-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ti2-particle {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(var(--accent-rgb), 0.4);
  border-radius: 50%;
  animation: ti2-particle-drift 6s ease-in-out infinite;
}
.ti2-particle.p-1 { left: 10%; top: 20%; animation-delay: 0s; }
.ti2-particle.p-2 { left: 30%; top: 70%; animation-delay: 1.5s; }
.ti2-particle.p-3 { left: 55%; top: 30%; animation-delay: 3s; }
.ti2-particle.p-4 { left: 75%; top: 80%; animation-delay: 0.5s; }
.ti2-particle.p-5 { left: 85%; top: 15%; animation-delay: 2.2s; }
.ti2-particle.p-6 { left: 45%; top: 50%; animation-delay: 4.1s; }

@keyframes ti2-particle-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.08; }
  50% { transform: translate(10px, -10px); opacity: 0.2; }
}

.ti2-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.03), transparent), var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.20);
  border-radius: 16px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  min-height: 100px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25);
}
.ti2-neural-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
}
.ti2-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.ti2-glow-orb.a {
  width: 260px; height: 260px;
  top: -80px; right: 120px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.05) 0%, transparent 70%);
  animation: ti2-orb-float 7s ease-in-out infinite alternate;
}
.ti2-glow-orb.b {
  width: 180px; height: 180px;
  bottom: -60px; left: 80px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.04) 0%, transparent 70%);
  animation: ti2-orb-float 9s ease-in-out infinite alternate-reverse;
}
@keyframes ti2-orb-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(12px, -8px) scale(1.05); }
  100% { transform: translate(-8px, 6px) scale(0.97); }
}
.ti2-badge {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.05));
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.075);
  animation: ti2-badge-pulse 3s ease-in-out infinite;
}
@keyframes ti2-badge-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.04); }
  50%       { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.08); }
}
.ti2-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.ti2-title {
  font-size: 1rem;
  font-weight: 800;
  color: #FFF8E7;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.ti2-subtitle {
  font-size: 0.74rem;
  color: rgba(255,248,231,0.55);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.ti2-carousel {
  position: relative;
  min-height: 46px;
  overflow: hidden;
}
.ti2-slide {
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ti2-slide.ti2-fading {
  opacity: 0;
  transform: translateY(6px);
}
.ti2-slide.ti2-entering {
  animation: ti2-slide-in 0.4s ease both;
}
@keyframes ti2-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ti2-insight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  color: rgba(255,248,231,0.88);
  line-height: 1.45;
  font-weight: 450;
}
.ti2-icon {
  font-size: 1rem;
  flex-shrink: 0;
  animation: ti2-icon-pulse 2.5s ease-in-out infinite;
  display: inline-block;
}
@keyframes ti2-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}
.ti2-dots {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}
.ti2-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.3);
  transition: all 0.3s ease;
}
.ti2-dot.active {
  width: 14px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.9);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.15);
}
.ti2-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.ti2-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.2));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--accent2);
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: all 0.22s ease;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.037);
}
.ti2-view-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.35));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.087);
  transform: translateY(-1px);
  color: var(--accent2);
}

/* ═══════════════════════════════════════════════════════════
   HS2 — Hero Status Avatar v2
   ═══════════════════════════════════════════════════════════ */
.hs2-avatar-ring {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, #050505, var(--accent2));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.03);
  animation: hs2-ring-glow 3s ease-in-out infinite;
  overflow: hidden;
}
.hs2-avatar-ring img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.hs2-initials {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--accent2);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.045);
}
@keyframes hs2-ring-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.015), 0 0 18px rgba(var(--accent-rgb), 0.011); }
  50%       { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.026), 0 0 30px rgba(var(--accent-rgb), 0.018); }
}
.hs2-avatar-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.1), transparent, rgba(var(--accent-rgb), 0.1)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: hs2-border-spin 4s linear infinite;
  pointer-events: none;
}
@keyframes hs2-border-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   SC2 — Share Code Panel v2
   ═══════════════════════════════════════════════════════════ */
.sc2-section {
  position: relative;
}
.sc2-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.sc2-trigger:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); }
.sc2-trigger.open { border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sc2-panel {
  background: linear-gradient(135deg, #050505, #0B0B0B);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 16px;
  margin-bottom: 8px;
  animation: sc2-expand 0.22s ease;
}
@keyframes sc2-expand {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sc2-code-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.sc2-code-label {
  font-size: 0.72rem;
  color: rgba(148,163,184,0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sc2-code-value {
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent2);
  letter-spacing: 3px;
  flex: 1;
}
.sc2-btns-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sc2-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 60px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.sc2-share-btn:hover { transform: translateY(-3px); }
.sc2-share-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}
.sc2-share-btn:hover::before { opacity: 1; }
.sc2-share-btn.whatsapp { border-color: rgba(37,211,102,0.3); }
.sc2-share-btn.whatsapp::before { background: rgba(37,211,102,0.12); }
.sc2-share-btn.whatsapp:hover { box-shadow: 0 0 16px rgba(37,211,102,0.3); border-color: rgba(37,211,102,0.6); }
.sc2-share-btn.telegram { border-color: rgba(255, 255, 255, 0.08); }
.sc2-share-btn.telegram::before { background: rgba(var(--accent-rgb), 0.12); }
.sc2-share-btn.telegram:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.075); border-color: rgba(var(--accent-rgb), 0.15); }
.sc2-share-btn.instagram { border-color: rgba(225,48,108,0.3); }
.sc2-share-btn.instagram::before { background: rgba(225,48,108,0.1); }
.sc2-share-btn.instagram:hover { box-shadow: 0 0 16px rgba(225,48,108,0.25); border-color: rgba(225,48,108,0.5); }
.sc2-share-btn.copylink { border-color: rgba(255, 255, 255, 0.08); }
.sc2-share-btn.copylink::before { background: rgba(var(--accent-rgb), 0.12); }
.sc2-share-btn.copylink:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.075); border-color: rgba(var(--accent-rgb), 0.15); }
.sc2-share-btn.twitter { border-color: rgba(255, 255, 255, 0.08); }
.sc2-share-btn.twitter::before { background: rgba(var(--accent-rgb), 0.12); }
.sc2-share-btn.twitter:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.075); border-color: rgba(var(--accent-rgb), 0.15); }
.sc2-share-btn.facebook { border-color: rgba(255, 255, 255, 0.08); }
.sc2-share-btn.facebook::before { background: rgba(var(--accent-rgb), 0.12); }
.sc2-share-btn.facebook:hover { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.075); border-color: rgba(var(--accent-rgb), 0.15); }
.sc2-btn-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.sc2-share-btn:hover .sc2-btn-icon svg {
  transform: scale(1.12) translateY(-1px);
  filter: drop-shadow(0 0 6px currentColor);
}
@media (max-width: 600px) {
  .sc2-btn-icon svg { width: 19px; height: 19px; }
}
.sc2-btn-icon {
  font-size: 1.3rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.sc2-btn-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(203,213,225,0.8);
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.sc2-copied-toast {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,197,94,0.9);
  border-radius: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  animation: sc2-toast-pop 1.8s ease forwards;
}
@keyframes sc2-toast-pop {
  0%   { opacity: 0; transform: scale(0.85); }
  15%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   TM2 — Test Mode Page v2 (Futuristic Redesign)
   ═══════════════════════════════════════════════════════════ */
.tm2-page {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

/* Animated mesh background */
.tm2-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(var(--accent-rgb), 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(var(--accent-rgb), 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: tm2-bg-shift 12s ease-in-out infinite alternate;
}
@keyframes tm2-bg-shift {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.03) translateX(12px); }
}
.tm2-page > * { position: relative; z-index: 1; }

/* Header */
.tm2-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.tm2-header-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.3));
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.062);
  flex-shrink: 0;
}
.tm2-header-info { flex: 1; }
.tm2-header-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.tm2-header-sub {
  font-size: 0.8rem;
  color: rgba(148,163,184,0.8);
}
.tm2-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.22s ease;
  box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.1), 0 4px 16px rgba(0,0,0,0.3);
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.tm2-launch-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.15), 0 4px 20px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}
.tm2-launch-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Two-column grid */
.tm2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .tm2-grid { grid-template-columns: 1fr; }
}

/* Futuristic card base */
.tm2-card {
  background: linear-gradient(135deg, rgba(11, 11, 11, 0.97) 0%, rgba(11, 11, 11, 0.97) 50%, rgba(11, 11, 11, 0.97) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(12px);
}
.tm2-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.025), 0 8px 32px rgba(0,0,0,0.35);
}
.tm2-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.6), rgba(var(--accent-rgb), 0.4), transparent);
  opacity: 0.7;
}
.tm2-card-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Card headers */
.tm2-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.tm2-card-icon {
  font-size: 1.2rem;
}
.tm2-card-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -0.01em;
}
.tm2-ai-badge {
  padding: 2px 8px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.3));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent2);
  letter-spacing: 0.05em;
}

/* Test Settings inputs */
.tm2-input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tm2-input:focus {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.03);
}
.tm2-input::placeholder { color: rgba(148,163,184,0.5); }
.tm2-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(148,163,184,0.8);
  margin-bottom: 6px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Duration pills */
.tm2-duration-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tm2-pill {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(203,213,225,0.75);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
}
.tm2-pill:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); color: var(--accent2); }
.tm2-pill.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.3));
  border-color: rgba(255, 255, 255, 0.08);
  color: #e0e7ff;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.075);
}
.tm2-pill-custom {
  width: 72px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(203,213,225,0.75);
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  text-align: center;
  transition: border-color 0.18s;
}
.tm2-pill-custom:focus { border-color: rgba(255, 255, 255, 0.08); }

/* Stats summary row */
.tm2-stats-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-top: 16px;
}
.tm2-stat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: rgba(203,213,225,0.85);
}
.tm2-stat-chip strong { color: #e2e8f0; font-weight: 700; }

/* Toggle row */
.tm2-toggles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.tm2-toggle-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(74,222,128,0.85);
}

/* AI Generator panel */
.tm2-ai-panel {
  position: relative;
}
.tm2-type-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tm2-type-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(203,213,225,0.75);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
}
.tm2-type-btn:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); color: var(--accent2); }
.tm2-type-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.087);
}
.tm2-gen-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.22s ease;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.087);
  width: 100%;
  justify-content: center;
  margin-top: 14px;
}
.tm2-gen-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 32px rgba(var(--accent-rgb), 0.138);
  transform: translateY(-1px);
}
.tm2-gen-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tm2-ai-illustration {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  opacity: 0.15;
  pointer-events: none;
  font-size: 5rem;
  text-align: center;
  filter: blur(1px);
}

/* Add Question Directly */
.tm2-add-q-bar {
  background: linear-gradient(135deg, rgba(11, 11, 11, 0.97) 0%, rgba(11, 11, 11, 0.97) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.tm2-add-q-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
.tm2-add-q-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}
.tm2-add-q-plus {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.tm2-add-q-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #e2e8f0;
  flex: 1;
}
.tm2-add-q-marks {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm2-marks-select {
  padding: 6px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.tm2-add-q-btn {
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  border: none;
  border-radius: 9px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.075);
  white-space: nowrap;
}
.tm2-add-q-btn:hover { box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.125); transform: translateY(-1px); }
.tm2-add-q-input {
  flex: 1;
  padding: 9px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  color: #e2e8f0;
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.tm2-add-q-input:focus { border-color: rgba(255, 255, 255, 0.08); }
.tm2-add-q-input::placeholder { color: rgba(148,163,184,0.45); }

/* Questions List */
.tm2-questions-card {
  background: linear-gradient(135deg, rgba(11, 11, 11, 0.97) 0%, rgba(11, 11, 11, 0.97) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.tm2-questions-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0.4), transparent);
}
.tm2-q-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tm2-q-title-text {
  font-size: 0.95rem;
  font-weight: 800;
  color: #e2e8f0;
  flex: 1;
}
.tm2-q-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.3));
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent2);
}
.tm2-select-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent2);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
}
.tm2-select-all-btn:hover { background: rgba(var(--accent-rgb), 0.35); border-color: rgba(255, 255, 255, 0.08); }
.tm2-q-list { padding: 12px 16px; }
.tm2-q-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.tm2-q-row:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.07);
  transform: translateX(2px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.tm2-q-row.selected {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(var(--accent-rgb), 0.1);
}
.tm2-q-drag {
  color: rgba(var(--accent-rgb), 0.35);
  font-size: 0.85rem;
  cursor: grab;
  flex-shrink: 0;
  line-height: 1;
}
.tm2-q-checkbox {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.tm2-q-checkbox.checked {
  background: linear-gradient(135deg, var(--accent), var(--accent));
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.1);
}
.tm2-q-num {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(var(--accent-rgb), 0.85);
  flex-shrink: 0;
}
.tm2-q-type-badge {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.tm2-q-type-badge.mcq {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tm2-q-type-badge.short {
  background: rgba(234,179,8,0.15);
  color: #fde68a;
  border: 1px solid rgba(234,179,8,0.25);
}
.tm2-q-type-badge.long {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tm2-q-text {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(226,232,240,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.tm2-q-marks-tag {
  font-size: 0.75rem;
  color: rgba(148,163,184,0.7);
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 500;
}
.tm2-q-footer {
  padding: 10px 22px 14px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(148,163,184,0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Key section */
.tm2-api-section {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.tm2-api-label {
  font-size: 0.76rem;
  color: rgba(var(--accent-rgb), 0.85);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.tm2-api-note {
  font-size: 0.73rem;
  color: rgba(148,163,184,0.65);
  line-height: 1.4;
  margin-top: 6px;
}

/* ── Mobile responsive for new components ── */
@media (max-width: 768px) {
  .ti2-banner { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .ti2-badge { width: 44px; height: 44px; font-size: 1.2rem; }
  .ti2-right { width: 100%; align-items: flex-start; }
  .hs2-avatar-ring { width: 60px; height: 60px; }
  .hs2-initials { font-size: 1.35rem; }
  .sc2-btns-row { gap: 6px; }
  .sc2-share-btn { min-width: 52px; padding: 8px 6px; }
  .tm2-page { padding: 16px; }
  .tm2-header { flex-wrap: wrap; gap: 12px; }
  .tm2-header-title { font-size: 1.15rem; }
  .tm2-launch-btn { width: 100%; justify-content: center; }
  .tm2-grid { grid-template-columns: 1fr; gap: 14px; }
  .tm2-duration-row { gap: 6px; }
  .tm2-pill { padding: 6px 10px; font-size: 0.75rem; }
  .tm2-add-q-bar { padding: 14px; }
  .tm2-q-row { flex-wrap: nowrap; gap: 8px; }
  .tm2-q-text { font-size: 0.8rem; }
  .tm2-q-drag { display: none; }
  .tm2-q-marks-tag { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   NEW PREMIUM TASK PAGE REDESIGN
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   TASK LIST PAGE  —  PREMIUM v3  (Apple × Linear × Vercel)
   All class names unchanged; only visual enhancement.
═══════════════════════════════════════════════════════════════ */

/* ---------- keyframes ---------- */
@keyframes tk2-border-spin {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes tk2-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tk2-float-icon {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes tk2-glow-pulse {
  0%,100% { opacity: 0.18; }
  50%      { opacity: 0.38; }
}

/* ---------- page shell ---------- */
.tk2-page {
  padding: 28px 28px 40px;
  max-width: 100%;
  background:
    radial-gradient(ellipse 70% 40% at 5% 0%, rgba(var(--accent-rgb), 0.055) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 95% 100%, rgba(var(--accent-rgb), 0.04) 0%, transparent 55%);
  min-height: calc(100vh - 80px);
}

/* ---------- header ---------- */
.tk2-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; flex-wrap: wrap; gap: 14px;
}
.tk2-header-left { display: flex; align-items: center; gap: 18px; }

.tk2-breadcrumb {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8rem; color: rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 100px;
  padding: 5px 14px;
  backdrop-filter: blur(8px);
}
.tk2-breadcrumb-sep { opacity: 0.35; }
.tk2-breadcrumb-current { color: var(--accent2); font-weight: 700; }

.tk2-title {
  font-size: 1.45rem; font-weight: 800;
  background: linear-gradient(135deg, #f0f4ff 30%, var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.tk2-header-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* primary CTA — orange gradient pill */
.tk2-btn-ai {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
  border: none; border-radius: 100px;
  color: #fff; font-weight: 700; font-size: 0.84rem;
  cursor: pointer; font-family: var(--db-font);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.30), 0 0 0 0 rgba(var(--accent-rgb), 0);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  letter-spacing: 0.01em;
}
.tk2-btn-ai:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.42), 0 0 0 4px rgba(var(--accent-rgb), 0.10);
}
.tk2-btn-ai:active { transform: translateY(0) scale(0.98); }

/* secondary pill — dark glass */
.tk2-btn-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  color: rgba(226,232,240,0.9); font-weight: 600; font-size: 0.84rem;
  cursor: pointer; font-family: var(--db-font);
  backdrop-filter: blur(10px);
  transition: all 0.18s ease;
}
.tk2-btn-secondary:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.30);
  color: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.12);
}
.tk2-btn-secondary:disabled {
  opacity: 0.35; cursor: not-allowed; transform: none;
}

/* ---------- stat cards ---------- */
.tk2-stats-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 16px; margin-bottom: 26px;
}

/* gradient-border wrapper technique */
.tk2-stat-card {
  position: relative; border-radius: 22px; padding: 22px 20px 20px;
  background: rgba(14,14,16,0.85);
  backdrop-filter: blur(18px);
  overflow: hidden;
  cursor: default;
  animation: tk2-card-in 0.35s ease both;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  /* subtle glass border via box-shadow + pseudo */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.075),
    0 4px 28px rgba(0,0,0,0.35);
}
.tk2-stat-card:nth-child(1) { animation-delay: 0.04s; }
.tk2-stat-card:nth-child(2) { animation-delay: 0.09s; }
.tk2-stat-card:nth-child(3) { animation-delay: 0.14s; }
.tk2-stat-card:nth-child(4) { animation-delay: 0.19s; }

/* animated gradient top-line */
.tk2-stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.8) 30%,
    rgba(var(--accent-rgb), 1) 50%,
    rgba(var(--accent-rgb), 0.8) 70%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.22s;
}
/* bottom glow layer */
.tk2-stat-card::after {
  content: '';
  position: absolute; bottom: -40px; right: -20px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, transparent 70%);
  animation: tk2-glow-pulse 3s ease infinite;
  pointer-events: none;
}
.tk2-stat-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.22),
    0 10px 40px rgba(0,0,0,0.4),
    0 4px 16px rgba(var(--accent-rgb), 0.10);
}
.tk2-stat-card:hover::before { opacity: 1; }

.tk2-stat-label {
  font-size: 0.72rem; color: rgba(148,163,184,0.65);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.tk2-stat-val {
  font-size: 2.6rem; font-weight: 900; line-height: 1; margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.tk2-stat-sub {
  font-size: 0.72rem; color: rgba(148,163,184,0.50); font-weight: 500;
}

/* icon badge — circular glow */
.tk2-stat-icon {
  position: absolute; top: 18px; right: 18px;
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.12);
  animation: tk2-float-icon 4s ease infinite;
}
.tk2-stat-card:nth-child(2) .tk2-stat-icon {
  background: rgba(167,139,250,0.10);
  border-color: rgba(167,139,250,0.18);
  box-shadow: 0 2px 12px rgba(167,139,250,0.10);
  animation-delay: 0.8s;
}
.tk2-stat-card:nth-child(3) .tk2-stat-icon {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.18);
  box-shadow: 0 2px 12px rgba(251,191,36,0.10);
  animation-delay: 1.4s;
}
.tk2-stat-card:nth-child(4) .tk2-stat-icon {
  background: rgba(52,211,153,0.10);
  border-color: rgba(52,211,153,0.18);
  box-shadow: 0 2px 12px rgba(52,211,153,0.10);
  animation-delay: 2s;
}

/* ---------- filters toolbar ---------- */
.tk2-filters-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; flex-wrap: wrap;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 10px 14px;
  backdrop-filter: blur(12px);
}

.tk2-select {
  padding: 9px 16px; 
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 100px;
  color: #e2e8f0; font-size: 0.83rem;
  font-family: var(--db-font); outline: none; cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  min-width: 140px;
}
.tk2-select:hover, .tk2-select:focus {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.07);
}

.tk2-search-wrap { position: relative; flex: 1; min-width: 180px; }
.tk2-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(148,163,184,0.45); font-size: 0.85rem; pointer-events: none;
}
.tk2-search-input {
  width: 100%; padding: 9px 16px 9px 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 100px;
  color: #e2e8f0; font-size: 0.84rem;
  font-family: var(--db-font); outline: none; box-sizing: border-box;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.tk2-search-input:focus {
  border-color: rgba(var(--accent-rgb), 0.40);
  background: rgba(var(--accent-rgb), 0.06);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}
.tk2-search-input::placeholder { color: rgba(148,163,184,0.40); }

.tk2-filter-btn {
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  color: rgba(148,163,184,0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.9rem; transition: all 0.18s;
}
.tk2-filter-btn:hover {
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent2);
  border-color: rgba(var(--accent-rgb), 0.28);
}

/* ---------- task rows ---------- */
.tk2-task-row {
  background: rgba(14,14,18,0.80);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 16px;
  backdrop-filter: blur(14px);
  transition: transform 0.20s ease, box-shadow 0.20s ease, border-left-color 0.20s ease, border-color 0.20s ease;
  cursor: pointer;
  flex-wrap: nowrap;
}
.tk2-task-row:hover {
  border-left-color: var(--accent2);
  border-color: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(var(--accent-rgb), 0.08);
  transform: translateY(-2px) translateX(1px);
}
.tk2-task-row.easy   { border-left-color: rgba(34,197,94,0.65); }
.tk2-task-row.medium { border-left-color: rgba(234,179,8,0.65); }
.tk2-task-row.hard   { border-left-color: rgba(239,68,68,0.65); }

/* task number badge */
.tk2-task-num {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.76rem; font-weight: 800; color: var(--accent2);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.10);
}
.tk2-task-info { flex: 1; min-width: 0; }
.tk2-task-q {
  font-size: 0.92rem; font-weight: 600; color: #e8edf5;
  margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.005em;
}
.tk2-task-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tk2-tag { padding: 3px 10px; border-radius: 100px; font-size: 0.7rem; font-weight: 700; border: 1px solid transparent; letter-spacing: 0.02em; }
.tk2-tag-mcq    { background: rgba(var(--accent-rgb), 0.14); color: #fbbf24; border-color: rgba(var(--accent-rgb), 0.25); }
.tk2-tag-short  { background: rgba(251,191,36,0.10); color: #fcd34d; border-color: rgba(251,191,36,0.22); }
.tk2-tag-long   { background: rgba(52,211,153,0.10); color: #6ee7b7; border-color: rgba(52,211,153,0.22); }
.tk2-tag-coding { background: rgba(167,139,250,0.12); color: #c4b5fd; border-color: rgba(167,139,250,0.25); }
.tk2-tag-easy   { background: rgba(34,197,94,0.10); color: #4ade80; border-color: rgba(34,197,94,0.22); }
.tk2-tag-medium { background: rgba(234,179,8,0.10); color: #fbbf24; border-color: rgba(234,179,8,0.22); }
.tk2-tag-hard   { background: rgba(239,68,68,0.10); color: #f87171; border-color: rgba(239,68,68,0.22); }
.tk2-tag-class  { background: rgba(var(--accent-rgb), 0.10); color: var(--accent2); border-color: rgba(var(--accent-rgb), 0.20); }

.tk2-task-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.tk2-task-score { font-size: 1.1rem; font-weight: 800; color: #4ade80; }
.tk2-task-score-label { font-size: 0.66rem; color: rgba(148,163,184,0.50); }
.tk2-task-attempts { font-size: 0.73rem; color: rgba(148,163,184,0.55); }

/* ---------- task action buttons ---------- */
.tk2-task-actions {
  display: flex; gap: 7px; flex-shrink: 0; flex-wrap: nowrap;
  align-items: center; justify-content: flex-end;
}
.tk2-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 13px; border-radius: 100px; height: 32px;
  font-size: 0.74rem; font-weight: 700; cursor: pointer;
  font-family: var(--db-font); white-space: nowrap; line-height: 1;
  background: rgba(var(--accent-rgb), 0.10); color: var(--accent2);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  backdrop-filter: blur(8px);
  transition: background 0.16s ease, border-color 0.16s ease,
              transform 0.16s ease, box-shadow 0.16s ease;
  letter-spacing: 0.01em;
}
.tk2-action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: rgba(var(--accent-rgb), 0.20);
  border-color: rgba(var(--accent-rgb), 0.40);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.18);
}
.tk2-action-btn.send {
  background: rgba(34,197,94,0.10); color: #4ade80;
  border: 1px solid rgba(34,197,94,0.22);
}
.tk2-action-btn.send:hover:not(:disabled) {
  background: rgba(34,197,94,0.20);
  border-color: rgba(34,197,94,0.40);
  box-shadow: 0 4px 16px rgba(34,197,94,0.18);
}
.tk2-action-btn.del {
  background: rgba(239,68,68,0.08); color: #f87171;
  border: 1px solid rgba(239,68,68,0.18); padding: 6px 11px;
}
.tk2-action-btn.del:hover:not(:disabled) {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.38);
  box-shadow: 0 4px 16px rgba(239,68,68,0.18);
}
.tk2-action-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; }

.tk2-action-more {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(148,163,184,0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; transition: all 0.18s;
}
.tk2-action-more:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent2); border-color: rgba(var(--accent-rgb), 0.28); }

/* ---------- pagination ---------- */
.tk2-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
.tk2-page-btn {
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(148,163,184,0.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.84rem; font-weight: 700;
  transition: all 0.18s; font-family: var(--db-font);
}
.tk2-page-btn:hover { background: rgba(var(--accent-rgb), 0.14); color: var(--accent2); border-color: rgba(var(--accent-rgb), 0.30); transform: translateY(-1px); }
.tk2-page-btn.active {
  background: linear-gradient(135deg,var(--accent2),var(--accent)); color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.30);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .tk2-stats-row { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .tk2-task-actions { gap: 4px; }
  .tk2-action-btn { padding: 5px 9px; font-size: 0.7rem; }
}
@media (max-width: 700px) {
  .tk2-task-row { flex-wrap: wrap; border-radius: 14px; }
  .tk2-task-actions { width: 100%; justify-content: flex-start; margin-top: 6px; }
  .tk2-stats-row { grid-template-columns: 1fr 1fr; }
  .tk2-filters-row { flex-direction: column; align-items: stretch; border-radius: 14px; }
  .tk2-select { min-width: 100%; border-radius: 12px; }
  .tk2-search-input { border-radius: 12px; }
}

/* ═══ EMPTY STATE ═══ */
@keyframes tk2-particle-float {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { transform: translateY(-90px) scale(0.4); opacity: 0; }
}
@keyframes tk2-ring-pulse {
  0%,100% { transform: scale(1); opacity: 0.25; }
  50%      { transform: scale(1.12); opacity: 0.45; }
}
@keyframes tk2-empty-icon-bob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

.tk2-empty-state {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 420px; padding: 60px 32px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--accent-rgb), 0.06) 0%, transparent 70%),
    rgba(14,14,18,0.60);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  text-align: center;
  margin-top: 4px;
}

/* floating particles */
.tk2-empty-particles { position: absolute; inset: 0; pointer-events: none; }
.tk2-empty-particle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.5);
  animation: tk2-particle-float 4s ease-in infinite;
}
.tk2-empty-particle:nth-child(1) { left: 20%; bottom: 20%; animation-delay: 0s; width: 4px; height: 4px; }
.tk2-empty-particle:nth-child(2) { left: 40%; bottom: 15%; animation-delay: 0.8s; background: rgba(251,191,36,0.4); }
.tk2-empty-particle:nth-child(3) { left: 60%; bottom: 22%; animation-delay: 1.6s; width: 5px; height: 5px; }
.tk2-empty-particle:nth-child(4) { left: 75%; bottom: 18%; animation-delay: 0.4s; width: 3px; height: 3px; background: rgba(var(--accent-rgb), 0.5); }
.tk2-empty-particle:nth-child(5) { left: 55%; bottom: 10%; animation-delay: 2.2s; background: rgba(var(--accent-rgb), 0.35); }
.tk2-empty-particle:nth-child(6) { left: 30%; bottom: 12%; animation-delay: 1.2s; width: 4px; height: 4px; }

/* icon */
.tk2-empty-icon-wrap { position: relative; margin-bottom: 28px; }
.tk2-empty-icon-ring {
  position: absolute; inset: -20px; border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), 0.22);
  animation: tk2-ring-pulse 3s ease infinite;
}
.tk2-empty-icon {
  width: 90px; height: 90px; border-radius: 28px;
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.12), 0 8px 24px rgba(0,0,0,0.30);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem;
  animation: tk2-empty-icon-bob 3s ease infinite;
}

.tk2-empty-title {
  font-size: 1.75rem; font-weight: 800; color: #f0f4ff;
  margin: 0 0 12px; letter-spacing: -0.02em;
}
.tk2-empty-sub {
  font-size: 0.88rem; color: rgba(148,163,184,0.65);
  max-width: 360px; line-height: 1.6; margin: 0 0 30px;
}
.tk2-empty-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tk2-empty-cta { padding: 12px 28px; font-size: 0.9rem; }

/* ═══ CREATE TASK PAGE ═══ */
.tk2-create-wrap { display: flex; flex-direction: column; gap: 20px; max-width: 680px; }
.tk2-form-section { background: #121212; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 22px; position: relative; overflow: hidden; }
.tk2-form-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,var(--accent2),var(--accent),transparent); }
.tk2-section-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,var(--accent2),var(--accent)); color: #fff; font-size: 0.75rem; font-weight: 800; margin-right: 10px; flex-shrink: 0; }
.tk2-section-heading { display: flex; align-items: center; font-size: 0.9rem; font-weight: 700; color: #e2e8f0; margin-bottom: 16px; }
/* Task type cards */
.tk2-type-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.tk2-type-card { padding: 16px 12px; border: 2px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(11, 11, 11, 0.7); cursor: pointer; text-align: center; transition: all 0.2s; position: relative; overflow: hidden; }
.tk2-type-card:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(var(--accent-rgb), 0.35); transform: translateY(-2px); }
.tk2-type-card.active { border-color: var(--accent2); background: rgba(var(--accent-rgb), 0.03); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.037), 0 8px 24px rgba(var(--accent-rgb), 0.045); }
.tk2-type-card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 10px; }
.tk2-type-card-icon.mcq { background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.25),rgba(var(--accent-rgb), 0.25)); }
.tk2-type-card-icon.short { background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.2),rgba(251,191,36,0.2)); }
.tk2-type-card-icon.long { background: linear-gradient(135deg,rgba(16,185,129,0.2),rgba(5,150,105,0.2)); }
.tk2-type-card-icon.coding { background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.25),rgba(var(--accent-rgb), 0.25)); }
.tk2-type-card-name { font-size: 0.82rem; font-weight: 700; color: #e2e8f0; margin-bottom: 4px; }
.tk2-type-card-desc { font-size: 0.68rem; color: rgba(148,163,184,0.6); line-height: 1.3; }
.tk2-type-card.active .tk2-type-card-name { color: var(--accent2); }
/* Form fields */
.tk2-field-label { font-size: 0.78rem; font-weight: 700; color: rgba(148,163,184,0.8); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.tk2-field-required { color: #f87171; }
.tk2-input { width: 100%; padding: 11px 14px; background: rgba(11, 11, 11, .8); border: 1.5px solid rgba(var(--accent-rgb), 0.045); border-radius: 10px; color: #e2e8f0; font-size: 0.87rem; font-family: var(--db-font); outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.tk2-input:focus { border-color: rgba(var(--accent-rgb), 0.138); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.025); }
.tk2-input::placeholder { color: rgba(148,163,184,0.35); }
.tk2-textarea { resize: vertical; min-height: 80px; }
.tk2-ai-btn-inline { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 5px 10px; background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.35),rgba(var(--accent-rgb), 0.35)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; color: var(--accent2); font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.tk2-option-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tk2-option-radio { width: 18px; height: 18px; flex-shrink: 0; accent-color: #22c55e; cursor: pointer; }
.tk2-option-letter { width: 24px; font-size: 0.85rem; font-weight: 700; color: rgba(148,163,184,0.6); flex-shrink: 0; }
.tk2-option-del { width: 28px; height: 28px; border-radius: 7px; background: none; border: none; color: rgba(239,68,68,0.5); cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.tk2-option-del:hover { background: rgba(239,68,68,0.1); color: #f87171; }
.tk2-correct-hint { font-size: 0.72rem; color: #f87171; margin-top: 4px; }
/* Row with two cols */
.tk2-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Difficulty pills */
.tk2-difficulty-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tk2-diff-pill { padding: 7px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: all 0.18s; font-family: var(--db-font); }
.tk2-diff-pill.easy { background: rgba(34,197,94,0.08); color: #4ade80; border-color: rgba(34,197,94,0.2); }
.tk2-diff-pill.easy.active, .tk2-diff-pill.easy:hover { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.45); }
.tk2-diff-pill.medium { background: rgba(234,179,8,0.08); color: #fbbf24; border-color: rgba(234,179,8,0.2); }
.tk2-diff-pill.medium.active, .tk2-diff-pill.medium:hover { background: rgba(234,179,8,0.18); border-color: rgba(234,179,8,0.45); }
.tk2-diff-pill.hard { background: rgba(239,68,68,0.08); color: #f87171; border-color: rgba(239,68,68,0.2); }
.tk2-diff-pill.hard.active, .tk2-diff-pill.hard:hover { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.45); }
/* Timer chips */
.tk2-timer-row { display: flex; gap: 7px; flex-wrap: wrap; }
.tk2-timer-chip { padding: 7px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; cursor: pointer; background: rgba(11, 11, 11, 0.8); border: 1.5px solid rgba(255, 255, 255, 0.08); color: rgba(148,163,184,0.7); transition: all 0.18s; font-family: var(--db-font); }
.tk2-timer-chip.active, .tk2-timer-chip:hover { background: rgba(var(--accent-rgb), 0.35); border-color: rgba(255, 255, 255, 0.08); color: var(--accent2); }
/* Send to buttons */
.tk2-send-to-row { display: flex; gap: 8px; }
.tk2-send-btn { flex: 1; padding: 10px; border-radius: 10px; background: rgba(11, 11, 11, 0.8); border: 2px solid rgba(255, 255, 255, 0.08); color: rgba(148,163,184,0.7); font-size: 0.82rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.18s; font-family: var(--db-font); }
.tk2-send-btn.active, .tk2-send-btn:hover { background: rgba(var(--accent-rgb), 0.35); border-color: var(--accent2); color: var(--accent2); }
/* Hint visibility select */
.tk2-hint-select { width: 100%; padding: 10px 14px; background: rgba(11, 11, 11, .8); border: 1.5px solid rgba(255, 255, 255, 0.08); border-radius: 10px; color: #e2e8f0; font-size: 0.85rem; font-family: var(--db-font); outline: none; cursor: pointer; }
/* Bottom CTA buttons */
.tk2-cta-row { display: flex; gap: 12px; padding-top: 4px; }
.tk2-save-task-btn { flex: 1; padding: 14px; background: linear-gradient(135deg,var(--accent2),var(--accent)); border: none; border-radius: 12px; color: #fff; font-size: 0.95rem; font-weight: 700; cursor: pointer; font-family: var(--db-font); box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.1); transition: all 0.2s; }
.tk2-save-task-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.138); }
.tk2-save-task-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.tk2-save-send-btn { flex: 1; padding: 14px; background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.35),rgba(var(--accent-rgb), 0.35)); border: 2px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: var(--accent2); font-size: 0.95rem; font-weight: 700; cursor: pointer; font-family: var(--db-font); transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tk2-save-send-btn:hover { background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.25),rgba(var(--accent-rgb), 0.25)); }
.tk2-save-draft-btn { padding: 14px 20px; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: rgba(148,163,184,0.7); font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: var(--db-font); transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.tk2-save-draft-btn:hover { background: rgba(255,255,255,0.07); color: #e2e8f0; }
.tk2-reset-btn { width: 44px; height: 44px; border-radius: 10px; background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.2); color: rgba(239,68,68,0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; font-size: 1rem; }
.tk2-reset-btn:hover { background: rgba(239,68,68,0.14); color: #f87171; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CREATE TASK PAGE — FULL REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* Page shell */
.pct-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #09090F;
  font-family: var(--db-font);
  position: relative;
  overflow: hidden;
}
.pct-page::before {
  content: '';
  position: fixed;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(139,92,246,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Header ─── */
.pct-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  gap: 16px;
  flex-wrap: wrap;
}
.pct-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pct-header-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,155,33,0.2), rgba(139,92,246,0.2));
  border: 1px solid rgba(255,155,33,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.pct-header-text {}
.pct-header-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.pct-header-sub {
  font-size: 0.8rem;
  color: #7A8197;
  margin-top: 2px;
}
.pct-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pct-btn-ai {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #FF9B21, #e07800);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--db-font);
  box-shadow: 0 4px 20px rgba(255,155,33,0.35);
  transition: all 0.2s;
  white-space: nowrap;
}
.pct-btn-ai:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(255,155,33,0.45); }
.pct-btn-tpl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #B8C0D4;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--db-font);
  transition: all 0.2s;
  white-space: nowrap;
}
.pct-btn-tpl:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; }

/* ─── Body (two-column) ─── */
.pct-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  padding: 20px 28px 100px;
  overflow-y: auto;
  flex: 1;
  position: relative;
  z-index: 1;
  align-items: start;
}

/* ─── Left column ─── */
.pct-left { display: flex; flex-direction: column; gap: 16px; }

/* ─── Cards (sections) ─── */
.pct-card {
  background: #11131C;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s;
}
.pct-card:hover { border-color: rgba(255,255,255,0.11); }

/* Step heading row */
.pct-step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.pct-step-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(255,155,33,0.14));
  border: 1.5px solid rgba(255,155,33,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #FF9B21;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(255,155,33,0.2);
}
.pct-step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  flex: 1;
}
.pct-step-sub {
  font-size: 0.76rem;
  color: #7A8197;
  margin-top: 1px;
}

/* ─── Task Type Cards ─── */
.pct-type-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
}
.pct-type-card {
  padding: 18px 10px 16px;
  border: 2px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  text-align: center;
  transition: all 0.22s;
  position: relative;
  overflow: hidden;
}
.pct-type-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,155,33,0.06), rgba(139,92,246,0.04));
  opacity: 0;
  transition: opacity 0.22s;
}
.pct-type-card:hover { border-color: rgba(255,155,33,0.35); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.pct-type-card:hover::before { opacity: 1; }
.pct-type-card.active {
  border-color: #FF9B21;
  background: rgba(255,155,33,0.05);
  box-shadow: 0 0 0 3px rgba(255,155,33,0.12), 0 8px 28px rgba(255,155,33,0.12);
}
.pct-type-card.active::before { opacity: 1; }
.pct-type-check {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FF9B21;
  color: #fff;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(255,155,33,0.4);
}
.pct-type-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 10px;
}
.pct-type-icon.mcq { background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(139,92,246,0.1)); }
.pct-type-icon.short { background: linear-gradient(135deg, rgba(255,155,33,0.25), rgba(255,155,33,0.1)); }
.pct-type-icon.long { background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(16,185,129,0.1)); }
.pct-type-icon.coding { background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(59,130,246,0.1)); }
.pct-type-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.pct-type-desc {
  font-size: 0.68rem;
  color: #7A8197;
  line-height: 1.35;
}
.pct-type-card.active .pct-type-name { color: #FF9B21; }

/* ─── Form fields ─── */
.pct-field { margin-bottom: 18px; }
.pct-field:last-child { margin-bottom: 0; }
.pct-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #7A8197;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pct-req { color: #EF4444; }
.pct-input {
  width: 100%;
  padding: 12px 16px;
  background: #171A25;
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 0.88rem;
  font-family: var(--db-font);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.pct-input:focus { border-color: rgba(139,92,246,0.45); box-shadow: 0 0 0 3px rgba(139,92,246,0.1); }
.pct-input::placeholder { color: #7A8197; }
.pct-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.pct-char-count {
  text-align: right;
  font-size: 0.68rem;
  color: #7A8197;
  margin-top: 4px;
}
.pct-select {
  width: 100%;
  padding: 12px 16px;
  background: #171A25;
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 0.87rem;
  font-family: var(--db-font);
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}
.pct-select:focus { border-color: rgba(139,92,246,0.45); }
.pct-fields-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ─── Option rows ─── */
.pct-options-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pct-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pct-option-radio { width: 17px; height: 17px; flex-shrink: 0; accent-color: #22C55E; cursor: pointer; }
.pct-option-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(139,92,246,0.18);
  border: 1px solid rgba(139,92,246,0.25);
  color: #B8C0D4;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.pct-option-row input[type="radio"]:checked ~ .pct-option-badge,
.pct-option-badge.selected {
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.35);
  color: #22C55E;
}
.pct-option-input {
  flex: 1;
  padding: 10px 14px;
  background: #171A25;
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-family: var(--db-font);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.pct-option-input:focus { border-color: rgba(139,92,246,0.4); }
.pct-option-del {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: none;
  border: none;
  color: rgba(239,68,68,0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.15s;
  flex-shrink: 0;
}
.pct-option-del:hover { background: rgba(239,68,68,0.1); color: #EF4444; }
.pct-correct-warn {
  font-size: 0.71rem;
  color: #f87171;
  margin-top: 4px;
}

/* ─── Difficulty pills ─── */
.pct-diff-row { display: flex; gap: 8px; }
.pct-diff-pill {
  padding: 8px 18px;
  border-radius: 22px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.18s;
  font-family: var(--db-font);
}
.pct-diff-pill.easy { background: rgba(34,197,94,0.08); color: #4ade80; border-color: rgba(34,197,94,0.2); }
.pct-diff-pill.easy.active, .pct-diff-pill.easy:hover { background: rgba(34,197,94,0.2); border-color: rgba(34,197,94,0.5); box-shadow: 0 0 12px rgba(34,197,94,0.15); }
.pct-diff-pill.medium { background: rgba(234,179,8,0.08); color: #fbbf24; border-color: rgba(234,179,8,0.2); }
.pct-diff-pill.medium.active, .pct-diff-pill.medium:hover { background: rgba(234,179,8,0.2); border-color: rgba(234,179,8,0.5); box-shadow: 0 0 12px rgba(234,179,8,0.15); }
.pct-diff-pill.hard { background: rgba(239,68,68,0.08); color: #f87171; border-color: rgba(239,68,68,0.2); }
.pct-diff-pill.hard.active, .pct-diff-pill.hard:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.5); box-shadow: 0 0 12px rgba(239,68,68,0.15); }

/* ─── Timer chips ─── */
.pct-timer-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pct-timer-chip {
  padding: 8px 16px;
  border-radius: 22px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: #171A25;
  border: 1.5px solid rgba(255,255,255,0.07);
  color: #7A8197;
  transition: all 0.18s;
  font-family: var(--db-font);
}
.pct-timer-chip.active { background: rgba(255,155,33,0.15); border-color: #FF9B21; color: #FF9B21; box-shadow: 0 0 12px rgba(255,155,33,0.2); }
.pct-timer-chip:not(.active):hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: #B8C0D4; }

/* ─── Send To cards ─── */
.pct-sendto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pct-sendto-card {
  padding: 16px;
  border: 2px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
  position: relative;
}
.pct-sendto-card:hover { border-color: rgba(255,155,33,0.3); background: rgba(255,155,33,0.03); }
.pct-sendto-card.active {
  border-color: #FF9B21;
  background: rgba(255,155,33,0.06);
  box-shadow: 0 0 0 2px rgba(255,155,33,0.12);
}
.pct-sendto-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.pct-sendto-name { font-size: 0.85rem; font-weight: 700; color: #FFFFFF; }
.pct-sendto-sub { font-size: 0.72rem; color: #7A8197; margin-top: 2px; }
.pct-sendto-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FF9B21;
  color: #fff;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

/* ─── Right panel ─── */
.pct-right { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; }
.pct-preview-card {
  background: #11131C;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 20px;
}
.pct-panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.pct-panel-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.pct-panel-title { font-size: 0.88rem; font-weight: 700; color: #FFFFFF; }
.pct-panel-sub { font-size: 0.71rem; color: #7A8197; margin-top: 1px; }

/* Preview question block */
.pct-preview-q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.pct-preview-q-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pct-preview-q-text {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.45;
  padding-top: 4px;
}
.pct-preview-type-badge {
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255,155,33,0.15);
  color: #FF9B21;
  border: 1px solid rgba(255,155,33,0.25);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
/* Preview options */
.pct-preview-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  margin-bottom: 7px;
  font-size: 0.82rem;
  color: #B8C0D4;
}
.pct-preview-opt-badge {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(139,92,246,0.18);
  color: #8B5CF6;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Preview chips row */
.pct-preview-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pct-preview-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid;
}
.pct-preview-chip.diff-easy { background: rgba(34,197,94,0.1); color: #4ade80; border-color: rgba(34,197,94,0.25); }
.pct-preview-chip.diff-medium { background: rgba(234,179,8,0.1); color: #fbbf24; border-color: rgba(234,179,8,0.25); }
.pct-preview-chip.diff-hard { background: rgba(239,68,68,0.1); color: #f87171; border-color: rgba(239,68,68,0.25); }
.pct-preview-chip.timer { background: rgba(255,155,33,0.1); color: #FF9B21; border-color: rgba(255,155,33,0.25); }
.pct-preview-chip.topic { background: rgba(139,92,246,0.1); color: #8B5CF6; border-color: rgba(139,92,246,0.25); }

/* ─── Summary card ─── */
.pct-summary-card {
  background: #11131C;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 20px;
}
.pct-summary-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
}
.pct-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pct-summary-row:last-child { border-bottom: none; padding-bottom: 0; }
.pct-summary-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(139,92,246,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.pct-summary-label { font-size: 0.75rem; color: #7A8197; flex: 1; }
.pct-summary-value { font-size: 0.8rem; font-weight: 600; color: #B8C0D4; text-align: right; }

/* ─── Sticky bottom action bar ─── */
.pct-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 28px;
  background: rgba(9,9,15,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
}
/* Offset for the sidebar */
.page .pct-action-bar { left: 72px; }
.pct-bar-draft {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  color: #B8C0D4;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--db-font);
  transition: all 0.2s;
  white-space: nowrap;
}
.pct-bar-draft:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pct-bar-spacer { flex: 1; }
.pct-bar-save {
  flex: 0 0 auto;
  min-width: 160px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #FF9B21, #e07800);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--db-font);
  box-shadow: 0 4px 20px rgba(255,155,33,0.3);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pct-bar-save:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(255,155,33,0.4); }
.pct-bar-save:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.pct-bar-send {
  flex: 0 0 auto;
  min-width: 160px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--db-font);
  box-shadow: 0 4px 20px rgba(139,92,246,0.3);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pct-bar-send:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(139,92,246,0.4); }
.pct-bar-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.pct-bar-del {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(239,68,68,0.07);
  border: 1.5px solid rgba(239,68,68,0.2);
  color: rgba(239,68,68,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s;
  flex-shrink: 0;
}
.pct-bar-del:hover { background: rgba(239,68,68,0.15); color: #EF4444; border-color: rgba(239,68,68,0.4); }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .pct-body { grid-template-columns: 1fr; padding: 16px 16px 100px; }
  .pct-right { position: static; }
  .pct-type-grid { grid-template-columns: repeat(2,1fr); }
  .pct-fields-2col { grid-template-columns: 1fr; }
  .pct-sendto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pct-header { padding: 14px 16px; }
  .pct-body { padding: 12px 12px 100px; gap: 14px; }
  .pct-card { padding: 16px; border-radius: 16px; }
  .pct-type-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .pct-action-bar { padding: 10px 12px; gap: 8px; }
  .pct-bar-save, .pct-bar-send { min-width: 0; padding: 11px 16px; font-size: 0.82rem; }
}

/* ─── Light mode overrides ─── */
.light .pct-page { background: #F5F5FA; }
.light .pct-card, .light .pct-preview-card, .light .pct-summary-card { background: #FFFFFF; border-color: rgba(0,0,0,0.07); }
.light .pct-header-title { color: #0F0F1A; }
.light .pct-header-sub { color: #6B7280; }
.light .pct-step-title { color: #0F0F1A; }
.light .pct-type-name { color: #0F0F1A; }
.light .pct-type-desc { color: #6B7280; }
.light .pct-type-card { background: #FAFAFA; border-color: rgba(0,0,0,0.07); }
.light .pct-type-card:hover { background: rgba(255,155,33,0.05); }
.light .pct-type-card.active { background: rgba(255,155,33,0.06); }
.light .pct-input, .light .pct-option-input, .light .pct-select { background: #F5F5FA; border-color: rgba(0,0,0,0.1); color: #0F0F1A; }
.light .pct-input::placeholder, .light .pct-option-input::placeholder { color: #9CA3AF; }
.light .pct-panel-title, .light .pct-summary-title { color: #0F0F1A; }
.light .pct-summary-label { color: #6B7280; }
.light .pct-summary-value { color: #374151; }
.light .pct-preview-q-text { color: #0F0F1A; }
.light .pct-preview-option { background: #F5F5FA; border-color: rgba(0,0,0,0.06); color: #374151; }
.light .pct-sendto-card { background: #FAFAFA; border-color: rgba(0,0,0,0.07); }
.light .pct-sendto-name { color: #0F0F1A; }
.light .pct-sendto-sub { color: #6B7280; }
.light .pct-action-bar { background: rgba(245,245,250,0.94); border-color: rgba(0,0,0,0.07); }
.light .pct-bar-draft { background: #FFFFFF; border-color: rgba(0,0,0,0.1); color: #374151; }
.light .pct-timer-chip { background: #F0F0F8; border-color: rgba(0,0,0,0.08); color: #6B7280; }
.light .pct-diff-pill.easy { color: #166534; border-color: rgba(34,197,94,0.3); }
.light .pct-diff-pill.medium { color: #854D0E; border-color: rgba(234,179,8,0.3); }
.light .pct-diff-pill.hard { color: #9A1515; border-color: rgba(239,68,68,0.3); }

/* ═══ AI GENERATOR PAGE ═══ */
.tk2-ai-page { display: flex; flex-direction: column; gap: 20px; }
.tk2-ai-hero { background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.35),rgba(var(--accent-rgb), 0.35),rgba(var(--accent-rgb), 0.35)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 28px 28px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.tk2-ai-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%,rgba(var(--accent-rgb), 0.12) 0%,transparent 65%); }
.tk2-ai-hero-left { position: relative; z-index: 1; }
.tk2-ai-hero-title { font-size: 1.6rem; font-weight: 800; background: linear-gradient(135deg,#e2e8f0,var(--accent2),var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 6px; }
.tk2-ai-hero-sub { font-size: 0.87rem; color: rgba(148,163,184,0.75); }
.tk2-ai-hero-right { font-size: 4rem; position: relative; z-index: 1; animation: tk2-float 3s ease-in-out infinite; }
@keyframes tk2-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* AI type pills */
.tk2-ai-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.tk2-ai-pill { padding: 9px 20px; border-radius: 24px; font-size: 0.83rem; font-weight: 700; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.08); background: rgba(11, 11, 11, 0.8); color: rgba(148,163,184,0.7); transition: all 0.2s; font-family: var(--db-font); display: flex; align-items: center; gap: 6px; }
.tk2-ai-pill.active { background: linear-gradient(135deg,var(--accent2),var(--accent)); border-color: transparent; color: #fff; box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.1); }
.tk2-ai-pill:not(.active):hover { background: rgba(var(--accent-rgb), 0.35); border-color: rgba(255, 255, 255, 0.08); color: var(--accent2); }
/* AI search/generate */
.tk2-ai-search-row { display: flex; gap: 10px; align-items: stretch; }
.tk2-ai-search-input { flex: 1; padding: 13px 18px; background: rgba(11, 11, 11, .85); border: 2px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: #e2e8f0; font-size: 0.9rem; font-family: var(--db-font); outline: none; transition: all 0.2s; }
.tk2-ai-search-input:focus { border-color: rgba(var(--accent-rgb), 0.138); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.025); }
.tk2-ai-search-input::placeholder { color: rgba(148,163,184,0.35); }
.tk2-ai-gen-btn { padding: 13px 24px; background: linear-gradient(135deg,var(--accent2),var(--accent)); border: none; border-radius: 12px; color: #fff; font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: var(--db-font); display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.1); transition: all 0.2s; white-space: nowrap; }
.tk2-ai-gen-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.138); }
.tk2-ai-gen-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Generated questions */
.tk2-ai-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tk2-ai-results-count { font-size: 0.82rem; color: rgba(148,163,184,0.65); font-weight: 600; }
.tk2-add-all-btn { padding: 8px 16px; background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.35),rgba(var(--accent-rgb), 0.35)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9px; color: var(--accent2); font-size: 0.8rem; font-weight: 700; cursor: pointer; font-family: var(--db-font); transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.tk2-add-all-btn:hover { background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.28),rgba(var(--accent-rgb), 0.28)); }
.tk2-clear-btn { padding: 8px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9px; color: rgba(148,163,184,0.6); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: var(--db-font); transition: all 0.2s; }
.tk2-clear-btn:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
.tk2-q-gen-card { background: linear-gradient(135deg,rgba(11, 11, 11, .96),rgba(11, 11, 11, .94)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 16px; margin-bottom: 10px; transition: all 0.18s; }
.tk2-q-gen-card:hover { border-color: rgba(var(--accent-rgb), 0.087); box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.025); }
.tk2-q-gen-card-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.tk2-q-num-badge { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,var(--accent2),var(--accent)); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: #fff; flex-shrink: 0; }
.tk2-q-gen-text { flex: 1; font-size: 0.88rem; font-weight: 600; color: #e2e8f0; line-height: 1.4; }
.tk2-q-gen-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tk2-q-gen-options { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.77rem; color: rgba(148,163,184,0.6); margin-bottom: 10px; padding: 8px 12px; background: rgba(11, 11, 11, .5); border-radius: 8px; }
.tk2-q-gen-options span { display: flex; align-items: center; gap: 4px; }
.tk2-q-gen-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tk2-q-edit-btn { padding: 7px 16px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #8F8F8F; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: var(--db-font); transition: all 0.18s; }
.tk2-q-edit-btn:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
.tk2-q-add-btn { padding: 7px 16px; border-radius: 8px; background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.35),rgba(var(--accent-rgb), 0.35)); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--accent2); font-size: 0.78rem; font-weight: 700; cursor: pointer; font-family: var(--db-font); transition: all 0.18s; display: flex; align-items: center; gap: 5px; }
.tk2-q-add-btn:hover { background: linear-gradient(135deg,rgba(var(--accent-rgb), 0.3),rgba(var(--accent-rgb), 0.3)); }
.tk2-q-add-btn.added { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); color: #4ade80; }
.tk2-ai-footer { font-size: 0.78rem; color: rgba(148,163,184,0.5); display: flex; align-items: center; gap: 6px; padding: 12px 0 0; }

/* ═══════════════════════════════════════════════════════════════
   NEW PREMIUM CHAT INPUT BAR
   ═══════════════════════════════════════════════════════════════ */
.tk2-chat-input-wrap { padding: 10px 14px 14px; background: rgba(5, 5, 5, .9); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tk2-chat-reply-preview { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; background: rgba(var(--accent-rgb), 0.35); border-left: 3px solid var(--accent2); border-radius: 8px; margin-bottom: 8px; font-size: 0.8rem; color: rgba(148,163,184,0.8); }
.tk2-chat-reply-close { background: none; border: none; color: rgba(148,163,184,0.5); cursor: pointer; font-size: 1rem; padding: 2px 4px; }
.tk2-chat-input-row { display: flex; align-items: center; gap: 8px; }
.tk2-chat-add-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.35); border: 2px solid rgba(255, 255, 255, 0.08); color: var(--accent2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.35rem; font-weight: 300; flex-shrink: 0; transition: all 0.2s; line-height: 1; }
.tk2-chat-add-btn:hover { background: rgba(var(--accent-rgb), 0.35); border-color: rgba(255, 255, 255, 0.08); transform: scale(1.06); }
.tk2-chat-input-container { flex: 1; display: flex; align-items: center; background: rgba(11, 11, 11, .85); border: 2px solid rgba(var(--accent-rgb), 0.045); border-radius: 24px; padding: 4px 8px 4px 16px; gap: 6px; transition: border-color 0.2s, box-shadow 0.2s; min-height: 48px; }
.tk2-chat-input-container:focus-within { border-color: rgba(var(--accent-rgb), 0.125); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.025), 0 0 20px rgba(var(--accent-rgb), 0.02); }
.tk2-chat-msg-input { flex: 1; background: none; border: none; outline: none; color: #e2e8f0; font-size: 0.9rem; font-family: var(--db-font); resize: none; max-height: 120px; min-height: 28px; padding: 8px 0; line-height: 1.4; overflow-y: auto; }
.tk2-chat-msg-input::placeholder { color: rgba(148,163,184,0.35); }
.tk2-chat-msg-input:disabled { opacity: 0.4; }
.tk2-chat-emoji-btn, .tk2-chat-gif-btn { width: 34px; height: 34px; border-radius: 8px; background: none; border: none; color: rgba(148,163,184,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; transition: all 0.18s; flex-shrink: 0; }
.tk2-chat-emoji-btn:hover, .tk2-chat-gif-btn:hover { background: rgba(var(--accent-rgb), 0.1); color: var(--accent2); }
.tk2-chat-gif-btn { font-size: 0.72rem; font-weight: 800; color: rgba(148,163,184,0.45); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; width: auto; padding: 3px 6px; }
.tk2-chat-send-btn { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,var(--accent2),var(--accent)); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.125); transition: all 0.2s; }
.tk2-chat-send-btn:hover:not(:disabled) { transform: scale(1.1); box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.163); }
.tk2-chat-send-btn:active:not(:disabled) { transform: scale(0.95); }
.tk2-chat-send-btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════
   ONLINE STUDENT KICK BUTTON
   ═══════════════════════════════════════════════════════════════ */
.comm-v2-student-row { position: relative; }
.comm-v2-student-kick-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 6px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.18); color: rgba(239,68,68,0.55); display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 0.75rem; transition: all 0.18s; }
.comm-v2-student-row:hover .comm-v2-student-kick-btn { display: flex; }
.comm-v2-student-kick-btn:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.45); color: #f87171; }

/* ═══════════════════════════════════════════════════════════════
   CONTENT SHARE BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.cm2-share-divider { height: 1px; background: rgba(var(--accent-rgb), 0.12); margin: 4px 0; }
.cm2-share-group { padding: 4px 0; }
.cm2-share-label { font-size: 0.68rem; color: rgba(148,163,184,0.45); text-transform: uppercase; letter-spacing: 0.07em; padding: 6px 14px 4px; font-weight: 700; }

/* ── Premium Social Share Dropdown Redesign ── */
.cm2-share-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
}
.cm2-share-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--cm2-text1);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.cm2-share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--cm2-text2);
}
.cm2-share-item:hover {
  transform: translateX(2px);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cm2-share-item:hover .cm2-share-icon {
  transform: scale(1.18);
}
.cm2-share-item:active {
  transform: scale(0.97);
}

/* WhatsApp Hover Styles */
.cm2-share-item.whatsapp:hover {
  background: rgba(37, 211, 102, 0.08) !important;
  color: #25D366 !important;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.15);
}
.cm2-share-item.whatsapp:hover .cm2-share-icon {
  color: #25D366 !important;
  filter: drop-shadow(0 0 4px rgba(37, 211, 102, 0.4));
}

/* Telegram Hover Styles */
.cm2-share-item.telegram:hover {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: #0088CC !important;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.037);
}
.cm2-share-item.telegram:hover .cm2-share-icon {
  color: #0088CC !important;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.1));
}

/* Instagram Hover Styles */
.cm2-share-item.instagram:hover {
  background: rgba(225, 48, 108, 0.08) !important;
  color: #E1306C !important;
  box-shadow: 0 0 12px rgba(225, 48, 108, 0.15);
}
.cm2-share-item.instagram:hover .cm2-share-icon {
  color: #E1306C !important;
  filter: drop-shadow(0 0 4px rgba(225, 48, 108, 0.4));
}

/* Twitter/X Hover Styles */
.cm2-share-item.twitter:hover {
  background: rgba(148, 163, 184, 0.1) !important;
  color: #F8FAFC !important;
  box-shadow: 0 0 12px rgba(148, 163, 184, 0.15);
}
.light .cm2-share-item.twitter:hover {
  color: #0F172A !important;
}
.cm2-share-item.twitter:hover .cm2-share-icon {
  color: inherit !important;
}

/* Copy Link Hover Styles */
.cm2-share-item.copy-link:hover {
  background: rgba(var(--accent-rgb), 0.08) !important;
  color: var(--accent2) !important;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.037);
}
.cm2-share-item.copy-link:hover .cm2-share-icon {
  color: var(--accent2) !important;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.1));
}

/* ═══════════════════════════════════════════════════════════════
   CODING OPTION IN TEST MODE AI GENERATOR
   ═══════════════════════════════════════════════════════════════ */
.tm2-coding-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.65rem; padding: 2px 7px; background: rgba(var(--accent-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; color: var(--accent2); font-weight: 700; margin-left: 4px; }


/* ═══════════════════════════════════════════════════════════════
   VYOM CLAPPERBOARD TOUR — Cinematic Premium Onboarding
   Orange #FF7A00 · Black #0B0B0B · White #FFFFFF
   "Lights. Camera. Action. Welcome to VYOM."
   ═══════════════════════════════════════════════════════════════ */

/* ── Cinematic overlay (full-screen dim) ── */
.clap-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  background: rgba(0,0,0,0.85);
  pointer-events: all;
  animation: clap-overlay-in 0.4s ease forwards;
}
@keyframes clap-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Spotlight: glowing orange ring around target ── */
.clap-spotlight {
  position: fixed;
  z-index: 9201;
  border-radius: 10px;
  box-shadow:
    0 0 0 4000px rgba(0,0,0,0.82),
    0 0 0 2.5px #FF7A00,
    0 0 0 5px rgba(255,122,0,0.25),
    0 0 28px 6px rgba(255,122,0,0.6),
    0 0 70px 16px rgba(255,122,0,0.2);
  pointer-events: none;
  transition:
    top    0.42s cubic-bezier(0.4,0,0.2,1),
    left   0.42s cubic-bezier(0.4,0,0.2,1),
    width  0.42s cubic-bezier(0.4,0,0.2,1),
    height 0.42s cubic-bezier(0.4,0,0.2,1);
  animation: clap-spot-pulse 2.4s ease-in-out infinite;
}
@keyframes clap-spot-pulse {
  0%,100% {
    box-shadow:
      0 0 0 4000px rgba(0,0,0,0.82),
      0 0 0 2.5px #FF7A00,
      0 0 0 5px rgba(255,122,0,0.25),
      0 0 28px 6px rgba(255,122,0,0.6),
      0 0 70px 16px rgba(255,122,0,0.2);
  }
  50% {
    box-shadow:
      0 0 0 4000px rgba(0,0,0,0.82),
      0 0 0 2.5px #FF9A30,
      0 0 0 7px rgba(255,154,48,0.35),
      0 0 42px 10px rgba(255,154,48,0.8),
      0 0 90px 24px rgba(255,154,48,0.3);
  }
}

/* ── Connector line from card to spotlight ── */
.clap-connector {
  position: fixed;
  z-index: 9202;
  pointer-events: none;
  overflow: visible;
}
.clap-connector line {
  stroke: #FF7A00;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.5;
  animation: clap-dash 1s linear infinite;
}
@keyframes clap-dash {
  to { stroke-dashoffset: -18; }
}

/* ══════════════════════════════════════
   THE CLAPPERBOARD CARD
   ══════════════════════════════════════ */
.clap-card {
  position: fixed;
  z-index: 9210;
  width: 360px;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.9)) drop-shadow(0 0 40px rgba(255,122,0,0.15));
  transition: top 0.38s cubic-bezier(0.4,0,0.2,1), left 0.38s cubic-bezier(0.4,0,0.2,1);
  font-family: inherit;
  user-select: none;
}
.clap-card.clap-entering {
  animation: clap-card-in 0.42s cubic-bezier(0.34,1.3,0.64,1) forwards;
}
.clap-card.clap-fading {
  animation: clap-card-out 0.22s ease-in forwards;
}
@keyframes clap-card-in {
  from { opacity:0; transform: scale(0.88) translateY(14px); }
  to   { opacity:1; transform: scale(1)    translateY(0); }
}
@keyframes clap-card-out {
  from { opacity:1; transform: scale(1); }
  to   { opacity:0; transform: scale(0.93) translateY(8px); }
}

/* ── Clapper Arm (the animated top stripe piece) ── */
.clap-arm {
  position: relative;
  height: 52px;
  background: #0B0B0B;
  border-radius: 8px 8px 0 0;
  border: 1.5px solid #2A2A2A;
  border-bottom: 2px solid #FF7A00;
  overflow: hidden;
  transform-origin: left center;
  transform: rotate(0deg);
  transition: transform 0.18s cubic-bezier(0.25,0,0,1.6);
}
.clap-arm.clap-arm-open {
  transform: rotate(-18deg);
}
.clap-arm.clap-arm-snap {
  animation: clap-snap 0.4s cubic-bezier(0.25,0,0,1.4) forwards;
}
@keyframes clap-snap {
  0%  { transform: rotate(-22deg); }
  55% { transform: rotate(3deg); }
  75% { transform: rotate(-1deg); }
  100%{ transform: rotate(0deg); }
}

/* ── Diagonal black + white stripes ── */
.clap-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    #1a1a1a  0px,
    #1a1a1a  14px,
    #f0f0f0  14px,
    #f0f0f0  28px
  );
  opacity: 0.9;
}
.clap-arm-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
  z-index: 1;
}
.clap-arm-prod {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #fff;
  text-transform: uppercase;
  background: rgba(0,0,0,0.82);
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.clap-arm-take {
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #FF7A00;
  text-transform: uppercase;
  background: rgba(0,0,0,0.82);
  padding: 3px 8px;
  border-radius: 3px;
}

/* ── Slate body ── */
.clap-slate {
  background: #0B0B0B;
  border: 1.5px solid #2A2A2A;
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  position: relative;
}

/* ── Top meta bar: SCENE / TAKE / ROLL ── */
.clap-meta-bar {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  border-bottom: 1.5px solid #2A2A2A;
}
.clap-meta-cell {
  padding: 10px 14px 9px;
  text-align: center;
}
.clap-meta-divider {
  background: #2A2A2A;
  width: 1.5px;
}
.clap-meta-label {
  display: block;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.clap-meta-value {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.clap-meta-value.clap-meta-orange {
  color: #FF7A00;
}

/* ── Progress bar under meta ── */
.clap-progress-rail {
  height: 2.5px;
  background: #1E1E1E;
}
.clap-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF7A00, #FF9A30);
  box-shadow: 0 0 8px rgba(255,122,0,0.7);
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
  border-radius: 0 2px 2px 0;
}

/* ── Field rows (LOCATION / PURPOSE / ACTION) ── */
.clap-fields {
  padding: 0;
}
.clap-field-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  border-bottom: 1px solid #1a1a1a;
  min-height: 36px;
}
.clap-field-row:last-child {
  border-bottom: none;
}
.clap-field-key {
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  padding: 10px 0 10px 16px;
  min-width: 88px;
  width: 88px;
  border-right: 1px solid #1E1E1E;
  display: flex;
  align-items: flex-start;
  padding-top: 12px;
  flex-shrink: 0;
  line-height: 1.4;
}
.clap-field-val {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  padding: 10px 16px 10px 14px;
  line-height: 1.55;
  flex: 1;
}
.clap-field-val strong { color: #FF7A00; font-weight: 700; }
.clap-field-val em { color: rgba(255,255,255,0.55); font-style: normal; }

/* ── Scene title row ── */
.clap-scene-row {
  background: linear-gradient(90deg, rgba(255,122,0,0.1) 0%, rgba(255,122,0,0.03) 100%);
  border-bottom: 1px solid rgba(255,122,0,0.18);
  padding: 11px 16px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.clap-scene-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}
.clap-scene-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.clap-scene-sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  margin-top: 1px;
}

/* ── Dot filmstrip ── */
.clap-filmstrip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  background: #080808;
  overflow: hidden;
}
.clap-strip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #1E1E1E;
  border: 1px solid #2A2A2A;
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
}
.clap-strip-dot:hover { background: rgba(255,122,0,0.35); border-color: rgba(255,122,0,0.5); }
.clap-strip-dot.clap-dot-done {
  background: rgba(255,122,0,0.4);
  border-color: rgba(255,122,0,0.5);
}
.clap-strip-dot.clap-dot-active {
  background: #FF7A00;
  border-color: #FF7A00;
  width: 22px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(255,122,0,0.6);
}
.clap-strip-counter {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Button row ── */
.clap-btns {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px 14px;
}
.clap-btn-skip {
  background: none;
  border: none;
  color: rgba(255,255,255,0.28);
  font-size: 0.7rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  padding: 8px 6px;
  transition: color 0.18s;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.clap-btn-skip:hover { color: rgba(255,255,255,0.55); }
.clap-btn-prev {
  padding: 9px 14px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #2A2A2A;
  color: rgba(255,255,255,0.5);
  font-size: 0.77rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
  letter-spacing: 0.02em;
}
.clap-btn-prev:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: #444; }
.clap-btn-next {
  flex: 1;
  padding: 10px 16px;
  border-radius: 7px;
  background: linear-gradient(135deg, #FF7A00 0%, #D96400 100%);
  border: none;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(255,122,0,0.4), inset 0 1px 0 rgba(255,255,255,0.14);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.clap-btn-next::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: clap-btn-shine 2.8s linear infinite;
}
@keyframes clap-btn-shine {
  0%   { left: -60%; }
  100% { left: 160%; }
}
.clap-btn-next:hover {
  box-shadow: 0 6px 30px rgba(255,122,0,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.clap-btn-next.clap-btn-finish {
  background: linear-gradient(135deg, #22c55e, #15803d);
  box-shadow: 0 4px 20px rgba(34,197,94,0.4), inset 0 1px 0 rgba(255,255,255,0.14);
}
.clap-btn-next.clap-btn-finish:hover {
  box-shadow: 0 6px 30px rgba(34,197,94,0.55);
}

/* ── "Lights. Camera. Action." launch screen ── */
.clap-intro {
  position: fixed;
  inset: 0;
  z-index: 9220;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.95);
  animation: clap-intro-in 0.35s ease forwards;
  pointer-events: all;
  gap: 0;
}
@keyframes clap-intro-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.clap-intro-out {
  animation: clap-intro-out 0.4s ease forwards !important;
}
@keyframes clap-intro-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.clap-intro-stripe {
  width: 100%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    #FF7A00 0px, #FF7A00 18px,
    #0B0B0B 18px, #0B0B0B 36px
  );
  position: absolute;
  top: 0;
  left: 0;
  animation: clap-stripe-slide 12s linear infinite;
}
.clap-intro-stripe.clap-intro-stripe-bottom {
  top: auto;
  bottom: 0;
}
@keyframes clap-stripe-slide {
  from { background-position: 0 0; }
  to   { background-position: 72px 0; }
}
.clap-intro-lca {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-bottom: 20px;
  animation: clap-intro-fade-up 0.6s 0.1s ease both;
}
.clap-intro-title {
  font-size: 3.2rem;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
  animation: clap-intro-fade-up 0.6s 0.2s ease both;
}
.clap-intro-title span {
  color: #FF7A00;
}
.clap-intro-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  margin-bottom: 42px;
  animation: clap-intro-fade-up 0.6s 0.3s ease both;
}
.clap-intro-cta {
  padding: 14px 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FF7A00, #D96400);
  border: none;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 6px 30px rgba(255,122,0,0.5);
  animation: clap-intro-fade-up 0.6s 0.45s ease both;
  transition: all 0.2s;
}
.clap-intro-cta:hover {
  box-shadow: 0 10px 40px rgba(255,122,0,0.7);
  transform: translateY(-2px);
}
.clap-intro-skip-link {
  margin-top: 18px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: color 0.18s;
  animation: clap-intro-fade-up 0.6s 0.55s ease both;
  border: none;
  background: none;
  font-family: inherit;
}
.clap-intro-skip-link:hover { color: rgba(255,255,255,0.5); }
@keyframes clap-intro-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Decorative clapper icon in intro ── */
.clap-intro-icon {
  width: 90px;
  height: 70px;
  position: relative;
  margin-bottom: 28px;
  animation: clap-intro-fade-up 0.6s 0.0s ease both;
}
.clap-intro-icon-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: #0B0B0B;
  border: 2px solid #2A2A2A;
  border-radius: 4px;
}
.clap-intro-icon-arm {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  background: repeating-linear-gradient(-55deg, #1a1a1a 0,#1a1a1a 8px,#e8e8e8 8px,#e8e8e8 16px);
  border-radius: 4px 4px 0 0;
  border: 2px solid #2A2A2A;
  border-bottom: 2px solid #FF7A00;
  animation: clap-icon-arm 2.4s 0.8s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes clap-icon-arm {
  0%,65%,100% { transform: rotate(0deg); }
  15%          { transform: rotate(-30deg); }
  40%          { transform: rotate(-30deg); }
  50%          { transform: rotate(4deg); }
  58%          { transform: rotate(-2deg); }
}
.clap-intro-icon-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF7A00;
  box-shadow: 0 0 12px rgba(255,122,0,0.8);
  bottom: 14px;
  right: 14px;
  animation: clap-icon-dot 1.6s ease-in-out infinite;
}
@keyframes clap-icon-dot {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.3; }
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .clap-card { width: calc(100vw - 20px); }
  .clap-intro-title { font-size: 2.2rem; }
}

/* ── Light mode override: always keep dark ── */
body.light .clap-slate   { background: #0B0B0B; }
body.light .clap-arm     { background: #0B0B0B; }
body.light .clap-overlay { background: rgba(0,0,0,0.85); }

/* ══ END VYOM CLAPPERBOARD TOUR ══════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   STUDENT WALKTHROUGH  —  Gold Academic Edition
   Mirrors Teacher Clapperboard Tour, accent: Gold (#D4AF37)
   ══════════════════════════════════════════════════════════════════ */

/* ── Gold overlay ── */
.sclap-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  background: rgba(0,0,0,0.87);
  pointer-events: all;
  animation: clap-overlay-in 0.4s ease forwards;
}

/* ── Gold spotlight ring ── */
.sclap-spotlight {
  position: fixed;
  z-index: 9201;
  border-radius: 10px;
  box-shadow:
    0 0 0 4000px rgba(0,0,0,0.84),
    0 0 0 2.5px #D4AF37,
    0 0 0 5px rgba(212,175,55,0.25),
    0 0 28px 6px rgba(212,175,55,0.6),
    0 0 70px 16px rgba(212,175,55,0.2);
  pointer-events: none;
  transition:
    top    0.42s cubic-bezier(0.4,0,0.2,1),
    left   0.42s cubic-bezier(0.4,0,0.2,1),
    width  0.42s cubic-bezier(0.4,0,0.2,1),
    height 0.42s cubic-bezier(0.4,0,0.2,1);
  animation: sclap-spot-pulse 2.4s ease-in-out infinite;
}
@keyframes sclap-spot-pulse {
  0%,100% {
    box-shadow:
      0 0 0 4000px rgba(0,0,0,0.84),
      0 0 0 2.5px #D4AF37,
      0 0 0 5px rgba(212,175,55,0.25),
      0 0 28px 6px rgba(212,175,55,0.6),
      0 0 70px 16px rgba(212,175,55,0.2);
  }
  50% {
    box-shadow:
      0 0 0 4000px rgba(0,0,0,0.84),
      0 0 0 2.5px #F7C948,
      0 0 0 7px rgba(247,201,72,0.35),
      0 0 42px 10px rgba(247,201,72,0.8),
      0 0 90px 24px rgba(247,201,72,0.3);
  }
}

/* ── SVG connector gold dashes ── */
.sclap-connector {
  position: fixed;
  z-index: 9202;
  pointer-events: none;
  overflow: visible;
}
.sclap-connector line {
  stroke: #D4AF37;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.5;
  animation: clap-dash 1s linear infinite;
}

/* ══ STUDENT CLAPPERBOARD CARD ══════════════════════════════════ */
.sclap-card {
  position: fixed;
  z-index: 9210;
  width: 360px;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.9)) drop-shadow(0 0 40px rgba(212,175,55,0.15));
  transition: top 0.38s cubic-bezier(0.4,0,0.2,1), left 0.38s cubic-bezier(0.4,0,0.2,1);
  font-family: inherit;
  user-select: none;
}
.sclap-card.sclap-entering {
  animation: clap-card-in 0.42s cubic-bezier(0.34,1.3,0.64,1) forwards;
}
.sclap-card.sclap-fading {
  animation: clap-card-out 0.22s ease-in forwards;
}

/* ── Clapper Arm (gold stripe) ── */
.sclap-arm {
  position: relative;
  height: 52px;
  background: #0B0B0B;
  border-radius: 8px 8px 0 0;
  border: 1.5px solid #2A2A2A;
  border-bottom: 2px solid #D4AF37;
  overflow: hidden;
  transform-origin: left center;
  transform: rotate(0deg);
  transition: transform 0.18s cubic-bezier(0.25,0,0,1.6);
}
.sclap-arm.sclap-arm-open  { transform: rotate(-18deg); }
.sclap-arm.sclap-arm-snap  { animation: clap-snap 0.4s cubic-bezier(0.25,0,0,1.4) forwards; }

/* ── Diagonal gold + black stripes ── */
.sclap-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    #1a1500  0px,
    #1a1500  14px,
    #D4AF37  14px,
    #D4AF37  28px
  );
  opacity: 0.85;
}
.sclap-arm-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
  z-index: 1;
}
.sclap-arm-prod {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #fff;
  text-transform: uppercase;
  background: rgba(0,0,0,0.84);
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.sclap-arm-take {
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #F7C948;
  text-transform: uppercase;
  background: rgba(0,0,0,0.84);
  padding: 3px 8px;
  border-radius: 3px;
}

/* ── Slate body ── */
.sclap-slate {
  background: #0B0B0B;
  border: 1.5px solid #2A2A2A;
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  position: relative;
}

/* ── Top meta bar ── */
.sclap-meta-bar {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  border-bottom: 1.5px solid #2A2A2A;
}
.sclap-meta-cell {
  padding: 10px 14px 9px;
  text-align: center;
}
.sclap-meta-divider {
  background: #2A2A2A;
  width: 1.5px;
}
.sclap-meta-label {
  display: block;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.sclap-meta-value {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sclap-meta-value.sclap-meta-gold {
  color: #F7C948;
}

/* ── Gold progress bar ── */
.sclap-progress-rail {
  height: 2.5px;
  background: #1E1E1E;
}
.sclap-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #B8860B, #D4AF37, #F7C948);
  box-shadow: 0 0 8px rgba(212,175,55,0.7);
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
  border-radius: 0 2px 2px 0;
}

/* ── Field rows ── */
.sclap-fields     { padding: 0; }
.sclap-field-row  {
  display: flex;
  align-items: flex-start;
  gap: 0;
  border-bottom: 1px solid #1a1a1a;
  min-height: 36px;
}
.sclap-field-row:last-child { border-bottom: none; }
.sclap-field-key {
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  padding: 10px 0 10px 16px;
  min-width: 88px;
  width: 88px;
  border-right: 1px solid #1E1E1E;
  display: flex;
  align-items: flex-start;
  padding-top: 12px;
  flex-shrink: 0;
  line-height: 1.4;
}
.sclap-field-val {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  padding: 10px 16px 10px 14px;
  line-height: 1.55;
  flex: 1;
}
.sclap-field-val strong { color: #F7C948; font-weight: 700; }
.sclap-field-val em     { color: rgba(255,255,255,0.55); font-style: normal; }

/* ── Scene title row ── */
.sclap-scene-row {
  background: linear-gradient(90deg, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0.02) 100%);
  border-bottom: 1px solid rgba(212,175,55,0.18);
  padding: 11px 16px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sclap-scene-icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.sclap-scene-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.sclap-scene-sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  margin-top: 1px;
}

/* ── Dot filmstrip (gold) ── */
.sclap-filmstrip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  background: #080808;
  overflow: hidden;
}
.sclap-strip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #1E1E1E;
  border: 1px solid #2A2A2A;
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
}
.sclap-strip-dot:hover {
  background: rgba(212,175,55,0.35);
  border-color: rgba(212,175,55,0.5);
}
.sclap-strip-dot.sclap-dot-done {
  background: rgba(212,175,55,0.4);
  border-color: rgba(212,175,55,0.5);
}
.sclap-strip-dot.sclap-dot-active {
  background: #D4AF37;
  border-color: #D4AF37;
  width: 22px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(212,175,55,0.6);
}
.sclap-strip-counter {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Button row ── */
.sclap-btns {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px 14px;
}
.sclap-btn-skip {
  background: none;
  border: none;
  color: rgba(255,255,255,0.28);
  font-size: 0.7rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  padding: 8px 6px;
  transition: color 0.18s;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.sclap-btn-skip:hover { color: rgba(255,255,255,0.55); }
.sclap-btn-prev {
  padding: 9px 14px;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #2A2A2A;
  color: rgba(255,255,255,0.5);
  font-size: 0.77rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
  letter-spacing: 0.02em;
}
.sclap-btn-prev:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: #444; }
.sclap-btn-next {
  flex: 1;
  padding: 10px 16px;
  border-radius: 7px;
  background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
  border: none;
  color: #050505;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(212,175,55,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.sclap-btn-next::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: clap-btn-shine 2.8s linear infinite;
}
.sclap-btn-next:hover {
  box-shadow: 0 6px 30px rgba(212,175,55,0.65), inset 0 1px 0 rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
.sclap-btn-next.sclap-btn-finish {
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #fff;
  box-shadow: 0 4px 20px rgba(34,197,94,0.4), inset 0 1px 0 rgba(255,255,255,0.14);
}
.sclap-btn-next.sclap-btn-finish:hover {
  box-shadow: 0 6px 30px rgba(34,197,94,0.55);
}

/* ── Gold intro / done screen ── */
.sclap-intro {
  position: fixed;
  inset: 0;
  z-index: 9220;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.96);
  animation: clap-intro-in 0.35s ease forwards;
  pointer-events: all;
  gap: 0;
}
.sclap-intro-out {
  animation: clap-intro-out 0.4s ease forwards !important;
}
/* Gold racing stripes */
.sclap-intro-stripe {
  width: 100%;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    #D4AF37 0px,  #D4AF37 18px,
    #0B0B0B 18px, #0B0B0B 36px
  );
  position: absolute;
  top: 0; left: 0;
  animation: clap-stripe-slide 12s linear infinite;
}
.sclap-intro-stripe.sclap-intro-stripe-bottom {
  top: auto; bottom: 0;
}
.sclap-intro-lca {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-bottom: 20px;
  animation: clap-intro-fade-up 0.6s 0.1s ease both;
}
.sclap-intro-title {
  font-size: 3.2rem;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
  animation: clap-intro-fade-up 0.6s 0.2s ease both;
}
.sclap-intro-title span { color: #F7C948; }
.sclap-intro-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  margin-bottom: 42px;
  animation: clap-intro-fade-up 0.6s 0.3s ease both;
}
.sclap-intro-cta {
  padding: 14px 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #D4AF37, #B8860B);
  border: none;
  color: #050505;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 6px 30px rgba(212,175,55,0.5);
  animation: clap-intro-fade-up 0.6s 0.45s ease both;
  transition: all 0.2s;
}
.sclap-intro-cta:hover {
  box-shadow: 0 10px 40px rgba(212,175,55,0.75);
  transform: translateY(-2px);
}
.sclap-intro-skip-link {
  margin-top: 18px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: color 0.18s;
  animation: clap-intro-fade-up 0.6s 0.55s ease both;
  border: none;
  background: none;
  font-family: inherit;
}
.sclap-intro-skip-link:hover { color: rgba(255,255,255,0.5); }

/* ── Gold clapper icon in intro ── */
.sclap-intro-icon {
  width: 90px; height: 70px;
  position: relative;
  margin-bottom: 28px;
  animation: clap-intro-fade-up 0.6s 0.0s ease both;
}
.sclap-intro-icon-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: #0B0B0B;
  border: 2px solid #2A2A2A;
  border-radius: 4px;
}
.sclap-intro-icon-arm {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  background: repeating-linear-gradient(
    -55deg,
    #1a1500 0, #1a1500 8px,
    #D4AF37 8px, #D4AF37 16px
  );
  border-radius: 4px 4px 0 0;
  border: 2px solid #2A2A2A;
  border-bottom: 2px solid #D4AF37;
  animation: clap-icon-arm 2.4s 0.8s ease-in-out infinite;
  transform-origin: left center;
}
.sclap-intro-icon-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #D4AF37;
  box-shadow: 0 0 12px rgba(212,175,55,0.8);
  bottom: 14px; right: 14px;
  animation: clap-icon-dot 1.6s ease-in-out infinite;
}

/* ── Done screen variant ── */
.sclap-done-screen .sclap-intro-cta {
  box-shadow: 0 6px 30px rgba(212,175,55,0.45);
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .sclap-card { width: calc(100vw - 20px); }
  .sclap-intro-title { font-size: 2.2rem; }
}

/* ── Light-mode safety ── */
body.light .sclap-slate   { background: #0B0B0B; }
body.light .sclap-arm     { background: #0B0B0B; }
body.light .sclap-overlay { background: rgba(0,0,0,0.87); }

/* ════════════════════════════════════════════════════════════════
   STUDENT GUIDE CHARACTER  —  Gold ambient glow variant
   Uses same VYOM AI Girl image, gold bubble / dots / tail / glow
   ════════════════════════════════════════════════════════════════ */

.sguide-wrap {
  position: fixed;
  bottom: 0;
  right: 20px;
  z-index: 9215;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 280px;
}

/* ── Gold speech bubble ── */
.sguide-bubble {
  position: relative;
  width: 260px;
  background: rgba(10, 8, 2, 0.94);
  border: 1.5px solid rgba(212, 175, 55, 0.65);
  border-radius: 16px;
  padding: 14px 16px 12px;
  margin-bottom: 6px;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.10),
    0 4px 32px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(212, 175, 55, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.sguide-bubble-inner {
  font-size: 0.815rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Three gold dots at bottom of bubble */
.sguide-dots {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.sguide-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.45);
}
.sguide-dot:first-child  { background: rgba(212, 175, 55, 0.90); box-shadow: 0 0 6px rgba(212,175,55,0.5); }
.sguide-dot:nth-child(2) { background: rgba(212, 175, 55, 0.58); }

/* Tail pointing down toward character */
.sguide-tail {
  position: absolute;
  bottom: -10px;
  right: 36px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(212, 175, 55, 0.65);
}
.sguide-tail::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: -9px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid rgba(10, 8, 2, 0.94);
}

/* Blinking caret during typing */
@keyframes sguide-caret {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Character wrapper */
.sguide-char-wrap {
  position: relative;
  width: 280px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Gold ambient glow behind character */
.sguide-glow {
  position: absolute;
  bottom: 0;
  right: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 175, 55, 0.20) 0%,
    rgba(212, 175, 55, 0.07) 50%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

/* Character image */
.sguide-img {
  position: relative;
  z-index: 1;
  width: 230px;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 4px 24px rgba(212, 175, 55, 0.22));
  transform: translateY(0px);
  transition: transform 0.6s ease;
}

/* Float animation — begins after entrance */
.sguide-floated .sguide-img {
  animation: vyom-guide-float 6s ease-in-out infinite;
}

/* Responsive — tablet */
@media (max-width: 1024px) {
  .sguide-wrap   { width: 220px; right: 12px; }
  .sguide-bubble { width: 210px; }
  .sguide-bubble-inner { font-size: 0.775rem; }
  .sguide-img    { width: 190px; }
}

/* Responsive — mobile */
@media (max-width: 640px) {
  .sguide-wrap   { width: 200px; right: -28px; }
  .sguide-bubble { width: 192px; position: relative; right: 28px; }
  .sguide-bubble-inner { font-size: 0.72rem; }
  .sguide-img    { width: 160px; }
}

/* ══ END STUDENT WALKTHROUGH CSS ═══════════════════════════════ */


/* ── Chatbot FAB animated loader icon (from pract.html) ── */
.cb-loader {
  --color-one: #ffbf48;
  --color-two: #be4a1d;
  --color-three: #ffbf4780;
  --color-four: #bf4a1d80;
  --color-five: #ffbf4740;
  --time-animation: 2s;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: scale(0.62);
  box-shadow: none;
  animation: cb-colorize calc(var(--time-animation) * 3) ease-in-out infinite;
  pointer-events: none;
}
.cb-loader::before {
  content: none;
}
.cb-loader .cb-box {
  width: 100px;
  height: 100px;
  background: linear-gradient(180deg, var(--color-one) 30%, var(--color-two) 70%);
  mask: url(#cb-clipping);
  -webkit-mask: url(#cb-clipping);
}
.cb-loader svg {
  position: absolute;
}
.cb-loader svg #cb-clipping {
  filter: contrast(15);
  animation: cb-roundness calc(var(--time-animation) / 2) linear infinite;
}
.cb-loader svg #cb-clipping polygon {
  filter: blur(7px);
}
.cb-loader svg #cb-clipping polygon:nth-child(1) {
  transform-origin: 75% 25%;
  transform: rotate(90deg);
}
.cb-loader svg #cb-clipping polygon:nth-child(2) {
  transform-origin: 50% 50%;
  animation: cb-rotation var(--time-animation) linear infinite reverse;
}
.cb-loader svg #cb-clipping polygon:nth-child(3) {
  transform-origin: 50% 60%;
  animation: cb-rotation var(--time-animation) linear infinite;
  animation-delay: calc(var(--time-animation) / -3);
}
.cb-loader svg #cb-clipping polygon:nth-child(4) {
  transform-origin: 40% 40%;
  animation: cb-rotation var(--time-animation) linear infinite reverse;
}
.cb-loader svg #cb-clipping polygon:nth-child(5) {
  transform-origin: 40% 40%;
  animation: cb-rotation var(--time-animation) linear infinite reverse;
  animation-delay: calc(var(--time-animation) / -2);
}
.cb-loader svg #cb-clipping polygon:nth-child(6) {
  transform-origin: 60% 40%;
  animation: cb-rotation var(--time-animation) linear infinite;
}
.cb-loader svg #cb-clipping polygon:nth-child(7) {
  transform-origin: 60% 40%;
  animation: cb-rotation var(--time-animation) linear infinite;
  animation-delay: calc(var(--time-animation) / -1.5);
}
@keyframes cb-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes cb-roundness {
  0% { filter: contrast(15); }
  20% { filter: contrast(3); }
  40% { filter: contrast(3); }
  60% { filter: contrast(15); }
  100% { filter: contrast(15); }
}
@keyframes cb-colorize {
  0% { filter: hue-rotate(0deg); }
  20% { filter: hue-rotate(-30deg); }
  40% { filter: hue-rotate(-60deg); }
  60% { filter: hue-rotate(-90deg); }
  80% { filter: hue-rotate(-45deg); }
  100% { filter: hue-rotate(0deg); }
}

/* Strip default FAB chrome so the loader is the only visible icon */
.copilot-fab,
.student-copilot-fab {
  background: transparent !important;
  box-shadow: none !important;
}
.copilot-fab::after,
.copilot-fab::before,
.student-copilot-fab::after,
.student-copilot-fab::before,
.copilot-fab .copilot-pulse,
.copilot-fab .copilot-pulse2,
.student-copilot-fab .s-pulse {
  display: none !important;
}
.copilot-fab:hover,
.student-copilot-fab:hover {
  box-shadow: none !important;
}

/* Jump Highlight style */
@keyframes jump-flash {
  0% { background-color: rgba(var(--accent-rgb), 0.1); box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.15); }
  50% { background-color: rgba(var(--accent-rgb), 0.05); box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.075); }
  100% { background-color: transparent; box-shadow: none; }
}
.jump-highlight {
  animation: jump-flash 2s ease-out;
  border-radius: 8px;
}

/* ── Screen Share Presentation Styles ── */
.vc-floating-window.vc-presenting-mode {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 35px rgba(var(--accent-rgb), 0.062), 0 10px 45px rgba(0, 0, 0, 0.6);
}

.vc-presentation-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vc-presentation-border-glow {
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  pointer-events: none;
  z-index: 4;
  animation: vc-glow-ring 2s ease-in-out infinite;
}

/* LIVE PRESENTING badge */
.vc-presenting-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--accent-rgb), 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--accent2);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  z-index: 5;
  backdrop-filter: blur(8px);
}

.vc-presenting-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 8px var(--accent);
  animation: vcPulse 1.5s ease-in-out infinite;
}

.vc-presenting-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(11, 11, 11, 0.75);
  backdrop-filter: blur(12px);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 5;
}

/* Floating Presentation Thumbnails */
.vc-presentation-thumbnails {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
  max-height: calc(100% - 60px);
  overflow-y: auto;
  padding-right: 2px;
}

.vc-thumb-tile {
  width: 90px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: #050505;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.vc-thumb-tile:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.vc-thumb-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vc-thumb-label {
  position: absolute;
  bottom: 2px;
  left: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #e2e8f0;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Teacher Permission popup */
.vc-permission-toast {
  position: absolute;
  top: 50px;
  left: 12px;
  right: 12px;
  background: rgba(11, 11, 11, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  animation: vc-fade-up 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vc-perm-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.1);
}

.vc-perm-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vc-perm-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vc-perm-text {
  font-size: 0.68rem;
  color: rgba(226, 232, 240, 0.7);
}

.vc-perm-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.vc-perm-btn {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.vc-perm-btn.accept {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.087);
}

.vc-perm-btn.accept:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.vc-perm-btn.deny {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255,255,255,0.85);
}

.vc-perm-btn.deny:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.vc-perm-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(239,68,68,0.4);
}

/* Local screen toast alerts */
.vc-local-toast {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11, 11, 11, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  color: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  z-index: 110;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  animation: vc-fade-up 0.2s ease both;
}

/* Light mode overrides for screen sharing */
.light .vc-floating-window.vc-presenting-mode {
  border-color: rgba(11, 45, 99, 0.4) !important;
  box-shadow: 0 0 35px rgba(11, 45, 99, 0.15), 0 10px 45px rgba(0, 0, 0, 0.3);
}

.light .vc-presenting-badge {
  background: rgba(11, 45, 99, 0.08);
  border-color: rgba(11, 45, 99, 0.25);
  color: #0b2d63;
}

.light .vc-presenting-badge-dot {
  background: #0b2d63;
  box-shadow: 0 0 8px rgba(11, 45, 99, 0.4);
}

.light .vc-presenting-label {
  background: rgba(255, 253, 249, 0.9);
  color: #1a1a1a;
  border-color: rgba(11, 45, 99, 0.15);
}

.light .vc-permission-toast {
  background: rgba(255, 253, 249, 0.98);
  border-color: rgba(11, 45, 99, 0.25);
  box-shadow: 0 10px 30px rgba(11, 45, 99, 0.15);
}

.light .vc-perm-name {
  color: #1a1a1a;
}

.light .vc-perm-text {
  color: #444;
}

.light .vc-perm-btn.deny {
  background: rgba(11, 45, 99, 0.05);
  color: #444;
}

.light .vc-perm-btn.deny:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.light .vc-local-toast {
  background: rgba(255, 253, 249, 0.95);
  color: #1a1a1a;
  border-color: rgba(11, 45, 99, 0.15);
}

/* ── Auto Join Control Card ── */
.db-qc-auto-join-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 12px;
  position: relative;
  overflow: hidden;
}

.db-qc-auto-join-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 15px var(--accent-glow);
}

.db-qc-auto-join-card.active {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.05);
}

.db-qc-auto-join-icon {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--surface3);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.db-qc-auto-join-card.active .db-qc-auto-join-icon {
  background: var(--accent);
  transform: scale(1.05);
}

.db-qc-auto-join-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.db-qc-auto-join-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.db-qc-auto-join-desc {
  font-size: 0.78rem;
  color: var(--text3);
  line-height: 1.35;
}

.db-qc-auto-join-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.db-qc-auto-join-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text3);
  transition: color 0.3s ease;
  letter-spacing: 0.5px;
}

.db-qc-auto-join-card.active .db-qc-auto-join-label {
  color: var(--green);
}

/* ── spark-switch: Auto Join only (scoped via .db-qc-auto-join-switch) ── */
.db-qc-auto-join-switch {
  display: inline-block;
  font-size: 16px;
  line-height: 0;
  flex-shrink: 0;
}

.db-qc-auto-join-switch input {
  display: none;
}

.db-qc-auto-join-switch .track {
  position: relative;
  width: 5em;
  height: 2.5em;
  background: #050505;
  border-radius: 1.25em;
  cursor: pointer;
  overflow: hidden;
  border: 0.1em solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 0.2em 0.5em rgba(0, 0, 0, 0.6),
    0 0.2em 0.4em rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.db-qc-auto-join-switch .track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), #f5ba1f);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.db-qc-auto-join-switch .knob {
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 2em;
  height: 2em;
  background: #f7f7f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
}

.db-qc-auto-join-switch .knob svg {
  width: 1.2em;
  height: 1.2em;
  color: #272727;
  transition:
    color 0.4s ease,
    transform 0.4s ease;
}

.db-qc-auto-join-switch input:checked + .track {
  border-color: rgba(245, 186, 31, 0.8);
  box-shadow:
    inset 0 0.1em 0.3em rgba(0, 0, 0, 0.4),
    0 0 0.6em 0.1em rgba(245, 186, 31, 0.4);
}

.db-qc-auto-join-switch input:checked + .track .knob {
  transform: translateX(2.5em);
}

.db-qc-auto-join-switch input:checked + .track::before {
  opacity: 1;
}

.db-qc-auto-join-switch input:checked + .track .knob svg {
  color: #f5ba1f;
  transform: scale(1.1);
}

.db-qc-auto-join-switch .stars {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.db-qc-auto-join-switch .star {
  position: absolute;
  background: #f7f7f7;
  border-radius: 50%;
  transition:
    width 0.3s,
    height 0.3s,
    background 0.3s,
    border-radius 0.3s;
}

.db-qc-auto-join-switch .star:nth-child(1) {
  top: 0.4em;
  left: 100%;
  width: 0.15em;
  height: 0.15em;
  animation: ajs-drift 3s linear infinite;
}

.db-qc-auto-join-switch .star:nth-child(2) {
  top: 1.2em;
  left: 100%;
  width: 0.2em;
  height: 0.2em;
  animation: ajs-drift 4s linear infinite 1s;
}

.db-qc-auto-join-switch .star:nth-child(3) {
  top: 2em;
  left: 100%;
  width: 0.1em;
  height: 0.1em;
  animation: ajs-drift 2.5s linear infinite 0.5s;
}

.db-qc-auto-join-switch .star:nth-child(4) {
  top: 0.8em;
  left: 100%;
  width: 0.15em;
  height: 0.15em;
  animation: ajs-drift 5s linear infinite 2s;
}

.db-qc-auto-join-switch input:checked + .track .star {
  width: 1.5em;
  height: 0.1em;
  border-radius: 0.05em;
  background: rgba(255, 255, 255, 0.9);
}

.db-qc-auto-join-switch input:checked + .track .star:nth-child(1) {
  animation: ajs-warp 0.4s linear infinite;
}

.db-qc-auto-join-switch input:checked + .track .star:nth-child(2) {
  animation: ajs-warp 0.6s linear infinite 0.1s;
}

.db-qc-auto-join-switch input:checked + .track .star:nth-child(3) {
  animation: ajs-warp 0.3s linear infinite 0.2s;
}

.db-qc-auto-join-switch input:checked + .track .star:nth-child(4) {
  animation: ajs-warp 0.5s linear infinite 0.15s;
}

@keyframes ajs-drift {
  0%   { transform: translateX(0);      opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(-6em);   opacity: 0; }
}

@keyframes ajs-warp {
  0%   { transform: translateX(0) scaleX(1);  opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateX(-6em) scaleX(2); opacity: 0; }
}

/* Light mode: keep dark track so stars/lightning remain visible */
.light .db-qc-auto-join-switch .track {
  background: #050505;
  border-color: rgba(255, 255, 255, 0.15);
}

.db-qc-auto-join-help {
  font-size: 0.78rem;
  color: var(--text3);
  margin-top: 6px;
  margin-left: 4px;
  transition: color 0.3s ease;
  font-weight: 500;
}

.db-qc-auto-join-help.active {
  color: var(--green);
}

/* ── Light Mode overrides for Auto Join Control Card ── */
.light .db-qc-auto-join-card {
  background: #fdfcf7;
  border-color: rgba(11, 45, 99, 0.1);
}

.light .db-qc-auto-join-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 15px rgba(11, 45, 99, 0.08);
}

.light .db-qc-auto-join-card.active {
  background: rgba(11, 45, 99, 0.05);
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(11, 45, 99, 0.1);
}

.light .db-qc-auto-join-icon {
  background: #f3ede2;
}

.light .db-qc-auto-join-card.active .db-qc-auto-join-icon {
  background: var(--accent);
}

/* light mode spark-switch handled above */

/* ── Student Join Loading Overlay ── */
.lp-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 11, 11, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: inherit;
  animation: lp-fade-in 0.3s ease-out forwards;
}

.light .lp-loading-overlay {
  background: rgba(248, 245, 239, 0.85);
}

.lp-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lp-spin 0.8s linear infinite;
  margin-bottom: 16px;
}

.light .lp-spinner {
  border-color: rgba(11, 45, 99, 0.1);
  border-top-color: var(--accent);
}

.lp-loading-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
}

@keyframes lp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lp-spin {
  to { transform: rotate(360deg); }
}

/* ── Landing Help Chip ── */
.lp-help-chip-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  cursor: pointer;
  pointer-events: auto;
  animation: lp-chip-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Tooltip style */
.lp-help-chip-tooltip {
  background: rgba(11, 11, 11, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8F8F8F;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.lp-help-chip-container:hover .lp-help-chip-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* Glassmorphism Chip */
.lp-help-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 100px;
  background: rgba(11, 11, 11, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08); /* teal accent border */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(var(--accent-rgb), 0.037); /* glowing teal shadow */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  animation: lp-chip-float 4s ease-in-out infinite;
}

.lp-help-chip-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.2px;
}

.lp-help-chip-icon {
  font-size: 1rem;
}

.lp-help-chip-arrow {
  font-size: 0.9rem;
  color: var(--accent2); /* teal */
  animation: lp-arrow-bounce 1.5s ease infinite alternate;
}

/* Close button style */
.lp-help-chip-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #8F8F8F;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.lp-help-chip-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Hover effects on the main chip */
.lp-help-chip-container:hover .lp-help-chip {
  background: rgba(var(--accent-rgb), 0.12); /* light teal background */
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(var(--accent-rgb), 0.087); /* stronger glow */
  transform: translateY(-3px);
}

/* Light mode adjustments */
.light .lp-help-chip {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(13, 148, 136, 0.35); /* darker teal */
  box-shadow: 
    0 8px 32px rgba(13, 148, 136, 0.1),
    0 0 12px rgba(13, 148, 136, 0.1);
}

.light .lp-help-chip-text {
  color: #0f766e; /* dark teal text */
}

.light .lp-help-chip-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(13, 148, 136, 0.2);
  color: #475569;
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.12);
}

.light .lp-help-chip-close {
  background: rgba(11, 11, 11, 0.05);
  color: #475569;
}

.light .lp-help-chip-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.light .lp-help-chip-container:hover .lp-help-chip {
  background: rgba(13, 148, 136, 0.08);
  border-color: rgba(13, 148, 136, 0.6);
  box-shadow: 
    0 12px 40px rgba(13, 148, 136, 0.18),
    0 0 20px rgba(13, 148, 136, 0.25);
}

/* Animations */
@keyframes lp-chip-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lp-chip-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes lp-arrow-bounce {
  0% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(2px);
  }
}

@media (max-width: 640px) {
  .lp-help-chip-text {
    font-size: 0.78rem;
  }
  .lp-help-chip-tooltip {
    display: none; /* Hide tooltip on small screens */
  }
}


/* ═════════════════════════════════════════════════════════════════
   LANDING PAGE — AUTO NOTIFICATION CHIP
   Cycles through tips automatically on every visit.
   ═════════════════════════════════════════════════════════════════ */

.lp-autonotif {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9000;
  width: 300px;
  background: rgba(14, 14, 14, 0.96);
  border: 1px solid rgba(255, 122, 0, 0.35);
  border-radius: 14px;
  padding: 14px 40px 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 28px rgba(255,122,0,0.15);
  overflow: hidden;
  cursor: pointer;
  pointer-events: all;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.lp-autonotif:hover {
  border-color: rgba(255,122,0,0.65);
  box-shadow:
    0 10px 48px rgba(0,0,0,0.7),
    0 0 36px rgba(255,122,0,0.28);
  transform: translateY(-2px);
}

/* ── Entrance animation ── */
.lp-autonotif--enter {
  animation: lpn-slide-in 0.42s cubic-bezier(0.34,1.3,0.64,1) forwards;
}
@keyframes lpn-slide-in {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Exit animation ── */
.lp-autonotif--exit {
  animation: lpn-slide-out 0.34s ease-in forwards;
}
@keyframes lpn-slide-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(16px) scale(0.95); }
}

/* ── Icon badge ── */
.lp-autonotif__icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,122,0,0.1);
  border: 1px solid rgba(255,122,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(255,122,0,0.14);
}

/* ── Text body ── */
.lp-autonotif__body {
  flex: 1;
  min-width: 0;
}
.lp-autonotif__title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.lp-autonotif__text {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
}

/* ── Close button ── */
.lp-autonotif__close {
  position: absolute;
  top: 9px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 5px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.16s, background 0.16s;
}
.lp-autonotif__close:hover {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.07);
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .lp-autonotif { width: calc(100vw - 32px); left: 16px; bottom: 16px; }
}
body.light .lp-autonotif {
  background: rgba(255,255,255,0.96);
  border-color: rgba(255,122,0,0.3);
  box-shadow: 0 8px 40px rgba(0,0,0,0.15), 0 0 28px rgba(255,122,0,0.1);
}
body.light .lp-autonotif__title { color: #111; }
body.light .lp-autonotif__text  { color: rgba(0,0,0,0.55); }
body.light .lp-autonotif__close { color: rgba(0,0,0,0.3); }
body.light .lp-autonotif__close:hover { color: rgba(0,0,0,0.7); background: rgba(0,0,0,0.06); }

/* ══ END LANDING AUTO NOTIFICATION ══════════════════════════════ */


/* ═════════════════════════════════════════════════════════════════
   REDESIGNED TEACHER SETTINGS WORKSPACE
   ═════════════════════════════════════════════════════════════════ */

.profile-drawer {
  position: fixed;
  top: 0;
  right: -100vw;
  width: calc(100vw - var(--sidebar-w, 240px));
  max-width: none !important;
  height: 100vh;
  background: #121212 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 9001;
  display: flex;
  flex-direction: column;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden;
}
.profile-drawer.open {
  right: 0 !important;
}

@media (max-width: 1024px) {
  .profile-drawer {
    width: 100vw !important;
    right: -100vw !important;
  }
  .profile-drawer.open {
    right: 0 !important;
    left: 0 !important;
  }
}

/* Custom Light Theme override for profile-drawer */
.light-theme .profile-drawer {
  background: #f8fafc !important;
  border-left-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.05) !important;
}

/* Header Section */
.profile-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 40px 16px;
  background: transparent;
  border-bottom: none;
  flex-shrink: 0;
}
.profile-settings-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #fff;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}
.light-theme .profile-settings-title {
  color: #0f172a;
}
.profile-settings-subtitle {
  font-size: 15px !important;
  color: var(--text3, #8F8F8F);
  margin: 0;
}
.btn-public-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #7C1D1D;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 12px;
  padding: 9px 18px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(124,29,29,0.35);
}
.btn-public-profile:hover {
  background: #991b1b;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,29,29,0.5);
}
.light-theme .btn-public-profile {
  background: #7C1D1D;
  border-color: rgba(var(--accent-rgb), 0.3);
  color: #fff;
}
.light-theme .btn-public-profile:hover {
  background: #991b1b;
}

/* Hero Card */
/* ══════════════════════════════════════════════════════════
   PROFILE HERO — PREMIUM REDESIGN (v2)
   ══════════════════════════════════════════════════════════ */

.profile-settings-hero {
  position: relative;
  min-height: 300px;
  margin: 12px 40px 24px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(140deg, #180606 0%, #0e0306 40%, #07000e 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 32px 80px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.04) inset;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.profile-settings-hero:hover {
  border-color: rgba(var(--accent-rgb), 0.30);
  box-shadow: 0 32px 80px rgba(0,0,0,0.75), 0 0 90px rgba(var(--accent-rgb), 0.07), 0 2px 0 rgba(255,255,255,0.04) inset;
}

/* Cover image */
.profile-settings-hero.has-cover {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Shimmer loading state */
@keyframes coverShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.profile-settings-hero.has-cover:not([style*="background-image"]) {
  background: linear-gradient(90deg, #1e1e24 25%, #2a2a35 50%, #1e1e24 75%) !important;
  background-size: 200% 100% !important;
  animation: coverShimmer 1.5s infinite linear !important;
}

/* ── Overlay layers ── */
.psh-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Cinematic dual gradient: left-right fade + bottom-up darkness */
.psh-layer--gradient {
  background:
    linear-gradient(to right,  rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.30) 52%, rgba(0,0,0,0.60) 100%),
    linear-gradient(to top,    rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.22) 46%, transparent 100%);
  z-index: 1;
}
/* No-cover: replace with a rich accent centre burst */
.profile-settings-hero:not(.has-cover) .psh-layer--gradient {
  background:
    linear-gradient(140deg, rgba(0,0,0,0.75) 0%, rgba(8,0,3,0.60) 100%),
    radial-gradient(ellipse at 50% 65%, rgba(var(--accent-rgb), 0.26) 0%, transparent 62%);
}

/* Vignette — rounds the corners into darkness */
.psh-layer--vignette {
  background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(0,0,0,0.68) 100%);
  z-index: 2;
}

/* Accent radial glow — soft, sits behind the profile card */
.psh-layer--glow {
  background: radial-gradient(ellipse at 18% 88%, rgba(var(--accent-rgb), 0.22) 0%, transparent 52%);
  z-index: 3;
  animation: pshGlowPulse 5s ease-in-out infinite alternate;
}
@keyframes pshGlowPulse {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ── Floating particles ── */
.psh-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.psh-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: pshParticleFloat var(--dur, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes pshParticleFloat {
  0%   { transform: translateY(60px)  translateX(0);                    opacity: 0;    }
  15%  { opacity: 0.55; }
  85%  { opacity: 0.18; }
  100% { transform: translateY(-50px) translateX(var(--drift, 15px));  opacity: 0;    }
}

/* Soft light sweep */
.psh-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 40%, rgba(255,255,255,0.022) 50%, transparent 60%);
  animation: pshSweep 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pshSweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%);  }
}

/* ── Cover controls — top-right floating pill ── */
.profile-hero-cover-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 20;
}
.profile-hero-cover-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px 7px 12px;
  border-radius: 30px;
  background: rgba(8, 8, 14, 0.62);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.9);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.profile-hero-cover-btn:hover {
  background: rgba(var(--accent-rgb), 0.28);
  border-color: rgba(var(--accent-rgb), 0.65);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.22);
  color: #fff;
}
.profile-hero-cover-btn.remove-btn {
  padding: 7px 14px;
}
.profile-hero-cover-btn.remove-btn:hover {
  background: rgba(239,68,68,0.22);
  border-color: rgba(239,68,68,0.60);
  color: #ef4444;
}

/* ── Bottom content row ── */
.psh-bottom {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
}

/* ── Glass profile card ── */
.psh-glass-panel {
  display: flex;
  align-items: center;
  gap: 22px;
  background: rgba(6, 6, 10, 0.50);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 20px;
  padding: 18px 24px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.25);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
.psh-glass-panel:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.24);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.5),
    0 0 0 1px rgba(var(--accent-rgb), 0.08),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.light-theme .psh-glass-panel {
  background: rgba(255,250,242,0.55);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
}

/* ── Avatar ── */
.profile-hero-avatar-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2, #c0392b));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  box-shadow:
    0 0 0 3.5px rgba(0,0,0,0.85),
    0 0 0 6px var(--accent),
    0 0 32px rgba(var(--accent-rgb), 0.60),
    0 0 70px rgba(var(--accent-rgb), 0.20);
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  animation: pshAvatarFloat 4.5s ease-in-out infinite alternate;
}
@keyframes pshAvatarFloat {
  0%   { transform: translateY(0px);  }
  100% { transform: translateY(-5px); }
}
.profile-hero-avatar-wrap:hover {
  box-shadow:
    0 0 0 3.5px rgba(0,0,0,0.85),
    0 0 0 7px var(--accent),
    0 0 48px rgba(var(--accent-rgb), 0.80),
    0 0 90px rgba(var(--accent-rgb), 0.32);
  transform: translateY(-5px) scale(1.05);
  animation: none;
}
.profile-hero-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Camera badge */
.profile-hero-camera-btn {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #060606;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.40);
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 2;
}
.light-theme .profile-hero-camera-btn { border-color: #f8fafc; }
.profile-hero-camera-btn:hover {
  background: var(--accent2, #c0392b);
  transform: scale(1.18);
}

/* ── Profile text ── */
.profile-hero-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-hero-name {
  font-size: 25px;
  font-weight: 750;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.4px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.75);
  line-height: 1.15;
}
.light-theme .profile-hero-name { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.55); }

.profile-hero-badge-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.profile-hero-badge-role {
  background: rgba(var(--accent-rgb), 0.20);
  color: var(--accent2, #e67e22);
  padding: 4px 13px;
  border-radius: 30px;
  font-size: 11.5px;
  font-weight: 650;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  letter-spacing: 0.02em;
}
.light-theme .profile-hero-badge-role {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.32);
  color: var(--accent);
}
.profile-hero-badge-id {
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.52);
  padding: 4px 13px;
  border-radius: 30px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.light-theme .profile-hero-badge-id {
  background: rgba(0,0,0,0.18);
  border-color: rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.72);
}
.profile-hero-quote {
  font-size: 12px;
  color: rgba(255,255,255,0.50);
  font-style: italic;
  line-height: 1.6;
  max-width: 290px;
  margin-top: 2px;
}
.profile-hero-quote::before { content: '\201C'; color: var(--accent); font-size: 15px; font-style: normal; margin-right: 1px; }
.profile-hero-quote::after  { content: '\201D'; color: var(--accent); font-size: 15px; font-style: normal; margin-left: 1px; }

/* ── Stat cards row ── */
.profile-hero-metrics {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-shrink: 0;
  position: relative;
}
/* Accent glow behind stats */
.profile-hero-metrics::before {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 320px;
  height: 140px;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.14) 0%, transparent 68%);
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

/* Individual glass stat card */
.profile-hero-metric-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(6,6,10,0.55);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 16px;
  min-width: 90px;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transition:
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  cursor: default;
}
.profile-hero-metric-block:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow:
    0 14px 44px rgba(0,0,0,0.44),
    0 0 24px rgba(var(--accent-rgb), 0.14),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.light-theme .profile-hero-metric-block {
  background: rgba(255,250,242,0.52);
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 4px 20px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,0.85);
}

.profile-hero-metric-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.profile-hero-metric-icon-wrap {
  font-size: 15px;
  line-height: 1;
  filter: drop-shadow(0 0 7px rgba(var(--accent-rgb), 0.55));
}
.profile-hero-metric-value {
  font-size: 22px;
  font-weight: 750;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.5px;
}
.light-theme .profile-hero-metric-value { color: #0f172a; }
.profile-hero-metric-label {
  font-size: 10.5px;
  color: rgba(255,255,255,0.42);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2px;
}
.light-theme .profile-hero-metric-label { color: #64748b; }
.profile-hero-metric-spark {
  margin-top: 8px;
  opacity: 0.82;
}

/* Keep light-theme hero background dark for cover contrast */
.light-theme .profile-settings-hero {
  background: linear-gradient(140deg, #1a0606 0%, #100308 40%, #0a0012 100%);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

/* Responsive */
@media (max-width: 1200px) {
  .psh-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 26px;
    gap: 14px;
  }
  .profile-hero-metrics { width: 100%; }
  .profile-settings-hero { min-height: 270px; }
}
@media (max-width: 768px) {
  .profile-settings-hero {
    margin: 8px 14px 18px;
    min-height: 330px;
    border-radius: 18px;
  }
  .psh-bottom {
    flex-direction: column;
    align-items: center;
    padding: 18px 16px 22px;
    gap: 14px;
  }
  .psh-glass-panel {
    flex-direction: column;
    text-align: center;
    width: 100%;
    padding: 16px;
  }
  .profile-hero-details { align-items: center; }
  .profile-hero-quote { text-align: center; max-width: 240px; }
  .profile-hero-metrics {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: 8px;
  }
  .profile-hero-metric-block {
    min-width: calc(50% - 4px);
    flex: 1;
  }
}

/* Navigation Tab Bar */
.profile-drawer .profile-tabs {
  display: flex;
  gap: 16px;
  padding: 0 40px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.light-theme .profile-drawer .profile-tabs {
  border-bottom-color: #e2e8f0 !important;
}
.profile-drawer .profile-tab {
  flex: none !important;
  padding: 12px 16px !important;
  background: transparent !important;
  color: #8F8F8F !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}
.profile-drawer .profile-tab:hover {
  color: #e2e8f0 !important;
}
.light-theme .profile-drawer .profile-tab:hover {
  color: #0f172a !important;
}
.profile-drawer .profile-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.075);
}

/* Body Content wrapper */
.profile-drawer-body {
  padding: 0 40px 40px !important;
  overflow-y: auto;
  flex: 1;
}

/* Three-column layout */
.profile-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 1280px) {
  .profile-settings-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 1024px) {
  .profile-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* SaaS Settings Cards */
.settings-card {
  background: rgba(11, 11, 11, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  position: relative;
  transition: transform 0.2s ease;
}
.settings-card:hover {
  transform: translateY(-2px);
}
.light-theme .settings-card {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
}
.settings-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.settings-card-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.light-theme .settings-card-title {
  color: #0f172a;
}
.settings-card-desc {
  font-size: 13px;
  color: #8F8F8F;
  margin: 4px 0 0 0;
}

/* Buttons */
.btn-edit-profile {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--accent2);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-edit-profile:hover {
  background: var(--accent);
  color: #fff;
}
.light-theme .btn-edit-profile {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
.light-theme .btn-edit-profile:hover {
  background: var(--accent);
  color: #fff;
}

/* Forms & Inputs */
.two-col-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .two-col-inputs {
    grid-template-columns: 1fr;
  }
}
.form-group-saas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group-saas label {
  font-size: 13px;
  font-weight: 500;
  color: #8F8F8F;
}
.light-theme .form-group-saas label {
  color: #475569;
}
.input-saas {
  width: 100%;
  padding: 10px 14px;
  background: rgba(11, 11, 11, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.light-theme .input-saas {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.input-saas:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.045);
}
.input-saas[readonly] {
  opacity: 0.65;
  cursor: default;
}

.textarea-saas {
  width: 100%;
  padding: 12px 14px;
  background: rgba(11, 11, 11, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  outline: none;
  resize: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.light-theme .textarea-saas {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.textarea-saas:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.045);
}

/* Theme Selectors */
.theme-selectors-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.theme-card {
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 11, 11, 0.5);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #8F8F8F;
  transition: all 0.2s ease;
  position: relative;
}
.light-theme .theme-card {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}
.theme-card:hover {
  border-color: var(--accent);
  color: #fff;
}
.light-theme .theme-card:hover {
  color: #0f172a;
}
.theme-card.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  color: #fff;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.05);
}
.light-theme .theme-card.active {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent);
}
.theme-card-icon {
  font-size: 20px;
}
.theme-card-label {
  font-size: 13px;
  font-weight: 600;
}
.theme-card-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* Accent Color circles */
.accent-colors-label {
  font-size: 13px;
  font-weight: 500;
  color: #8F8F8F;
  margin-bottom: 10px;
}
.light-theme .accent-colors-label {
  color: #475569;
}
.accent-colors-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  overflow: visible;
  padding: 4px 2px;
}

/* ── Legacy tiny dots (kept for any reference outside Profile Settings) ── */
.accent-color-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}
.accent-color-circle:hover {
  transform: scale(1.15);
}
.accent-color-circle.active {
  border-color: #fff;
  box-shadow: 0 0 12px var(--accent-glow, rgba(var(--accent-rgb), 0.15));
}
.light-theme .accent-color-circle.active {
  border-color: #0f172a;
}

/* ── Premium Accent Swatches ─────────────────────────────────────── */
.vyom-accent-swatch {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vyom-accent-swatch:hover {
  transform: scale(1.18) translateY(-2px);
  box-shadow: 0 6px 18px var(--swatch-glow, rgba(0,0,0,0.3));
  z-index: 2;
}
.vyom-accent-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.vyom-accent-swatch--active {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15), 0 6px 20px var(--swatch-glow, rgba(0,0,0,0.35));
  transform: scale(1.1);
}
.light-theme .vyom-accent-swatch--active {
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.1), 0 4px 12px var(--swatch-glow, rgba(0,0,0,0.2));
}
.vyom-accent-swatch__check {
  font-size: 0.7rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
  line-height: 1;
}

/* Tooltip via CSS title attribute (native browser tooltip) is fine.
   For a custom tooltip uncomment below: */
/*
.vyom-accent-swatch::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.68rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.vyom-accent-swatch:hover::after {
  opacity: 1;
}
*/

.sp-accent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  overflow: visible;
  padding: 4px 2px;
}
.sp-accent-row .vyom-accent-swatch {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

/* Preview Widget */
.preview-widget {
  background: rgba(11, 11, 11, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.light-theme .preview-widget {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.preview-widget-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.light-theme .preview-widget-icon {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}
.preview-widget-info {
  flex: 1;
}
.preview-widget-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.light-theme .preview-widget-title {
  color: #0f172a;
}
.preview-widget-desc {
  font-size: 11px;
  color: #8F8F8F;
  margin-top: 2px;
}
.preview-widget-chart {
  width: 70px;
  height: 30px;
  flex-shrink: 0;
}

/* Full-width cards */
.settings-card-full {
  background: rgba(11, 11, 11, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  margin-bottom: 24px;
  transition: transform 0.2s ease;
}
.settings-card-full:hover {
  transform: translateY(-2px);
}
.light-theme .settings-card-full {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
}

/* Preferences List */
.preferences-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.preferences-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.preferences-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.light-theme .preferences-row:hover {
  background: #f1f5f9;
}
.preferences-row-icon {
  font-size: 18px;
  margin-right: 16px;
  color: var(--accent2);
}
.light-theme .preferences-row-icon {
  color: var(--accent);
}
.preferences-row-content {
  flex: 1;
}
.preferences-row-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.light-theme .preferences-row-title {
  color: #0f172a;
}
.preferences-row-desc {
  font-size: 12px;
  color: #8F8F8F;
  margin-top: 2px;
}
.preferences-row-value {
  font-size: 13px;
  color: #8F8F8F;
  margin-right: 12px;
  font-weight: 500;
}
.light-theme .preferences-row-value {
  color: #475569;
}
.preferences-row-chevron {
  color: #3A3A3A;
  font-size: 14px;
}

/* Account grid */
.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .account-grid {
    grid-template-columns: 1fr;
  }
}
.account-box {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(11, 11, 11, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.light-theme .account-box {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.account-box:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}
.account-box-icon {
  font-size: 20px;
  color: var(--accent);
}
.account-box-content {
  flex: 1;
}
.account-box-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.light-theme .account-box-title {
  color: #0f172a;
}
.account-box-desc {
  font-size: 12px;
  color: #8F8F8F;
  margin-top: 2px;
}
.account-box-chevron {
  color: #3A3A3A;
}

.account-box.danger-style {
  border-color: rgba(239, 68, 68, 0.2);
}
.account-box.danger-style:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}
.account-box.danger-style .account-box-icon {
  color: #ef4444;
}
.account-box.danger-style .account-box-title {
  color: #ef4444;
}

/* Full-width Logout Button */
.profile-logout-btn-saas {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.profile-logout-btn-saas:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: #ef4444;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15);
}

/* ══════════════════════════════════════════════════════════
   PROFILE SETTINGS — CARD ICON WRAPS
   ══════════════════════════════════════════════════════════ */

.settings-card-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12);
  font-size: 18px;
  flex-shrink: 0;
}
.settings-card-icon-wrap--shield {
  background: rgba(239, 68, 68, 0.1);
}
.light-theme .settings-card-icon-wrap {
  background: rgba(var(--accent-rgb), 0.1);
}
.settings-card-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   PROFILE SETTINGS — PERSONAL INFORMATION CARD (decorative)
   ══════════════════════════════════════════════════════════ */

.settings-card--personal {
  position: relative;
  overflow: hidden;
}
.settings-card--personal::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1.5px dashed rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 0 30px rgba(var(--accent-rgb), 0.05), 0 0 0 60px rgba(var(--accent-rgb), 0.03);
  pointer-events: none;
}
.settings-card--personal::before {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1.5px dashed rgba(var(--accent-rgb), 0.12);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   PROFILE SETTINGS — SAVE CHANGES BUTTON
   ══════════════════════════════════════════════════════════ */

.btn-save-changes {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25);
}
.btn-save-changes:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.35);
}
.light-theme .btn-save-changes {
  background: var(--accent);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════
   PROFILE SETTINGS — BOTTOM 2-COLUMN ROW
   ══════════════════════════════════════════════════════════ */

.profile-bottom-row {
  display: block;
  margin-bottom: 20px;
}

.settings-card-half {
  background: rgba(11, 11, 11, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.settings-card-half:hover {
  transform: translateY(-2px);
}
.light-theme .settings-card-half {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
}

/* Preferences card — globe watermark */
.settings-card-half--prefs::after {
  content: '🌍';
  position: absolute;
  bottom: -10px;
  right: -10px;
  font-size: 110px;
  opacity: 0.05;
  pointer-events: none;
  line-height: 1;
  filter: grayscale(0.3);
}

/* Account Actions card — lock watermark */
.settings-card-half--account::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle at 60% 60%, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.04) 50%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}
.settings-card-half--account::before {
  content: '🔐';
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 70px;
  opacity: 0.08;
  pointer-events: none;
  line-height: 1;
}

/* Account actions list — vertical */
.account-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-box--row {
  border-radius: 12px !important;
  width: 100% !important;
}



/* ══════════════════════════════════════════════════════════════════
   CHATBOT THEME — 80% Carbon Black / 15% Dark Grey / 5% Orange
   Orange is reserved ONLY for: active states, CTA buttons, indicators
   ══════════════════════════════════════════════════════════════════ */

/* ── Panel & Window shells: carbon black ── */
.copilot-window,
.student-copilot-panel,
.light .copilot-window,
.light .student-copilot-panel {
  background: #0A0A0A !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
}

/* ── Header: deep black, white text ── */
.copilot-header,
.student-copilot-header,
.light .copilot-header,
.light .student-copilot-header {
  background: #111111 !important;
  border-bottom: none !important;
}

.copilot-header::before,
.student-copilot-header::before,
.light .copilot-header::before,
.light .student-copilot-header::before {
  display: none !important;
}

/* Title = white, subtitle = light grey — NO orange */
.copilot-title,
.student-copilot-title,
.light .copilot-title,
.light .student-copilot-title {
  color: #FFFFFF !important;
}

.copilot-subtitle,
.student-copilot-sub,
.light .copilot-subtitle,
.light .student-copilot-sub {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ── Mode bar: dark, inactive tabs white/dim ── */
.copilot-modebar,
.light .copilot-modebar {
  background: #111111 !important;
  border-bottom: none !important;
}

.copilot-mode-btn,
.light .copilot-mode-btn {
  color: rgba(255, 255, 255, 0.4) !important;
}

.copilot-mode-btn:hover,
.light .copilot-mode-btn:hover {
  color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ORANGE: active tab indicator (navigation accent) */
.copilot-mode-btn.active,
.light .copilot-mode-btn.active {
  color: var(--accent2) !important;
  border-bottom-color: var(--accent2) !important;
  background: transparent !important;
}

/* ── Messages area: near-black background ── */
.copilot-messages,
.sc-messages,
.light .copilot-messages,
.light .sc-messages {
  background: #0A0A0A !important;
}

/* ── Chat bubbles: dark grey, white text ── */
.copilot-bubble,
.sc-bubble,
.light .copilot-bubble,
.light .sc-bubble,
.copilot-msg.bot .copilot-bubble,
.copilot-msg.user .copilot-bubble,
.copilot-msg.system .copilot-bubble,
.sc-msg.bot .sc-bubble,
.sc-msg.user .sc-bubble,
.light .copilot-msg.bot .copilot-bubble,
.light .copilot-msg.user .copilot-bubble,
.light .copilot-msg.system .copilot-bubble,
.light .sc-msg.bot .sc-bubble,
.light .sc-msg.user .sc-bubble {
  background: #1A1A1A !important;
  color: #E5E5E5 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* User bubble slightly lighter to distinguish */
.copilot-msg.user .copilot-bubble,
.sc-msg.user .sc-bubble,
.light .copilot-msg.user .copilot-bubble,
.light .sc-msg.user .sc-bubble {
  background: #232323 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

.copilot-bubble a,
.sc-bubble a,
.light .copilot-bubble a,
.light .sc-bubble a {
  color: var(--accent2) !important;
  text-decoration: underline !important;
}

/* ── Typing & thinking: dark grey, white text, ORANGE dot (indicator) ── */
.copilot-thinking,
.copilot-typing,
.sc-typing,
.light .copilot-thinking,
.light .copilot-typing,
.light .sc-typing {
  background: #1A1A1A !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ORANGE: typing/progress dot (indicator) */
.copilot-dot,
.sc-dot,
.light .copilot-dot,
.light .sc-dot {
  background: var(--accent2) !important;
}

/* Timestamp: dim white — NO orange */
.copilot-ts,
.sc-ts,
.light .copilot-ts,
.light .sc-ts {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* ── Input row: carbon black ── */
.copilot-input-row,
.sc-input-row,
.light .copilot-input-row,
.light .sc-input-row {
  background: #111111 !important;
  border-top: none !important;
}

/* Input field: dark grey, white text, dim placeholder — NO orange on text */
.copilot-input,
.sc-input,
.light .copilot-input,
.light .sc-input {
  background: #1A1A1A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #E5E5E5 !important;
}

/* ORANGE: input focus ring (active state indicator) */
.copilot-input:focus,
.sc-input:focus,
.light .copilot-input:focus,
.light .sc-input:focus {
  border-color: var(--accent2) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12) !important;
}

/* Placeholder: dim white — NO orange */
.copilot-input::placeholder,
.sc-input::placeholder,
.light .copilot-input::placeholder,
.light .sc-input::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* ── ORANGE: Send button (primary CTA) ── */
.copilot-send,
.sc-send,
.light .copilot-send,
.light .sc-send {
  background: var(--accent2) !important;
  border: none !important;
  color: #0A0A0A !important;
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.3) !important;
}

.copilot-send:hover:not(:disabled),
.sc-send:hover:not(:disabled),
.light .copilot-send:hover:not(:disabled),
.light .sc-send:hover:not(:disabled) {
  background: #FF9D00 !important;
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.45) !important;
  transform: scale(1.05) !important;
}

.copilot-send:disabled,
.sc-send:disabled {
  background: #2D2D2D !important;
  color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
}

/* Mic button: dark grey, dim icon — NO orange */
.copilot-mic,
.light .copilot-mic {
  background: #1A1A1A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}

.copilot-mic:hover,
.light .copilot-mic:hover {
  background: #232323 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ── Quick-action chips: dark grey, light text, subtle border ── */
.copilot-chip,
.sc-quick-btn,
.light .copilot-chip,
.light .sc-quick-btn {
  background: #1A1A1A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

.copilot-chip:hover,
.sc-quick-btn:hover,
.light .copilot-chip:hover,
.light .sc-quick-btn:hover {
  background: #232323 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Action chip (special) uses orange accent border only */
.copilot-chip.action-chip,
.light .copilot-chip.action-chip {
  border-color: rgba(var(--accent-rgb), 0.4) !important;
  background: rgba(var(--accent-rgb), 0.06) !important;
  color: var(--accent2) !important;
}

/* ── Header icon buttons: dark grey, dim icons ── */
.copilot-close,
.copilot-hbtn,
.student-copilot-close,
.light .copilot-close,
.light .copilot-hbtn,
.light .student-copilot-close {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.copilot-close:hover,
.copilot-hbtn:hover,
.student-copilot-close:hover,
.light .copilot-close:hover,
.light .copilot-hbtn:hover,
.light .student-copilot-close:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
}
.copilot-window,
.student-copilot-panel,
.light .copilot-window,
.light .student-copilot-panel {
  background: #050505 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8) !important;
}

.copilot-header,
.student-copilot-header,
.light .copilot-header,
.light .student-copilot-header {
  background: #050505 !important;
  border-bottom: none !important;
}

.copilot-header::before,
.student-copilot-header::before,
.light .copilot-header::before,
.light .student-copilot-header::before {
  display: none !important; /* Remove gradient overlay shine */
}

.copilot-title,
.student-copilot-title,
.light .copilot-title,
.light .student-copilot-title {
  color: var(--accent2) !important;
}

.copilot-subtitle,
.student-copilot-sub,
.light .copilot-subtitle,
.light .student-copilot-sub {
  color: rgba(var(--accent-rgb), 0.7) !important;
}

.copilot-modebar,
.light .copilot-modebar {
  background: #050505 !important;
  border-bottom: none !important;
}

.copilot-mode-btn,
.light .copilot-mode-btn {
  color: rgba(255, 255, 255, 0.5) !important;
}

.copilot-mode-btn:hover,
.light .copilot-mode-btn:hover {
  color: var(--accent2) !important;
  background: rgba(var(--accent-rgb), 0.08) !important;
}

.copilot-mode-btn.active,
.light .copilot-mode-btn.active {
  color: var(--accent2) !important;
  border-bottom-color: var(--accent2) !important;
}

.copilot-messages,
.sc-messages,
.light .copilot-messages,
.light .sc-messages {
  background: #050505 !important;
}

/* Chat bubble boxes: grey background, text: orange */
.copilot-bubble,
.sc-bubble,
.light .copilot-bubble,
.light .sc-bubble,
.copilot-msg.bot .copilot-bubble,
.copilot-msg.user .copilot-bubble,
.copilot-msg.system .copilot-bubble,
.sc-msg.bot .sc-bubble,
.sc-msg.user .sc-bubble,
.light .copilot-msg.bot .copilot-bubble,
.light .copilot-msg.user .copilot-bubble,
.light .copilot-msg.system .copilot-bubble,
.light .sc-msg.bot .sc-bubble,
.light .sc-msg.user .sc-bubble {
  background: #2a2a2a !important;
  color: var(--accent2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.copilot-bubble a,
.sc-bubble a,
.light .copilot-bubble a,
.light .sc-bubble a {
  color: var(--accent2) !important;
  text-decoration: underline !important;
}

/* Typing & thinking indicators: grey background, orange text/dots */
.copilot-thinking,
.copilot-typing,
.sc-typing,
.light .copilot-thinking,
.light .copilot-typing,
.light .sc-typing {
  background: #2a2a2a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--accent2) !important;
}

.copilot-dot,
.sc-dot,
.light .copilot-dot,
.light .sc-dot {
  background: var(--accent2) !important;
}

.copilot-ts,
.sc-ts,
.light .copilot-ts,
.light .sc-ts {
  color: rgba(var(--accent-rgb), 0.5) !important;
}

/* Input row: black background */
.copilot-input-row,
.sc-input-row,
.light .copilot-input-row,
.light .sc-input-row {
  background: #050505 !important;
  border-top: none !important;
}

/* Input field: dark grey/black background with orange text when typing */
.copilot-input,
.sc-input,
.light .copilot-input,
.light .sc-input {
  background: #111111 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--accent2) !important;
}

.copilot-input:focus,
.sc-input:focus,
.light .copilot-input:focus,
.light .sc-input:focus {
  border-color: var(--accent2) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15) !important;
}

.copilot-input::placeholder,
.sc-input::placeholder,
.light .copilot-input::placeholder,
.light .sc-input::placeholder {
  color: rgba(var(--accent-rgb), 0.4) !important;
}

/* Send & Mic buttons: black background, orange icon, orange border */
.copilot-send,
.sc-send,
.copilot-mic,
.light .copilot-send,
.light .sc-send,
.light .copilot-mic {
  background: #111111 !important;
  border: 1px solid rgba(var(--accent-rgb), 0.4) !important;
  color: var(--accent2) !important;
  box-shadow: none !important;
}

.copilot-send:hover:not(:disabled),
.sc-send:hover:not(:disabled),
.copilot-mic:hover,
.light .copilot-send:hover:not(:disabled),
.light .sc-send:hover:not(:disabled),
.light .copilot-mic:hover {
  background: #2a2a2a !important;
  border-color: var(--accent2) !important;
  color: var(--accent2) !important;
}

/* Chat chips (quick action buttons) */
.copilot-chip,
.sc-quick-btn,
.light .copilot-chip,
.light .sc-quick-btn {
  background: #111111 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--accent2) !important;
}

.copilot-chip:hover,
.sc-quick-btn:hover,
.light .copilot-chip:hover,
.light .sc-quick-btn:hover {
  border-color: var(--accent2) !important;
  background: #2a2a2a !important;
}

.copilot-chip.action-chip,
.light .copilot-chip.action-chip {
  border-color: var(--accent2) !important;
  background: rgba(var(--accent-rgb), 0.1) !important;
}

/* Close & header buttons */
.copilot-close,
.copilot-hbtn,
.student-copilot-close,
.light .copilot-close,
.light .copilot-hbtn,
.light .student-copilot-close {
  background: #111111 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--accent2) !important;
}

.copilot-close:hover,
.copilot-hbtn:hover,
.student-copilot-close:hover,
.light .copilot-close:hover,
.light .copilot-hbtn:hover,
.light .student-copilot-close:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}
/* ═══════════════════════════════════════════════════════════════
   VYOM AI GUIDE CHARACTER
   ═══════════════════════════════════════════════════════════════ */

/* Outer container — fixed bottom-right, above everything */
.vyom-guide-wrap {
  position: fixed;
  bottom: 0;
  right: 20px;
  z-index: 99999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 280px;
}

/* Speech bubble */
.vyom-guide-bubble {
  position: relative;
  width: 260px;
  background: rgba(15, 10, 5, 0.92);
  border: 1.5px solid rgba(255, 122, 0, 0.65);
  border-radius: 16px;
  padding: 14px 16px 12px;
  margin-bottom: 6px;
  box-shadow:
    0 0 0 1px rgba(255, 122, 0, 0.12),
    0 4px 32px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(255, 122, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vyom-guide-bubble-inner {
  font-size: 0.815rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Three static dots at bottom of bubble (decorative) */
.vyom-guide-dots {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.vyom-guide-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 122, 0, 0.5);
}
.vyom-guide-dot:first-child { background: rgba(255, 122, 0, 0.85); }
.vyom-guide-dot:nth-child(2) { background: rgba(255, 122, 0, 0.55); }

/* Tail pointing down toward character */
.vyom-guide-tail {
  position: absolute;
  bottom: -10px;
  right: 36px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255, 122, 0, 0.65);
}
.vyom-guide-tail::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: -9px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid rgba(15, 10, 5, 0.92);
}

/* Character wrapper */
.vyom-guide-char-wrap {
  position: relative;
  width: 280px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Ambient orange glow behind character */
.vyom-guide-glow {
  position: absolute;
  bottom: 0;
  right: 20px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 122, 0, 0.18) 0%,
    rgba(255, 122, 0, 0.06) 50%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

/* Character image */
.vyom-guide-img {
  position: relative;
  z-index: 1;
  width: 230px;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 4px 24px rgba(255, 122, 0, 0.22));
  transform: translateY(0px);
  transition: transform 0.6s ease;
}

/* Floating animation — begins after wave */
.vyom-guide-floated .vyom-guide-img {
  animation: vyom-guide-float 6s ease-in-out infinite;
}

@keyframes vyom-guide-float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

/* Responsive — tablet */
@media (max-width: 1024px) {
  .vyom-guide-wrap {
    width: 220px;
    right: 12px;
  }
  .vyom-guide-bubble {
    width: 210px;
  }
  .vyom-guide-bubble-inner {
    font-size: 0.775rem;
  }
  .vyom-guide-img {
    width: 190px;
  }
}

/* Responsive — mobile: character shifts partially off-screen */
@media (max-width: 640px) {
  .vyom-guide-wrap {
    width: 200px;
    right: -30px;
  }
  .vyom-guide-bubble {
    width: 195px;
    right: 30px;
    position: relative;
  }
  .vyom-guide-bubble-inner {
    font-size: 0.72rem;
  }
  .vyom-guide-img {
    width: 160px;
  }
}

/* AI Insights Section CSS */
.sd-ai-section {
  margin-bottom: 24px;
}

.sd-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 768px) {
  .sd-ai-grid {
    grid-template-columns: 1fr;
  }
}

.sd-ai-card {
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sd-ai-card:hover {
  transform: translateY(-4px);
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 8px 30px rgba(249, 115, 22, 0.08);
}

.sd-ai-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-ai-streak-val {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #F97316, #FDBA74);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 6px 0;
}

.sd-ai-consistency {
  font-size: 0.8rem;
  color: var(--sd-text2);
}

.sd-ai-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  margin-top: 8px;
  width: fit-content;
}

.sd-ai-trend.improving {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
}

.sd-ai-recommend-body {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--sd-text2);
  margin-bottom: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sd-ai-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #F97316;
  background: rgba(249, 115, 22, 0.08);
  padding: 2px 6px;
  border-radius: 8px;
  width: fit-content;
  border: 1px solid rgba(249, 115, 22, 0.15);
}

.sd-ai-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sd-ai-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sd-ai-list-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--sd-text2);
}

.sd-ai-progress-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.sd-ai-progress-fill {
  height: 100%;
  border-radius: 3px;
}

.sd-ai-progress-fill.green {
  background: linear-gradient(90deg, #10B981, #34D399);
}

.sd-ai-progress-fill.orange {
  background: linear-gradient(90deg, #F97316, #FB923C);
}

/* Rotating Banner styling */
.sd-ai-ticker-container {
  margin-top: 16px;
  padding: 12px 18px;
  background: rgba(249, 115, 22, 0.03);
  border: 1px dashed rgba(249, 115, 22, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.sd-ai-ticker-sparkle {
  color: #F97316;
  font-size: 0.95rem;
  animation: pulse-glow 2s infinite ease-in-out;
}

.sd-ai-ticker-text {
  font-size: 0.8rem;
  color: var(--sd-text2);
  transition: opacity 0.4s ease-in-out;
  opacity: 1;
}

.sd-ai-ticker-text.fade-out {
  opacity: 0;
}


@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ═══════════════════════════════════════════════════
   SD-ALI: Premium AI Learning Intelligence Section
   ═══════════════════════════════════════════════════ */

.sd-ali-wrapper {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.sd-ali-wrapper.ali-mounted {
  opacity: 1;
  transform: translateY(0);
}

/* Section Header */
.sd-ali-header { margin-bottom: 2px; }
.sd-ali-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.sd-ali-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--sd-text);
  letter-spacing: -0.01em;
}
.sd-ali-live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #F97316;
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.25);
  border-radius: 20px;
  padding: 2px 8px;
}
.sd-ali-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F97316;
  animation: sd-ali-pulse 1.4s infinite;
}
@keyframes sd-ali-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(249,115,22,0.5); }
  50% { opacity: 0.7; transform: scale(0.85); box-shadow: 0 0 0 4px rgba(249,115,22,0); }
}
.sd-ali-subtitle {
  font-size: 0.78rem;
  color: var(--sd-text2);
}

/* ─── ORB PANEL ─── */
.sd-ali-orb-panel {
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(249,115,22,0.1);
  border-radius: 20px;
  padding: 28px 24px 18px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sd-ali-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(249,115,22,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,115,22,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: sd-ali-grid-move 20s linear infinite;
  pointer-events: none;
  will-change: background-position;
}
@keyframes sd-ali-grid-move {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* Particles */
.sd-ali-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #F97316, transparent);
  opacity: 0.35;
  pointer-events: none;
  will-change: transform, opacity;
}
.sd-ali-p1 { width: 5px; height: 5px; top: 15%; left: 8%; animation: sd-ali-float 6s 0s infinite ease-in-out; }
.sd-ali-p2 { width: 4px; height: 4px; top: 70%; left: 12%; animation: sd-ali-float 8s 1s infinite ease-in-out; }
.sd-ali-p3 { width: 6px; height: 6px; top: 25%; right: 10%; animation: sd-ali-float 7s 0.5s infinite ease-in-out; }
.sd-ali-p4 { width: 3px; height: 3px; top: 75%; right: 15%; animation: sd-ali-float 9s 2s infinite ease-in-out; }
.sd-ali-p5 { width: 5px; height: 5px; top: 50%; left: 45%; animation: sd-ali-float 5s 0.8s infinite ease-in-out; }
@keyframes sd-ali-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
  50% { transform: translateY(-12px) scale(1.2); opacity: 0.6; }
}

/* Orb Layout: 5-element grid */
.sd-ali-orb-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 18px 24px;
  position: relative;
  z-index: 1;
}

/* Metric Cells */
.sd-ali-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
}
.sd-ali-metric-tl { justify-self: end; grid-area: 1 / 1; text-align: right; }
.sd-ali-metric-tr { justify-self: start; grid-area: 1 / 3; text-align: left; }
.sd-ali-metric-bl { justify-self: end; grid-area: 3 / 1; text-align: right; }
.sd-ali-metric-br { justify-self: start; grid-area: 3 / 3; text-align: left; }

.sd-ali-metric-val {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sd-ali-metric-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--sd-text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sd-ali-metric-bar {
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  width: 90px;
  margin-top: 2px;
}
.sd-ali-metric-tl .sd-ali-metric-bar,
.sd-ali-metric-bl .sd-ali-metric-bar { margin-left: auto; }
.sd-ali-metric-fill {
  height: 100%;
  border-radius: 2px;
  opacity: 0.75;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Orb */
.sd-ali-orb-wrap {
  grid-area: 1 / 2 / 4 / 3;
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-ali-orb-ring1,
.sd-ali-orb-ring2,
.sd-ali-orb-ring3 {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(249,115,22,0.25);
  will-change: transform;
}
.sd-ali-orb-ring1 {
  width: 120px; height: 120px;
  animation: sd-ali-spin 8s linear infinite;
  border-color: rgba(249,115,22,0.2);
  border-top-color: rgba(249,115,22,0.7);
}
.sd-ali-orb-ring2 {
  width: 100px; height: 100px;
  animation: sd-ali-spin 5s linear infinite reverse;
  border-color: rgba(253,186,116,0.15);
  border-right-color: rgba(253,186,116,0.6);
}
.sd-ali-orb-ring3 {
  width: 140px; height: 140px;
  animation: sd-ali-spin 12s linear infinite;
  border-color: rgba(249,115,22,0.08);
  border-bottom-color: rgba(249,115,22,0.3);
}
@keyframes sd-ali-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sd-ali-orb-core {
  width: 78px;
  height: 78px;
  background: radial-gradient(circle at 40% 35%, rgba(249,115,22,0.3), rgba(12,12,12,0.9) 70%);
  border-radius: 50%;
  border: 1px solid rgba(249,115,22,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow:
    0 0 30px rgba(249,115,22,0.2),
    0 0 60px rgba(249,115,22,0.08),
    inset 0 0 20px rgba(249,115,22,0.08);
  animation: sd-ali-orb-breathe 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
  will-change: box-shadow;
}
@keyframes sd-ali-orb-breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(249,115,22,0.15), 0 0 50px rgba(249,115,22,0.06), inset 0 0 20px rgba(249,115,22,0.06); }
  50% { box-shadow: 0 0 35px rgba(249,115,22,0.28), 0 0 70px rgba(249,115,22,0.12), inset 0 0 28px rgba(249,115,22,0.12); }
}
.sd-ali-orb-icon { font-size: 1.5rem; line-height: 1; }
.sd-ali-orb-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(249,115,22,0.8);
  text-transform: uppercase;
}

/* Live Feed Bar */
.sd-ali-feed-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 9px 14px;
  background: rgba(249,115,22,0.04);
  border: 1px dashed rgba(249,115,22,0.15);
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.sd-ali-feed-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #F97316;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.sd-ali-feed-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #F97316;
  animation: sd-ali-pulse 1.4s infinite;
}
.sd-ali-feed-text {
  font-size: 0.78rem;
  color: var(--sd-text2);
  font-weight: 500;
  transition: opacity 0.38s ease;
}
.sd-ali-feed-text.ali-fading { opacity: 0; }

/* ─── TWO CARDS ROW ─── */
.sd-ali-cards-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 768px) {
  .sd-ali-cards-row { grid-template-columns: 1fr; }
  .sd-ali-orb-layout { gap: 10px 12px; }
  .sd-ali-metric-val { font-size: 1.2rem; }
  .sd-ali-orb-wrap { width: 90px; height: 90px; }
  .sd-ali-orb-core { width: 60px; height: 60px; }
  .sd-ali-orb-ring1 { width: 90px; height: 90px; }
  .sd-ali-orb-ring2 { width: 76px; height: 76px; }
  .sd-ali-orb-ring3 { width: 108px; height: 108px; }
}
.sd-ali-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sd-ali-card:hover {
  transform: translateY(-3px);
  border-color: rgba(249,115,22,0.22);
  box-shadow: 0 8px 28px rgba(249,115,22,0.07);
}
.sd-ali-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.sd-ali-card-icon { font-size: 1.1rem; }
.sd-ali-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--sd-text);
}

/* Momentum */
.sd-ali-card-momentum::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(249,115,22,0.1), transparent 70%);
  pointer-events: none;
}
.sd-ali-momentum-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #10B981;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 20px;
  padding: 2px 8px;
  margin-bottom: 10px;
}
.sd-ali-momentum-streak {
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(135deg, #F97316, #FDBA74);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 4px;
}
.sd-ali-momentum-score {
  font-size: 0.75rem;
  color: var(--sd-text2);
  margin-bottom: 12px;
}
.sd-ali-momentum-bar-wrap { }
.sd-ali-momentum-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.sd-ali-momentum-fill {
  height: 100%;
  background: linear-gradient(90deg, #F97316, #FDBA74);
  border-radius: 2px;
  transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* AI Coach */
.sd-ali-card-coach::before {
  content: '';
  position: absolute;
  bottom: -20px; left: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(96,165,250,0.06), transparent 70%);
  pointer-events: none;
}
.sd-ali-coach-orb-sm {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #F97316, #FDBA74);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #000;
  font-weight: 900;
  animation: sd-ali-orb-breathe 2.5s infinite;
  flex-shrink: 0;
}
.sd-ali-coach-terminal {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(249,115,22,0.1);
  border-radius: 10px;
  padding: 12px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
  font-family: 'Courier New', monospace;
}
.sd-ali-coach-done-line {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.4;
}
.sd-ali-coach-active-line {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}
.sd-ali-coach-prompt {
  color: #F97316;
  font-weight: 700;
  margin-right: 2px;
}
.sd-ali-coach-cursor {
  color: #F97316;
  animation: sd-ali-blink 0.8s step-end infinite;
  font-weight: 300;
}
@keyframes sd-ali-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.sd-ali-coach-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: #F97316;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Prediction */
.sd-ali-card-prediction::before {
  content: '';
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 60px;
  background: radial-gradient(ellipse, rgba(249,115,22,0.08), transparent 70%);
  pointer-events: none;
}
.sd-ali-pred-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.sd-ali-pred-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sd-ali-pred-val {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  min-width: 60px;
}
.sd-ali-pred-val.orange { background: linear-gradient(135deg, #F97316, #FDBA74); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sd-ali-pred-val.gold { background: linear-gradient(135deg, #EAB308, #FBBF24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sd-ali-pred-val.green { background: linear-gradient(135deg, #10B981, #34D399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sd-ali-pred-lbl {
  font-size: 0.72rem;
  color: var(--sd-text2);
  font-weight: 500;
}
.sd-ali-pred-note {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── CHART PANEL ─── */
.sd-ali-chart-panel {
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 18px 20px;
}
.sd-ali-chart-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sd-ali-chart-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--sd-text);
  display: block;
  margin-bottom: 2px;
}
.sd-ali-chart-sub {
  font-size: 0.72rem;
  color: var(--sd-text2);
}
.sd-ali-chart-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: #F97316;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.18);
  border-radius: 8px;
  padding: 3px 8px;
  white-space: nowrap;
}
.sd-ali-chart-wrap {
  height: 180px;
  position: relative;
}

/* ─── CAROUSEL PANEL ─── */
.sd-ali-carousel-panel {
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(249,115,22,0.1);
  border-radius: 16px;
  padding: 16px 18px;
  overflow: hidden;
  position: relative;
}
.sd-ali-carousel-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(249,115,22,0.03) 0%, transparent 60%);
  pointer-events: none;
}
.sd-ali-carousel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sd-ali-carousel-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sd-text);
}
.sd-ali-carousel-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.sd-ali-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: all 0.35s ease;
}
.sd-ali-dot.ali-active {
  width: 14px;
  border-radius: 3px;
  background: #F97316;
}
.sd-ali-carousel-body {
  display: flex;
  align-items: center;
  gap: 14px;
  transition: opacity 0.38s ease;
}
.sd-ali-carousel-body.ali-fading { opacity: 0; }
.sd-ali-carousel-icon {
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249,115,22,0.07);
  border: 1px solid rgba(249,115,22,0.15);
  border-radius: 12px;
  flex-shrink: 0;
}
.sd-ali-carousel-content { flex: 1; }
.sd-ali-carousel-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 3px;
}
.sd-ali-carousel-sub {
  font-size: 0.72rem;
  color: var(--sd-text2);
}
.sd-ali-carousel-arrow {
  font-size: 1.1rem;
  color: #F97316;
  opacity: 0.6;
}

/* Presenter Screen Share Placeholder to avoid recursion */
.vc-presenter-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1E1E2E, #11111B);
  color: #cdd6f4;
  padding: 24px;
  text-align: center;
  border-radius: 8px;
}
.vc-presenter-placeholder-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.25));
  animation: vc-present-pulse 2s infinite ease-in-out;
}
.vc-presenter-placeholder-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #F97316;
  margin-bottom: 8px;
}
.vc-presenter-placeholder-subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 320px;
  line-height: 1.5;
}

@keyframes vc-present-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

/* ── Upgraded End Session Modal Styles ── */
.vc-end-session-modal {
  border: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6) !important;
}

.vc-end-summary-stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.2s;
}
.vc-end-summary-stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.vc-end-stat-label {
  font-size: 0.72rem;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vc-end-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}

.vc-end-insights-box {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 20px;
}

.vc-gdrive-btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.2);
  transition: all 0.2s;
}
.vc-gdrive-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.vc-gdrive-btn:active {
  transform: translateY(0);
}
.vc-gdrive-btn.loading {
  background: var(--surface3) !important;
  color: var(--text3) !important;
  box-shadow: none;
  cursor: not-allowed;
}

/* Spinner Animations */
.vc-spinner {
  width: 40px;
  height: 40px;
  border: 3.5px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: vc-spin 0.8s infinite linear;
}
.vc-spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vc-spin 0.8s infinite linear;
  display: inline-block;
  margin-left: 8px;
}

@keyframes vc-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Student Marks Register Styles */
.rpt-table-wrapper {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
}

.rpt-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.rpt-table-wrapper th {
  position: sticky;
  top: 0;
  background: var(--surface2);
  z-index: 10;
  padding: 12px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text2);
  border-bottom: 2px solid var(--border);
  box-shadow: inset 0 -1px 0 var(--border);
}

.rpt-table-wrapper td {
  padding: 12px 16px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.prof-settings-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}

.prof-settings-input:focus {
  border-color: var(--accent);
}

/* Custom styles for Student Marks Register pagination & tools */
.rpt-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding: 8px 16px;
  background: var(--surface2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.rpt-pagination-info {
  font-size: 0.8rem;
  color: var(--text3);
}

.rpt-pagination-btns {
  display: flex;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════
   NATIVE VYOM AI CHARACTER DASHBOARD ELEMENT
   ═══════════════════════════════════════════════════════════ */

/* Main two-column dashboard layout wrapper */
/* NOTE: .teacher-ai-panel is position:fixed — it does NOT participate in document
   flow. We must NOT add padding-right here or the hero/cards will be squeezed. */
.db-main-content-layout {
  display: block;
  width: 100% !important;
  max-width: none !important;
  position: relative;
  margin-top: 20px;
  padding-right: 0; /* AI panel is fixed-positioned — no space reservation needed */
  box-sizing: border-box;
}

.db-main-left-col {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px; /* this is the sole spacing mechanism — no margin-bottom on children */
}

/* AI Assistant — Fixed viewport anchor, always bottom-right of main content area */
.teacher-ai-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 50;
  overflow: visible;
  pointer-events: none;
  padding: 0;
  box-sizing: border-box;

  /* Responsive sizes using CSS variables */
  --char-h: 234px; /* Reduced further for better dashboard balance */
  --ai-panel-w: 232px;
  width: var(--ai-panel-w);
  top: var(--header-h, 72px);
  height: calc(100vh - var(--header-h, 72px));
}

/* ═══════════════════════════════════════════════════════════════
   ABHI SPEECH BUBBLE — Premium AI Teaching Consultant Message
   ═══════════════════════════════════════════════════════════════ */

/* Slide-up + fade animations */
@keyframes abhi-slide-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes abhi-fade-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes abhi-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  50%       { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}
@keyframes abhi-avatar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(255, 140, 0, 0); }
}

/* Main bubble container */
.teacher-ai-message {
  position: absolute;
  bottom: calc(var(--char-h) + 14px);
  left: 4px;
  right: 4px;
  pointer-events: auto;
  background: rgba(8, 8, 12, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 140, 0, 0.22);
  border-radius: 18px;
  padding: 14px 15px 12px 15px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 24px rgba(255, 120, 0, 0.06);
  color: rgba(255, 248, 231, 0.92);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Visible state: slide in */
.teacher-ai-message.abhi-bubble--visible {
  animation: abhi-slide-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Fading state: slide out */
.teacher-ai-message.abhi-bubble--fading {
  animation: abhi-fade-out 0.28s ease forwards;
}

/* Top orange accent stripe */
.teacher-ai-message::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.5), transparent);
  border-radius: 0 0 1px 1px;
}

/* Speech tail — points toward character (bottom-right) */
.teacher-ai-message::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 36px;
  border-width: 9px 7px 0 7px;
  border-style: solid;
  border-color: rgba(255, 140, 0, 0.22) transparent transparent transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

/* Tip cover — fills the tail with bubble background color */
.teacher-ai-message-tip-cover {
  position: absolute;
  top: 100%;
  right: 37px;
  border-width: 8px 6px 0 6px;
  border-style: solid;
  border-color: rgba(8, 8, 12, 0.92) transparent transparent transparent;
  z-index: 1;
}

/* ─── Header: avatar + identity ─── */
.abhi-bubble-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

/* Avatar ring */
.abhi-avatar-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.abhi-avatar-wrap.abhi-avatar--pulse .abhi-avatar {
  animation: abhi-avatar-pulse 2.4s ease-in-out 3;
}

.abhi-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.18) 0%, rgba(255, 80, 0, 0.1) 100%);
  border: 1.5px solid rgba(255, 140, 0, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 0 10px rgba(255, 120, 0, 0.15);
}

/* Online status dot */
.abhi-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #34d399;
  border: 1.5px solid rgba(8, 8, 12, 0.95);
  animation: abhi-status-pulse 2.5s ease-in-out infinite;
}

/* Identity text */
.abhi-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.abhi-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFB347;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.abhi-role {
  font-size: 0.64rem;
  font-weight: 500;
  color: rgba(255, 200, 140, 0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* ─── Thin orange divider ─── */
.abhi-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,140,0,0.18), rgba(255,140,0,0.06) 80%, transparent);
  margin: 10px 0 10px 0;
  border-radius: 1px;
}

/* ─── Message body ─── */
.abhi-message-body {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.abhi-msg-icon {
  font-size: 0.82rem;
  line-height: 1.4;
  flex-shrink: 0;
  margin-top: 1px;
}

.ai-message-text {
  font-size: 0.83rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 248, 231, 0.92);
  flex: 1;
  min-width: 0;
}

/* ─── Footer: timestamp + progress ─── */
.abhi-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 140, 0, 0.07);
}

.abhi-timestamp {
  font-size: 0.62rem;
  color: rgba(255, 200, 140, 0.38);
  letter-spacing: 0.03em;
  font-weight: 500;
}

.abhi-progress-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}

.abhi-prog-dot {
  height: 2px;
  width: 14px;
  border-radius: 2px;
  background: rgba(255, 140, 0, 0.15);
  transition: width 0.35s ease, background 0.35s ease;
}

.abhi-prog-dot.active {
  width: 22px;
  background: rgba(255, 160, 40, 0.75);
}

/* The AI character image placement - anchored to bottom-right baseline */
.teacher-ai-panel img {
  height: var(--char-h);
  width: auto;
  object-fit: contain;
  position: absolute;
  bottom: -20px; /* Offset down-right */
  right: -20px; /* Offset down-right */
  z-index: 3;
  pointer-events: none;
  transform-origin: bottom center;
  animation: ai-character-behavior 6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.04)) drop-shadow(0 0 12px rgba(255, 140, 0, 0.02));
}

/* Combined float, breath, and head motion animation */
@keyframes ai-character-behavior {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  20% {
    transform: translateY(-2px) scale(1.005) rotate(0.3deg);
  }
  40% {
    transform: translateY(-5px) scale(1.01) rotate(0deg);
  }
  60% {
    transform: translateY(-3px) scale(1.005) rotate(-0.3deg);
  }
  80% {
    transform: translateY(-1px) scale(1.002) rotate(0.1deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* Ambient Background Elements */
.ambient-elements {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* Glow orb behind character */
.ambient-glow-circle {
  position: absolute;
  width: 400px;
  height: 400px;
  bottom: -40px;
  right: -40px;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.05) 0%, rgba(255, 140, 0, 0.01) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(15px);
  animation: ambient-glow-pulse 8s ease-in-out infinite alternate;
}
@keyframes ambient-glow-pulse {
  0% { transform: scale(1) translate(0, 0); opacity: 0.18; }
  100% { transform: scale(1.15) translate(-10px, -10px); opacity: 0.25; }
}

/* Ambient particles for character ecosystem */
.ambient-dot {
  display: none !important; /* Removed particles */
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 140, 0, 0.35);
  filter: blur(0.5px);
  animation: ambient-dot-drift 8s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
.ambient-dot.d-1 { left: 15%; bottom: 120px; animation-delay: 0s; }
.ambient-dot.d-2 { right: 25%; bottom: 190px; animation-delay: 2s; }
.ambient-dot.d-3 { left: 40%; bottom: 310px; animation-delay: 4.5s; }
.ambient-dot.d-4 { right: 10%; bottom: 70px; animation-delay: 1.2s; }
.ambient-dot.d-5 { left: 60%; bottom: 250px; animation-delay: 3.5s; }

@keyframes ambient-dot-drift {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.1; }
  50% { transform: translateY(-25px) translateX(10px); opacity: 0.8; }
}

/* Subtle floating education/AI icons */
.ambient-icon {
  display: none !important; /* Removed particles */
  position: absolute;
  font-size: 18px;
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.6)) drop-shadow(0 0 2px rgba(255, 140, 0, 0.8));
  pointer-events: none;
  animation: float-drift-icons 6s ease-in-out infinite alternate;
  z-index: 4;
}

.icon-cap { left: 5%; bottom: 180px; animation-delay: 0s; }
.icon-bulb { right: 5%; bottom: 220px; animation-delay: 1.5s; }
.icon-plane { left: 10%; bottom: 80px; animation-delay: 3s; }
.icon-star1 { right: 15%; bottom: 310px; animation-delay: 4.5s; }
.icon-star2 { left: 25%; bottom: 350px; animation-delay: 2s; }

@keyframes float-drift-icons {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-10px) rotate(15deg);
  }
}

/* Golden neural nodes SVG behind character */
.ambient-neural-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  pointer-events: none;
}

/* Connecting animated orange data stream SVG — hidden */
.ti-ai-data-stream {
  display: none !important;
}

.stream-path-back {
  fill: none;
  stroke: rgba(255, 140, 0, 0.08);
  stroke-width: 1.5;
}

.stream-path-flow {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 6, 20;
  animation: stream-flow-animation 2.2s linear infinite;
  filter: drop-shadow(0 0 2px #ff8c00);
}

.stream-path-flow-fast {
  fill: none;
  stroke: #ffb700;
  stroke-width: 1.5;
  stroke-dasharray: 4, 30;
  animation: stream-flow-animation 1.4s linear infinite;
}

@keyframes stream-flow-animation {
  from {
    stroke-dashoffset: 26;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ── AI Panel Responsive ── */
/* The panel is position:fixed at all sizes — padding-right on the layout
   wrapper is intentionally removed so cards use the full content width. */

/* Large desktop: full size */
@media (min-width: 1200px) {
  .teacher-ai-panel {
    --char-h: 242px;
    --ai-panel-w: 232px;
  }
  /* No padding-right — AI panel floats over the content */
}

/* Laptop */
@media (max-width: 1199px) and (min-width: 992px) {
  .teacher-ai-panel {
    --char-h: 225px; /* Reduced 15% */
    --ai-panel-w: 221px; /* Reduced 15% */
  }
  /* No padding-right — AI panel floats over the content */
}

/* Tablet */
@media (max-width: 991px) and (min-width: 768px) {
  .teacher-ai-panel {
    --char-h: 182px; /* Reduced 15% */
    --ai-panel-w: 187px; /* Reduced 15% */
  }
  /* No padding-right — AI panel floats over the content */
  .teacher-ai-message {
    padding: 10px 14px 8px 26px;
    bottom: calc(var(--char-h) + 10px);
  }
  .teacher-ai-message .quote-icon {
    font-size: 1.2rem;
    left: 8px;
    top: 8px;
  }
  .ai-message-text {
    font-size: 0.8rem;
  }
}

/* Mobile: hide fixed panel, show nothing (no space reserved) */
@media (max-width: 767px) {
  .db-main-content-layout {
    padding-right: 0;
  }
  .teacher-ai-panel {
    display: none !important;
  }
  .ti-ai-data-stream {
    display: none;
  }
}


/* ── Notification Center ── */
/* ══════════════════════════════════════════════════════════
   NOTIFICATION CENTER — FULL WIDTH PREMIUM REDESIGN
   ══════════════════════════════════════════════════════════ */
.settings-card-half--notif-center {
  background: rgba(10, 10, 10, 0.9) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 24px 28px !important;
  position: relative;
  overflow: hidden;
}
/* Decorative megaphone icon bg */
.settings-card-half--notif-center::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 5% 50%, rgba(var(--accent-rgb), 0.06) 0%, transparent 50%);
  pointer-events: none;
}

/* Notification Center Header Row */
.nc-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.nc-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nc-header-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.nc-header-text-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.nc-header-text-desc {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.nc-header-center {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nc-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #9CA3AF;
  font-weight: 600;
}

/* Categories Grid */
.nc-categories-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1400px) {
  .nc-categories-wrapper { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .nc-categories-wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .nc-categories-wrapper { grid-template-columns: 1fr; }
}

.nc-category-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease;
  border-bottom: none;
}
.nc-category-block:hover {
  border-color: rgba(var(--accent-rgb), 0.25);
  transform: translateY(-2px);
}
.nc-category-block:last-child { border-bottom: none; }
.nc-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nc-category-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #E5E7EB;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nc-category-icon {
  font-size: 14px;
}
.nc-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 0;
}
.nc-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 3px 2px;
  font-size: 0.78rem;
  color: #9CA3AF;
  transition: color 0.15s ease;
  user-select: none;
  border-radius: 6px;
}
.nc-item-row:not(.muted):hover {
  color: #E5E7EB;
}
.nc-item-row.muted {
  opacity: 0.4;
  cursor: default;
}
.nc-item-checkbox-custom {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: transparent;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.nc-item-row:not(.muted):hover .nc-item-checkbox-custom {
  border-color: var(--accent, var(--accent));
}
.nc-item-checkbox-custom.checked {
  background: var(--accent, var(--accent));
  border-color: var(--accent, var(--accent));
  color: #fff;
}

/* ══════════════════════════════════════════════════════════
   VAULT TOGGLE — Premium Notification Switch (VYOM themed)
   Replaces the legacy .nc-switch / .nc-slider component
   ══════════════════════════════════════════════════════════ */

/* ── Base sizes via CSS custom properties ── */
.ux-vault-toggle {
  --vt-track-w: 92px;
  --vt-track-h: 40px;
  --vt-thumb-sz: 32px;
  --vt-thumb-margin: 4px;
  /* travel = track-w - thumb-sz - margin*2  →  92-32-8 = 52px */
  --vt-travel: calc(var(--vt-track-w) - var(--vt-thumb-sz) - var(--vt-thumb-margin) * 2);
  /* VYOM dark-mode palette (overridden in light below) */
  --vt-bg-base:  #1a1d20;
  --vt-bg-dark:  #101214;
  --vt-bg-light: #272c32;
  --vt-amber:    var(--accent2, #F59E0B);
  --vt-emerald:  #10b981;
  --vt-dim:      #6b7280;
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  vertical-align: middle;
}

.ux-vault-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ux-vault-toggle__wrapper {
  width:  var(--vt-track-w);
  height: var(--vt-track-h);
  position: relative;
  border-radius: 40px;
  background: var(--vt-bg-base);
  box-shadow: 0 0 0 2px var(--vt-bg-dark), 0 4px 14px rgba(0,0,0,0.6);
  isolation: isolate;
}

.ux-vault-toggle__track {
  position: absolute;
  inset: 2px;
  border-radius: 38px;
  background: var(--vt-bg-dark);
  box-shadow:
    inset 0 5px 12px rgba(0,0,0,0.9),
    inset 0 2px 5px rgba(0,0,0,0.7),
    inset 0 -1px 3px rgba(255,255,255,0.03);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ux-vault-toggle__texture {
  position: absolute;
  inset: 0;
  background: var(--vt-bg-dark);
  filter: url(#ux-metal-noise);
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── Circuit SVG ── */
.ux-vault-toggle__circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.ux-circuit-path {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.65,0,0.35,1), stroke 0.6s ease;
}
.ux-circuit--off {
  stroke: var(--vt-amber);
  stroke-dashoffset: 0;
  opacity: 0.4;
}
.ux-circuit--on {
  stroke: var(--vt-emerald);
  stroke-dashoffset: 100;
  opacity: 0.4;
}

/* ── Status labels (OFF / ON) ── */
.ux-vault-toggle__status {
  position: absolute;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 1px;
  display: flex;
  z-index: 2;
}
.ux-vault-toggle__status span {
  display: inline-block;
  transition:
    transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
    opacity   0.4s ease,
    color     0.4s ease;
  transition-delay: calc(var(--i, 0) * 0.05s);
}
.ux-vault-toggle__status--off {
  right: 11px;
  color: var(--vt-amber);
  text-shadow: 0 0 6px rgba(245,158,11,0.4);
}
.ux-vault-toggle__status--on {
  left: 11px;
  color: var(--vt-emerald);
  text-shadow: 0 0 6px rgba(16,185,129,0.4);
}
.ux-vault-toggle__status--on span {
  opacity: 0;
  transform: translateY(10px) scale(0.8);
  color: var(--vt-dim);
}

/* ── Thumb ── */
.ux-vault-toggle__thumb {
  position: absolute;
  top:  var(--vt-thumb-margin);
  left: var(--vt-thumb-margin);
  width:  var(--vt-thumb-sz);
  height: var(--vt-thumb-sz);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--vt-bg-light), var(--vt-bg-base));
  box-shadow:
    0 4px 10px rgba(0,0,0,0.6),
    0 2px 5px  rgba(0,0,0,0.5),
    inset 0  2px 3px rgba(255,255,255,0.15),
    inset 0 -2px 4px rgba(0,0,0,0.5);
  z-index: 3;
  transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ux-vault-toggle__thumb-ring {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #3a3f46, #1a1d21);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.8);
  z-index: 1;
}
.ux-vault-toggle__thumb-core {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--vt-bg-dark);
  border: 2px solid var(--vt-amber);
  box-shadow: inset 0 0 8px rgba(245,158,11,0.3), 0 0 10px rgba(245,158,11,0.35);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.ux-thumb-icon {
  width: 13px;
  height: 13px;
  color: var(--vt-amber);
  transition: color 0.6s ease, transform 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.ux-vault-toggle__thumb-glare {
  position: absolute;
  top: 2px;
  left: 10%;
  width: 80%;
  height: 40%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
  z-index: 4;
  pointer-events: none;
}

/* ── Checked state ── */
.ux-vault-toggle__input:checked ~ .ux-vault-toggle__wrapper .ux-vault-toggle__thumb {
  transform: translateX(var(--vt-travel));
}
.ux-vault-toggle__input:checked ~ .ux-vault-toggle__wrapper .ux-vault-toggle__thumb-core {
  border-color: var(--vt-emerald);
  box-shadow: inset 0 0 10px rgba(16,185,129,0.4), 0 0 16px rgba(16,185,129,0.55);
}
.ux-vault-toggle__input:checked ~ .ux-vault-toggle__wrapper .ux-thumb-icon {
  color: var(--vt-emerald);
  transform: rotate(180deg) scale(1.1);
}
.ux-vault-toggle__input:checked ~ .ux-vault-toggle__wrapper .ux-circuit--off {
  stroke-dashoffset: -100;
  opacity: 0;
}
.ux-vault-toggle__input:checked ~ .ux-vault-toggle__wrapper .ux-circuit--on {
  stroke-dashoffset: 0;
  opacity: 0.8;
}
.ux-vault-toggle__input:checked ~ .ux-vault-toggle__wrapper .ux-vault-toggle__status--off span {
  opacity: 0;
  transform: translateY(-10px) scale(0.8);
  color: var(--vt-dim);
}
.ux-vault-toggle__input:checked ~ .ux-vault-toggle__wrapper .ux-vault-toggle__status--on span {
  opacity: 1;
  transform: translateY(0) scale(1);
  color: var(--vt-emerald);
}

/* ── Hover glow ── */
.ux-vault-toggle:hover .ux-vault-toggle__thumb-core {
  box-shadow: inset 0 0 12px rgba(245,158,11,0.5), 0 0 20px rgba(245,158,11,0.6);
}
.ux-vault-toggle__input:checked:hover ~ .ux-vault-toggle__wrapper .ux-vault-toggle__thumb-core {
  box-shadow: inset 0 0 12px rgba(16,185,129,0.6), 0 0 22px rgba(16,185,129,0.7);
}

/* ── Active press ── */
.ux-vault-toggle:active .ux-vault-toggle__thumb { transform: scale(0.95); }
.ux-vault-toggle__input:checked:active ~ .ux-vault-toggle__wrapper .ux-vault-toggle__thumb {
  transform: translateX(var(--vt-travel)) scale(0.95);
}

/* ── Keyboard focus ring ── */
.ux-vault-toggle__input:focus-visible ~ .ux-vault-toggle__wrapper {
  outline: 2px solid var(--vt-amber);
  outline-offset: 3px;
  border-radius: 40px;
}

/* ── Enable All — slightly bigger toggle ── */
.nc-enable-all-label .ux-vault-toggle {
  --vt-track-w:    100px;
  --vt-track-h:     44px;
  --vt-thumb-sz:    36px;
  --vt-thumb-margin: 4px;
  /* travel = 100-36-8 = 56px */
}

/* Preset Buttons (now in header) */
.nc-presets-row {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 3px;
}
.nc-preset-btn {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  background: transparent;
  border: none;
  color: #6b7280;
  transition: all 0.2s ease;
}
.nc-preset-btn:hover {
  color: #E5E7EB;
}
.nc-preset-btn.active {
  background: var(--accent, var(--accent));
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.35);
}

/* Enable All toggle label */
.nc-enable-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #9CA3AF;
  font-weight: 600;
  cursor: pointer;
}
/* big toggle for Enable All */
/* enable-all size override moved to .nc-enable-all-label .ux-vault-toggle above */

/* ── Responsive scaling ── */
@media (max-width: 600px) {
  .ux-vault-toggle {
    --vt-track-w:    80px;
    --vt-track-h:    36px;
    --vt-thumb-sz:   28px;
    --vt-thumb-margin: 4px;
  }
  .nc-enable-all-label .ux-vault-toggle {
    --vt-track-w:    88px;
    --vt-track-h:    38px;
    --vt-thumb-sz:   30px;
  }
  .ux-vault-toggle__status { font-size: 8px; }
  .ux-thumb-icon { width: 11px; height: 11px; }
}
@media (max-width: 380px) {
  .ux-vault-toggle {
    --vt-track-w:    72px;
    --vt-track-h:    32px;
    --vt-thumb-sz:   24px;
    --vt-thumb-margin: 4px;
  }
  .nc-enable-all-label .ux-vault-toggle {
    --vt-track-w:    80px;
    --vt-track-h:    36px;
    --vt-thumb-sz:   28px;
  }
}

/* Light Theme support */
.light-theme .settings-card-half--notif-center {
  background: rgba(255,255,255,0.95) !important;
  border-color: #e2e8f0 !important;
}
.light-theme .nc-header-text-title { color: #0f172a; }
.light-theme .nc-category-block { background: #f8fafc; border-color: #e2e8f0; }
.light-theme .nc-category-title { color: #0f172a; }
.light-theme .nc-item-row { color: #6b7280; }
.light-theme .nc-item-row:not(.muted):hover { color: #0f172a; }
.light-theme .ux-vault-toggle,
.light .ux-vault-toggle {
  --vt-bg-base:  #ccc0b0;
  --vt-bg-dark:  #e0d8ce;
  --vt-bg-light: #bdb0a0;
  --vt-amber:    var(--accent, #0B2D63);
}
.light-theme .ux-vault-toggle__wrapper,
.light .ux-vault-toggle__wrapper {
  box-shadow: 0 0 0 2px #b8a898, 0 4px 14px rgba(0,0,0,0.18);
}
.light-theme .ux-vault-toggle__thumb-ring,
.light .ux-vault-toggle__thumb-ring {
  background: linear-gradient(to bottom, #b8aa98, #a89888);
}
.light-theme .ux-vault-toggle__thumb-core,
.light .ux-vault-toggle__thumb-core {
  background: #f8f0e4;
}
.light-theme .nc-preset-btn { color: #6b7280; }
.light-theme .nc-preset-btn:hover { color: #0f172a; }
.light-theme .nc-preset-btn.active { background: var(--accent, var(--accent)); color: #fff; }
.light-theme .nc-item-checkbox-custom { border-color: #cbd5e1; background: #fff; }


/* ══════════════════════════════════════════════════════════
   NOTIFICATION CENTER — FULL-WIDTH WRAPPER ROW
   ══════════════════════════════════════════════════════════ */
.profile-notif-row {
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════
   VYOM AI FOOTER — PREMIUM BANNER CARD
   ══════════════════════════════════════════════════════════ */
.vyom-ai-footer-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f1629 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.vyom-ai-footer-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 0%, transparent 40%);
  pointer-events: none;
}
.vyom-ai-footer-card::after {
  content: '';
  position: absolute;
  right: -20px; top: -20px;
  width: 200px; height: 200px;
  background: radial-gradient(ellipse at 70% 30%, rgba(130,100,255,0.12) 0%, transparent 65%);
  pointer-events: none;
}
/* Left: character + branding */
.vyom-ai-footer-left {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.vyom-ai-character-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(var(--accent-rgb), 0.3));
  flex-shrink: 0;
}
.vyom-ai-character-fallback {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.35);
}
.vyom-ai-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vyom-ai-footer-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.vyom-ai-footer-subtitle {
  font-size: 13px;
  color: #9CA3AF;
  margin-bottom: 12px;
}
.vyom-ai-footer-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-ai-chat {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
}
.btn-ai-chat:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
}
.btn-ai-explore {
  background: transparent;
  color: #E5E7EB;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-ai-explore:hover {
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}

/* Center: AI Status Card */
.vyom-ai-footer-status {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 20px;
  position: relative;
  z-index: 1;
  min-width: 220px;
}
.ai-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ai-status-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.ai-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.ai-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.ai-status-desc {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 12px;
}
.ai-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ai-status-item-label {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 2px;
  font-weight: 500;
}
.ai-status-item-value {
  font-size: 13px;
  font-weight: 700;
  color: #E5E7EB;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Right: decorative graphic placeholder */
.vyom-ai-footer-right {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  font-size: 64px;
  gap: 8px;
  filter: drop-shadow(0 4px 12px rgba(130,100,255,0.2));
}
.vyom-ai-footer-deco-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}
.deco-icon-card {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.3s ease;
}
.deco-icon-card:hover { transform: translateY(-3px); }

@media (max-width: 1100px) {
  .vyom-ai-footer-card {
    grid-template-columns: 1fr 1fr;
  }
  .vyom-ai-footer-right { display: none; }
}
@media (max-width: 700px) {
  .vyom-ai-footer-card {
    grid-template-columns: 1fr;
  }
  .vyom-ai-footer-status { min-width: auto; }
}

.light-theme .vyom-ai-footer-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f1629 100%);
}

/* ── Smooth Scroll Card Highlight ── */
@keyframes highlight-pulse-animation {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); border-color: rgba(var(--accent-rgb), 0.8); }
  50% { box-shadow: 0 0 25px 8px rgba(var(--accent-rgb), 0.6); border-color: rgba(var(--accent-rgb), 1); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); border-color: rgba(255, 255, 255, 0.08); }
}
.highlight-pulse {
  animation: highlight-pulse-animation 2s ease-in-out;
}

/* ════════════════════════════════════════════════════════════════
   LCF — Landing Contact Form  (premium two-column redesign)
   ════════════════════════════════════════════════════════════════ */

/* Wrapper: adds the background glow & curved arc */
.lcf-wrap {
  position: relative;
  padding: 16px 24px 48px;
  overflow: hidden;
}
.lcf-wrap::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--accent-rgb), 0.14) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
/* Thin curved arc across the top */
.lcf-wrap::after {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 220px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Main card */
.lcf-card {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  background: rgba(18,18,18,0.82);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.08) inset,
    0 0 60px rgba(var(--accent-rgb), 0.10),
    0 30px 80px rgba(0,0,0,0.55),
    0 4px 16px rgba(0,0,0,0.3);
  transition: box-shadow 0.3s ease;
}
.lcf-card:hover {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.1) inset,
    0 0 80px rgba(var(--accent-rgb), 0.16),
    0 30px 80px rgba(0,0,0,0.6),
    0 4px 16px rgba(0,0,0,0.35);
}

/* Left panel */
.lcf-left {
  padding: 44px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Pill badge */
.lcf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: fit-content;
}

/* Title */
.lcf-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  font-family: 'Syne', sans-serif;
  letter-spacing: -0.02em;
}
.lcf-title-orange {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), 0.4);
  text-underline-offset: 4px;
}

/* Subtitle */
.lcf-subtitle {
  color: rgba(255,255,255,0.55);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* Illustration */
.lcf-illustration {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 8px auto;
  overflow: visible;
}

/* Illustration animations */
@keyframes lcf-float-bubble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes lcf-float-env {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(-2deg); }
}
@keyframes lcf-float-plane {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(6px) translateY(-4px); }
}
@keyframes lcf-sparkle {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.lcf-bubble { animation: lcf-float-bubble 3s ease-in-out infinite; }
.lcf-envelope { animation: lcf-float-env 3.5s ease-in-out infinite; }
.lcf-plane { animation: lcf-float-plane 2.8s ease-in-out infinite; }
.lcf-sparkles { animation: lcf-sparkle 2s ease-in-out infinite; }

/* Feature icons row */
.lcf-features {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.lcf-feat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.lcf-feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.18);
  transition: box-shadow 0.25s, transform 0.25s;
}
.lcf-feat-item:hover .lcf-feat-icon {
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.35);
  transform: translateY(-2px);
}
.lcf-feat-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.lcf-feat-desc {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

/* Divider */
.lcf-divider {
  background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb), 0.25) 30%, rgba(var(--accent-rgb), 0.25) 70%, transparent);
  width: 1px;
  align-self: stretch;
}

/* Right panel */
.lcf-right {
  padding: 44px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Form field row */
.lcf-field {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lcf-field--tall {
  align-items: flex-start;
}
.lcf-field-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.12);
}
.lcf-field-icon--top {
  margin-top: 26px; /* align with textarea top */
}
.lcf-field-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcf-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.01em;
}
.lcf-input {
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.93rem;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
  font-family: inherit;
}
.lcf-input::placeholder { color: rgba(255,255,255,0.28); }
.lcf-input:focus {
  border-color: rgba(var(--accent-rgb), 0.65);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12), 0 0 12px rgba(var(--accent-rgb), 0.1);
}
.lcf-textarea {
  resize: none;
  line-height: 1.6;
}

/* Status messages */
.lcf-status {
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
}
.lcf-status--error {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.28);
}
.lcf-status--success {
  background: rgba(16,185,129,0.12);
  color: #10b981;
  border: 1px solid rgba(16,185,129,0.28);
}

/* Send button */
.lcf-send-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.2) inset;
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
  font-family: inherit;
}
.lcf-send-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(var(--accent-rgb), 0.50), 0 0 0 1px rgba(var(--accent-rgb), 0.3) inset;
  filter: brightness(1.08);
}
.lcf-send-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Privacy note */
.lcf-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-top: -4px;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .lcf-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .lcf-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, rgba(var(--accent-rgb), 0.25) 30%, rgba(var(--accent-rgb), 0.25) 70%, transparent);
  }
  .lcf-left, .lcf-right { padding: 32px 28px; }
  .lcf-title { font-size: 2rem; }
}
@media (max-width: 540px) {
  .lcf-wrap { padding: 12px 12px 36px; }
  .lcf-left, .lcf-right { padding: 28px 20px; }
  .lcf-features { gap: 8px; }
  .lcf-feat-icon { width: 38px; height: 38px; font-size: 0.95rem; }
  .lcf-title { font-size: 1.7rem; }
  .lcf-field { gap: 10px; }
  .lcf-field-icon { width: 38px; height: 38px; border-radius: 10px; }
}
/* ═══════════════════════════════════════════════════════════════
   PREMIUM STUDENT PROFILE & SETTINGS PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.sp-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  animation: sp-fadein 0.25s ease;
}
@keyframes sp-fadein { from{opacity:0} to{opacity:1} }

/* ── Page Container ── */
.sp-page {
  min-height: 100vh;
  background: var(--bg);
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 60px;
  animation: sp-slidein 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes sp-slidein { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── Breadcrumb ── */
.sp-breadcrumb {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 28px;
  font-size: 0.82rem; color: rgba(241,245,249,0.45);
}
.light .sp-breadcrumb { color: rgba(30,41,59,0.55); }
.sp-bc-link {
  cursor: pointer; color: rgba(241,245,249,0.55);
  transition: color 0.2s;
}
.sp-bc-link:hover { color: var(--accent); }
.light .sp-bc-link { color: rgba(30,41,59,0.65); }
.sp-bc-sep { color: rgba(241,245,249,0.25); font-size: 0.9rem; }
.light .sp-bc-sep { color: rgba(30,41,59,0.3); }
.sp-bc-cur { color: var(--text); font-weight: 600; }

/* ── HERO ── */
.sp-hero {
  position: relative; overflow: hidden;
  min-height: 260px;
  background:
    radial-gradient(ellipse 80% 60% at 60% 80%, rgba(255,122,26,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(255,170,60,0.12) 0%, transparent 60%),
    linear-gradient(135deg, #0a0604 0%, #120a02 40%, #0d0805 100%);
  margin: 0 20px 0;
  border-radius: 20px;
  border: 1px solid rgba(255,122,26,0.15);
}
.sp-hero-bg-layer {
  position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Cellipse cx='280' cy='180' rx='200' ry='140' fill='rgba(255%2C122%2C26%2C0.08)'/%3E%3Cellipse cx='100' cy='60' rx='120' ry='80' fill='rgba(255%2C170%2C60%2C0.05)'/%3E%3C/svg%3E") center/cover no-repeat;
}
.sp-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.5) 100%);
}

/* ── Particles ── */
.sp-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sp-particle {
  position: absolute;
  left: var(--px); top: var(--py);
  width: var(--ps); height: var(--ps);
  border-radius: 50%;
  background: rgba(255,165,50,0.6);
  animation: sp-twinkle var(--pd) var(--pde) ease-in-out infinite alternate;
  box-shadow: 0 0 4px rgba(255,165,50,0.4);
}
@keyframes sp-twinkle {
  from { opacity:0.2; transform:scale(1); }
  to   { opacity:0.9; transform:scale(2.5); }
}

/* ── Hero Controls ── */
.sp-hero-controls {
  position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; gap: 8px; z-index: 10;
}
.sp-ctrl-btn {
  padding: 6px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  color: rgba(241,245,249,0.8);
  font-size: 0.75rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all 0.2s;
}
.sp-ctrl-btn:hover { background: rgba(255,122,26,0.2); border-color: rgba(255,122,26,0.4); color: #fff; }
.sp-ctrl-remove:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); }
.sp-hero-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.5);
  color: rgba(241,245,249,0.7);
  cursor: pointer; font-family: inherit;
  font-size: 0.85rem; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.sp-hero-close:hover { background: rgba(239,68,68,0.3); color: #fff; }

/* ── Hero Content ── */
.sp-hero-content {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 28px;
  padding: 32px 32px 28px;
}

/* ── Avatar ── */
.sp-avatar-wrap { position: relative; flex-shrink: 0; }
.sp-avatar-ring {
  width: 110px; height: 110px; border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: 0 0 24px rgba(255,122,26,0.5), 0 0 48px rgba(255,122,26,0.2);
  overflow: hidden;
  background: rgba(255,122,26,0.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.3s;
}
.sp-avatar-ring:hover { box-shadow: 0 0 32px rgba(255,122,26,0.7), 0 0 60px rgba(255,122,26,0.3); }
.sp-avatar-img { width:100%; height:100%; object-fit:cover; }
.sp-avatar-initials {
  font-size: 2rem; font-weight: 800; color: var(--accent);
  font-family: 'Syne', sans-serif;
}
.sp-avatar-online {
  position: absolute; bottom: 6px; right: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #10B981;
  border: 2px solid #0a0604;
  box-shadow: 0 0 6px rgba(16,185,129,0.6);
}

/* ── Hero Info ── */
.sp-hero-info { flex: 1; min-width: 0; }
.sp-hero-name-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.sp-hero-name {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.4rem,3vw,2rem);
  font-weight: 800; color: #F1F5F9; margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.sp-hero-badge-icon { font-size: 1.3rem; }
.sp-hero-sub-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.sp-badge-student {
  padding: 3px 12px; border-radius: 20px;
  background: rgba(16,185,129,0.18);
  color: #10B981;
  border: 1px solid rgba(16,185,129,0.35);
  font-size: 0.72rem; font-weight: 700;
}
.sp-hero-id { color: rgba(241,245,249,0.5); font-size: 0.8rem; }
.sp-hero-quote {
  color: rgba(241,245,249,0.55);
  font-style: italic; font-size: 0.88rem;
  margin-bottom: 18px;
  max-width: 480px;
}

/* ── Hero Stats ── */
.sp-hero-stats {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.sp-hstat {
  display: flex; align-items: center; gap: 8px;
  flex-direction: column;
  text-align: center;
}
.sp-hstat-icon { font-size: 1.1rem; }
.sp-hstat-val {
  font-family: 'Syne', sans-serif;
  font-size: 1.3rem; font-weight: 800; color: #F1F5F9;
  line-height: 1;
}
.sp-hstat-lbl {
  font-size: 0.72rem; color: rgba(241,245,249,0.45);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.sp-hstat-level {
  flex-direction: row; gap: 10px; align-items: center;
  margin-left: 8px; padding-left: 16px;
  border-left: 1px solid rgba(255,122,26,0.25);
}
.sp-level-badge {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #f59e0b);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: #fff;
  box-shadow: 0 0 16px rgba(255,122,26,0.4);
  flex-shrink: 0; font-family: 'Syne',sans-serif;
}
.sp-level-info { display: flex; flex-direction: column; gap: 4px; }
.sp-level-name { font-size: 0.82rem; font-weight: 700; color: #F1F5F9; }
.sp-level-xp-track {
  width: 140px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.sp-level-xp-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #f59e0b);
  transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
.sp-level-xp-label { font-size: 0.68rem; color: rgba(241,245,249,0.4); }

/* ── BODY LAYOUT ── */
.sp-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding: 20px 20px 0;
  align-items: start;
}

/* ── TABS ── */
.sp-tabs-wrap {
  overflow-x: auto; margin-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}
.sp-tabs-wrap::-webkit-scrollbar { height: 0; }
.sp-tabs {
  display: flex; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  white-space: nowrap;
  min-width: min-content;
}
.sp-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 10px;
  border: none; background: transparent;
  color: var(--text2); cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  transition: all 0.2s; white-space: nowrap;
}
.sp-tab:hover { color: var(--text); background: rgba(255,122,26,0.07); }
.sp-tab.active {
  background: linear-gradient(135deg, var(--accent), #f59e0b);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,122,26,0.35);
}
.sp-tab-icon { font-size: 0.9rem; }

/* ── TAB BODY ── */
.sp-tab-body { min-height: 400px; }

/* ── CONTENT GRID (Personal Info tab) ── */
.sp-content-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
}

/* ── Quote Card ── */
.sp-quote-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 20px;
  overflow: hidden;
  min-height: 300px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 16px;
  box-shadow: 0 0 30px rgba(255,122,26,0.05);
}
.sp-quote-planet {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,165,50,0.25), rgba(255,122,26,0.08) 60%, transparent);
  border: 2px solid rgba(255,122,26,0.3);
  box-shadow: 0 0 30px rgba(255,122,26,0.15), inset 0 0 20px rgba(255,122,26,0.1);
  position: relative; flex-shrink: 0;
  margin-bottom: 12px;
}
.sp-quote-planet::before {
  content:''; position:absolute; top:50%; left:-30%; right:-30%;
  height:2px; background: linear-gradient(90deg, transparent, rgba(255,165,50,0.4), transparent);
  transform: translateY(-50%) rotate(-15deg);
  border-radius: 50%;
}
.sp-quote-text {
  font-size: 0.82rem; color: var(--text2);
  text-align: center; line-height: 1.6;
  font-style: italic;
}
.sp-edit-profile-btn {
  width: 100%;
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid rgba(255,122,26,0.4);
  background: rgba(255,122,26,0.1);
  color: var(--accent);
  font-family: inherit; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s; text-align: center;
}
.sp-edit-profile-btn:hover { background: rgba(255,122,26,0.2); }
/* Stars */
.sp-qcard-stars { position: absolute; inset: 0; pointer-events: none; }
.sp-qstar {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,165,50,0.5);
  animation: sp-twinkle var(--sd, 2s) ease-in-out infinite alternate;
}

/* ── Form Card ── */
.sp-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
}
.sp-form-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
}
.sp-form-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.05rem; font-weight: 800;
  color: var(--text); margin: 0 0 4px;
}
.sp-form-sub { font-size: 0.78rem; color: var(--text2); margin: 0; }
.sp-preview-btn {
  padding: 7px 16px; border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text2);
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s;
}
.sp-preview-btn:hover { border-color: var(--accent); color: var(--accent); }
.sp-fields-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 20px;
}
.sp-field-span2 { grid-column: span 2; }
.sp-field { display: flex; flex-direction: column; gap: 6px; }
.sp-field-label { font-size: 0.75rem; font-weight: 700; color: var(--text2); }
.sp-field-input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 0 12px;
  transition: border-color 0.2s;
}
.sp-field-input-wrap:focus-within { border-color: var(--accent); }
.sp-field-icon { font-size: 0.9rem; color: var(--text3); flex-shrink: 0; }
.sp-field-input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 10px 0; color: var(--text); font-family: inherit; font-size: 0.85rem;
}
.sp-field-input::placeholder { color: var(--text3); }
.sp-bio-wrap { position: relative; }
.sp-field-textarea {
  width: 100%; background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
  color: var(--text); font-family: inherit; font-size: 0.85rem;
  resize: none; min-height: 80px; outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.sp-field-textarea:focus { border-color: var(--accent); }
.sp-char-count { position: absolute; right: 8px; bottom: 8px; font-size: 0.68rem; color: var(--text3); }
.sp-form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sp-save-btn {
  padding: 10px 24px; border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--accent), #f59e0b);
  color: #fff; font-family: inherit; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(255,122,26,0.3);
}
.sp-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,122,26,0.45); }
.sp-save-btn.loading { opacity: 0.7; cursor: wait; }
.sp-save-btn:disabled { cursor: not-allowed; }
.sp-reset-btn {
  padding: 10px 20px; border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text2);
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.sp-reset-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Photo Tab ── */
.sp-photo-tab { display: flex; justify-content: center; }
.sp-photo-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 40px 32px;
  text-align: center; max-width: 400px; width: 100%;
}
.sp-big-avatar {
  width: 120px; height: 120px; border-radius: 50%;
  margin: 0 auto 16px;
  border: 3px solid var(--accent);
  box-shadow: 0 0 24px rgba(255,122,26,0.4);
  overflow: hidden;
  background: rgba(255,122,26,0.1);
  display: flex; align-items: center; justify-content: center;
}
.sp-big-avatar img { width:100%; height:100%; object-fit:cover; }
.sp-avatar-big { font-size: 2.5rem; }
.sp-photo-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.sp-photo-upload-big {
  padding: 10px 22px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #f59e0b);
  color: #fff; font-family: inherit; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; border: none;
  box-shadow: 0 4px 14px rgba(255,122,26,0.3);
  transition: all 0.2s;
}
.sp-photo-remove-big {
  padding: 10px 22px; border-radius: 10px;
  border: 1px solid rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.1); color: #EF4444;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.sp-photo-remove-big:hover { background: rgba(239,68,68,0.2); }

/* ── Preferences Tab ── */
.sp-prefs-tab { display: flex; flex-direction: column; gap: 14px; }
.sp-pref-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
/* Accent card: left text + right swatches */
.sp-pref-card--accent { align-items: center; }
.sp-pref-card-left { flex: 1 1 160px; }
.sp-pref-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.sp-pref-desc { font-size: 0.8rem; color: var(--text2); margin: 0; }
.sp-pref-btn {
  padding: 9px 20px; border-radius: 10px;
  border: 1px solid rgba(255,122,26,0.4);
  background: rgba(255,122,26,0.1); color: var(--accent);
  font-family: inherit; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.sp-pref-btn:hover { background: rgba(255,122,26,0.2); }

/* ── Placeholder Tab ── */
.sp-placeholder-tab {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 300px;
  text-align: center;
}
.sp-placeholder-icon { font-size: 3rem; margin-bottom: 8px; }

/* ── Student Notification Center Tab ── */
.sp-notif-center-tab {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 0;
}

/* Header row — mirrors teacher nc-header-row but scoped to student profile */
.snc-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,122,26,0.08) 0%, rgba(255,122,26,0.03) 100%);
  border: 1px solid rgba(255,122,26,0.18);
  border-radius: 14px;
  padding: 16px 20px;
}
.snc-header-left {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 180px;
}
.snc-header-icon-wrap {
  font-size: 1.6rem;
  background: rgba(255,122,26,0.12);
  border: 1px solid rgba(255,122,26,0.22);
  border-radius: 10px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.snc-header-title {
  font-family: 'Syne', sans-serif;
  font-size: 1rem; font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.snc-header-desc {
  font-size: 0.78rem;
  color: var(--text2);
  margin-top: 2px;
}
.snc-header-center { flex: 1; display: flex; justify-content: center; }

/* The nc-categories-wrapper inside sp-notif-center-tab gets adaptive columns */
.sp-notif-center-tab .nc-categories-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 700px) {
  .sp-notif-center-tab .nc-categories-wrapper { grid-template-columns: 1fr; }
  .snc-header-row { flex-direction: column; align-items: flex-start; }
  .snc-header-center { width: 100%; }
}

/* ── RIGHT COLUMN ── */
.sp-right-col { display: flex; flex-direction: column; gap: 16px; }

/* ── Streak Card ── */
.sp-streak-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 0 20px rgba(255,122,26,0.06);
}
.sp-streak-header { display: flex; align-items: center; justify-content: space-between; }
.sp-streak-label { font-size: 0.75rem; font-weight: 700; color: var(--text2); margin-bottom: 4px; }
.sp-streak-val { display: flex; align-items: baseline; gap: 4px; }
.sp-streak-num {
  font-family: 'Syne', sans-serif;
  font-size: 2rem; font-weight: 900; color: var(--accent);
  line-height: 1;
}
.sp-streak-days { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.sp-streak-sub { font-size: 0.72rem; color: var(--text2); margin-top: 2px; }
.sp-streak-fire { font-size: 2.8rem; filter: drop-shadow(0 0 12px rgba(255,100,0,0.5)); }

/* ── Milestone Card ── */
.sp-milestone-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 18px 22px;
}
.sp-milestone-top {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 700; color: var(--text2);
  margin-bottom: 10px;
}
.sp-milestone-flame { font-size: 0.95rem; }
.sp-milestone-goal {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.sp-milestone-target { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.sp-milestone-xp { font-size: 0.78rem; color: var(--accent); font-weight: 700; }
.sp-milestone-bar-track {
  height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden; margin-bottom: 6px;
}
.sp-milestone-bar-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #f59e0b);
  transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
.sp-milestone-pct { text-align: right; font-size: 0.72rem; color: var(--text2); font-weight: 700; }

/* ── Activity Card ── */
.sp-activity-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 18px 22px;
}
.sp-activity-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.sp-activity-title { font-size: 0.9rem; font-weight: 800; color: var(--text); }
.sp-activity-period { font-size: 0.72rem; color: var(--text2); cursor: pointer; }
.sp-activity-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.sp-astat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: all 0.2s;
}
.sp-astat:hover { border-color: rgba(255,122,26,0.3); transform: translateY(-1px); }
.sp-astat-icon { font-size: 1rem; }
.sp-astat-val {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem; font-weight: 800; color: var(--accent);
}
.sp-astat-lbl { font-size: 0.65rem; color: var(--text2); font-weight: 600; text-transform: uppercase; }
/* Sparkline */
.sp-sparkline { width: 100%; height: 50px; }
.sp-spark-line { stroke-dasharray: 300; animation: sp-dash 2s ease forwards; }
@keyframes sp-dash { from{stroke-dashoffset:300} to{stroke-dashoffset:0} }

/* ── Achievements Card ── */
.sp-achievements-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 18px 22px;
}
.sp-ach-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.sp-ach-title { font-size: 0.9rem; font-weight: 800; color: var(--text); }
.sp-ach-viewall { font-size: 0.72rem; color: var(--accent); font-weight: 700; cursor: pointer; }
.sp-ach-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.sp-ach-item:last-child { border-bottom: none; }
.sp-ach-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.sp-ach-info { flex: 1; min-width: 0; }
.sp-ach-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.sp-ach-desc { font-size: 0.72rem; color: var(--text2); margin-top: 1px; }
.sp-ach-date { font-size: 0.68rem; color: var(--text3); white-space: nowrap; }
.sp-ach-empty { text-align: center; color: var(--text2); font-size: 0.82rem; padding: 20px 0; }

/* ── LIGHT MODE OVERRIDES ── */
.light .sp-hero {
  background:
    radial-gradient(ellipse 80% 60% at 60% 80%, rgba(255,122,26,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(255,170,60,0.07) 0%, transparent 60%),
    linear-gradient(135deg, #fdf6ec 0%, #fff8f0 40%, #fef9f4 100%);
  border-color: rgba(255,122,26,0.2);
}
.light .sp-hero-name { color: #1E293B; }
.light .sp-hero-quote { color: rgba(30,41,59,0.6); }
.light .sp-hstat-val { color: #1E293B; }
.light .sp-hstat-lbl { color: rgba(30,41,59,0.5); }
.light .sp-hero-overlay { background: linear-gradient(to right, rgba(255,248,240,0.4) 0%, transparent 60%); }
.light .sp-field-input { color: #1E293B; }
.light .sp-field-textarea { color: #1E293B; background: #fff; }
.light .sp-breadcrumb { color: rgba(30,41,59,0.55); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .sp-body { grid-template-columns: 1fr; }
  .sp-right-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 768px) {
  .sp-hero { margin: 0 10px; }
  .sp-body { padding: 14px 10px 0; gap: 14px; }
  .sp-hero-content { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 20px 20px; }
  .sp-avatar-ring { width: 80px; height: 80px; }
  .sp-hero-name { font-size: 1.3rem; }
  .sp-content-grid { grid-template-columns: 1fr; }
  .sp-quote-card { min-height: auto; padding: 20px; }
  .sp-fields-grid { grid-template-columns: 1fr; }
  .sp-field-span2 { grid-column: span 1; }
  .sp-right-col { grid-template-columns: 1fr; }
  .sp-hero-stats { gap: 14px; }
  .sp-hstat-level { display: none; }
  .sp-hero-controls { flex-wrap: wrap; gap: 6px; }
  .sp-ctrl-btn { font-size: 0.68rem; padding: 5px 10px; }
}
@media (max-width: 480px) {
  .sp-page { padding-bottom: 40px; }
  .sp-breadcrumb { padding: 14px 16px; }
  .sp-hero { margin: 0 8px; border-radius: 14px; }
  .sp-form-card { padding: 18px 16px; }
  .sp-tabs { padding: 4px; }
  .sp-tab { padding: 7px 12px; font-size: 0.75rem; }
  .sp-tab-label { display: none; }
  .sp-tab-icon { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   DOWNLOADS SECTION — Profile Drawer
   ═══════════════════════════════════════════════════════════════ */

/* Controls bar */
.dl-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.dl-search-wrap {
  position: relative;
}
.dl-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--text3);
  pointer-events: none;
}
.dl-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px 8px 32px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  transition: border-color 0.15s;
}
.dl-search:focus {
  outline: none;
  border-color: var(--accent);
}
.dl-filter-sort-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dl-filter-select, .dl-sort-select {
  flex: 1;
  padding: 7px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.dl-filter-select:focus, .dl-sort-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Category Section */
.dl-category {
  margin-bottom: 20px;
}
.dl-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.04));
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.dl-category-header:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.07));
}
.dl-category-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.dl-category-count {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.dl-category-chevron {
  font-size: 0.75rem;
  color: var(--text3);
  transition: transform 0.2s;
}
.dl-category-chevron.open {
  transform: rotate(180deg);
}
.dl-category-body {
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: var(--surface);
}

/* Report Card */
.dl-report-card {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.dl-report-card:last-child {
  border-bottom: none;
}
.dl-report-card:hover {
  background: var(--surface2);
}
.dl-report-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dl-report-type-badge {
  font-size: 0.65rem;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.dl-report-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 10px;
  margin-bottom: 10px;
}
.dl-meta-item {
  font-size: 0.7rem;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.dl-meta-label {
  font-weight: 700;
  color: var(--text2);
  min-width: 56px;
}
.dl-report-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
/* ── ACTION-BTN TOKENS — single source of truth ── */
:root {
  --abtn-h:         30px;
  --abtn-px:        10px;
  --abtn-gap:       5px;
  --abtn-font:      0.75rem;
  --abtn-weight:    600;
  --abtn-radius:    8px;
}

.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abtn-gap);
  height: var(--abtn-h);
  padding: 0 var(--abtn-px);
  border-radius: var(--abtn-radius);
  font-size: var(--abtn-font);
  font-weight: var(--abtn-weight);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  transition: all 0.15s;
}
.dl-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.07);
}
.dl-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dl-btn.primary:hover {
  opacity: 0.88;
  color: #fff;
}
.dl-btn.danger {
  color: var(--red, #ef4444);
  border-color: rgba(239,68,68,0.2);
}
.dl-btn.danger:hover {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.4);
}
.dl-btn.excel {
  color: #10b981;
  border-color: rgba(16,185,129,0.25);
}
.dl-btn.excel:hover {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.4);
}

/* Empty state for each category */
.dl-empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--text3);
}
.dl-empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.5;
}
.dl-empty-text {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text3);
}

/* Global empty state */
.dl-global-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  text-align: center;
  gap: 10px;
  color: var(--text3);
}
.dl-global-empty-icon {
  font-size: 3rem;
  margin-bottom: 4px;
  opacity: 0.4;
}
.dl-global-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text2);
}
.dl-global-empty-sub {
  font-size: 0.78rem;
  max-width: 220px;
  line-height: 1.5;
}

/* Light mode support */
.light .dl-search,
.light .dl-filter-select,
.light .dl-sort-select {
  background: #f8f9fb;
  color: #1a1a2e;
  border-color: #dde1e9;
}
.light .dl-category-body {
  background: #fff;
}
.light .dl-report-card:hover {
  background: #f8f9fb;
}
.light .dl-btn {
  background: #f0f2f7;
  color: #1a1a2e;
  border-color: #dde1e9;
}


/* ═══════════════════════════════════════════════════════════════
   SETTINGS DOWNLOADS SECTION (full-page Profile Settings)
   ═══════════════════════════════════════════════════════════════ */

.settings-downloads-section {
  background: rgba(11, 11, 11, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 28px 28px 20px;
  margin-bottom: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}
.settings-downloads-section::before {
  content: '📥';
  position: absolute;
  right: -10px;
  top: -20px;
  font-size: 9rem;
  opacity: 0.03;
  pointer-events: none;
}
.light-theme .settings-downloads-section {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 50px rgba(0,0,0,0.04);
}

/* Header */
.sdl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 14px;
}
.sdl-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sdl-header-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.sdl-header-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.sdl-header-subtitle {
  font-size: 0.78rem;
  color: var(--text3);
  margin-top: 2px;
}
.sdl-stats-row {
  display: flex;
  gap: 10px;
}
.sdl-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 18px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 12px;
  min-width: 80px;
}
.sdl-stat-num {
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.sdl-stat-lbl {
  font-size: 0.65rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 3px;
  font-weight: 700;
}

/* Controls */
.sdl-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sdl-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.sdl-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--text3);
  pointer-events: none;
}
.sdl-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 36px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.15s;
}
.sdl-search:focus { outline: none; border-color: var(--accent); }
.sdl-select {
  padding: 9px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 150px;
}
.sdl-select:focus { outline: none; border-color: var(--accent); }
.light-theme .sdl-search,
.light-theme .sdl-select {
  background: #f8f9fb;
  color: #1a1a2e;
  border-color: #dde1e9;
}

/* Global empty */
.sdl-global-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 20px;
  text-align: center;
}
.sdl-global-empty-icon { font-size: 3.5rem; opacity: 0.35; }
.sdl-global-empty-title { font-size: 1.05rem; font-weight: 700; color: var(--text2); }
.sdl-global-empty-sub { font-size: 0.82rem; color: var(--text3); max-width: 380px; line-height: 1.6; }

/* Categories grid */
.sdl-categories-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual category */
.sdl-category {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.sdl-category:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }

.sdl-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(var(--accent-rgb), 0.04);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.sdl-cat-header:hover { background: rgba(var(--accent-rgb), 0.08); }
.sdl-cat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sdl-cat-icon { font-size: 1.1rem; }
.sdl-cat-label { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.sdl-cat-count {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.sdl-cat-chevron {
  font-size: 0.72rem;
  color: var(--text3);
  transition: transform 0.2s;
}
.sdl-cat-chevron.open { transform: rotate(180deg); }

.sdl-cat-body {
  background: var(--surface);
}
.light-theme .sdl-cat-body { background: #fff; }

/* Empty state inside category */
.sdl-cat-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
  color: var(--text3);
}
.sdl-cat-empty-text { font-size: 0.82rem; }

/* Reports list */
.sdl-reports-list { display: flex; flex-direction: column; }

.sdl-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.sdl-report-row:last-child { border-bottom: none; }
.sdl-report-row:hover { background: rgba(var(--accent-rgb), 0.03); }
.light-theme .sdl-report-row:hover { background: #f8f9fb; }

.sdl-report-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.sdl-report-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.sdl-report-details { flex: 1; min-width: 0; }
.sdl-report-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdl-report-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sdl-meta-chip {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text3);
  font-weight: 500;
}
.sdl-meta-chip--dl {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
}

/* Action buttons */
.sdl-report-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sdl-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abtn-gap);
  height: var(--abtn-h);
  padding: 0 var(--abtn-px);
  border-radius: var(--abtn-radius);
  font-size: var(--abtn-font);
  font-weight: var(--abtn-weight);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  transition: all 0.14s;
}
.sdl-action-view  { background: var(--accent); color: #fff; border-color: var(--accent); }
.sdl-action-view:hover { opacity: 0.85; }
.sdl-action-pdf:hover  { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.sdl-action-excel { color: #10b981; border-color: rgba(16,185,129,0.25); }
.sdl-action-excel:hover { background: rgba(16,185,129,0.1); border-color: #10b981; }
.sdl-action-del   { color: #ef4444; border-color: rgba(239,68,68,0.2);
  /* icon-only: make it square */
  width: var(--abtn-h); padding: 0; }
.sdl-action-del:hover { background: rgba(239,68,68,0.1); border-color: #ef4444; }

/* Responsive */
@media (max-width: 768px) {
  .settings-downloads-section { padding: 18px 16px; }
  .sdl-header { flex-direction: column; align-items: flex-start; }
  .sdl-controls { flex-direction: column; }
  .sdl-search-wrap { min-width: unset; }
  .sdl-report-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sdl-report-actions { width: 100%; justify-content: flex-start; }
}
/* ═══════════════════════════════════════════════════════════════
   TOGGLE DOWNLOAD BUTTON — Reusable animated download toggle
   Compatible with VYOM light & dark themes
   ═══════════════════════════════════════════════════════════════ */
.tdl-wrap {
  display: inline-flex;
  align-items: center;
}

.tdl-label {
  background-color: transparent;
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  border-radius: 50px;
  width: 148px;
  cursor: pointer;
  transition: all 0.4s ease;
  padding: 4px;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  user-select: none;
  /* Ensure outer wrapper doesn't add extra height */
  box-sizing: border-box;
}

.tdl-label:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

.tdl-label::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background-color: var(--text);
  width: 8px; height: 8px;
  transition: all 0.4s ease;
  border-radius: 100%;
  margin: auto;
  opacity: 0;
  visibility: hidden;
}

.tdl-label.tdl-active {
  width: 52px;
  animation: tdl-installed 0.4s ease 3.5s forwards;
}

.tdl-label.tdl-active::before {
  animation: tdl-rotate 3s ease-in-out 0.4s forwards;
}

.tdl-circle {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: var(--accent);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease;
  position: relative;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4);
  overflow: hidden;
  flex-shrink: 0;
}

.tdl-active .tdl-circle {
  animation: tdl-pulse 1s forwards, tdl-circle-delete 0.2s ease 3.5s forwards;
  rotate: 180deg;
}

.tdl-circle::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  background-color: color-mix(in srgb, var(--accent) 60%, #000);
  width: 100%;
  height: 0;
  transition: all 0.4s ease;
}

.tdl-active .tdl-circle::before {
  animation: tdl-installing 3s ease-in-out forwards;
}

.tdl-icon {
  color: #fff;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  flex-shrink: 0;
}

.tdl-active .tdl-icon {
  opacity: 0;
  visibility: hidden;
}

.tdl-square {
  width: 13px; height: 13px;
  border-radius: 2px;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.tdl-active .tdl-square {
  opacity: 1;
  visibility: visible;
}

.tdl-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  transition: all 0.4s ease;
  position: absolute;
  right: 14px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.tdl-title-done {
  opacity: 0;
  visibility: hidden;
}

.tdl-active .tdl-title-label {
  opacity: 0;
  visibility: hidden;
}

.tdl-active .tdl-title-done {
  animation: tdl-show-done 0.4s ease 3.5s forwards;
}

/* Light mode text adjustment */
body.light-mode .tdl-title,
[data-theme="light"] .tdl-title {
  color: var(--text);
}

/* Disabled state */
.tdl-label.tdl-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Size variants */
.tdl-sm .tdl-label  { width: 118px; padding: 2px; height: var(--abtn-h, 30px); }
.tdl-sm .tdl-circle { height: 24px; width: 24px; }
.tdl-sm .tdl-icon   { width: 14px; height: 14px; }
.tdl-sm .tdl-square { width: 9px; height: 9px; }
.tdl-sm .tdl-title  { font-size: var(--abtn-font, 0.75rem); font-weight: var(--abtn-weight, 600); right: 9px; }
.tdl-sm .tdl-label.tdl-active { width: var(--abtn-h, 30px); }

/* Keyframes */
@keyframes tdl-pulse {
  0%   { scale: 0.95; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  70%  { scale: 1;    box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0); }
  100% { scale: 0.95; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

@keyframes tdl-installing {
  from { height: 0; }
  to   { height: 100%; }
}

@keyframes tdl-rotate {
  0%   { transform: rotate(-90deg) translate(24px) rotate(0); opacity: 1; visibility: visible; }
  99%  { transform: rotate(270deg) translate(24px) rotate(270deg); opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes tdl-installed {
  100% { width: 140px; border-color: #22c55e; }
}

@keyframes tdl-circle-delete {
  100% { opacity: 0; visibility: hidden; }
}

@keyframes tdl-show-done {
  100% { opacity: 1; visibility: visible; right: 48px; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tdl-label { width: 130px; }
  .tdl-sm .tdl-label { width: 110px; }
  .tdl-label.tdl-active { width: 48px; }
  .tdl-sm .tdl-label.tdl-active { width: 30px; }
}

@media (max-width: 480px) {
  .tdl-label  { width: 120px; padding: 3px; }
  .tdl-circle { height: 36px; width: 36px; }
  .tdl-icon   { width: 19px; height: 19px; }
  .tdl-title  { font-size: 0.75rem; right: 10px; }
  .tdl-label.tdl-active { width: 46px; }
  /* sm stays flush with abtn-h on mobile */
  .tdl-sm .tdl-label  { width: 110px; padding: 2px; height: var(--abtn-h, 30px); }
  .tdl-sm .tdl-circle { height: 24px; width: 24px; }
  .tdl-sm .tdl-icon   { width: 14px; height: 14px; }
  .tdl-sm .tdl-title  { font-size: var(--abtn-font, 0.75rem); right: 8px; }
  .tdl-sm .tdl-label.tdl-active { width: 30px; }
}

/* ☁️ CLOUD STORAGE INTEGRATION - VYOM PREMIUM UI */

.vyom-cloud-dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin-top: 16px;
}

.vyom-cloud-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.vyom-cloud-status-badge {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
}

.vyom-cloud-status-badge.connected {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.25);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
}

.vyom-cloud-status-badge.disconnected {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.15);
}

.vyom-cloud-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.vyom-cloud-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sp-col-2 {
  grid-column: span 2;
}

@media (max-width: 1024px) {
  .vyom-cloud-grid {
    grid-template-columns: 1fr;
  }
  .sp-col-2 {
    grid-column: span 1;
  }
}

.vyom-cloud-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.vyom-drive-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vyom-drive-logo {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.vyom-cloud-details-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vyom-cloud-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.vyom-cloud-detail-row .label {
  color: var(--text3, #94a3b8);
}

.vyom-cloud-detail-row .value {
  color: var(--text, #f8fafc);
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}

.vyom-cloud-toggles-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.vyom-cloud-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.vyom-cloud-toggle-row .toggle-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text, #f8fafc);
}

.vyom-cloud-toggle-row .toggle-desc {
  font-size: 0.75rem;
  color: var(--text3, #64748b);
  margin-top: 2px;
}

/* Premium Cloud Switch styling */
.cloud-switch {
  cursor: pointer;
  display: inline-block;
  user-select: none;
}

.cloud-switch-track {
  width: 46px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  position: relative;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
}

.light-theme .cloud-switch-track {
  background: #cbd5e1;
  border-color: #cbd5e1;
}

.cloud-switch-track.checked {
  background: var(--accent, #3b82f6);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
}

.cloud-switch-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.cloud-switch-track.checked .cloud-switch-thumb {
  transform: translateX(22px);
}

.cloud-switch-track.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Storage Analytics */
.vyom-card-section-title {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--text, #fff);
  margin: 0 0 4px 0 !important;
}

.vyom-card-section-desc {
  font-size: 0.8rem;
  color: var(--text3, #94a3b8);
  margin: 0 0 20px 0;
}

.vyom-progress-stat {
  margin-bottom: 24px;
}

.vyom-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.vyom-progress-labels .title {
  color: var(--text2, #cbd5e1);
  font-weight: 500;
}

.vyom-progress-labels .value {
  color: var(--text, #f8fafc);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.vyom-progress-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.light-theme .vyom-progress-track {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.vyom-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2, #3b82f6) 100%);
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  animation: pulse-progress 2s infinite ease-in-out;
}

@keyframes pulse-progress {
  0% { opacity: 0.95; }
  50% { opacity: 1; filter: brightness(1.1); }
  100% { opacity: 0.95; }
}

.vyom-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.vyom-metric-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background-color 0.2s ease;
}

.light-theme .vyom-metric-box {
  background: #f8fafc;
  border-color: #f1f5f9;
}

.vyom-metric-box:hover {
  background: rgba(255, 255, 255, 0.05);
}

.light-theme .vyom-metric-box:hover {
  background: #f1f5f9;
}

.vyom-metric-box.sp-col-2 {
  grid-column: span 2;
}

.vyom-metric-box .metric-icon {
  font-size: 1.4rem;
}

.vyom-metric-box .metric-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #fff);
  font-family: 'JetBrains Mono', monospace;
}

.vyom-metric-box .metric-lbl {
  font-size: 0.72rem;
  color: var(--text3, #94a3b8);
  margin-top: 2px;
}

/* Preferences Select styling */
.vyom-cloud-select {
  appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 0.85rem;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.light-theme .vyom-cloud-select {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #0f172a;
}

.vyom-cloud-select:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* Security & Permissions */
.vyom-security-item {
  display: flex;
  flex-direction: column;
}

.vyom-security-item .sec-label {
  font-size: 0.78rem;
  color: var(--text3, #94a3b8);
}

.vyom-security-item .sec-value-badge.green {
  display: inline-block;
  font-size: 0.85rem;
  color: #10b981;
  font-weight: 600;
  margin-top: 4px;
}

.style-danger-text {
  color: var(--red) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.style-danger-text:hover {
  background: rgba(239, 68, 68, 0.08) !important;
}

.style-sync-now {
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.2);
}

/* Loader */
.vyom-cloud-loader-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: cloud-spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes cloud-spin {
  to { transform: rotate(360deg); }
}

/* Connect Prompt styling */
.vyom-cloud-connect-prompt {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 40px 24px;
  text-align: center;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s, background-color 0.2s;
}

.light-theme .vyom-cloud-connect-prompt {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: none;
}

.vyom-cloud-connect-prompt:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
}

.vyom-cloud-connect-prompt .prompt-icon {
  animation: float-cloud 4s ease-in-out infinite;
}

@keyframes float-cloud {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}


/* ════════════════════════════════════════════════════════════════════════
   TEACHER DOUBT CENTER — Premium 3-column layout
   Prefix: tdc-
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  --tdc-orange: #F59E0B;
  --tdc-blue:   #3B82F6;
  --tdc-green:  #10B981;
  --tdc-red:    #EF4444;
  --tdc-yellow: #EAB308;
  --tdc-purple: #8B5CF6;
  --tdc-cyan:   #06B6D4;

  --tdc-glass:  rgba(255,255,255,0.03);
  --tdc-glass2: rgba(255,255,255,0.06);
  --tdc-border: rgba(255,255,255,0.07);
  --tdc-border2:rgba(255,255,255,0.12);
  --tdc-radius: 12px;
  --tdc-gap:    12px;
  --tdc-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.light {
  --tdc-glass:  rgba(0,0,0,0.02);
  --tdc-glass2: rgba(0,0,0,0.04);
  --tdc-border: rgba(0,0,0,0.08);
  --tdc-border2:rgba(0,0,0,0.15);
  --tdc-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* ── Root ────────────────────────────────────────────────────────────── */
.tdc-root {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  max-height: calc(100vh - var(--header-h));
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.tdc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--tdc-border);
  flex-shrink: 0;
  gap: 16px;
  flex-wrap: wrap;
}
.tdc-header-left { flex: 1; min-width: 200px; }
.tdc-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--text);
}
.tdc-header-icon { font-size: 1.4rem; }
.tdc-header-sub { margin: 0; font-size: 0.82rem; color: var(--text3); }
.tdc-header-search {
  display: flex;
  align-items: center;
  background: var(--tdc-glass);
  border: 1px solid var(--tdc-border);
  border-radius: 8px;
  padding: 8px 14px;
  gap: 8px;
  min-width: 280px;
  transition: border-color 0.2s;
}
.tdc-header-search:focus-within { border-color: var(--tdc-border2); }
.tdc-search-icon { font-size: 0.9rem; opacity: 0.5; }
.tdc-search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.85rem;
  width: 100%;
}
.tdc-search-input::placeholder { color: var(--text3); }

/* ── Stats Row ───────────────────────────────────────────────────────── */
.tdc-stats-row {
  display: flex;
  gap: var(--tdc-gap);
  padding: 12px 24px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--tdc-border);
  scrollbar-width: none;
}
.tdc-stats-row::-webkit-scrollbar { display: none; }

.tdc-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--tdc-glass);
  border: 1px solid var(--tdc-border);
  border-left: 3px solid var(--tdc-card-accent, var(--accent));
  border-radius: var(--tdc-radius);
  min-width: 140px;
  flex-shrink: 0;
  cursor: default;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.tdc-stat-card:hover {
  background: var(--tdc-glass2);
  transform: translateY(-2px);
  box-shadow: var(--tdc-shadow);
}
.tdc-stat-icon { font-size: 1.3rem; margin-top: 2px; }
.tdc-stat-label { font-size: 0.75rem; color: var(--text3); margin-bottom: 4px; }
.tdc-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1; }
.tdc-stat-delta { font-size: 0.7rem; margin-top: 4px; }
.tdc-stat-delta.pos { color: var(--tdc-green); }
.tdc-stat-delta.neg { color: var(--tdc-red); }

/* ── Body: 2-column ──────────────────────────────────────────────────── */
.tdc-body {
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 0;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ── LEFT PANEL ──────────────────────────────────────────────────────── */
.tdc-left-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--tdc-border);
  min-height: 0;
  overflow: hidden;
}

.tdc-filters { flex-shrink: 0; padding: 10px 12px 0; border-bottom: 1px solid var(--tdc-border); }
.tdc-filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.tdc-filter-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--tdc-border);
  background: none;
  color: var(--text2);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tdc-filter-tab:hover { background: var(--tdc-glass2); color: var(--text); }
.tdc-filter-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tdc-filter-count {
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 0.68rem;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
.tdc-filter-tab.active .tdc-filter-count { background: rgba(255,255,255,0.25); }

.tdc-sort-row { padding-bottom: 8px; }
.tdc-sort-select {
  background: var(--tdc-glass);
  border: 1px solid var(--tdc-border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 0.75rem;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
}

.tdc-doubt-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--tdc-border) transparent;
}
.tdc-doubt-list::-webkit-scrollbar { width: 4px; }
.tdc-doubt-list::-webkit-scrollbar-track { background: transparent; }
.tdc-doubt-list::-webkit-scrollbar-thumb { background: var(--tdc-border2); border-radius: 4px; }

/* ── DOUBT CARD ──────────────────────────────────────────────────────── */
.tdc-doubt-card {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--tdc-border);
  background: var(--tdc-glass);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.tdc-doubt-card:hover {
  background: var(--tdc-glass2);
  border-color: var(--tdc-border2);
  transform: translateX(2px);
}
.tdc-doubt-card.selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  box-shadow: 0 0 0 1px var(--accent), inset 3px 0 0 var(--accent);
}
.tdc-doubt-card.unread { border-left: 3px solid var(--tdc-orange); }

.tdc-dc-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.tdc-dc-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
  position: relative;
}
.tdc-dc-online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text3);
  border: 2px solid var(--bg);
}
.tdc-dc-online-dot.on { background: var(--tdc-green); }
.tdc-dc-meta { flex: 1; min-width: 0; }
.tdc-dc-name { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdc-dc-roll { font-size: 0.72rem; color: var(--text3); }
.tdc-dc-time { font-size: 0.7rem; color: var(--text3); white-space: nowrap; }

.tdc-dc-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.tdc-badge {
  font-size: 0.68rem; font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.tdc-badge.anon   { background: rgba(139,92,246,0.15); color: #8B5CF6; border-color: rgba(139,92,246,0.3); }
.tdc-badge.resolved { background: rgba(16,185,129,0.15); color: #10B981; border-color: rgba(16,185,129,0.3); }

.tdc-dc-title { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
.tdc-dc-preview { font-size: 0.75rem; color: var(--text3); line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tdc-dc-footer { display: flex; gap: 10px; align-items: center; }
.tdc-dc-foot-item { font-size: 0.72rem; color: var(--text3); }
.tdc-unread-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tdc-orange);
  margin-left: auto;
  flex-shrink: 0;
  animation: tdc-pulse 2s infinite;
}
@keyframes tdc-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ── CENTER PANEL ────────────────────────────────────────────────────── */
.tdc-center-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.tdc-conversation {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.tdc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--text3);
}
.tdc-empty-icon { font-size: 3rem; opacity: 0.3; }
.tdc-empty-title { font-size: 1.1rem; font-weight: 600; color: var(--text2); }
.tdc-empty-sub { font-size: 0.82rem; text-align: center; max-width: 260px; }

.tdc-conv-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--tdc-border);
  flex-shrink: 0;
}
.tdc-conv-hdr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.tdc-conv-id { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.tdc-status-pill {
  font-size: 0.7rem; font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.tdc-anon-pill {
  background: rgba(139,92,246,0.15);
  color: #8B5CF6;
  border: 1px solid rgba(139,92,246,0.3);
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 600;
}
.tdc-conv-hdr-meta { font-size: 0.75rem; color: var(--text3); display: flex; gap: 8px; flex-wrap: wrap; }

.tdc-conv-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--tdc-border) transparent;
  min-height: 0;
}
.tdc-conv-body::-webkit-scrollbar { width: 4px; }
.tdc-conv-body::-webkit-scrollbar-track { background: transparent; }
.tdc-conv-body::-webkit-scrollbar-thumb { background: var(--tdc-border2); border-radius: 4px; }

/* Message rows — CRITICAL: width:100% so row-reverse can push to far right */
.tdc-msg-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

/* Student messages — LEFT side: avatar left, bubble right of avatar */
.tdc-msg-row.student-row {
  flex-direction: row;
  justify-content: flex-start;
}

/* Teacher messages — RIGHT side: avatar right, bubble left of avatar, whole group right-anchored */
.tdc-msg-row.teacher-row {
  flex-direction: row-reverse;
  justify-content: flex-start; /* flex-start in row-reverse = right edge */
}
.tdc-msg-row.teacher-row .tdc-msg-content {
  align-items: flex-end;
}
.tdc-msg-row.teacher-row .tdc-msg-meta {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
/* Ensure teacher bubble text wraps naturally (not inherited text-align from anywhere) */
.tdc-msg-row.teacher-row .tdc-msg-bubble {
  text-align: left;
}
.tdc-msg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.tdc-msg-avatar.teacher-av { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.tdc-msg-content {
  /* Shrink to content width instead of filling all available space */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 68%;
  min-width: 0;
}
.tdc-msg-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.tdc-msg-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.tdc-msg-role {
  font-size: 0.68rem; font-weight: 600; padding: 1px 7px; border-radius: 8px;
}
.tdc-msg-role.student { background: rgba(59,130,246,0.15); color: var(--tdc-blue); }
.tdc-msg-role.teacher { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }
.tdc-msg-time { font-size: 0.72rem; color: var(--text3); }

.tdc-msg-bubble {
  /* Bubble auto-sizes to its content — same as WhatsApp / Discord */
  width: fit-content;
  min-width: 60px;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 4px 12px 12px 12px;
  border: 1px solid var(--tdc-border);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text);
}
.tdc-msg-bubble.student { background: var(--tdc-glass); }
.tdc-msg-bubble.teacher {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.15);
  border-radius: 12px 4px 12px 12px;
}
.tdc-msg-img { width: auto; max-width: 280px; max-height: 220px; object-fit: contain; border-radius: 8px; margin-top: 8px; display: block; cursor: pointer; }
.tdc-file-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tdc-glass2);
  border: 1px solid var(--tdc-border2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text2);
  text-decoration: none;
  transition: background 0.15s;
  max-width: 280px;
}
.tdc-file-chip:hover { background: var(--tdc-glass); color: var(--text); }
.tdc-file-size { font-size: 0.7rem; color: var(--text3); }

.tdc-resolved-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tdc-green);
}

/* Markdown */
.tdc-md-body pre.tdc-code-block {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--tdc-border);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  color: #e2e8f0;
  scrollbar-width: thin;
}
.light .tdc-md-body pre.tdc-code-block { background: rgba(0,0,0,0.06); color: #1e293b; }
.tdc-md-body code.tdc-inline-code {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82em;
}
.light .tdc-md-body code.tdc-inline-code { background: rgba(0,0,0,0.08); }

/* ── REPLY AREA ──────────────────────────────────────────────────────── */
.tdc-reply-area {
  border-top: 1px solid var(--tdc-border);
  padding: 12px 16px;
  flex-shrink: 0;
  background: var(--tdc-glass);
}
.tdc-reply-toolbar {
  display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap;
}
.tdc-toolbar-btn {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 1px solid var(--tdc-border);
  background: none;
  color: var(--text3);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.tdc-toolbar-btn:hover { background: var(--tdc-glass2); color: var(--text); border-color: var(--tdc-border2); }

.tdc-reply-input {
  width: 100%;
  background: var(--tdc-glass);
  border: 1px solid var(--tdc-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  box-sizing: border-box;
}
.tdc-reply-input:focus { border-color: var(--tdc-border2); }
.tdc-reply-input::placeholder { color: var(--text3); }

.tdc-reply-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.tdc-reply-actions { display: flex; gap: 8px; }
.tdc-ai-btn {
  background: linear-gradient(135deg, var(--tdc-purple), var(--tdc-blue));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.tdc-ai-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.tdc-ai-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.tdc-btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.tdc-btn-primary:hover { opacity: 0.85; }
.tdc-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.tdc-btn-secondary {
  background: var(--tdc-glass2);
  border: 1px solid var(--tdc-border2);
  color: var(--text2);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tdc-btn-secondary:hover { background: var(--tdc-glass); color: var(--text); }

/* ── RIGHT PANEL — completely removed from layout ────────────────────── */
.tdc-right-panel {
  display: none !important;
  width: 0 !important;
  overflow: hidden !important;
}
.tdc-profile-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--tdc-border) transparent;
}
.tdc-profile-panel::-webkit-scrollbar { width: 4px; }
.tdc-profile-panel::-webkit-scrollbar-thumb { background: var(--tdc-border2); border-radius: 4px; }
.tdc-profile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  color: var(--text3);
}

.tdc-profile-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  text-align: center;
}
.tdc-profile-av-wrap { position: relative; width: 70px; height: 70px; }
.tdc-profile-av-img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
.tdc-profile-av-text {
  width: 70px; height: 70px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: #fff;
}
.tdc-profile-status-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text3);
  border: 2px solid var(--bg);
}
.tdc-profile-status-dot.on { background: var(--tdc-green); }
.tdc-profile-online-badge { font-size: 0.7rem; font-weight: 600; color: var(--tdc-green); }
.tdc-profile-name { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.tdc-profile-roll { font-size: 0.78rem; color: var(--text3); }
.tdc-profile-full-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.15s;
}
.tdc-profile-full-btn:hover { opacity: 0.85; }

.tdc-profile-divider { height: 1px; background: var(--tdc-border); margin: 12px 0; }
.tdc-profile-section-title { font-size: 0.8rem; font-weight: 700; color: var(--text2); margin-bottom: 10px; letter-spacing: 0.5px; text-transform: uppercase; }

.tdc-profile-details { display: flex; flex-direction: column; gap: 10px; }
.tdc-profile-row { display: flex; align-items: flex-start; gap: 10px; }
.tdc-profile-row-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.tdc-profile-row-body { flex: 1; min-width: 0; }
.tdc-profile-row-label { font-size: 0.68rem; color: var(--text3); margin-bottom: 1px; }
.tdc-profile-row-val { font-size: 0.8rem; color: var(--text); font-weight: 500; word-break: break-all; }

.tdc-profile-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tdc-profile-stat {
  background: var(--tdc-glass);
  border: 1px solid var(--tdc-border);
  border-radius: 10px;
  padding: 10px;
}
.tdc-ps-label { font-size: 0.68rem; color: var(--text3); margin-bottom: 4px; }
.tdc-ps-value { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tdc-ps-sub { font-size: 0.68rem; color: var(--text3); }
.tdc-ps-bar { height: 4px; background: var(--tdc-border); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.tdc-ps-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }

/* Quick Actions */
.tdc-quick-actions { display: flex; flex-direction: column; gap: 6px; }
.tdc-qa-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--tdc-glass);
  border: 1px solid var(--tdc-border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text2);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.tdc-qa-btn:hover {
  background: var(--tdc-glass2);
  border-color: var(--tdc-border2);
  color: var(--text);
  transform: translateX(2px);
}
.tdc-qa-icon { font-size: 1rem; }

/* ── Skeleton / loading ──────────────────────────────────────────────── */
.tdc-skeleton {
  height: 90px;
  background: linear-gradient(90deg, var(--tdc-glass) 25%, var(--tdc-glass2) 50%, var(--tdc-glass) 75%);
  background-size: 200% 100%;
  border-radius: 10px;
  animation: tdc-shimmer 1.5s infinite;
  border: 1px solid var(--tdc-border);
}
@keyframes tdc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.tdc-empty-list { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; color: var(--text3); font-size: 0.85rem; text-align: center; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .tdc-body { grid-template-columns: 1fr; }
  .tdc-left-panel { border-right: none; border-bottom: 1px solid var(--tdc-border); height: 40vh; }
  .tdc-center-panel { height: 60vh; }
  .tdc-header-search { min-width: 0; flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   DOUBT CENTER — Minimal Chat Composer  (Task 2 redesign)
   ═══════════════════════════════════════════════════════════════ */

/* Outer wrapper — replaces .tdc-reply-area */
.tdc-composer {
  padding: 14px 16px 16px;
  border-top: 1px solid #000000;
  background: #000000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Attachment preview chip ── */
.tdc-composer-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(var(--accent-rgb,255,165,0), 0.09);
  border: 1px solid rgba(var(--accent-rgb,255,165,0), 0.22);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--fg, #e0e0e0);
  animation: cmpFadeUp 0.2s ease;
}
.tdc-chip-icon { font-size: 1rem; flex-shrink: 0; }
.tdc-chip-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.tdc-chip-size { color: #777; font-size: 0.72rem; flex-shrink: 0; }
.tdc-chip-remove {
  background: none;
  border: none;
  color: #666;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 2px;
  transition: color .15s;
  flex-shrink: 0;
  line-height: 1;
}
.tdc-chip-remove:hover { color: #ef4444; }

/* ── Main input row ── */
.tdc-input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: #000000;
  border: 1.5px solid rgba(var(--accent-rgb,255,165,0), 0.35);
  border-radius: 16px;
  padding: 10px 10px 10px 16px;
  transition: border-color .25s, box-shadow .25s;
}
.tdc-input-row:focus-within {
  border-color: var(--accent, #f5a623);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb,245,166,35), 0.1),
              0 4px 20px rgba(var(--accent-rgb,245,166,35), 0.08);
}

/* Auto-growing textarea */
.tdc-composer-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: #FFFFFF;
  font-size: 0.92rem;
  line-height: 1.55;
  min-height: 24px;
  max-height: 140px;
  overflow-y: auto;
  padding: 0;
  font-family: inherit;
}
.tdc-composer-input::placeholder { color: #8A8A8A; }

/* ── "+" Attach button ── */
.tdc-attach-wrap {
  position: relative;
  flex-shrink: 0;
}
.tdc-attach-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, color .18s, transform .15s;
}
.tdc-attach-btn:hover,
.tdc-attach-btn.active {
  background: rgba(var(--accent-rgb,255,165,0), 0.15);
  color: var(--accent, #f5a623);
  border-color: rgba(var(--accent-rgb,255,165,0), 0.4);
  transform: rotate(45deg);
}

/* ── Attach dropdown menu ── */
.tdc-attach-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: var(--card-bg, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  overflow: hidden;
  z-index: 2000;
  animation: cmpFadeUp 0.18s ease;
}
.tdc-attach-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--fg, #d0d0d0);
  font-size: 0.86rem;
  cursor: pointer;
  text-align: left;
  transition: background .14s, color .14s;
}
.tdc-attach-item:hover {
  background: rgba(var(--accent-rgb,255,165,0), 0.09);
  color: var(--accent, #f5a623);
}
.tdc-attach-item-icon { font-size: 1.1rem; flex-shrink: 0; width: 22px; text-align: center; }
.tdc-attach-item + .tdc-attach-item {
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── Bottom action bar ── */
.tdc-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tdc-composer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* AI Assist button — purple/violet gradient */
.tdc-composer-ai {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(124,58,237,0.35);
}
.tdc-composer-ai:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(124,58,237,0.5), 0 0 20px rgba(124,58,237,0.25);
}
.tdc-composer-ai:active:not(:disabled) { transform: translateY(0); }
.tdc-composer-ai:disabled { opacity: 0.5; cursor: not-allowed; }
.tdc-composer-ai.loading { animation: cmpPulse 1.4s ease-in-out infinite; }

/* Send button — accent orange */
.tdc-composer-send {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 22px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--accent,#f5a623) 0%, #e88b00 100%);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(245,166,35,0.35);
}
.tdc-composer-send:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(245,166,35,0.5), 0 0 22px rgba(245,166,35,0.22);
}
.tdc-composer-send:active:not(:disabled) { transform: translateY(0); }
.tdc-composer-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Resolve button */
.tdc-composer-resolve {
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.tdc-composer-resolve:hover:not(:disabled) {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
  border-color: rgba(34,197,94,0.3);
}
.tdc-composer-resolve:disabled { opacity: 0.4; cursor: not-allowed; }

/* Reopen button */
.tdc-composer-reopen {
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.65);
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.tdc-composer-reopen:hover {
  background: rgba(99,102,241,0.12);
  color: #a5b4fc;
}

/* Link modal */
.tdc-link-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.58);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cmpFadeIn 0.15s ease;
}
.tdc-link-modal {
  background: var(--card-bg, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px 26px 22px;
  width: min(430px, 92vw);
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}
.tdc-link-modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fg, #e0e0e0);
  margin-bottom: 14px;
}
.tdc-link-modal-input {
  width: 100%;
  padding: 10px 13px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--fg, #e0e0e0);
  font-size: 0.88rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
}
.tdc-link-modal-input:focus { border-color: var(--accent, #f5a623); }
.tdc-link-modal-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.tdc-lm-cancel {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: none;
  color: rgba(255,255,255,0.55);
  font-size: 0.83rem;
  cursor: pointer;
  transition: background .15s;
}
.tdc-lm-cancel:hover { background: rgba(255,255,255,0.06); }
.tdc-lm-confirm {
  padding: 8px 18px;
  border-radius: 10px;
  border: none;
  background: var(--accent, #f5a623);
  color: #fff;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.tdc-lm-confirm:hover { opacity: 0.85; }

/* Animations */
@keyframes cmpFadeUp {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cmpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cmpPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* Mobile responsive */
@media (max-width: 600px) {
  .tdc-composer { padding: 10px 10px 12px; gap: 8px; }
  .tdc-composer-ai,
  .tdc-composer-send { padding: 8px 14px; font-size: 0.8rem; }
  .tdc-composer-resolve,
  .tdc-composer-reopen { padding: 8px 12px; font-size: 0.8rem; }
  .tdc-attach-menu { min-width: 185px; }
  .tdc-input-row { padding: 8px 8px 8px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   TDC COMPOSER — LIGHT MODE PREMIUM OVERRIDES
   Floating card aesthetic: ChatGPT + Notion + Linear
   ═══════════════════════════════════════════════════════════════════ */

.light .tdc-composer {
  background: #F4F4F5;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 16px 20px 20px;
  gap: 12px;
}

/* Floating composer card */
.light .tdc-input-row {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  padding: 12px 12px 12px 20px;
  transition: border-color .25s, box-shadow .25s;
}
.light .tdc-input-row:focus-within {
  border-color: var(--accent, #f5a623);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb,245,166,35), 0.12),
              0 8px 32px rgba(0,0,0,0.1);
}

/* Input text */
.light .tdc-composer-input {
  color: #111111;
  font-size: 0.93rem;
}
.light .tdc-composer-input::placeholder {
  color: #8A8A8A;
}

/* "+" Attach button — black circle */
.light .tdc-attach-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #111111;
  border: none;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 300;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.light .tdc-attach-btn:hover,
.light .tdc-attach-btn.active {
  background: #111111;
  color: #ffffff;
  border: none;
  transform: rotate(45deg) scale(1.08);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb,245,166,35), 0.35);
}

/* Attach dropdown menu */
.light .tdc-attach-menu {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 16px 48px rgba(0,0,0,0.14);
}
.light .tdc-attach-item {
  color: #111111;
}
.light .tdc-attach-item:hover {
  background: rgba(var(--accent-rgb,245,166,35), 0.07);
  color: var(--accent, #f5a623);
}
.light .tdc-attach-item + .tdc-attach-item {
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* Bottom action bar */
.light .tdc-composer-bar {
  gap: 10px;
}

/* AI Assist — accent gradient pill */
.light .tdc-composer-ai {
  border-radius: 100px;
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
  color: #fff;
  padding: 9px 20px;
  font-size: 0.84rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(124,58,237,0.3);
  border: none;
}
.light .tdc-composer-ai:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,58,237,0.45), 0 0 20px rgba(124,58,237,0.2);
  opacity: 1;
}

/* Send button — accent gradient pill */
.light .tdc-composer-send {
  border-radius: 100px;
  background: linear-gradient(135deg, var(--accent,#f5a623) 0%, #e88b00 100%);
  color: #fff;
  padding: 9px 24px;
  height: 44px;
  font-weight: 700;
  font-size: 0.86rem;
  box-shadow: 0 4px 16px rgba(245,166,35,0.35);
  border: none;
}
.light .tdc-composer-send:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(245,166,35,0.5), 0 0 20px rgba(245,166,35,0.22);
  opacity: 1;
}

/* Resolve — white pill with thin border */
.light .tdc-composer-resolve {
  border-radius: 100px;
  background: #FFFFFF;
  border: 1.5px solid rgba(0,0,0,0.14);
  color: #1a1a1a;
  padding: 9px 18px;
  font-size: 0.84rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.light .tdc-composer-resolve:hover:not(:disabled) {
  background: #FFFFFF;
  border-color: var(--accent, #f5a623);
  color: #111111;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb,245,166,35), 0.18);
}

/* Reopen — same white pill */
.light .tdc-composer-reopen {
  border-radius: 100px;
  background: #FFFFFF;
  border: 1.5px solid rgba(0,0,0,0.14);
  color: #1a1a1a;
  padding: 9px 18px;
  font-size: 0.84rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.light .tdc-composer-reopen:hover {
  border-color: #7c3aed;
  color: #7c3aed;
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(124,58,237,0.15);
}

/* Attachment chip */
.light .tdc-composer-chip {
  background: rgba(var(--accent-rgb,245,166,35), 0.07);
  border: 1px solid rgba(var(--accent-rgb,245,166,35), 0.2);
  color: #111111;
}
.light .tdc-chip-name { color: #111111; }
.light .tdc-chip-size { color: #666666; }
.light .tdc-chip-remove { color: #888888; }
.light .tdc-chip-remove:hover { color: #ef4444; }

/* Link modal */
.light .tdc-link-modal {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
.light .tdc-link-modal-title { color: #111111; }
.light .tdc-link-modal-input {
  background: #F8F8F8;
  border: 1.5px solid rgba(0,0,0,0.1);
  color: #111111;
}
.light .tdc-link-modal-input:focus { border-color: var(--accent, #f5a623); }
.light .tdc-lm-cancel {
  border: 1.5px solid rgba(0,0,0,0.12);
  color: #444444;
  background: none;
}
.light .tdc-lm-cancel:hover { background: rgba(0,0,0,0.04); }
.light .tdc-lm-confirm {
  background: var(--accent, #f5a623);
  color: #fff;
}

/* Mobile responsive — light mode */
@media (max-width: 768px) {
  .light .tdc-composer { padding: 12px 14px 16px; }
  .light .tdc-composer-bar { flex-wrap: wrap; gap: 8px; }
  .light .tdc-composer-right { width: 100%; justify-content: flex-end; }
}
@media (max-width: 480px) {
  .light .tdc-composer-bar { flex-direction: column; align-items: stretch; }
  .light .tdc-composer-ai,
  .light .tdc-composer-send,
  .light .tdc-composer-resolve,
  .light .tdc-composer-reopen { width: 100%; justify-content: center; }
  .light .tdc-composer-right { flex-direction: column; width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════
   LIVE DEMO SHOWCASE SECTION
   ═══════════════════════════════════════════════════════════════════ */

/* Featured row: video left, description right */
.vyom-demo-featured-row {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: center;
  margin-bottom: 48px;
}

/* Video container with glow border */
.vyom-demo-video-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 122, 26, 0.35);
  box-shadow:
    0 0 40px rgba(255, 122, 26, 0.18),
    0 0 80px rgba(255, 122, 26, 0.07),
    0 24px 60px rgba(0, 0, 0, 0.55);
  background: #0a0a0a;
  aspect-ratio: 16/9;
}

.vyom-demo-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* Play hint overlay — fades out once video plays */
.vyom-demo-play-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.vyom-demo-video-wrap:hover .vyom-demo-play-hint {
  opacity: 1;
}

.vyom-demo-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 122, 26, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(255, 122, 26, 0.5);
}

/* Description panel */
.vyom-demo-desc-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vyom-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 122, 26, 0.12);
  border: 1px solid rgba(255, 122, 26, 0.3);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text1);
  width: fit-content;
  margin-bottom: 20px;
}

.vyom-demo-desc-title {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text1);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.vyom-demo-desc-text {
  font-size: 0.95rem;
  color: var(--text2);
  line-height: 1.65;
  margin: 0 0 20px;
}

.vyom-demo-watch-btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 24px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 122, 26, 0.5);
  background: transparent;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  width: fit-content;
}

.vyom-demo-watch-btn:hover {
  background: rgba(255, 122, 26, 0.12);
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(255, 122, 26, 0.2);
  transform: translateY(-1px);
}

/* Feature cards grid */
.vyom-demo-cards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

/* Individual card */
.vyom-demo-card {
  border-radius: 14px;
  background: var(--surface1, #111);
  border: 1.5px solid rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.22s ease;
  position: relative;
}

.vyom-demo-card:hover {
  border-color: rgba(255, 122, 26, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4), 0 0 20px rgba(255, 122, 26, 0.1);
}

.vyom-demo-card.active {
  border-color: rgba(255, 122, 26, 0.7);
  box-shadow: 0 0 0 2px rgba(255, 122, 26, 0.25), 0 12px 36px rgba(0,0,0,0.4);
}

/* Card thumbnail */
.vyom-demo-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #0a0a0a;
  overflow: hidden;
}

.vyom-demo-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card overlay with play icon */
.vyom-demo-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.vyom-demo-card:hover .vyom-demo-card-overlay {
  background: rgba(0,0,0,0.5);
}

.vyom-demo-card.active .vyom-demo-card-overlay {
  background: rgba(255, 122, 26, 0.15);
}

.vyom-demo-card-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.vyom-demo-card:hover .vyom-demo-card-play,
.vyom-demo-card.active .vyom-demo-card-play {
  background: rgba(255, 122, 26, 0.8);
  border-color: transparent;
  box-shadow: 0 0 14px rgba(255, 122, 26, 0.5);
}

/* Duration badge in card */
.vyom-demo-card-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}

/* Card info area */
.vyom-demo-card-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 14px;
}

.vyom-demo-card-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 2px;
}

.vyom-demo-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text1);
  line-height: 1.3;
  margin-bottom: 4px;
}

.vyom-demo-card-sub {
  font-size: 0.72rem;
  color: var(--text2);
  line-height: 1.45;
}

/* Explore button */
.vyom-demo-explore-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border-radius: 100px;
  border: 1.5px solid rgba(255, 122, 26, 0.5);
  background: transparent;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s;
  letter-spacing: 0.01em;
}

.vyom-demo-explore-btn:hover {
  background: rgba(255, 122, 26, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(255, 122, 26, 0.2);
  transform: translateY(-1px);
}

/* ── Responsive ─────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  .vyom-demo-featured-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .vyom-demo-desc-title {
    font-size: 1.45rem;
  }

  .vyom-demo-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .vyom-demo-cards-grid {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .vyom-demo-cards-grid::-webkit-scrollbar {
    height: 4px;
  }

  .vyom-demo-cards-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 122, 26, 0.3);
    border-radius: 2px;
  }

  .vyom-demo-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }

  .vyom-demo-desc-title {
    font-size: 1.25rem;
  }

  .vyom-demo-badge {
    font-size: 0.65rem;
  }
}

/* Light mode overrides */
[data-theme="light"] .vyom-demo-video-wrap {
  box-shadow:
    0 0 30px rgba(255, 122, 26, 0.12),
    0 16px 48px rgba(0,0,0,0.15);
}

[data-theme="light"] .vyom-demo-card {
  background: var(--surface1);
  border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .vyom-demo-card:hover {
  border-color: rgba(255, 122, 26, 0.5);
}

/* ──────────────────────────────────────────────────────────────────────────
   ENTERPRISE-GRADE RESPONSIVE OVERRIDES
   Redesigning the entire project layout architecture for mobile & tablet
   ────────────────────────────────────────────────────────────────────────── */

/* Grid and Card Fluid Sizing Improvements */
.db-stats-row {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
.db-bottom-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

/* Scale theme customization toggle button on mobile */
@media (max-width: 600px) {
  .bb8-toggle.bb8-toggle-sm {
    --toggle-size: clamp(3.2px, 1vw, 5.2px) !important;
    font-size: clamp(3.2px, 1vw, 5.2px) !important;
  }
}

/* Student Sidebar Drawer Navigation */
@media (max-width: 900px) {
  .sd-sidebar {
    display: flex !important;
    position: fixed !important;
    left: -100% !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 300 !important;
    transform: none !important;
    transition: left .35s cubic-bezier(.4,0,.2,1) !important;
    width: var(--sd-sidebar-w) !important;
    min-width: var(--sd-sidebar-w) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important;
  }
  .sd-sidebar.open {
    left: 0 !important;
  }
  .sd-app .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 299 !important;
    pointer-events: auto !important;
  }
  .sd-app .sidebar-overlay.open {
    display: block !important;
  }
  .sd-main {
    width: 100% !important;
  }
}

/* Teacher Doubt Center Responsiveness */
.tdc-back-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 12px;
}
@media (max-width: 768px) {
  .tdc-back-btn {
    display: inline-flex !important;
  }
  .tdc-body {
    grid-template-columns: 1fr !important;
  }
  .tdc-left-panel {
    display: flex !important;
    width: 100% !important;
  }
  .tdc-center-panel {
    display: none !important;
    width: 100% !important;
  }
  .tdc-body.thread-active .tdc-left-panel {
    display: none !important;
  }
  .tdc-body.thread-active .tdc-center-panel {
    display: flex !important;
  }
}

/* Student Doubt Center Responsiveness */
@media (max-width: 768px) {
  .doubt-system-shell {
    flex-direction: column !important;
  }
  .doubt-system-shell .doubt-sidebar {
    width: 100% !important;
    display: block !important;
  }
  .doubt-system-shell .doubt-main {
    width: 100% !important;
    display: none !important;
  }
  .doubt-system-shell.thread-active .doubt-sidebar {
    display: none !important;
  }
  .doubt-system-shell.thread-active .doubt-main {
    display: flex !important;
  }
}

/* Video participant grid optimization */
@media (max-width: 600px) {
  .vc-video-grid.duo {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }
  .vc-video-grid.trio {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, 1fr) !important;
  }
}

/* Attendance Timeline Stacking */
@media (max-width: 480px) {
  .s-att-timeline-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}

/* Student Hero Stats Stacking on Mobile */
@media (max-width: 480px) {
  .sd-hero-right {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 16px 20px !important;
  }
}

/* Teacher Mobile Sidebar Visibility Fix */
@media (max-width: 900px) {
  .teacher-sidebar.open {
    display: flex !important;
    transform: translateX(0) !important;
  }
}

/* ──────────────────────────────────────────────────
   STUDENT DASHBOARD: KEY FEATURES ROW (Mockup Sec 3)
   ────────────────────────────────────────────────── */
.sd-features-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 14px;
}
.sd-feature-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  transition: transform 0.2s, border-color 0.2s, background-color 0.2s !important;
}
.sd-feature-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(var(--accent-rgb), 0.25) !important;
  transform: translateY(-2px) !important;
}
.sd-feature-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(var(--accent-rgb), 0.1) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}
.sd-feature-info h5 {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
}
.sd-feature-info p {
  font-size: 0.72rem !important;
  color: rgba(241, 245, 249, 0.45) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

@media (max-width: 900px) {
  .sd-features-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .sd-features-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ──────────────────────────────────────────────────
   STUDENT PORTAL: ATTENDANCE ENHANCEMENTS (Mockup Sec 4)
   ────────────────────────────────────────────────── */

/* Date Strip Selector */
.s-att-date-strip {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding: 4px 2px;
}
.s-att-date-item {
  flex: 1;
  min-width: 52px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.s-att-date-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.s-att-date-item.active {
  background: linear-gradient(135deg, var(--accent), #ea580c) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3) !important;
}
.s-att-date-day {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(241, 245, 249, 0.4);
  letter-spacing: 0.02em;
}
.s-att-date-item.active .s-att-date-day {
  color: rgba(255, 255, 255, 0.85);
}
.s-att-date-num {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
.s-att-date-item.active .s-att-date-num {
  color: #fff;
}

/* Today's Status Dropdown Pill Row */
.s-att-status-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: rgba(241, 245, 249, 0.6);
}
.s-att-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.s-att-status-pill.present {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.2);
}
.s-att-status-pill.absent {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}

/* Radar Location Safe-Zone Card */
.s-radar-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.s-radar-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: rgba(241, 245, 249, 0.7);
}
.s-radar-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.s-radar-card-dot.inside {
  background: #22c55e;
  color: #22c55e;
}
.s-radar-card-dot.outside {
  background: #ef4444;
  color: #ef4444;
}
.s-radar-card-header strong {
  color: #fff;
}

.s-radar-map-wrap {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), 0.15);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.03) 0%, rgba(var(--accent-rgb), 0.08) 80%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
}
/* Concentric rings */
.s-radar-grid-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.06);
}
.s-radar-grid-circle-1 { width: 50px; height: 50px; }
.s-radar-grid-circle-2 { width: 100px; height: 100px; }
.s-radar-grid-circle-3 { width: 150px; height: 150px; }

/* Grid Crosshairs */
.s-radar-crosshair-h {
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
.s-radar-crosshair-v {
  position: absolute;
  height: 100%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* Sweep rotation */
.s-radar-sweep {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  left: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(var(--accent-rgb), 0.15));
  transform-origin: 0% 100%;
  animation: radar-sweep-spin 4s linear infinite;
  pointer-events: none;
}
@keyframes radar-sweep-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Safe Zone circle limit */
.s-radar-safe-zone {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1.5px solid rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Locator ping marker */
.s-radar-ping {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
  animation: radar-ping-pulse 1.8s ease-out infinite;
}
.s-radar-ping.outside {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3);
  animation-name: radar-ping-pulse-red;
}
@keyframes radar-ping-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes radar-ping-pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Collapse timeline history toggle button */
.s-radar-history-btn {
  background: rgba(var(--accent-rgb), 0.15);
  border: 1.5px solid rgba(var(--accent-rgb), 0.3);
  color: #fff;
  border-radius: 12px;
  padding: 8px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.s-radar-history-btn:hover {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-1px);
}
.s-radar-history-btn:active {
  transform: scale(0.97);
}

/* Ensure landing navigation controls (About Us, Theme Toggle, Profile/Login) are fully visible on mobile viewports */
@media (max-width: 768px) {
  .landing .landing-nav > .nav-right {
    display: flex !important;
    margin-left: auto !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

/* ── LIGHT MODE VISIBILITY & CONTRAST FIXES ── */
.light .tk2-btn-secondary {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
}
.light .tk2-btn-secondary:hover:not(:disabled) {
  background: var(--surface3) !important;
  color: var(--text) !important;
  border-color: rgba(110,44,18,0.25) !important;
}
.light .tk2-clear-btn {
  background: rgba(110, 44, 18, 0.05) !important;
  border: 1px solid rgba(110, 44, 18, 0.12) !important;
  color: var(--text3) !important;
}
.light .tk2-clear-btn:hover {
  background: rgba(110, 44, 18, 0.1) !important;
  color: var(--text) !important;
}
.light .pct-btn-tpl {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
}
.light .pct-btn-tpl:hover {
  background: var(--surface3) !important;
  color: var(--text) !important;
  border-color: rgba(110, 44, 18, 0.25) !important;
}
.light .sv2-leave-btn {
  background: rgba(198, 90, 61, 0.08) !important;
  border: 1px solid rgba(198, 90, 61, 0.2) !important;
  color: #C65A3D !important;
}
.light .sv2-leave-btn:hover {
  background: #C65A3D !important;
  color: #FFFDF9 !important;
  border-color: transparent !important;
}
.light .s-btn-hint {
  border: 1px solid rgba(212, 160, 23, 0.4) !important;
  background: rgba(212, 160, 23, 0.08) !important;
  color: #8B6400 !important;
}
.light .s-btn-hint:hover {
  background: rgba(212, 160, 23, 0.14) !important;
  border-color: #8B6400 !important;
}
.light .s-btn-run {
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
}
.light .s-btn-run:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: #059669 !important;
}
.light .rc-summary-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(11, 45, 99, 0.04) !important;
}
.light .rc-summary-card:hover {
  border-color: rgba(110, 44, 18, 0.25) !important;
  box-shadow: 0 8px 24px rgba(110, 44, 18, 0.08) !important;
}
.light .rc-summary-title {
  color: var(--text3) !important;
}
.light .rc-summary-value {
  color: var(--text) !important;
}
.light .rc-card-new {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 16px rgba(11, 45, 99, 0.04) !important;
}
.light .rc-card-new:hover {
  border-color: rgba(110, 44, 18, 0.25) !important;
  box-shadow: 0 6px 20px rgba(110, 44, 18, 0.08) !important;
}
.light .rc-card-new.is-correct {
  border-color: rgba(34, 197, 94, 0.3) !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.08) !important;
}
.light .rc-card-new.is-incorrect {
  border-color: rgba(198, 90, 61, 0.3) !important;
  box-shadow: 0 4px 16px rgba(198, 90, 61, 0.08) !important;
}
.light .rc-card-new.is-pending {
  border-color: rgba(212, 160, 23, 0.3) !important;
  box-shadow: 0 4px 16px rgba(212, 160, 23, 0.08) !important;
}
.light .rc-tab-new {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
  backdrop-filter: none !important;
}
.light .rc-tab-new:hover {
  background: var(--surface3) !important;
  color: var(--text) !important;
}
.light .rc-tab-new.active {
  background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.light .rc-sort-container {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: none !important;
}
.light .rc-sort-label {
  color: var(--text3) !important;
}
.light .rc-sort-select {
  color: var(--text) !important;
}
.light .rc-sort-select option {
  background: var(--surface2) !important;
  color: var(--text) !important;
}
.light .btn-ghost {
  border-color: rgba(110, 44, 18, 0.25) !important;
}
.light .btn-ghost:hover {
  border-color: rgba(110, 44, 18, 0.45) !important;
}
.light .comm-v2-icon-btn {
  color: var(--text2) !important;
  background: rgba(110, 44, 18, 0.05) !important;
  border: 1px solid rgba(110, 44, 18, 0.12) !important;
}
.light .comm-v2-icon-btn:hover {
  color: var(--text) !important;
  background: rgba(110, 44, 18, 0.12) !important;
  border-color: rgba(110, 44, 18, 0.25) !important;
}
.light .cm2-tab {
  color: var(--text3) !important;
}
.light .cm2-tab:hover {
  color: var(--text) !important;
}
.light .db-hero-code-copy {
  color: #6B5648 !important;
}
.light .comm-v2-del-btn {
  color: #C65A3D !important;
}
.light .comm-v2-del-btn:hover {
  background: rgba(198, 90, 61, 0.08) !important;
  color: #9A1515 !important;
}
.light .comm-v2-student-kick-btn {
  background: rgba(198, 90, 61, 0.06) !important;
  border: 1px solid rgba(198, 90, 61, 0.18) !important;
  color: #C65A3D !important;
}
.light .comm-v2-student-kick-btn:hover {
  background: rgba(198, 90, 61, 0.12) !important;
  border-color: rgba(198, 90, 61, 0.35) !important;
  color: #9A1515 !important;
}

/* Report Center Review details under .light */
.light .rc-review-container {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
}
.light .rc-review-container.correct {
  background: rgba(16, 185, 129, 0.04) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.light .rc-review-container.incorrect {
  background: rgba(198, 90, 61, 0.04) !important;
  border-color: rgba(198, 90, 61, 0.3) !important;
}
.light .rc-review-container.pending {
  background: rgba(212, 160, 23, 0.04) !important;
  border-color: rgba(212, 160, 23, 0.3) !important;
}
.light .rc-review-status-icon.correct {
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  background: rgba(16, 185, 129, 0.15) !important;
}
.light .rc-review-status-icon.incorrect {
  color: #C65A3D !important;
  border-color: rgba(198, 90, 61, 0.5) !important;
  background: rgba(198, 90, 61, 0.15) !important;
}
.light .rc-q-header-new {
  color: var(--text3) !important;
}
.light .rc-q-text-new {
  color: var(--text) !important;
}
.light .rc-q-opt-new {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.light .rc-q-opt-new.opt-correct {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: #10B981 !important;
  color: #059669 !important;
}
.light .rc-q-opt-new.opt-wrong {
  background: rgba(198, 90, 61, 0.12) !important;
  border-color: #C65A3D !important;
  color: #9A1515 !important;
}
.light .rc-q-ans-new {
  background: var(--surface3) !important;
  border: 1px solid var(--border) !important;
}
.light .rc-q-ans-new .mine {
  color: #C65A3D !important;
}
.light .rc-q-ans-new .correct {
  color: #059669 !important;
}
.light .rc-feedback-box {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.light .rc-feedback-box.correct {
  border-left: 4px solid #10B981 !important;
}
.light .rc-feedback-box.incorrect {
  border-left: 4px solid #C65A3D !important;
}
.light .rc-feedback-box-title {
  color: var(--text2) !important;
}
.light .rc-feedback-box.incorrect .rc-feedback-box-title {
  color: #C65A3D !important;
}
.light .rc-q-meta-new {
  color: var(--text3) !important;
}
.light .rc-empty {
  color: var(--text3) !important;
}
.light .rc-empty-title {
  color: var(--text2) !important;
}