:root {
  --bg: #080b10;
  --bg2: #0d1117;
  --bg3: #111820;
  --bg4: #151e28;
  --cyan: #00e5c8;
  --cyan-dim: #00b8a0;
  --violet: #9b5de5;
  --violet-dim: #7a3fc2;
  --text: #e8edf2;
  --text-muted: #7a8a9a;
  --text-dim: #3a4a5a;
  --border: rgba(0,229,200,0.12);
  --border-v: rgba(155,93,229,0.18);
  --border-w: rgba(255,255,255,0.07);
  --gold: #f5c842;
  --gold-dim: rgba(245,200,66,0.15);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}

/* ── NOISE ── */
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:0.35;}

/* ── VIEWS ── */
.view{display:none;position:relative;z-index:1;min-height:100vh;}
.view.active{display:block;}
#view-auth{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:0.5rem;font-family:'DM Sans',sans-serif;font-size:0.88rem;font-weight:500;padding:0.7rem 1.4rem;border-radius:5px;border:none;cursor:pointer;transition:all 0.22s;text-decoration:none;letter-spacing:0.01em;}
.btn-primary{background:var(--cyan);color:var(--bg);}
.btn-primary:hover{background:#00ffd8;box-shadow:0 0 28px rgba(0,229,200,0.35);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--cyan);border:1px solid var(--cyan);}
.btn-outline:hover{background:rgba(0,229,200,0.08);box-shadow:0 0 18px rgba(0,229,200,0.15);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border-w);}
.btn-ghost:hover{color:var(--text);border-color:rgba(0,229,200,0.25);}
.btn-v{background:transparent;color:var(--violet);border:1px solid var(--violet);}
.btn-v:hover{background:rgba(155,93,229,0.08);}
.btn-sm{padding:0.45rem 0.9rem;font-size:0.8rem;}
.btn-full{width:100%;justify-content:center;}
.arrow{transition:transform 0.2s;}
.btn:hover .arrow{transform:translateX(3px);}

/* ══════════════════════════════
   LOGIN / REGISTER VIEW
══════════════════════════════ */
#view-auth{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;}
.auth-card{width:100%;max-width:420px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:2.5rem;position:relative;overflow:hidden;}
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));}
.auth-logo{display:flex;align-items:center;gap:0.5rem;font-family:'DM Sans',sans-serif;font-weight:800;font-size:1rem;margin-bottom:2rem;justify-content:center;}
.auth-logo .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
.auth-tabs{display:flex;gap:0;border:1px solid var(--border-w);border-radius:6px;margin-bottom:2rem;overflow:hidden;}
.auth-tab{flex:1;padding:0.6rem;font-size:0.82rem;font-weight:500;text-align:center;cursor:pointer;background:transparent;border:none;color:var(--text-muted);transition:all 0.2s;font-family:'DM Sans',sans-serif;}
.auth-tab.active{background:rgba(0,229,200,0.1);color:var(--cyan);}
.form-group{display:flex;flex-direction:column;gap:0.4rem;margin-bottom:1rem;}
.form-group label{font-family:'DM Sans',sans-serif;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
.form-group input{background:var(--bg);border:1px solid var(--border-w);border-radius:5px;padding:0.7rem 1rem;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.9rem;outline:none;transition:border-color 0.2s,box-shadow 0.2s;width:100%;}
.form-group input:focus{border-color:rgba(0,229,200,0.4);box-shadow:0 0 0 3px rgba(0,229,200,0.06);}
.form-group input::placeholder{color:var(--text-dim);}
.auth-error{font-size:0.82rem;color:#ff6b6b;margin-bottom:1rem;display:none;}
.auth-footer{text-align:center;margin-top:1.5rem;font-size:0.82rem;color:var(--text-muted);}
.auth-footer a{color:var(--cyan);cursor:pointer;text-decoration:none;}

/* ══════════════════════════════
   MAIN LAYOUT
══════════════════════════════ */
.app-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh;}

/* ── SIDEBAR ── */
.sidebar{background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar-logo{padding:1.5rem 1.5rem 1rem;display:flex;align-items:center;gap:0.5rem;font-family:'DM Sans',sans-serif;font-weight:800;font-size:0.95rem;border-bottom:1px solid var(--border);cursor:pointer;}
.sidebar-logo .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);animation:pulse 2.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.8);}}
.sidebar-user{padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;}
.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;color:var(--bg);flex-shrink:0;}
.user-info{flex:1;min-width:0;}
.user-name{font-size:0.88rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-role{font-size:0.72rem;color:var(--text-muted);font-family:'DM Sans',sans-serif;}
.sidebar-nav{padding:1rem 0;flex:1;}
.nav-section{padding:0.4rem 1.5rem;font-family:'DM Sans',sans-serif;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-top:0.5rem;}
.nav-item{display:flex;align-items:center;gap:0.7rem;padding:0.6rem 1.5rem;font-size:0.88rem;color:var(--text-muted);cursor:pointer;transition:all 0.18s;border-left:2px solid transparent;text-decoration:none;}
.nav-item:hover{color:var(--text);background:rgba(255,255,255,0.03);}
.nav-item.active{color:var(--cyan);border-left-color:var(--cyan);background:rgba(0,229,200,0.05);}
.nav-item .nav-icon{width:18px;text-align:center;font-size:0.9rem;}
.sidebar-bottom{padding:1rem 1.5rem;border-top:1px solid var(--border);}

/* XP Bar in sidebar */
.xp-bar-wrap{margin-top:0.75rem;}
.xp-label{display:flex;justify-content:space-between;font-size:0.72rem;color:var(--text-muted);margin-bottom:0.4rem;font-family:'DM Sans',sans-serif;}
.xp-bar{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));border-radius:2px;transition:width 1s ease;}

/* ── MAIN CONTENT ── */
.main-content{overflow-y:auto;background:var(--bg);}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-bottom:1px solid var(--border);background:rgba(8,11,16,0.8);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50;position:relative;}
.topbar-title{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:-0.02em;}
.topbar-actions{display:flex;align-items:center;gap:1rem;}
.notif-btn{width:36px;height:36px;border-radius:6px;background:var(--bg2);border:1px solid var(--border-w);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:border-color 0.2s;}
.notif-btn:hover{border-color:var(--border);}
.notif-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--cyan);}
.page-inner{padding:2rem;}

/* ══════════════════════════════
   DASHBOARD
══════════════════════════════ */
.welcome-banner{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:1.8rem 2rem;margin-bottom:2rem;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:2rem;}
.welcome-banner::before{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,200,0.08) 0%,transparent 70%);}
.welcome-banner::after{content:'';position:absolute;right:100px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(155,93,229,0.07) 0%,transparent 70%);}
.welcome-text h2{font-family:'DM Sans',sans-serif;font-size:1.4rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:0.4rem;}
.welcome-text p{font-size:0.9rem;color:var(--text-muted);line-height:1.6;}
.welcome-stats{display:flex;gap:1.5rem;flex-shrink:0;}
.wstat{text-align:center;}
.wstat-num{font-family:'DM Sans',sans-serif;font-size:1.8rem;font-weight:800;letter-spacing:-0.01em;background:linear-gradient(135deg,var(--cyan),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.wstat-label{font-size:0.72rem;color:var(--text-muted);font-family:'DM Sans',sans-serif;letter-spacing:0.03em;}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem;}
.stat-card{background:var(--bg2);border:1px solid var(--border-w);border-radius:8px;padding:1.2rem 1.4rem;transition:border-color 0.2s;}
.stat-card:hover{border-color:var(--border);}
.stat-icon{font-size:1.2rem;margin-bottom:0.6rem;}
.stat-val{font-family:'DM Sans',sans-serif;font-size:1.6rem;font-weight:800;letter-spacing:-0.01em;margin-bottom:0.2rem;}
.stat-name{font-size:0.78rem;color:var(--text-muted);}
.stat-card.c .stat-val{color:var(--cyan);}
.stat-card.v .stat-val{color:var(--violet);}
.stat-card.g .stat-val{color:var(--gold);}
.stat-card.w .stat-val{color:var(--text);}

/* Section headers */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;}
.section-head h3{font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-0.01em;}
.section-tag{font-family:'DM Sans',sans-serif;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);}

