:root[data-theme="light"]{
    /* LIGHT MODE PALETTE */
    --bg:#FFF9F5;
    --bg-2:#FFFFFF;
    --surface:#FFF3EC;
    --card:#FFFFFF;
    --crimson:#7B0D1E;
    --crimson-soft:#FCE7EA;
    --crimson-action:#B02035;
    --gold:#D4A017;
    --gold-light:#F0C040;
    --gold-soft:#FBF1D6;
    --ink:#1A0608;
    --text:#1A0608;
    --muted:#6B5658;
    --line:rgba(123,13,30,.10);
    --line-strong:rgba(212,160,23,.4);
    --green:#2cb05a;
    --green-soft:#E6F7EC;
  }
/* Universal/element resets are inherited from the page's own dark <style>.
   Variable cascade (:root[data-theme="light"]{...} above) handles bg/color. */
:root[data-theme="light"] body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(800px 500px at 90% -10%,rgba(212,160,23,.18),transparent 60%),
      radial-gradient(700px 600px at -10% 110%,rgba(123,13,30,.06),transparent 65%);
  }
:root[data-theme="light"] .app{
    display:grid;grid-template-columns:230px 1fr;
    max-width:1440px;margin:0 auto;min-height:100vh;
    position:relative;z-index:1;
  }
:root[data-theme="light"] .sidebar{
    background:#fff;
    border-left:1px solid var(--line);
    padding:28px 0;position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;
    box-shadow:0 0 30px rgba(123,13,30,.04);
  }
:root[data-theme="light"] .brand{
    display:flex;align-items:center;gap:12px;
    padding:0 22px 28px;margin-bottom:14px;
    border-bottom:1px solid var(--line);
  }
:root[data-theme="light"] .brand-mark{
    width:42px;height:42px;border-radius:11px;
    background:linear-gradient(135deg,var(--crimson),var(--crimson-action));
    display:grid;place-items:center;color:var(--gold-light);
    box-shadow:0 8px 22px rgba(123,13,30,.32),inset 0 0 0 1px rgba(212,160,23,.4);
    font-size:18px;
  }
:root[data-theme="light"] .brand-text{font-weight:800;font-size:17px;line-height:1.2;color:var(--ink)}
:root[data-theme="light"] .brand-text small{display:block;font-size:10.5px;color:var(--gold);font-weight:700;letter-spacing:.4px;margin-top:2px}
:root[data-theme="light"] .nav-section{padding:0 14px;flex:1}
:root[data-theme="light"] .nav-label{
    color:var(--muted);font-size:11px;letter-spacing:1.5px;
    font-weight:800;padding:10px 12px 14px;text-transform:uppercase;
  }
:root[data-theme="light"] .nav-item{
    display:flex;align-items:center;gap:13px;
    padding:12px 14px;border-radius:10px;
    color:#5a4244;font-size:14.5px;font-weight:600;
    margin-bottom:4px;position:relative;
    transition:all .22s;
  }
