:root {
  --sky:#eef6ff;--white:#fff;--ink:#0f1b2d;--slate:#3d5478;--muted:#7b93b3;--border:#dde8f5;
  --blue:#2563eb;--blue-l:#3b82f6;--blue-xl:#eff6ff;
  --violet:#7c3aed;--violet-l:#ede9fe;
  --amber:#f59e0b;--amber-l:#fef3c7;--amber-d:#d97706;
  --teal:#0d9488;--teal-l:#f0fdfa;
  --emerald:#059669;--emerald-l:#ecfdf5;
  --rose:#e11d48;--rose-l:#fff1f2;
  --shadow-sm:0 2px 12px rgba(37,99,235,.07);
  --shadow-md:0 8px 32px rgba(37,99,235,.11);
  --sidebar-w:290px;--topbar-h:60px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--sky);font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);overflow-x:hidden;}

.learn-topbar{position:sticky;top:0;z-index:200;height:var(--topbar-h);background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1.5px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:14px;box-shadow:var(--shadow-sm);}
.topbar-back{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:9px;border:1.5px solid var(--border);color:var(--slate);font-size:.78rem;font-weight:700;text-decoration:none;transition:all .22s;white-space:nowrap;flex-shrink:0;background:var(--white);}
.topbar-back:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-xl);}
.topbar-divider{width:1px;height:22px;background:var(--border);flex-shrink:0;}
.topbar-course-title{font-family:'Fraunces',serif;font-size:.9rem;font-weight:700;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.topbar-pct{font-size:.78rem;font-weight:800;color:var(--blue);}
.topbar-bar{width:90px;height:6px;border-radius:100px;background:var(--border);overflow:hidden;}
.topbar-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--blue),var(--violet));transition:width .5s;}
.topbar-done-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:9px;background:var(--emerald-l);border:1.5px solid #a7f3d0;color:var(--emerald);font-size:.72rem;font-weight:800;}
.topbar-cert-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:9px;background:linear-gradient(135deg,var(--amber),var(--amber-d));color:#fff;font-size:.75rem;font-weight:700;text-decoration:none;box-shadow:0 3px 10px rgba(245,158,11,.28);transition:all .22s;}
.topbar-cert-btn:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(245,158,11,.38);color:#fff;}
.topbar-preview-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:9px;background:linear-gradient(135deg,var(--teal),#0891b2);color:#fff;font-size:.72rem;font-weight:800;}
.topbar-burger{display:none;flex-direction:column;gap:4px;padding:7px;cursor:pointer;border:1.5px solid var(--border);border-radius:8px;background:var(--white);flex-shrink:0;}
.topbar-burger span{width:18px;height:2px;border-radius:1px;background:var(--slate);transition:all .2s;}

.learn-layout{display:flex;height:calc(100vh - var(--topbar-h));}

.learn-sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--white);border-right:1.5px solid var(--border);display:flex;flex-direction:column;overflow:hidden;box-shadow:2px 0 12px rgba(37,99,235,.05);}
.sidebar-head{padding:16px 16px 12px;border-bottom:1.5px solid var(--border);flex-shrink:0;background:var(--white);}
.sidebar-head-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.sidebar-head-label{font-size:.67rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.sidebar-head-count{font-size:.7rem;font-weight:700;color:var(--blue);}
.sidebar-bar-track{height:5px;border-radius:100px;background:var(--border);overflow:hidden;margin-bottom:4px;}
.sidebar-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--blue),var(--violet));transition:width .6s;}
.sidebar-bar-label{font-size:.68rem;font-weight:600;color:var(--muted);}
.sidebar-bar-label strong{color:var(--ink);}
.sidebar-preview-hint{margin:8px 10px 0;padding:10px 12px;background:var(--amber-l);border:1px solid #fde68a;border-radius:9px;font-size:.7rem;color:#92400e;font-weight:600;display:flex;align-items:flex-start;gap:7px;line-height:1.5;}
.sidebar-preview-hint i{flex-shrink:0;margin-top:1px;}

.sidebar-scroll{flex:1;overflow-y:auto;padding:10px 10px 20px;}
.sidebar-scroll::-webkit-scrollbar{width:3px;}
.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:100px;}