/* Course cards on dashboard */
.courses-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem;}
.course-card{background:var(--bg2);border:1px solid var(--border-w);border-radius:10px;overflow:hidden;cursor:pointer;transition:all 0.22s;position:relative;}
.course-card:hover{border-color:rgba(0,229,200,0.25);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.3);}
.course-thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative;overflow:hidden;}
.course-thumb.t1{background:linear-gradient(135deg,rgba(0,229,200,0.15),rgba(0,229,200,0.05));}
.course-thumb.t2{background:linear-gradient(135deg,rgba(155,93,229,0.15),rgba(155,93,229,0.05));}
.course-thumb.t3{background:linear-gradient(135deg,rgba(245,200,66,0.12),rgba(245,200,66,0.04));}
.course-thumb.td{background:linear-gradient(135deg,rgba(155,93,229,0.2),rgba(0,229,200,0.1));border:1px dashed rgba(155,93,229,0.3);}
.course-thumb-lock{position:absolute;inset:0;background:rgba(8,11,16,0.7);display:flex;align-items:center;justify-content:center;font-size:1.5rem;}
.course-body{padding:1rem 1.2rem 1.2rem;}
.course-level-tag{font-family:'DM Sans',sans-serif;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--violet);margin-bottom:0.5rem;}
.course-card h4{font-family:'DM Sans',sans-serif;font-size:0.95rem;font-weight:700;letter-spacing:-0.01em;line-height:1.3;margin-bottom:0.5rem;}
.course-progress-wrap{margin-top:0.8rem;}
.course-progress-label{display:flex;justify-content:space-between;font-size:0.72rem;color:var(--text-muted);margin-bottom:0.35rem;font-family:'DM Sans',sans-serif;}
.progress-bar{height:3px;background:var(--bg3);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width 1s ease;}
.course-locked{opacity:0.6;cursor:pointer;}
.course-coming-soon{position:absolute;top:0.6rem;right:0.6rem;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;background:rgba(155,93,229,0.18);color:#9b5de5;border:1px solid rgba(155,93,229,0.35);padding:0.2rem 0.55rem;border-radius:3px;}
.lesson-item.lesson-locked{opacity:0.5;cursor:pointer;}
.lesson-item.lesson-locked:hover{background:rgba(255,255,255,0.02);}
.locked-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:600;display:none;align-items:center;justify-content:center;padding:2rem;backdrop-filter:blur(4px);}
.locked-modal-overlay.open{display:flex;}
.locked-modal{background:var(--bg2);border:1px solid var(--border-v);border-radius:12px;padding:2rem;width:100%;max-width:440px;text-align:center;position:relative;}
.locked-modal-icon{font-size:2.5rem;margin-bottom:0.75rem;}
.locked-modal-badge{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--violet);border:1px solid var(--border-v);background:rgba(155,93,229,0.08);padding:0.25rem 0.7rem;border-radius:3px;margin-bottom:1rem;}
.locked-modal h3{font-size:1.15rem;font-weight:800;margin-bottom:0.6rem;letter-spacing:-0.01em;}
.locked-modal p{font-size:0.88rem;color:var(--text-muted);line-height:1.65;margin-bottom:1.25rem;}
.course-locked:hover{transform:none;border-color:var(--border-w);box-shadow:none;}