:root[data-theme="light"] .nav-item i{font-size:16px;width:20px;text-align:center;color:#a08688}
:root[data-theme="light"] .nav-item:hover{background:var(--gold-soft);color:var(--ink)}
:root[data-theme="light"] .nav-item:hover i{color:var(--crimson)}
:root[data-theme="light"] .nav-item.active{
    background:linear-gradient(90deg,var(--gold-soft),transparent);
    color:var(--crimson);font-weight:800;
  }
:root[data-theme="light"] .nav-item.active i{color:var(--crimson)}
:root[data-theme="light"] .nav-item.active::before{
    content:"";position:absolute;right:0;top:8px;bottom:8px;width:3px;
    background:linear-gradient(180deg,var(--gold),var(--gold-light));
    border-radius:3px;box-shadow:0 0 12px rgba(212,160,23,.6);
  }
:root[data-theme="light"] .nav-item .badge{
    margin-right:auto;background:var(--crimson-action);color:#fff;
    font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;
  }
:root[data-theme="light"] .sidebar-foot{
    padding:18px;margin:16px 14px 0;
    background:linear-gradient(135deg,var(--crimson-soft),var(--gold-soft));
    border:1px solid var(--line-strong);border-radius:14px;
    text-align:center;
  }
:root[data-theme="light"] .sidebar-foot i{color:var(--crimson);font-size:22px;margin-bottom:8px}
:root[data-theme="light"] .sidebar-foot p{font-size:12.5px;color:var(--ink);margin-bottom:12px;line-height:1.6;font-weight:600}
:root[data-theme="light"] .sidebar-foot a{
    display:inline-block;padding:8px 18px;font-size:12px;font-weight:800;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#1a0608;border-radius:8px;
    box-shadow:0 6px 16px rgba(212,160,23,.35);
  }
:root[data-theme="light"] .main{padding:0 36px 60px;min-width:0}
:root[data-theme="light"] .topbar{
    display:flex;align-items:center;gap:20px;
    padding:22px 0;
    position:sticky;top:0;z-index:20;
    background:rgba(255,249,245,.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    margin-bottom:30px;
  }
:root[data-theme="light"] .search{
    flex:1;max-width:520px;position:relative;
  }
:root[data-theme="light"] .search input{
    width:100%;height:46px;
    background:#fff;border:1px solid var(--line);
    border-radius:12px;color:var(--ink);
    padding:0 46px 0 18px;font-family:inherit;font-size:14px;
    transition:all .25s;
    box-shadow:0 2px 8px rgba(123,13,30,.04);
  }
:root[data-theme="light"] .search input::placeholder{color:var(--muted)}
:root[data-theme="light"] .search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,160,23,.15)}
:root[data-theme="light"] .search i{
    position:absolute;right:16px;top:50%;transform:translateY(-50%);
    color:var(--crimson);font-size:15px;
  }
:root[data-theme="light"] .topbar-actions{display:flex;align-items:center;gap:14px;margin-right:auto}
:root[data-theme="light"] .icon-btn{
    width:46px;height:46px;border-radius:12px;
    background:#fff;border:1px solid var(--line);
    display:grid;place-items:center;font-size:16px;color:var(--ink);
    position:relative;transition:all .22s;
    box-shadow:0 2px 8px rgba(123,13,30,.04);
  }
:root[data-theme="light"] .icon-btn:hover{border-color:var(--gold);color:var(--crimson);transform:translateY(-2px)}
:root[data-theme="light"] .icon-btn .dot{
    position:absolute;top:10px;left:10px;
    width:9px;height:9px;border-radius:50%;
    background:var(--crimson-action);border:2px solid #fff;
    box-shadow:0 0 8px var(--crimson-action);
  }
:root[data-theme="light"] .user{
    display:flex;align-items:center;gap:12px;
    padding:6px 14px 6px 6px;border-radius:14px;
    background:#fff;border:1px solid var(--line);
    cursor:pointer;transition:all .22s;
    box-shadow:0 2px 8px rgba(123,13,30,.04);
  }
:root[data-theme="light"] .user:hover{border-color:var(--line-strong)}
:root[data-theme="light"] .user-avatar{
    width:38px;height:38px;border-radius:10px;
    background:linear-gradient(135deg,var(--crimson),var(--gold));
    display:grid;place-items:center;font-weight:800;color:#fff;
    border:1px solid var(--gold-light);
  }
:root[data-theme="light"] .user-info{line-height:1.2}
:root[data-theme="light"] .user-info strong{font-size:13.5px;color:var(--ink)}
:root[data-theme="light"] .user-info small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
:root[data-theme="light"] .user i{color:var(--muted);font-size:11px;margin-right:4px}
:root[data-theme="light"] .welcome{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:28px;flex-wrap:wrap;gap:18px;
  }
:root[data-theme="light"] .welcome h1{
    font-size:30px;font-weight:800;letter-spacing:-.3px;line-height:1.2;
    margin-bottom:6px;color:var(--ink);
  }
:root[data-theme="light"] .welcome .accent{
    background:linear-gradient(135deg,var(--crimson),var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
:root[data-theme="light"] .welcome .date{
    color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px;
    font-weight:500;
  }
:root[data-theme="light"] .welcome .date i{color:var(--gold)}
:root[data-theme="light"] .quick-actions{display:flex;gap:10px}
:root[data-theme="light"] .qa-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 18px;border-radius:11px;font-size:13.5px;font-weight:700;
    transition:all .22s;
  }
:root[data-theme="light"] .qa-gold{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#1a0608;
    box-shadow:0 8px 22px rgba(212,160,23,.32);
  }
:root[data-theme="light"] .qa-gold:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(240,192,64,.45)}
:root[data-theme="light"] .qa-ghost{
    background:#fff;border:1px solid var(--line);color:var(--ink);
    box-shadow:0 2px 8px rgba(123,13,30,.04);
  }