.mod-block{margin-bottom:4px;}
.mod-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:none;background:transparent;text-align:left;border-radius:10px;cursor:pointer;transition:background .2s;}
.mod-toggle:hover{background:var(--sky);}
.mod-ico{width:26px;height:26px;border-radius:7px;flex-shrink:0;font-size:.65rem;color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet));display:flex;align-items:center;justify-content:center;}
.mod-title-text{font-size:.77rem;font-weight:700;color:var(--ink);flex:1;line-height:1.3;text-align:left;}
.mod-count{font-size:.62rem;font-weight:700;color:var(--muted);flex-shrink:0;}
.mod-chev{font-size:.52rem;color:var(--muted);transition:transform .2s;flex-shrink:0;}
.mod-block.open .mod-chev{transform:rotate(180deg);}
.lessons-wrap{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.mod-block.open .lessons-wrap{max-height:999px;}
.lessons-inner{padding:3px 0 3px 6px;}

.sl-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;text-decoration:none;transition:all .18s;margin-bottom:2px;border:1.5px solid transparent;}
.sl-item:hover{background:var(--sky);border-color:var(--border);}
.sl-item.active{background:var(--blue-xl);border-color:#bfdbfe;}
.sl-item-locked{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;margin-bottom:2px;border:1.5px solid transparent;opacity:.45;}
.sl-icon{width:20px;height:20px;border-radius:5px;flex-shrink:0;font-size:.58rem;display:flex;align-items:center;justify-content:center;}
.sli-done  {background:var(--emerald-l);color:var(--emerald);}
.sli-active{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;}
.sli-play  {background:var(--blue-xl);color:var(--blue);}
.sli-lock  {background:var(--border);color:var(--muted);}
.sli-free  {background:var(--amber-l);color:var(--amber-d);}
.sl-label{font-size:.75rem;font-weight:600;line-height:1.35;flex:1;}
.sl-label.active{color:var(--blue);}
.sl-label.done{color:var(--emerald);}
.sl-label.default{color:var(--slate);}
.sl-label.locked{color:var(--muted);}
.sl-dur{font-size:.62rem;color:var(--muted);flex-shrink:0;white-space:nowrap;}
.sl-free-badge{font-size:.56rem;font-weight:800;padding:1px 5px;border-radius:4px;background:var(--amber-l);color:var(--amber-d);border:1px solid #fde68a;white-space:nowrap;}

.learn-main{flex:1;overflow-y:auto;display:flex;flex-direction:column;background:var(--sky);}
.learn-main::-webkit-scrollbar{width:4px;}
.learn-main::-webkit-scrollbar-thumb{background:var(--border);border-radius:100px;}

/* ── VIDEO ── */
.video-wrap{background:#000;width:100%;flex-shrink:0;}
.video-wrap iframe{display:block;width:100%;height:min(56.25vw,500px);}

/* ── LESSON CARD ── */
.lesson-card{background:var(--white);border-bottom:1.5px solid var(--border);padding:22px 26px 0;position:relative;}
.lesson-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--violet),var(--amber));}

/* ✅ Text-mode: padding lebih lapang karena tidak ada video di atas */
.lesson-card.text-mode{padding-top:32px;}
.lesson-card.text-mode::before{height:4px;}

/* ✅ Reading hint — banner saat tidak ada video */
.text-mode-banner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(37,99,235,.06));
  border:1.5px solid rgba(124,58,237,.18);
  border-radius:13px;padding:13px 16px;margin-bottom:18px;
}
.text-mode-banner-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--violet),var(--blue));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;
}
.text-mode-banner p{font-size:.79rem;color:var(--slate);line-height:1.55;margin:0;}
.text-mode-banner strong{color:var(--ink);}