/* ── Badge animations ───────────────────────────────────────────────── */
@keyframes badge-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes badge-pulse-glow{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes badge-unlock{0%{transform:scale(0.4) rotate(-10deg);opacity:0}60%{transform:scale(1.15) rotate(3deg);opacity:1}80%{transform:scale(0.95)}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes badge-shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

/* ── Badge base ─────────────────────────────────────────────────────── */
.badges-row{display:flex;gap:0.85rem;flex-wrap:wrap;margin-bottom:2rem;}
.badge{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:0.35rem;
  background:var(--bg2);border:1px solid var(--border-w);border-radius:14px;
  padding:1rem 1.1rem 0.8rem;min-width:84px;cursor:default;
  transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s;overflow:hidden;
}
.badge-icon-wrap{font-size:1.8rem;line-height:1;position:relative;z-index:1;}
.badge-emoji{display:block;transition:transform 0.2s;}
.badge-name{font-size:0.65rem;color:var(--text-muted);text-align:center;font-family:'DM Sans',sans-serif;letter-spacing:0.04em;position:relative;z-index:1;}
.badge-glow{position:absolute;inset:0;border-radius:14px;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.badge-lock{position:absolute;top:4px;right:6px;font-size:0.6rem;opacity:0.5;}

/* ── Locked state ───────────────────────────────────────────────────── */
.badge.locked{opacity:0.28;filter:grayscale(1);}

/* ── Earned base ────────────────────────────────────────────────────── */
.badge.earned{animation:badge-float 3.5s ease-in-out infinite;}
.badge.earned .badge-emoji{animation:badge-float 3.5s ease-in-out infinite;}
.badge.earned .badge-name{background:linear-gradient(90deg,var(--gold),#fff8c0,var(--gold));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:badge-shimmer 3s linear infinite;}
.badge.earned .badge-glow{animation:badge-pulse-glow 2.5s ease-in-out infinite;}
.badge.earned:hover{transform:translateY(-4px) scale(1.05);}
.badge.earned:hover .badge-emoji{transform:scale(1.15);}

/* ── Per-badge colour themes ────────────────────────────────────────── */
.badge-first-lesson.earned{border-color:rgba(0,229,200,0.45);box-shadow:0 0 14px rgba(0,229,200,0.15);}
.badge-first-lesson.earned .badge-glow{background:radial-gradient(circle at 50% 60%,rgba(0,229,200,0.18),transparent 70%);}

.badge-quiz-ace.earned{border-color:rgba(80,220,120,0.45);box-shadow:0 0 14px rgba(80,220,120,0.15);}
.badge-quiz-ace.earned .badge-glow{background:radial-gradient(circle at 50% 60%,rgba(80,220,120,0.18),transparent 70%);}

.badge-on-fire.earned{border-color:rgba(255,120,40,0.5);box-shadow:0 0 14px rgba(255,120,40,0.2);}
.badge-on-fire.earned .badge-glow{background:radial-gradient(circle at 50% 70%,rgba(255,120,40,0.22),transparent 70%);}
.badge-on-fire.earned .badge-emoji{animation:badge-float 2s ease-in-out infinite;}

.badge-century.earned{border-color:rgba(245,200,66,0.5);box-shadow:0 0 14px rgba(245,200,66,0.2);}
.badge-century.earned .badge-glow{background:radial-gradient(circle at 50% 60%,rgba(245,200,66,0.2),transparent 70%);}

.badge-halfway.earned{border-color:rgba(100,160,255,0.5);box-shadow:0 0 14px rgba(100,160,255,0.15);}
.badge-halfway.earned .badge-glow{background:radial-gradient(circle at 50% 60%,rgba(100,160,255,0.18),transparent 70%);}

.badge-scholar.earned{border-color:rgba(245,200,66,0.6);box-shadow:0 0 18px rgba(245,200,66,0.25);}
.badge-scholar.earned .badge-glow{background:radial-gradient(circle at 50% 50%,rgba(245,200,66,0.25),transparent 65%);}
.badge-scholar.earned .badge-emoji{animation:badge-float 4s ease-in-out infinite;}

.badge-course-complete.earned{border-color:rgba(155,93,229,0.55);box-shadow:0 0 18px rgba(155,93,229,0.2);}
.badge-course-complete.earned .badge-glow{background:radial-gradient(circle at 50% 50%,rgba(155,93,229,0.22),transparent 65%);}

.badge-streak-7.earned{border-color:rgba(255,215,0,0.55);box-shadow:0 0 18px rgba(255,215,0,0.2);}
.badge-streak-7.earned .badge-glow{background:radial-gradient(circle at 50% 50%,rgba(255,215,0,0.22),transparent 65%);}
.badge-streak-7.earned .badge-emoji{animation:badge-float 2.8s ease-in-out infinite;}

/* ── Unlock pop animation (added via JS) ────────────────────────────── */
.badge-unlocking{animation:badge-unlock 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards!important;}

/* Leaderboard */
.leaderboard{background:var(--bg2);border:1px solid var(--border-w);border-radius:10px;overflow:hidden;margin-bottom:2rem;}
.lb-row{display:flex;align-items:center;gap:1rem;padding:0.85rem 1.2rem;border-bottom:1px solid var(--border-w);transition:background 0.18s;}
.lb-row:last-child{border-bottom:none;}
.lb-row:hover{background:rgba(255,255,255,0.02);}
.lb-rank{font-family:'DM Sans',sans-serif;font-size:0.78rem;color:var(--text-dim);width:24px;text-align:center;}
.lb-rank.top{color:var(--gold);}
.lb-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.75rem;color:var(--bg);flex-shrink:0;}
.lb-name{flex:1;font-size:0.88rem;}
.lb-xp{font-family:'DM Sans',sans-serif;font-size:0.78rem;color:var(--cyan);}
.lb-row.you{background:rgba(0,229,200,0.04);border-left:2px solid var(--cyan);}

/* ══════════════════════════════
   COURSE PLAYER
══════════════════════════════ */
#view-player{display:none;}
#view-player.active{display:grid;grid-template-columns:300px 1fr;min-height:100vh;}
.player-sidebar{background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;}
.player-back{display:flex;align-items:center;gap:0.5rem;padding:1rem 1.2rem;font-size:0.82rem;color:var(--text-muted);cursor:pointer;border-bottom:1px solid var(--border);transition:color 0.2s;}
.player-back:hover{color:var(--cyan);}
.player-course-title{padding:1rem 1.2rem;border-bottom:1px solid var(--border);}
.player-course-title h3{font-family:'DM Sans',sans-serif;font-size:0.95rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:0.6rem;}
.player-course-progress{font-size:0.75rem;color:var(--text-muted);font-family:'DM Sans',sans-serif;margin-bottom:0.5rem;}
.lesson-list{padding:0.75rem 0;}
.lesson-section-title{padding:0.5rem 1.2rem;font-family:'DM Sans',sans-serif;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);}
.lesson-item{display:flex;align-items:center;gap:0.7rem;padding:0.65rem 1.2rem;cursor:pointer;transition:all 0.18s;border-left:2px solid transparent;position:relative;}
.lesson-item:hover{background:rgba(255,255,255,0.03);}
.lesson-item.active{background:rgba(0,229,200,0.06);border-left-color:var(--cyan);}
.lesson-item.completed .lesson-num{background:var(--cyan);color:var(--bg);}
.lesson-num{width:22px;height:22px;border-radius:50%;border:1px solid var(--border-w);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-family:'DM Sans',sans-serif;flex-shrink:0;transition:all 0.2s;}
.lesson-item.active .lesson-num{border-color:var(--cyan);color:var(--cyan);}
.lesson-info{flex:1;min-width:0;}
.lesson-title-sm{font-size:0.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lesson-type-tag{font-size:0.68rem;color:var(--text-dim);font-family:'DM Sans',sans-serif;}
.lesson-check{font-size:0.75rem;color:var(--cyan);}

/* Player main */
.player-main{display:flex;flex-direction:column;background:var(--bg);}
.player-topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-bottom:1px solid var(--border);background:rgba(8,11,16,0.8);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50;}
.player-lesson-title{font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-0.01em;}
.player-nav{display:flex;gap:0.5rem;}
.player-body{flex:1;padding:2rem;max-width:900px;margin:0 auto;width:100%;}

/* Video embed */
.video-container{background:var(--bg2);border:1px solid var(--border-w);border-radius:10px;overflow:hidden;margin-bottom:1.5rem;position:relative;aspect-ratio:16/9;}
.video-container iframe{width:100%;height:100%;border:none;}
.video-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--text-muted);background:var(--bg2);}
.video-placeholder .play-btn{width:64px;height:64px;border-radius:50%;background:rgba(0,229,200,0.1);border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;font-size:1.4rem;cursor:pointer;transition:all 0.2s;}
.video-placeholder .play-btn:hover{background:rgba(0,229,200,0.2);transform:scale(1.05);}
.video-placeholder p{font-size:0.88rem;}

/* Lesson content */
.lesson-content{background:var(--bg2);border:1px solid var(--border-w);border-radius:10px;padding:1.5rem;margin-bottom:1.5rem;}
.lesson-content h2{font-family:'DM Sans',sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:1rem;}
.lesson-content p{font-size:0.95rem;line-height:1.75;color:var(--text-muted);margin-bottom:1rem;}
.lesson-content p:last-child{margin-bottom:0;}
.lesson-content ul{padding-left:1.5rem;display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem;}
.lesson-content li{font-size:0.95rem;line-height:1.6;color:var(--text-muted);}
.key-point{display:flex;gap:0.75rem;background:rgba(0,229,200,0.05);border:1px solid var(--border);border-radius:6px;padding:0.9rem 1rem;margin-bottom:0.75rem;}
.key-point-icon{color:var(--cyan);flex-shrink:0;margin-top:0.1em;}
.key-point-text{font-size:0.9rem;line-height:1.6;color:var(--text-muted);}

/* ── QUIZ ── */
.quiz-wrap{background:var(--bg2);border:1px solid var(--border-v);border-radius:10px;padding:1.8rem;margin-bottom:1.5rem;}
.quiz-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;}
.quiz-badge{font-family:'DM Sans',sans-serif;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--violet);border:1px solid var(--border-v);background:rgba(155,93,229,0.07);padding:0.25rem 0.6rem;border-radius:3px;}
.quiz-title{font-family:'DM Sans',sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:-0.01em;}
.quiz-q{font-size:1rem;line-height:1.6;margin-bottom:1.2rem;font-weight:500;}
.quiz-options{display:flex;flex-direction:column;gap:0.6rem;margin-bottom:1.5rem;}
.quiz-option{display:flex;align-items:flex-start;gap:0.75rem;padding:0.85rem 1rem;border-radius:6px;border:1px solid var(--border-w);cursor:pointer;transition:all 0.18s;font-size:0.9rem;line-height:1.5;}
.quiz-option:hover{border-color:rgba(155,93,229,0.35);background:rgba(155,93,229,0.05);}
.quiz-option.selected{border-color:var(--violet);background:rgba(155,93,229,0.08);}
.quiz-option.correct{border-color:var(--cyan);background:rgba(0,229,200,0.07);color:var(--text);}
.quiz-option.wrong{border-color:#ff6b6b;background:rgba(255,107,107,0.07);}
.quiz-option-letter{width:22px;height:22px;border-radius:4px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:0.72rem;flex-shrink:0;transition:all 0.18s;}
.quiz-option.selected .quiz-option-letter{background:var(--violet);color:white;}
.quiz-option.correct .quiz-option-letter{background:var(--cyan);color:var(--bg);}
.quiz-option.wrong .quiz-option-letter{background:#ff6b6b;color:white;}
.quiz-explanation{background:rgba(0,229,200,0.05);border:1px solid var(--border);border-radius:6px;padding:1rem;margin-bottom:1.2rem;font-size:0.88rem;line-height:1.6;color:var(--text-muted);display:none;}
.quiz-explanation.show{display:block;}
.quiz-explanation strong{color:var(--cyan);}
.quiz-actions{display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;}
.quiz-score{font-family:'DM Sans',sans-serif;font-size:0.8rem;color:var(--text-muted);}

/* XP pop animation */
.xp-pop{position:fixed;pointer-events:none;font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:700;color:var(--gold);z-index:9999;animation:xpFloat 1.8s ease-out forwards;}
@keyframes xpFloat{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-80px) scale(1.3);}}