:root[data-theme="light"] .qa-ghost:hover{border-color:var(--gold);color:var(--crimson)}
:root[data-theme="light"] .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:36px}
:root[data-theme="light"] .stat{
    background:#fff;
    border:1px solid var(--line);border-radius:18px;
    padding:22px;position:relative;overflow:hidden;
    transition:all .25s;
    box-shadow:0 4px 16px rgba(123,13,30,.05);
  }
:root[data-theme="light"] .stat:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 14px 30px rgba(123,13,30,.1)}
:root[data-theme="light"] .stat::before{
    content:"";position:absolute;top:0;right:0;left:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
  }
:root[data-theme="light"] .stat-head{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;
  }
:root[data-theme="light"] .stat-icon{
    width:46px;height:46px;border-radius:12px;
    display:grid;place-items:center;font-size:18px;
  }
:root[data-theme="light"] .icon-gold{background:var(--gold-soft);color:#8a6b0e;border:1px solid var(--line-strong)}
:root[data-theme="light"] .icon-crimson{background:var(--crimson-soft);color:var(--crimson);border:1px solid rgba(176,32,53,.25)}
:root[data-theme="light"] .stat-trend{
    font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;
    background:var(--green-soft);color:#1a8344;
  }
:root[data-theme="light"] .stat-trend.down{background:#f3ebe6;color:var(--muted)}
:root[data-theme="light"] .stat-num{
    font-size:38px;font-weight:900;line-height:1;margin-bottom:6px;color:var(--ink);
  }
:root[data-theme="light"] .stat-num.gold{
    background:linear-gradient(135deg,var(--crimson),var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
:root[data-theme="light"] .stat-label{font-size:13px;color:var(--muted);font-weight:600}
:root[data-theme="light"] .grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;margin-bottom:36px}
:root[data-theme="light"] .section-title{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:18px;
  }
:root[data-theme="light"] .section-title h2{font-size:20px;font-weight:800;color:var(--ink)}
:root[data-theme="light"] .section-title a{color:var(--crimson);font-size:13px;font-weight:700}
:root[data-theme="light"] .section-title a i{margin-right:6px;font-size:11px}
:root[data-theme="light"] .courses{display:grid;grid-template-columns:1fr 1fr;gap:18px}
:root[data-theme="light"] .course{
    background:#fff;
    border:1px solid var(--line);border-radius:18px;
    overflow:hidden;display:flex;flex-direction:column;
    transition:all .25s;
    box-shadow:0 4px 16px rgba(123,13,30,.05);
  }
:root[data-theme="light"] .course:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 18px 40px rgba(123,13,30,.12)}
:root[data-theme="light"] .course-thumb{
    height:120px;position:relative;overflow:hidden;
    background:linear-gradient(135deg,var(--crimson),var(--crimson-action));
    display:grid;place-items:center;
  }
:root[data-theme="light"] .course-thumb::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(circle at 70% 30%,rgba(212,160,23,.4),transparent 55%),
      radial-gradient(circle at 20% 80%,rgba(0,0,0,.3),transparent 60%);
  }
:root[data-theme="light"] .course-thumb i{
    font-size:46px;color:rgba(255,255,255,.95);
    text-shadow:0 4px 18px rgba(0,0,0,.4);position:relative;z-index:1;
  }
:root[data-theme="light"] .badge-type{
    position:absolute;top:12px;right:12px;z-index:2;
    padding:5px 12px;border-radius:999px;font-size:11px;font-weight:800;
  }
:root[data-theme="light"] .badge-individual{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#1a0608}
:root[data-theme="light"] .badge-group{background:rgba(255,255,255,.95);color:var(--ink);border:1px solid rgba(212,160,23,.3);backdrop-filter:blur(8px)}
:root[data-theme="light"] .grade-tag{
    position:absolute;bottom:12px;right:12px;z-index:2;
    padding:5px 11px;border-radius:8px;font-size:11px;font-weight:700;
    background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
    border:1px solid rgba(212,160,23,.3);color:var(--ink);
  }
:root[data-theme="light"] .course-body{padding:18px;flex:1;display:flex;flex-direction:column}
:root[data-theme="light"] .course-subject{font-size:11px;color:var(--crimson);font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
:root[data-theme="light"] .course h3{font-size:15.5px;font-weight:800;margin-bottom:14px;line-height:1.45;color:var(--ink)}
:root[data-theme="light"] .progress{margin-bottom:14px}
:root[data-theme="light"] .progress-head{
    display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:7px;font-weight:600;
  }
:root[data-theme="light"] .progress-head span.pct{color:var(--crimson);font-weight:800}
:root[data-theme="light"] .bar{height:6px;background:#f5e8dc;border-radius:999px;overflow:hidden}
:root[data-theme="light"] .bar-fill{
    height:100%;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
    border-radius:999px;box-shadow:0 0 10px rgba(212,160,23,.5);
  }
:root[data-theme="light"] .resume-btn{
    margin-top:auto;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 14px;border-radius:10px;font-size:13px;font-weight:700;
    background:var(--gold-soft);border:1px solid var(--line-strong);
    color:#8a6b0e;transition:all .22s;
  }
:root[data-theme="light"] .resume-btn:hover{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#1a0608;border-color:transparent;
    box-shadow:0 8px 18px rgba(212,160,23,.32);
  }
:root[data-theme="light"] .next-session{
    background:linear-gradient(135deg,var(--crimson),var(--crimson-action));
    border:1px solid rgba(212,160,23,.35);border-radius:20px;
    padding:24px;position:relative;overflow:hidden;color:#fff;
    box-shadow:0 18px 40px rgba(123,13,30,.25);
  }
:root[data-theme="light"] .next-session::before{
    content:"";position:absolute;top:0;right:0;left:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
  }
:root[data-theme="light"] .next-session::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 80% 0%,rgba(212,160,23,.35),transparent 55%);
  }
:root[data-theme="light"] .ns-eyebrow{
    position:relative;z-index:1;
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 12px;border-radius:999px;
    background:rgba(13,3,5,.3);color:var(--gold-light);
    font-size:11.5px;font-weight:800;margin-bottom:18px;
    border:1px solid rgba(212,160,23,.4);backdrop-filter:blur(6px);
  }
:root[data-theme="light"] .ns-eyebrow .live{
    width:7px;height:7px;border-radius:50%;background:var(--gold-light);
    box-shadow:0 0 10px var(--gold-light);animation:pulse 1.5s infinite;
  }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
:root[data-theme="light"] .ns-teacher{display:flex;align-items:center;gap:14px;margin-bottom:20px;position:relative;z-index:1}
:root[data-theme="light"] .ns-photo{
    width:64px;height:64px;border-radius:16px;
    background:url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200') center/cover,linear-gradient(135deg,#7B0D1E,#D4A017);
    border:2px solid var(--gold-light);
    box-shadow:0 8px 22px rgba(0,0,0,.3);
  }
:root[data-theme="light"] .ns-teacher-info small{color:rgba(255,255,255,.7);font-size:12px;display:block;margin-bottom:3px}
:root[data-theme="light"] .ns-teacher-info strong{font-size:15px;display:block;margin-bottom:4px}
:root[data-theme="light"] .ns-teacher-info .subj{font-size:12px;color:var(--gold-light);font-weight:700}
:root[data-theme="light"] .ns-detail{
    background:rgba(13,3,5,.28);border:1px solid rgba(212,160,23,.25);
    border-radius:14px;padding:14px;margin-bottom:18px;
    display:flex;justify-content:space-between;position:relative;z-index:1;
    backdrop-filter:blur(4px);
  }
:root[data-theme="light"] .ns-detail-item small{color:rgba(255,255,255,.65);font-size:11px;display:block;margin-bottom:5px;font-weight:500}
:root[data-theme="light"] .ns-detail-item strong{font-size:13.5px;display:flex;align-items:center;gap:6px}
:root[data-theme="light"] .ns-detail-item strong i{color:var(--gold-light);font-size:12px}
:root[data-theme="light"] .ns-divider{width:1px;background:rgba(212,160,23,.25)}
:root[data-theme="light"] .ns-countdown{
    display:flex;justify-content:center;gap:8px;margin-bottom:18px;position:relative;z-index:1;
  }
:root[data-theme="light"] .cd-box{
    background:rgba(13,3,5,.3);border:1px solid rgba(212,160,23,.25);
    border-radius:10px;padding:8px 12px;text-align:center;min-width:54px;
    backdrop-filter:blur(4px);
  }
:root[data-theme="light"] .cd-box strong{
    display:block;font-size:18px;font-weight:900;color:var(--gold-light);line-height:1;
  }
:root[data-theme="light"] .cd-box small{font-size:10px;color:rgba(255,255,255,.65);margin-top:4px;display:block;font-weight:500}
:root[data-theme="light"] .ns-cta{
    width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
    padding:13px;border-radius:12px;font-weight:800;font-size:14px;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#1a0608;position:relative;z-index:1;
    box-shadow:0 10px 26px rgba(212,160,23,.45),inset 0 0 0 1px rgba(255,255,255,.3);
    transition:all .22s;
  }
:root[data-theme="light"] .ns-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(240,192,64,.6)}
:root[data-theme="light"] .recorded{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
:root[data-theme="light"] .rec{
    background:#fff;
    border:1px solid var(--line);border-radius:18px;
    overflow:hidden;display:flex;flex-direction:column;
    transition:all .25s;
    box-shadow:0 4px 16px rgba(123,13,30,.05);
  }
:root[data-theme="light"] .rec:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 18px 40px rgba(123,13,30,.12)}
:root[data-theme="light"] .rec-thumb{
    height:140px;position:relative;overflow:hidden;
  }
:root[data-theme="light"] .rec-thumb img{width:100%;height:100%;object-fit:cover}
:root[data-theme="light"] .rec-thumb::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(13,3,5,.15) 30%,rgba(13,3,5,.7));
  }