.lc-module-lbl{font-size:.67rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:5px;display:flex;align-items:center;gap:5px;}
.lesson-h1{font-family:'Fraunces',serif;font-size:clamp(1.1rem,2.5vw,1.55rem);font-weight:700;color:var(--ink);margin-bottom:10px;line-height:1.2;}
.lesson-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}
.lchip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:100px;font-size:.7rem;font-weight:700;}
.lchip-dur {background:var(--blue-xl); color:var(--blue);   border:1px solid #bfdbfe;}
.lchip-done{background:var(--emerald-l);color:var(--emerald);border:1px solid #a7f3d0;}
.lchip-free{background:var(--amber-l); color:var(--amber-d);border:1px solid #fde68a;}
/* ✅ Chip lesson berbasis teks */
.lchip-text{background:var(--violet-l);color:var(--violet);border:1px solid #ddd6fe;}

.preview-cta{background:linear-gradient(135deg,rgba(13,148,136,.07),rgba(8,145,178,.07));border:1.5px solid rgba(13,148,136,.3);border-radius:14px;padding:18px 20px;margin-bottom:18px;display:flex;align-items:flex-start;gap:14px;}
.preview-cta-ico{width:44px;height:44px;border-radius:12px;flex-shrink:0;background:linear-gradient(135deg,var(--teal),#0891b2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;}
.preview-cta-body{flex:1;}
.preview-cta-body h4{font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:4px;}
.preview-cta-body p{font-size:.77rem;color:var(--slate);line-height:1.55;margin-bottom:12px;}
.preview-cta-btns{display:flex;gap:8px;flex-wrap:wrap;}
.btn-pv-enroll{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(37,99,235,.22);transition:all .22s;}
.btn-pv-enroll:hover{transform:translateY(-1px);color:#fff;}
.btn-pv-login{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;background:var(--white);color:var(--slate);border:1.5px solid var(--border);font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;font-weight:700;text-decoration:none;transition:all .22s;}
.btn-pv-login:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-xl);}

.lesson-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:18px;}
.nav-spacer{flex:1;}
.btn-nav{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;font-size:.8rem;font-weight:700;text-decoration:none;cursor:pointer;transition:all .22s;border:1.5px solid var(--border);background:var(--white);color:var(--slate);font-family:'Plus Jakarta Sans',sans-serif;}
.btn-nav:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-xl);}
.btn-nav.primary{background:linear-gradient(135deg,var(--blue),var(--violet));border:none;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.22);}
.btn-nav.primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,99,235,.32);color:#fff;}
.btn-nav.amber{background:linear-gradient(135deg,var(--amber),var(--amber-d));border:none;color:#fff;}
.btn-nav.amber:hover{transform:translateY(-1px);color:#fff;}
.btn-nav:disabled{opacity:.45;cursor:not-allowed;transform:none!important;}
.btn-nav .spinner{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

.learn-tabs{background:var(--white);display:flex;border-bottom:1.5px solid var(--border);overflow-x:auto;overflow-y:hidden;flex-shrink:0;}
.learn-tabs::-webkit-scrollbar{display:none;}
.tab-btn{display:flex;align-items:center;gap:6px;padding:12px 20px;border:none;background:transparent;cursor:pointer;white-space:nowrap;font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent;transition:all .2s;}
.tab-btn:hover{color:var(--blue);}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);}
.tab-btn.locked-tab{opacity:.45;cursor:not-allowed;}
.tab-count{font-size:.6rem;font-weight:800;padding:1px 6px;border-radius:100px;background:var(--blue-xl);color:var(--blue);border:1px solid #bfdbfe;}
.tab-pane{display:none;padding:22px 26px;}
.tab-pane.active{display:block;}

/* ✅ Text-mode: overview mendapat lebar maksimum untuk kenyamanan membaca */
.text-mode-reading .tab-pane#tab-overview{max-width:780px;}

.quill-content{font-size:.9rem;line-height:1.85;color:var(--slate);}
.quill-content h1{font-family:'Fraunces',serif;font-size:1.55rem;font-weight:700;color:var(--ink);margin:1.4rem 0 .7rem;padding-bottom:.5rem;border-bottom:2px solid var(--border);}
.quill-content h2{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:var(--ink);margin:1.1rem 0 .55rem;padding-left:.85rem;border-left:3px solid var(--blue);}
.quill-content h3{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:var(--slate);margin:.9rem 0 .45rem;}
.quill-content p{margin-bottom:.85rem;}
.quill-content strong{font-weight:700;color:var(--ink);}
.quill-content a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;}
.quill-content a:hover{border-bottom-color:var(--blue);}
.quill-content ul,.quill-content ol{padding-left:1.6rem;margin:.75rem 0;}
.quill-content li{margin-bottom:.35rem;line-height:1.7;}
.quill-content li::marker{color:var(--blue);font-weight:700;}
.quill-content pre{background:var(--ink);color:#e2e8f0;padding:1.2rem 1.4rem;border-radius:12px;overflow-x:auto;margin:1.2rem 0;font-family:'Courier New',monospace;font-size:.83rem;line-height:1.65;border-left:3px solid var(--violet);}
.quill-content code{background:var(--rose-l);color:var(--rose);padding:.15rem .45rem;border-radius:5px;font-family:'Courier New',monospace;font-size:.87em;font-weight:600;border:1px solid #fecdd3;}
.quill-content pre code{background:transparent;color:inherit;padding:0;border:none;}
.quill-content blockquote{padding:.85rem 1.2rem;background:var(--violet-l);border-left:3px solid var(--violet);border-radius:0 10px 10px 0;font-style:italic;color:var(--slate);margin:1.1rem 0;}
.quill-content img{max-width:100%;border-radius:10px;margin:1rem 0;box-shadow:var(--shadow-sm);}
.quill-content table{width:100%;border-collapse:collapse;margin:1.2rem 0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm);}
.quill-content th{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;padding:.65rem 1rem;text-align:left;font-size:.8rem;font-weight:700;}
.quill-content td{padding:.6rem 1rem;border-bottom:1px solid var(--border);font-size:.83rem;}
.quill-content tr:last-child td{border-bottom:none;}
.quill-content tr:hover{background:var(--sky);}

.mat-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--border);background:var(--white);margin-bottom:9px;transition:all .22s;}
.mat-item:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(37,99,235,.08);}
.mat-ico{width:36px;height:36px;border-radius:9px;flex-shrink:0;background:var(--rose-l);color:var(--rose);display:flex;align-items:center;justify-content:center;font-size:.85rem;}
.mat-info{flex:1;min-width:0;}
.mat-name{font-size:.84rem;font-weight:700;color:var(--ink);}
.mat-type{font-size:.68rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.btn-dl{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;border:1.5px solid var(--border);background:var(--white);color:var(--slate);font-size:.75rem;font-weight:700;text-decoration:none;transition:all .22s;white-space:nowrap;}
.btn-dl:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-xl);}