/* ── CONFETTI ── */
.confetti-piece{position:fixed;pointer-events:none;z-index:9998;width:10px;height:10px;border-radius:2px;animation:confettiFall linear forwards;}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1;}100%{transform:translateY(100vh) rotate(720deg);opacity:0;}}

/* ── DEMO INTRO OVERLAY ── */
#demo-intro-overlay{position:fixed;inset:0;background:var(--bg);z-index:9990;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;opacity:1;transition:opacity 0.6s ease;}
#demo-intro-overlay.fade-out{opacity:0;pointer-events:none;}
.demo-intro-logo{font-size:2rem;font-weight:800;color:var(--text);letter-spacing:-0.02em;}
.demo-intro-logo span{background:linear-gradient(135deg,var(--cyan),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.demo-intro-tagline{font-size:1rem;color:var(--text-muted);text-align:center;max-width:400px;line-height:1.6;}
.demo-intro-bar{width:280px;height:3px;background:var(--bg3);border-radius:2px;overflow:hidden;}
.demo-intro-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--violet));border-radius:2px;animation:introLoad 1.8s ease forwards;}
@keyframes introLoad{0%{width:0%;}100%{width:100%;}}
.demo-intro-dots{display:flex;gap:0.5rem;align-items:center;}
.demo-intro-dot{width:6px;height:6px;border-radius:50%;background:var(--border-w);animation:dotPulse 1.2s ease infinite;}
.demo-intro-dot:nth-child(2){animation-delay:0.2s;}
.demo-intro-dot:nth-child(3){animation-delay:0.4s;}
@keyframes dotPulse{0%,100%{background:var(--border-w);transform:scale(1);}50%{background:var(--cyan);transform:scale(1.4);}}

/* ── MILESTONE BANNER ── */
#milestone-banner{position:fixed;top:1.5rem;left:50%;transform:translateX(-50%) translateY(-80px);z-index:9000;background:linear-gradient(135deg,rgba(0,229,200,0.15),rgba(155,93,229,0.15));border:1px solid rgba(0,229,200,0.4);border-radius:50px;padding:0.7rem 1.8rem;display:flex;align-items:center;gap:0.75rem;font-size:0.9rem;font-weight:600;color:var(--text);transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1),opacity 0.4s ease;opacity:0;pointer-events:none;backdrop-filter:blur(10px);}
#milestone-banner.show{transform:translateX(-50%) translateY(0);opacity:1;}
.milestone-icon{font-size:1.3rem;}

/* ── GAMIFICATION TOOLTIPS ── */
.gam-tooltip{position:absolute;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:0.75rem 1rem;font-size:0.8rem;color:var(--text);z-index:500;max-width:220px;box-shadow:0 8px 32px rgba(0,0,0,0.4);opacity:0;transform:translateY(6px);transition:all 0.25s ease;pointer-events:none;line-height:1.5;}
.gam-tooltip.visible{opacity:1;transform:translateY(0);}
.gam-tooltip-title{font-weight:700;color:var(--cyan);margin-bottom:0.3rem;font-size:0.82rem;}
.gam-tooltip-trigger{position:relative;cursor:help;}
.gam-tooltip-trigger:hover .gam-tooltip{opacity:1;transform:translateY(0);}
.tooltip-pulse{animation:tooltipPing 2.5s ease infinite;}
@keyframes tooltipPing{0%,100%{box-shadow:0 0 0 0 rgba(0,229,200,0.4);}50%{box-shadow:0 0 0 6px rgba(0,229,200,0);}}

/* Demo hero images */
.video-container svg{display:block;width:100%;height:100%;border-radius:10px;}
.video-container{background:#080b10;border-radius:10px;overflow:hidden;}


.player-meta{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.meta-chip{display:flex;align-items:center;gap:0.4rem;font-family:'DM Sans',sans-serif;font-size:0.75rem;color:var(--text-muted);background:var(--bg2);border:1px solid var(--border-w);padding:0.35rem 0.75rem;border-radius:100px;}
.meta-chip .chip-val{color:var(--cyan);}
.meta-chip.gold .chip-val{color:var(--gold);}

/* ══════════════════════════════
   LEADERBOARD PAGE
══════════════════════════════ */
.lb-full{background:var(--bg2);border:1px solid var(--border-w);border-radius:10px;overflow:hidden;}
.lb-full-row{display:grid;grid-template-columns:40px 40px 1fr 100px 80px;align-items:center;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--border-w);transition:background 0.18s;}
.lb-full-row:last-child{border-bottom:none;}
.lb-full-row:hover{background:rgba(255,255,255,0.02);}
.lb-full-row.header{font-family:'DM Sans',sans-serif;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);background:var(--bg3);}
.lb-full-row.you{background:rgba(0,229,200,0.04);border-left:2px solid var(--cyan);}
.lb-medal{font-size:1.1rem;text-align:center;}
@keyframes lb-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.8)}}