:root[data-theme="light"] .rec-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:50px;height:50px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    display:grid;place-items:center;color:#1a0608;font-size:16px;
    box-shadow:0 8px 22px rgba(212,160,23,.55);z-index:2;
    transition:all .22s;
  }
:root[data-theme="light"] .rec:hover .rec-play{transform:translate(-50%,-50%) scale(1.12)}
:root[data-theme="light"] .rec-duration{
    position:absolute;bottom:10px;right:10px;z-index:2;
    background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
    padding:4px 10px;border-radius:7px;font-size:11.5px;font-weight:700;color:var(--ink);
    border:1px solid rgba(212,160,23,.3);
    display:flex;align-items:center;gap:6px;
  }
:root[data-theme="light"] .rec-duration i{color:var(--crimson);font-size:10px}
:root[data-theme="light"] .rec-subject-tag{
    position:absolute;top:10px;right:10px;z-index:2;
    background:rgba(176,32,53,.95);backdrop-filter:blur(8px);
    padding:4px 10px;border-radius:7px;font-size:11px;font-weight:800;color:#fff;
  }
:root[data-theme="light"] .rec-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
:root[data-theme="light"] .rec-body h3{font-size:15px;font-weight:800;margin-bottom:8px;line-height:1.45;color:var(--ink)}
:root[data-theme="light"] .rec-meta{
    display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted);
    margin-bottom:14px;font-weight:500;
  }
:root[data-theme="light"] .rec-meta span{display:inline-flex;align-items:center;gap:5px}
:root[data-theme="light"] .rec-meta i{color:var(--gold)}
:root[data-theme="light"] .rec-cta{
    margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:9px 14px;border-radius:10px;font-size:12.5px;font-weight:700;
    background:var(--gold-soft);border:1px solid var(--line-strong);
    color:#8a6b0e;transition:all .22s;
  }
:root[data-theme="light"] .rec-cta:hover{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#1a0608;border-color:transparent;
    box-shadow:0 8px 18px rgba(212,160,23,.32);
  }
@media (max-width:1100px){
:root[data-theme="light"] .app{grid-template-columns:1fr}
:root[data-theme="light"] .sidebar{display:none}
:root[data-theme="light"] .main{padding:0 20px 40px}
:root[data-theme="light"] .stats{grid-template-columns:1fr 1fr}
:root[data-theme="light"] .grid-2, :root[data-theme="light"] .recorded, :root[data-theme="light"] .courses{grid-template-columns:1fr}
}