.empty-sm{text-align:center;padding:40px 20px;background:var(--sky);border:1.5px dashed var(--border);border-radius:14px;}
.empty-sm i{font-size:2rem;color:var(--border);display:block;margin-bottom:10px;}
.empty-sm p{font-size:.82rem;color:var(--muted);}

.locked-content{text-align:center;padding:48px 24px;background:var(--white);border:1.5px dashed #bfdbfe;border-radius:14px;}
.locked-content .lock-ico{width:56px;height:56px;border-radius:16px;background:var(--blue-xl);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.4rem;color:var(--blue);}
.locked-content h5{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:6px;}
.locked-content p{font-size:.8rem;color:var(--muted);margin-bottom:16px;line-height:1.6;}
.btn-locked-enroll{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;font-weight:700;text-decoration:none;box-shadow:0 4px 12px rgba(37,99,235,.22);transition:all .22s;}
.btn-locked-enroll:hover{transform:translateY(-1px);color:#fff;}

.quiz-info{background:var(--blue-xl);border:1.5px solid #bfdbfe;border-radius:12px;padding:13px 17px;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.quiz-info i{color:var(--blue);font-size:1rem;flex-shrink:0;}
.quiz-info p{font-size:.8rem;color:var(--slate);margin:0;line-height:1.55;}
.quiz-q-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:17px 19px;margin-bottom:11px;transition:border-color .2s;}
.quiz-q-card:hover{border-color:#bfdbfe;}
.quiz-q-num{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--violet);margin-bottom:7px;}
.quiz-q-text{font-size:.87rem;font-weight:700;color:var(--ink);line-height:1.6;margin-bottom:13px;}
.quiz-opt{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-radius:9px;border:1.5px solid var(--border);margin-bottom:6px;cursor:pointer;transition:all .18s;}
.quiz-opt:hover{border-color:var(--violet);background:var(--violet-l);}
.quiz-opt:has(input:checked){border-color:var(--violet);background:var(--violet-l);}
.quiz-opt input{flex-shrink:0;margin-top:2px;accent-color:var(--violet);}
.quiz-opt label{font-size:.82rem;color:var(--slate);cursor:pointer;line-height:1.5;margin:0;}
.btn-quiz-submit{display:inline-flex;align-items:center;gap:7px;padding:11px 24px;border-radius:11px;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:.87rem;font-weight:700;background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.22);transition:all .25s;}
.btn-quiz-submit:hover{transform:translateY(-2px);}
.quiz-result{border-radius:14px;overflow:hidden;border:1.5px solid var(--border);}
.qr-top{padding:20px 24px;display:flex;align-items:center;gap:14px;}
.qr-top.pass{background:linear-gradient(135deg,var(--emerald),var(--teal));}
.qr-top.fail{background:linear-gradient(135deg,var(--amber),var(--amber-d));}
.qr-ico{font-size:1.8rem;color:#fff;}
.qr-pct{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;color:#fff;line-height:1;}
.qr-lbl{font-size:.8rem;color:rgba(255,255,255,.85);font-weight:600;}
.qr-body{padding:18px 22px;background:var(--white);}
.qr-detail{padding:12px 15px;border-radius:10px;border:1.5px solid var(--border);margin-bottom:8px;}
.qr-dq{font-size:.81rem;font-weight:700;color:var(--ink);margin-bottom:7px;}
.qr-chips{display:flex;flex-wrap:wrap;gap:6px;}
.qr-chip{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:100px;}
.qr-correct{background:var(--emerald-l);color:var(--emerald);border:1px solid #a7f3d0;}
.qr-wrong{background:var(--rose-l);color:var(--rose);border:1px solid #fecdd3;}
.qr-ans-right{background:var(--emerald-l);color:var(--emerald);border:1px solid #a7f3d0;}
.qr-exp{font-size:.72rem;color:var(--muted);margin-top:7px;font-style:italic;}

.congrats-bd{position:fixed;inset:0;background:rgba(15,27,45,.55);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;animation:bdIn .3s ease;backdrop-filter:blur(4px);}
@keyframes bdIn{from{opacity:0;}to{opacity:1;}}
.congrats-modal{background:var(--white);border-radius:24px;width:100%;max-width:560px;overflow:hidden;box-shadow:0 40px 80px rgba(37,99,235,.18),0 0 0 1px var(--border);animation:mdIn .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes mdIn{from{opacity:0;transform:scale(.88)translateY(20px);}to{opacity:1;transform:none;}}
.cm-header{background:linear-gradient(135deg,var(--blue),var(--violet));padding:38px 30px 30px;text-align:center;position:relative;overflow:hidden;}
.cm-header::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1px);background-size:22px 22px;}
.cm-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.conf-p{position:absolute;top:-10px;width:7px;height:7px;border-radius:2px;animation:confFall linear infinite;}
.conf-p:nth-child(1){left:7%;background:#f59e0b;animation-duration:2.5s;}
.conf-p:nth-child(2){left:18%;background:#fff;animation-duration:2.1s;animation-delay:.3s;}
.conf-p:nth-child(3){left:30%;background:#a5f3fc;animation-duration:2.7s;animation-delay:.7s;}
.conf-p:nth-child(4){left:44%;background:#f59e0b;animation-duration:2.2s;animation-delay:.15s;}
.conf-p:nth-child(5){left:58%;background:#c4b5fd;animation-duration:2.4s;animation-delay:.55s;}
.conf-p:nth-child(6){left:68%;background:#fff;animation-duration:2.0s;animation-delay:.85s;}
.conf-p:nth-child(7){left:78%;background:#6ee7b7;animation-duration:2.6s;animation-delay:.25s;}
.conf-p:nth-child(8){left:88%;background:#fca5a5;animation-duration:2.3s;animation-delay:.65s;}
@keyframes confFall{0%{top:-10px;transform:rotate(0);}100%{top:110%;transform:rotate(360deg);}}
.cm-inner{position:relative;z-index:2;}
.cm-trophy{font-size:3.2rem;display:block;margin-bottom:10px;animation:tb 1.2s ease-in-out infinite;}
@keyframes tb{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.cm-h1{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:#fff;margin-bottom:4px;}
.cm-hsub{font-size:.88rem;color:rgba(255,255,255,.8);}
.cm-body{padding:26px 30px;}
.cm-stats{display:flex;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:20px;}
.cm-stat{flex:1;padding:16px;text-align:center;border-right:1px solid var(--border);}
.cm-stat:last-child{border-right:none;}
.cm-snum{font-family:'Fraunces',serif;font-size:1.55rem;font-weight:700;}
.cm-snum.blue{color:var(--blue);}
.cm-snum.emerald{color:var(--emerald);}
.cm-snum.amber{color:var(--amber);}
.cm-slbl{font-size:.67rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.cm-desc{font-size:.87rem;color:var(--slate);line-height:1.7;text-align:center;margin-bottom:20px;}
.cm-btn-p{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:12px;border:none;cursor:pointer;width:100%;font-family:'Plus Jakarta Sans',sans-serif;font-size:.87rem;font-weight:700;background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;text-decoration:none;box-shadow:0 4px 14px rgba(37,99,235,.22);transition:all .25s;margin-bottom:8px;}
.cm-btn-p:hover{transform:translateY(-2px);color:#fff;}
.cm-btn-g{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:12px;border:1.5px solid var(--border);background:var(--white);color:var(--slate);font-size:.83rem;font-weight:700;cursor:pointer;width:100%;font-family:'Plus Jakarta Sans',sans-serif;transition:all .22s;}
.cm-btn-g:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-xl);}
.cm-steps{display:flex;gap:9px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border);}
.cm-step{flex:1;padding:13px 10px;border-radius:12px;border:1.5px solid var(--border);text-decoration:none;text-align:center;transition:all .22s;background:var(--white);}
.cm-step:hover{border-color:var(--blue);background:var(--blue-xl);transform:translateY(-3px);}
.cm-step i{font-size:1.2rem;margin-bottom:6px;display:block;}
.cm-step-t{font-size:.73rem;font-weight:700;color:var(--ink);}
.cm-step-s{font-size:.63rem;color:var(--muted);}

@media(max-width:1024px){
  :root{--sidebar-w:280px;}
  .learn-sidebar{position:fixed;left:calc(-1 * var(--sidebar-w));top:var(--topbar-h);bottom:0;z-index:150;transition:left .3s ease;box-shadow:4px 0 24px rgba(37,99,235,.12);}
  .learn-sidebar.open{left:0;}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,27,45,.4);z-index:140;backdrop-filter:blur(2px);}
  .sidebar-overlay.show{display:block;}
  .topbar-burger{display:flex;}
  .topbar-course-title{display:none;}
  .topbar-divider{display:none;}
}
@media(max-width:640px){
  .lesson-card,.tab-pane{padding-left:16px;padding-right:16px;}
  .cm-body{padding:18px 20px;}
  .cm-header{padding:26px 18px 22px;}
  .cm-steps{flex-direction:column;}
  .learn-topbar{padding:0 12px;gap:10px;}
  .topbar-bar{width:65px;}
  .preview-cta{flex-direction:column;}
  .preview-cta-btns{flex-direction:column;}
  .text-mode-banner{flex-direction:column;gap:8px;}
}

/* v0.3 LMS reliability states */
.resume-banner {
  display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:13px 15px;
  border:1px solid #bfdbfe;border-radius:14px;background:linear-gradient(135deg,#eff6ff,#f5f3ff);
  color:var(--slate);box-shadow:var(--shadow-sm);
}
.resume-banner-icon {
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--blue);background:#fff;border:1px solid #dbeafe;flex-shrink:0;
}
.resume-banner strong { display:block;color:var(--ink);font-size:.82rem;margin-bottom:2px; }
.resume-banner span { display:block;font-size:.72rem;color:var(--muted); }
.resume-banner-close {
  width:32px;height:32px;margin-left:auto;border:0;border-radius:9px;background:transparent;
  color:var(--muted);cursor:pointer;transition:.2s;
}
.resume-banner-close:hover { background:#fff;color:var(--rose); }

.btn-nav.quiz-gated { background:#e2e8f0!important;color:#64748b!important;box-shadow:none!important;cursor:not-allowed; }

.quiz-attempt-summary {
  display:flex;align-items:center;gap:13px;padding:14px 16px;margin:12px 0 14px;
  border:1px solid var(--border);border-radius:14px;background:#fff;
}
.quiz-attempt-summary.is-passed { border-color:#a7f3d0;background:var(--emerald-l); }
.quiz-attempt-summary.is-pending { border-color:#fde68a;background:#fffbeb; }
.qas-icon { width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--blue);font-size:1rem; }
.is-passed .qas-icon { color:var(--emerald); }
.is-pending .qas-icon { color:var(--amber-d); }
.qas-copy { display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:8px;flex:1; }
.qas-copy span { font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em; }
.qas-copy strong { font-family:'Fraunces',serif;font-size:1.35rem;color:var(--ink); }
.qas-copy small { grid-column:1 / -1;font-size:.68rem;color:var(--muted); }
.qas-status { font-size:.68rem;font-weight:800;padding:5px 10px;border-radius:100px;background:#fff; }
.is-passed .qas-status { color:var(--emerald); }
.is-pending .qas-status { color:var(--amber-d); }

.quiz-history { margin:0 0 16px;border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden; }
.quiz-history summary { cursor:pointer;padding:11px 14px;font-size:.76rem;font-weight:700;color:var(--slate);list-style:none; }
.quiz-history summary::-webkit-details-marker { display:none; }
.quiz-history summary i { color:var(--blue);margin-right:6px; }
.quiz-history-list { border-top:1px solid var(--border); }
.quiz-history-item { display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);font-size:.72rem;color:var(--slate); }
.quiz-history-item:last-child { border-bottom:0; }
.quiz-history-item time { color:var(--muted);font-size:.67rem; }
.qhi-score { font-weight:800;text-align:center;padding:4px 7px;border-radius:8px; }
.qhi-score.passed { background:var(--emerald-l);color:var(--emerald); }
.qhi-score.failed { background:var(--rose-l);color:var(--rose); }
.qr-best { margin-top:3px;font-size:.68rem;opacity:.78; }
.qr-title { font-family:'Fraunces',serif;font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:12px; }

@media(max-width:640px){
  .quiz-history-item { grid-template-columns:50px 1fr; }
  .quiz-history-item time { grid-column:2; }
  .resume-banner { align-items:flex-start; }
}

/* v0.4 module assessment gate */
.module-assessment-link{display:flex;align-items:center;gap:9px;margin:8px 12px 12px;padding:11px 12px;border-radius:10px;background:#eef2ff;color:#4338ca;text-decoration:none;font-size:.76rem;font-weight:700;border:1px solid #c7d2fe}.module-assessment-link span{flex:1}.module-assessment-link strong{font-size:.68rem;white-space:nowrap}.module-assessment-link.is-passed{background:#ecfdf5;color:#047857;border-color:#a7f3d0}.module-assessment-link.is-locked{background:#f8fafc;color:#94a3b8;border-color:#e2e8f0;cursor:not-allowed}.module-assessment-link:not(.is-locked):hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(67,56,202,.12)}

/* v0.8.0 Student Learning Experience */
.lchip-bookmark{border:0;cursor:pointer;background:var(--amber-l,#fef3c7);color:#92400e;transition:transform .18s ease,box-shadow .18s ease}.lchip-bookmark:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(245,158,11,.18)}.lchip-bookmark.is-active{background:#f59e0b;color:#fff}.lchip-bookmark:disabled{opacity:.7;cursor:wait}.student-experience-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.student-experience-strip>div{border:1px solid var(--border,#dde8f5);border-radius:14px;background:#fff;padding:12px 14px;color:var(--slate,#3d5478);font-size:.82rem;font-weight:800;display:flex;align-items:center;gap:9px}.student-experience-strip i{color:var(--blue,#2563eb)}.lesson-notes-panel{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(300px,1.2fr);gap:18px}.notes-compose,.lesson-note-item{background:#fff;border:1px solid var(--border,#dde8f5);border-radius:18px;box-shadow:0 8px 28px rgba(37,99,235,.08)}.notes-compose{padding:20px}.notes-compose h4{margin:0 0 6px;color:var(--ink,#0f1b2d);font-weight:900}.notes-compose p{margin:0 0 16px;color:var(--muted,#7b93b3);font-size:.86rem}.notes-compose input,.notes-compose textarea{width:100%;border:1px solid var(--border,#dde8f5);border-radius:14px;padding:12px 14px;margin-bottom:10px;font:inherit;color:var(--ink,#0f1b2d);background:#f8fbff}.notes-compose textarea{resize:vertical;min-height:120px}.notes-compose button{border:0;border-radius:999px;background:var(--blue,#2563eb);color:#fff;padding:12px 18px;font-weight:900}.lesson-note-list{display:flex;flex-direction:column;gap:12px}.lesson-note-item{padding:16px}.lesson-note-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted,#7b93b3);font-size:.76rem;font-weight:800;margin-bottom:8px}.lesson-note-item p{margin:0;color:var(--slate,#3d5478);line-height:1.7;font-size:.92rem}@media(max-width:900px){.student-experience-strip,.lesson-notes-panel{grid-template-columns:1fr}}