/* ══════════════════════════════
   ADMIN VIEW
══════════════════════════════ */
.admin-warning{background:rgba(245,200,66,0.08);border:1px solid rgba(245,200,66,0.25);border-radius:6px;padding:0.8rem 1rem;margin-bottom:1.5rem;font-size:0.85rem;color:var(--gold);display:flex;align-items:center;gap:0.5rem;}
.admin-tabs{display:flex;gap:0;border:1px solid var(--border-w);border-radius:6px;margin-bottom:1.5rem;overflow:hidden;width:fit-content;}
.admin-tab{padding:0.55rem 1.2rem;font-size:0.82rem;font-weight:500;cursor:pointer;background:transparent;border:none;color:var(--text-muted);transition:all 0.2s;font-family:'DM Sans',sans-serif;}
.admin-tab.active{background:rgba(0,229,200,0.1);color:var(--cyan);}
.admin-panel{display:none;}
.admin-panel.active{display:block;}

/* Course builder form */
.builder-card{background:var(--bg2);border:1px solid var(--border-w);border-radius:10px;padding:1.5rem;margin-bottom:1rem;}
.builder-card h4{font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:700;margin-bottom:1.2rem;display:flex;align-items:center;gap:0.5rem;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.field-group{display:flex;flex-direction:column;gap:0.4rem;margin-bottom:1rem;}
.field-group label{font-family:'DM Sans',sans-serif;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
.field-group input,.field-group textarea,.field-group select{background:var(--bg);border:1px solid var(--border-w);border-radius:5px;padding:0.7rem 1rem;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.88rem;outline:none;transition:border-color 0.2s;width:100%;}
.field-group input:focus,.field-group textarea:focus,.field-group select:focus{border-color:rgba(0,229,200,0.35);}
.field-group textarea{min-height:90px;resize:vertical;}
.field-group select option{background:var(--bg2);}
.field-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8a9a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;}

/* Lesson builder */
.lesson-builder-item{background:var(--bg3);border:1px solid var(--border-w);border-radius:8px;padding:1.2rem;margin-bottom:0.75rem;position:relative;}
.lesson-builder-item .lbi-head{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;cursor:pointer;}
.lbi-drag{color:var(--text-dim);font-size:0.9rem;cursor:grab;}
.lbi-num{font-family:'DM Sans',sans-serif;font-size:0.72rem;color:var(--text-dim);}
.lbi-title-preview{flex:1;font-size:0.88rem;font-weight:500;}
.lbi-remove{color:var(--text-dim);cursor:pointer;font-size:0.9rem;transition:color 0.2s;}
.lbi-remove:hover{color:#ff6b6b;}
.lbi-body{display:none;}
.lbi-body.open{display:block;}

/* Quiz builder */
.quiz-builder-item{background:var(--bg3);border:1px solid var(--border-v);border-radius:8px;padding:1.2rem;margin-bottom:0.75rem;}
.qbi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.option-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;}
.option-row input[type="text"]{flex:1;}
.option-row input[type="radio"]{width:16px;height:16px;accent-color:var(--cyan);}
.option-correct-label{font-size:0.75rem;color:var(--text-dim);white-space:nowrap;}

/* Published courses list */
.pub-course-row{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:var(--bg3);border:1px solid var(--border-w);border-radius:8px;margin-bottom:0.75rem;}
.pub-course-row:hover{border-color:var(--border);}
.pub-emoji{font-size:1.5rem;flex-shrink:0;}
.pub-info{flex:1;}
.pub-name{font-size:0.9rem;font-weight:500;margin-bottom:0.2rem;}
.pub-meta{font-size:0.75rem;color:var(--text-muted);font-family:'DM Sans',sans-serif;}
.pub-status{font-family:'DM Sans',sans-serif;font-size:0.68rem;padding:0.2rem 0.6rem;border-radius:3px;letter-spacing:0.08em;}
.pub-status.live{background:rgba(0,229,200,0.1);color:var(--cyan);border:1px solid var(--border);}
.pub-status.draft{background:rgba(155,93,229,0.08);color:var(--violet);border:1px solid var(--border-v);}

/* ── TOAST ── */
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:0.9rem 1.2rem;font-size:0.88rem;z-index:9999;display:flex;align-items:center;gap:0.75rem;transform:translateY(100px);opacity:0;transition:all 0.3s;max-width:320px;}
.toast.show{transform:translateY(0);opacity:1;}
.toast-icon{font-size:1rem;}
.toast.success{border-color:rgba(0,229,200,0.3);}
.toast.success .toast-icon{color:var(--cyan);}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:500;display:none;align-items:center;justify-content:center;padding:2rem;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:2rem;width:100%;max-width:480px;position:relative;}
.modal h3{font-family:'DM Sans',sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:1rem;}
.modal-close{position:absolute;top:1rem;right:1rem;cursor:pointer;color:var(--text-muted);font-size:1.2rem;transition:color 0.2s;}
.modal-close:hover{color:var(--text);}
.level-up-modal{text-align:center;}
.level-up-icon{font-size:4rem;margin-bottom:1rem;}
.level-up-modal h3{font-size:1.5rem;background:linear-gradient(135deg,var(--cyan),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.level-up-modal p{color:var(--text-muted);margin-bottom:1.5rem;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .app-layout{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .courses-row{grid-template-columns:1fr 1fr;}
  .stats-row{grid-template-columns:1fr 1fr;}
  #view-player.active{grid-template-columns:1fr;}
  .player-sidebar{display:none;}
}
@media(max-width:600px){
  .courses-row{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .welcome-stats{display:none;}
  .field-row{grid-template-columns:1fr;}
}

/* ── NOTIFICATIONS ── */
.notif-item{display:flex;align-items:flex-start;gap:0.75rem;padding:0.85rem 1.2rem;border-bottom:1px solid var(--border-w);transition:background 0.18s;cursor:default;}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:rgba(255,255,255,0.02);}
.notif-item.unread{background:rgba(0,229,200,0.03);}
.notif-icon{font-size:1.1rem;flex-shrink:0;margin-top:0.1rem;}
.notif-text{flex:1;}
.notif-title{font-size:0.84rem;font-weight:500;margin-bottom:0.2rem;}
.notif-time{font-size:0.72rem;color:var(--text-dim);}
.notif-empty{padding:2rem;text-align:center;color:var(--text-muted);font-size:0.85rem;}

/* ── PROFILE MODAL ── */
.profile-modal-inner{text-align:center;}
.profile-avatar-lg{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.6rem;color:var(--bg);margin:0 auto 1rem;}
.profile-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;margin:1.2rem 0;}
.profile-stat{background:var(--bg3);border-radius:8px;padding:0.75rem 0.5rem;text-align:center;}
.profile-stat-val{font-family:'DM Sans',sans-serif;font-size:1.2rem;font-weight:800;color:var(--cyan);}
.profile-stat-label{font-size:0.68rem;color:var(--text-muted);margin-top:0.2rem;}
.profile-badges-row{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center;margin:1rem 0;}

/* ── PROFILE TABS ── */
.profile-tabs{display:flex;gap:0;border:1px solid var(--border-w);border-radius:6px;margin-bottom:1.5rem;overflow:hidden;}
.profile-tab{flex:1;padding:0.5rem;font-size:0.8rem;font-weight:500;text-align:center;cursor:pointer;background:transparent;border:none;color:var(--text-muted);transition:all 0.2s;font-family:'DM Sans',sans-serif;}
.profile-tab.active{background:rgba(0,229,200,0.1);color:var(--cyan);}
.profile-section{display:none;}
.profile-section.active{display:block;}
.profile-edit-field{display:flex;flex-direction:column;gap:0.4rem;margin-bottom:1rem;text-align:left;}
.profile-edit-field label{font-family:'DM Sans',sans-serif;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}
.profile-edit-field input{background:var(--bg);border:1px solid var(--border-w);border-radius:5px;padding:0.65rem 1rem;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.88rem;outline:none;transition:border-color 0.2s;width:100%;}
.profile-edit-field input:focus{border-color:rgba(0,229,200,0.4);}
.profile-msg{font-size:0.8rem;margin-top:0.5rem;display:none;text-align:left;}
.profile-msg.success{color:var(--cyan);}
.profile-msg.error{color:#ff6b6b;}

/* ── PRACTICE TASKS ── */
.practice-wrap{display:flex;flex-direction:column;gap:1.5rem;}
.practice-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;}
.practice-counter{font-family:'DM Sans',sans-serif;font-size:0.8rem;color:var(--text-muted);}
.practice-progress{display:flex;gap:0.3rem;margin-bottom:1.5rem;}
.practice-pip{width:24px;height:4px;border-radius:2px;background:var(--bg3);}
.practice-pip.done{background:var(--cyan);}
.practice-pip.active{background:var(--violet);}
.task-card{background:var(--bg2);border:1px solid var(--border-w);border-radius:12px;padding:1.5rem;margin-bottom:1rem;}
.task-section-label{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.5rem;}
.task-prompt{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:1.25rem;line-height:1.6;}
.task-response{background:var(--bg3);border-radius:8px;padding:1rem 1.25rem;font-size:0.9rem;line-height:1.75;color:var(--text-muted);white-space:pre-wrap;margin-bottom:1.5rem;border-left:3px solid rgba(0,229,200,0.3);}
.rubric-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem;}
.rubric-item{background:var(--bg3);border-radius:8px;padding:0.9rem;}
.rubric-label{font-size:0.78rem;font-weight:700;color:var(--cyan);margin-bottom:0.6rem;}
.star-row{display:flex;gap:0.3rem;}
.star{font-size:1.4rem;cursor:pointer;transition:transform 0.1s;opacity:0.3;user-select:none;}
.star.active{opacity:1;}
.star:hover{transform:scale(1.15);}
.rationale-wrap{margin-bottom:1.25rem;}
.rationale-wrap textarea{width:100%;min-height:90px;resize:vertical;}
.task-nav{display:flex;gap:0.75rem;align-items:center;justify-content:flex-end;}
.task-complete-banner{background:rgba(0,229,200,0.08);border:1px solid rgba(0,229,200,0.2);border-radius:10px;padding:2rem;text-align:center;}
@media(max-width:700px){.rubric-grid{grid-template-columns:1fr;}.comparison-grid{grid-template-columns:1fr !important;}}

/* ── WELCOME VIDEO VIEW ── */
#view-welcome{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background:var(--bg);}
#view-welcome.active{display:flex;}
.welcome-video-card{width:100%;max-width:780px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:relative;}
.welcome-video-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));z-index:1;}
.welcome-video-logo{display:flex;align-items:center;gap:0.5rem;font-family:'DM Sans',sans-serif;font-weight:800;font-size:0.95rem;padding:1.4rem 1.8rem 0.8rem;justify-content:center;}
.welcome-video-logo .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);}
.welcome-video-embed{position:relative;width:100%;aspect-ratio:16/9;}
.welcome-video-embed iframe{width:100%;height:100%;border:none;display:block;}
.welcome-video-footer{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.8rem;gap:1rem;flex-wrap:wrap;}
.welcome-skip{font-size:0.8rem;color:var(--text-muted);cursor:pointer;background:none;border:none;font-family:'DM Sans',sans-serif;transition:color 0.2s;}
.welcome-skip:hover{color:var(--text);}
.welcome-callout{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:0.9rem 1.1rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.welcome-callout-text{font-size:0.88rem;color:var(--text-muted);}
.welcome-callout-text strong{color:var(--cyan);}

/* ── BASELINE ASSESSMENT ── */
#view-baseline-tasking{display:none;min-height:100vh;background:var(--bg);}
#view-baseline-tasking.active{display:block;}
.baseline-topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-bottom:1px solid var(--border);background:rgba(8,11,16,0.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50;}
.baseline-progress-bar-wrap{flex:1;max-width:300px;margin:0 1.5rem;}
.baseline-progress-label{font-size:0.72rem;color:var(--text-muted);margin-bottom:0.3rem;display:flex;justify-content:space-between;}
.baseline-body{max-width:860px;margin:0 auto;padding:2rem;}
.task-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:0.75rem;}
.task-number-badge{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--violet);border:1px solid var(--border-v);background:rgba(155,93,229,0.08);padding:0.3rem 0.75rem;border-radius:3px;}
.task-timer{font-size:0.78rem;color:var(--text-dim);font-family:'DM Sans',sans-serif;}
.task-prompt-card{background:var(--bg2);border:1px solid var(--border-w);border-radius:10px;padding:1.4rem 1.6rem;margin-bottom:1.25rem;}
.task-prompt-label{font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.6rem;}
.task-prompt-text{font-size:0.95rem;line-height:1.7;color:var(--text);font-weight:500;}
.task-responses{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem;}
.task-response-card{border:1.5px solid var(--border-w);border-radius:8px;background:var(--bg3);cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;}
.task-response-card:hover:not(.locked-response){border-color:rgba(155,93,229,0.4);transform:translateY(-1px);}
.task-response-card.selected{border-color:var(--violet);background:rgba(155,93,229,0.07);}
.task-response-card.locked-response{cursor:default;}
.task-response-header{display:flex;align-items:center;justify-content:space-between;padding:0.65rem 1rem;border-bottom:1px solid var(--border-w);}
.task-response-label{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);}
.task-response-check{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-w);display:flex;align-items:center;justify-content:center;font-size:0.65rem;transition:all 0.2s;}
.task-response-card.selected .task-response-check{background:var(--violet);border-color:var(--violet);color:white;}
.task-response-body{padding:0.9rem 1rem;font-size:0.875rem;line-height:1.7;color:var(--text-muted);}
.task-justification{margin-bottom:1.25rem;}
.task-justification label{font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:0.5rem;}
.task-justification textarea{width:100%;min-height:110px;resize:vertical;background:var(--bg2);border:1px solid var(--border-w);border-radius:6px;padding:0.8rem 1rem;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.9rem;outline:none;transition:border-color 0.2s;line-height:1.6;}
.task-justification textarea:focus{border-color:rgba(155,93,229,0.4);}
.task-justification .char-count{font-size:0.72rem;color:var(--text-dim);text-align:right;margin-top:0.3rem;}
.task-justification .char-count.ok{color:var(--cyan);}
.task-error{font-size:0.8rem;color:#ff6b6b;margin-bottom:0.75rem;display:none;}
.task-error.show{display:block;}
.task-submitted-banner{background:rgba(0,229,200,0.06);border:1px solid rgba(0,229,200,0.2);border-radius:6px;padding:0.7rem 1rem;font-size:0.82rem;color:var(--cyan);margin-bottom:1rem;display:none;}
.task-submitted-banner.show{display:block;}
.task-nav-row{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;}
.task-autosave{font-size:0.72rem;color:var(--text-dim);}
/* Baseline dashboard override */
.baseline-dashboard{padding:0;}
.bl-hero{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:2rem;margin-bottom:1.5rem;position:relative;overflow:hidden;}
.bl-hero::before{content:'';position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(155,93,229,0.08),transparent 70%);}
.bl-hero::after{content:'';position:absolute;left:-20px;bottom:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,200,0.06),transparent 70%);}
.bl-hero-tag{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--violet);border:1px solid var(--border-v);background:rgba(155,93,229,0.08);padding:0.25rem 0.65rem;border-radius:3px;display:inline-block;margin-bottom:1rem;}
.bl-hero h2{font-size:1.5rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:0.75rem;line-height:1.3;}
.bl-hero p{font-size:0.9rem;color:var(--text-muted);line-height:1.75;max-width:640px;}
/* Path animation */
.bl-path{background:var(--bg2);border:1px solid var(--border-w);border-radius:12px;padding:1.75rem 2rem;margin-bottom:1.5rem;overflow:hidden;}
.bl-path-label{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1.25rem;}
.bl-path-nodes{display:flex;align-items:center;justify-content:space-between;position:relative;}
.bl-path-line{position:absolute;top:28px;left:60px;right:60px;height:2px;background:var(--bg3);z-index:0;}
.bl-path-line-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width 1.2s ease;border-radius:2px;}
.bl-path-node{display:flex;flex-direction:column;align-items:center;gap:0.5rem;position:relative;z-index:1;opacity:0;transform:translateY(10px);transition:opacity 0.5s ease,transform 0.5s ease;}
.bl-path-node.visible{opacity:1;transform:translateY(0);}
.bl-path-node-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;border:2px solid var(--border-w);background:var(--bg3);}
.bl-path-node-icon.active-node{border-color:var(--cyan);background:rgba(0,229,200,0.1);box-shadow:0 0 16px rgba(0,229,200,0.2);}
.bl-path-node-icon.done-node{border-color:var(--cyan);background:rgba(0,229,200,0.15);}
.bl-path-node-label{font-size:0.72rem;font-weight:600;color:var(--text-muted);text-align:center;max-width:80px;line-height:1.3;}
/* Overview + status cards */
.bl-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;}
.bl-card{background:var(--bg2);border:1px solid var(--border-w);border-radius:10px;padding:1.4rem;}
.bl-card-title{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1rem;}
.bl-overview-items{display:flex;flex-direction:column;gap:0.6rem;}
.bl-overview-item{display:flex;align-items:center;gap:0.6rem;font-size:0.88rem;color:var(--text-muted);}
.bl-overview-item span:first-child{color:var(--cyan);font-size:1rem;}
.bl-status-badge{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.78rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:4px;margin-bottom:0.75rem;}
.bl-status-badge.not-started{background:rgba(122,138,154,0.1);color:var(--text-muted);border:1px solid var(--border-w);}
.bl-status-badge.in-progress{background:rgba(245,200,66,0.1);color:var(--gold);border:1px solid rgba(245,200,66,0.3);}
.bl-status-badge.completed{background:rgba(0,229,200,0.1);color:var(--cyan);border:1px solid rgba(0,229,200,0.3);}
/* Completion screen */
.bl-complete{background:var(--bg2);border:1px solid rgba(0,229,200,0.25);border-radius:12px;padding:2.5rem;text-align:center;margin-bottom:1.5rem;}
.bl-complete-icon{font-size:3rem;margin-bottom:1rem;}
.bl-complete h3{font-size:1.4rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:0.75rem;}
.bl-complete p{font-size:0.92rem;color:var(--text-muted);line-height:1.75;max-width:520px;margin:0 auto 1.5rem;}
/* Review */
/* ── BASELINE: choice buttons + dimension grid ── */
.bl-section-label{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.6rem;}
.bl-choice-buttons{display:flex;gap:0.6rem;margin-bottom:0.5rem;}
.bl-choice-btn{flex:1;padding:0.6rem 0.75rem;background:var(--bg3);border:1px solid var(--border-w);border-radius:8px;color:var(--text-muted);font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.15s;text-align:center;font-family:'DM Sans',sans-serif;}
.bl-choice-btn:hover:not(.locked){border-color:var(--cyan);color:var(--text);}
.bl-choice-btn.active{background:rgba(0,229,200,0.1);border-color:var(--cyan);color:var(--cyan);}
.bl-choice-btn.locked{cursor:default;opacity:0.85;}
.bl-dim-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.45rem 0.75rem;align-items:center;margin-bottom:0.5rem;}
.bl-dim-head{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);text-align:center;padding:0.3rem 0;}
.bl-dim-head:first-child{text-align:left;}
.bl-dim-label{font-size:0.82rem;color:var(--text);padding:0.35rem 0;}
.bl-dim-ratings{display:flex;gap:0.25rem;justify-content:center;}
.dim-btn{width:30px;height:30px;border-radius:6px;background:var(--bg3);border:1px solid var(--border-w);color:var(--text-muted);font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;}
.dim-btn:hover:not(.locked){border-color:var(--violet);color:var(--text);}
.dim-btn.active{background:rgba(155,93,229,0.15);border-color:var(--violet);color:var(--violet);font-weight:700;}
.dim-btn.locked{cursor:default;}
.bl-review-task{background:var(--bg2);border:1px solid var(--border-w);border-radius:10px;padding:1.5rem;margin-bottom:1rem;}
.bl-review-task-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.bl-review-chosen{font-size:0.78rem;padding:0.2rem 0.55rem;border-radius:3px;}
.bl-review-chosen.correct{background:rgba(0,229,200,0.1);color:var(--cyan);border:1px solid rgba(0,229,200,0.3);}
.bl-review-chosen.incorrect{background:rgba(255,107,107,0.1);color:#ff6b6b;border:1px solid rgba(255,107,107,0.3);}
.bl-review-section{font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.4rem;}
.bl-review-text{font-size:0.88rem;color:var(--text-muted);line-height:1.65;margin-bottom:1rem;}
.bl-review-explanation{background:rgba(0,229,200,0.04);border:1px solid rgba(0,229,200,0.15);border-radius:6px;padding:0.9rem 1rem;font-size:0.875rem;color:var(--text-muted);line-height:1.65;}
.bl-review-explanation strong{color:var(--cyan);}
/* Admin baseline panel */
.bl-admin-row{display:grid;grid-template-columns:1.4fr 1.6fr 80px 90px 100px 90px 90px 80px;gap:0.75rem;padding:0.9rem 1.2rem;border-bottom:1px solid var(--border-w);align-items:center;font-size:0.82rem;transition:background 0.18s;}
.bl-admin-row:hover{background:rgba(255,255,255,0.02);}
.bl-admin-row.header{font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);background:var(--bg3);}
.bl-status-pill{font-size:0.68rem;font-weight:700;padding:0.18rem 0.5rem;border-radius:3px;white-space:nowrap;}
.bl-status-pill.not_started{color:var(--text-dim);border:1px solid var(--border-w);}
.bl-status-pill.in_progress{color:var(--gold);border:1px solid rgba(245,200,66,0.3);background:rgba(245,200,66,0.08);}
.bl-status-pill.completed{color:var(--cyan);border:1px solid rgba(0,229,200,0.3);background:rgba(0,229,200,0.08);}
@media(max-width:700px){.task-responses{grid-template-columns:1fr;}.bl-cards{grid-template-columns:1fr;}}

/* ── CONCEPT MAP ── */
.concept-map{background:var(--bg2);border:1px solid var(--border-w);border-radius:12px;padding:2rem 2rem 1.75rem;margin-bottom:1.5rem;position:relative;}
.concept-map::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(0,229,200,0.05) 0%,transparent 65%);pointer-events:none;}
.concept-map-label{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.25rem;display:flex;align-items:center;gap:0.5rem;}
.concept-map-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);display:inline-block;}
.concept-map-flow{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:nowrap;margin-bottom:1.75rem;}
.cm-node{display:flex;flex-direction:column;align-items:center;gap:0.5rem;opacity:0;transform:translateY(12px);transition:opacity 0.5s ease,transform 0.5s ease;pointer-events:none;}
.cm-node.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.cm-node-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;}
.cm-node-icon.cyan{background:rgba(0,229,200,0.1);border:1.5px solid rgba(0,229,200,0.4);box-shadow:0 0 20px rgba(0,229,200,0.12);}
.cm-node-icon.violet{background:rgba(155,93,229,0.1);border:1.5px solid rgba(155,93,229,0.4);box-shadow:0 0 20px rgba(155,93,229,0.12);}
.cm-node-icon.gold{background:rgba(245,200,66,0.1);border:1.5px solid rgba(245,200,66,0.35);box-shadow:0 0 20px rgba(245,200,66,0.1);}
.cm-node-title{font-size:0.78rem;font-weight:700;color:var(--text);font-family:'DM Sans',sans-serif;text-align:center;}
.cm-node-sub{font-size:0.7rem;color:var(--text-muted);font-family:'DM Sans',sans-serif;text-align:center;max-width:90px;line-height:1.4;}
.cm-connector{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0.5rem;opacity:0;transition:opacity 0.5s ease;flex-shrink:0;}
.cm-connector.visible{opacity:1;}
.cm-connector-line{width:32px;height:2px;background:linear-gradient(90deg,rgba(0,229,200,0.4),rgba(155,93,229,0.4));}
.cm-connector-label{font-size:0.62rem;color:var(--text-dim);font-family:'DM Sans',sans-serif;margin-top:0.3rem;white-space:nowrap;}
.cm-plus{font-size:1.1rem;color:var(--text-dim);padding:0 0.75rem;opacity:0;transition:opacity 0.5s ease;flex-shrink:0;}
.cm-plus.visible{opacity:1;}
.cm-equals{font-size:1.1rem;color:var(--text-dim);padding:0 0.75rem;opacity:0;transition:opacity 0.5s ease;flex-shrink:0;}
.cm-equals.visible{opacity:1;}
.cm-insight{background:rgba(0,229,200,0.05);border:1px solid rgba(0,229,200,0.2);border-radius:8px;padding:0.9rem 1.1rem;font-size:0.88rem;color:var(--text-muted);line-height:1.6;opacity:0;transform:translateY(8px);transition:opacity 0.5s ease,transform 0.5s ease;margin-bottom:1.5rem;}
.cm-insight.visible{opacity:1;transform:translateY(0);}
.cm-insight strong{color:var(--cyan);}
.cm-cta{display:flex;justify-content:flex-end;}
@keyframes tokenPulse{0%,100%{opacity:0.4;}50%{opacity:1;}}
.cm-token{display:inline-block;font-size:0.7rem;font-family:'DM Sans',sans-serif;padding:0.15rem 0.4rem;border-radius:3px;background:var(--bg3);border:1px solid var(--border-w);color:var(--text-muted);margin:0 1px;animation:tokenPulse 1.8s ease infinite;}
.cm-token:nth-child(2){animation-delay:0.3s;}
.cm-token:nth-child(3){animation-delay:0.6s;}
.cm-token.highlight{border-color:rgba(0,229,200,0.5);color:var(--cyan);animation-delay:0.9s;}

/* ── INTERACTIVE LESSON ── */
.interactive-wrap{background:var(--bg2);border:1px solid var(--border-w);border-radius:12px;overflow:hidden;margin-bottom:1.5rem;}
.interactive-setup{padding:1.5rem 1.75rem 1.25rem;}
.interactive-label{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:0.6rem;display:flex;align-items:center;gap:0.5rem;}
.interactive-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);display:inline-block;}
.interactive-scenario{font-size:0.88rem;color:var(--text-muted);line-height:1.6;margin-bottom:1.1rem;}
.chat-bubble-wrap{display:flex;align-items:flex-start;gap:0.75rem;margin-bottom:1.25rem;}
.chat-bubble-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg3);border:1px solid var(--border-w);display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0;margin-top:2px;}
.chat-bubble{background:var(--bg3);border:1px solid var(--border-w);border-radius:0 10px 10px 10px;padding:0.75rem 1rem;font-size:0.9rem;color:var(--text);line-height:1.55;max-width:480px;}
.interactive-instruction{font-size:0.82rem;color:var(--text-muted);margin-bottom:1rem;font-style:italic;}
.response-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:0 1.75rem 1.5rem;}
.response-card{border-radius:8px;border:1.5px solid var(--border-w);background:var(--bg3);cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;}
.response-card:hover{border-color:rgba(155,93,229,0.4);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.3);}
.response-card.selected-correct{border-color:var(--cyan);background:rgba(0,229,200,0.05);}
.response-card.selected-wrong{border-color:#ff6b6b;background:rgba(255,107,107,0.05);}
.response-card.reveal-correct{border-color:var(--cyan);background:rgba(0,229,200,0.05);}
.response-card-header{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--border-w);}
.response-card-label{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);}
.response-card-badge{font-size:0.75rem;display:none;}
.response-card.selected-correct .response-card-badge.correct-badge{display:block;color:var(--cyan);}
.response-card.selected-wrong .response-card-badge.wrong-badge{display:block;color:#ff6b6b;}
.response-card.reveal-correct .response-card-badge.correct-badge{display:block;color:var(--cyan);}
.response-card-body{padding:0.85rem 1rem;font-size:0.875rem;line-height:1.65;color:var(--text-muted);}
.response-card.selected-correct .response-card-body,.response-card.reveal-correct .response-card-body{color:var(--text);}
.feedback-wrap{margin:0 1.75rem 1.5rem;border-radius:8px;padding:1.1rem 1.25rem;display:none;animation:fadeSlideUp 0.35s ease;}
.feedback-wrap.show{display:block;}
.feedback-wrap.correct{background:rgba(0,229,200,0.06);border:1px solid rgba(0,229,200,0.25);}
.feedback-wrap.wrong{background:rgba(255,107,107,0.06);border:1px solid rgba(255,107,107,0.2);}
.feedback-heading{font-size:0.82rem;font-weight:700;margin-bottom:0.4rem;}
.feedback-wrap.correct .feedback-heading{color:var(--cyan);}
.feedback-wrap.wrong .feedback-heading{color:#ff6b6b;}
.feedback-body{font-size:0.875rem;line-height:1.65;color:var(--text-muted);}
.feedback-takeaway{margin-top:0.85rem;padding-top:0.85rem;border-top:1px solid var(--border-w);font-size:0.85rem;font-weight:600;color:var(--text);line-height:1.5;}
.feedback-takeaway::before{content:'→  ';}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:700px){.response-grid{grid-template-columns:1fr;}}

/* ── ANIMATIONS ── */
.fade-in{opacity:0;transform:translateY(14px);transition:opacity 0.5s ease,transform 0.5s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}