*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--nv:#1a2744;--nv2:#2d4070;--gd:#c8a96e;--gdl:#e8d5b0;--gp:rgba(200,169,110,0.11);--tx:#1a1a1a;--mu:#6b6b6b;--bd:rgba(0,0,0,0.1);--bg:#ffffff;--sf:#f5f4f0;--rmd:8px;--rlg:12px}
@media(prefers-color-scheme:dark){:root{--tx:#e8e6e0;--mu:#9c9a92;--bd:rgba(255,255,255,0.1);--bg:#1e1e1e;--sf:#2a2a2a}body{background:#111}}
body{font-family:'DM Sans',sans-serif;background:#faf8f4;color:var(--tx);min-height:100vh;padding-bottom:60px}
/* HERO */
.hero{background:linear-gradient(135deg,#1a2744 0%,#2d4070 55%,#1a3a5c 100%);padding:48px 32px 44px;position:relative;overflow:hidden}
.hero::before{content:'🗼';font-size:200px;position:absolute;right:-20px;top:-30px;opacity:.06;pointer-events:none;line-height:1}
.hero-inner{max-width:900px;margin:0 auto}
.hflag{display:flex;gap:4px;margin-bottom:18px}
.fs{width:22px;height:14px;border-radius:2px}
.hbadge{display:inline-block;background:rgba(200,169,110,.18);border:1px solid rgba(200,169,110,.45);color:#e8d5b0;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:16px}
.hero h1{font-family:'Playfair Display',serif;color:#fff;font-size:38px;font-weight:700;line-height:1.15;margin-bottom:8px}
.hero h1 em{color:#c8a96e;font-style:italic}
.hero-sub{color:rgba(255,255,255,.6);font-size:15px;font-weight:300;margin-bottom:28px}
.hst{display:flex;gap:28px;flex-wrap:wrap}
.si{display:flex;flex-direction:column;gap:3px}
.sn{color:#c8a96e;font-size:24px;font-weight:500;font-family:'Playfair Display',serif}
.sl{color:rgba(255,255,255,.5);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.dv{width:1px;background:rgba(255,255,255,.18);align-self:stretch}
/* MAIN */
.main{max-width:900px;margin:0 auto;padding:0 20px}
.mhdr{padding:24px 0 16px;border-bottom:.5px solid var(--bd);margin-bottom:8px}
.mtag{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--mu);margin-bottom:4px}
.mtitle{font-family:'Playfair Display',serif;font-size:22px;color:#002395;font-weight:700}
.mdesc-course{font-size:13px;color:var(--mu);line-height:1.65;margin-top:7px;max-width:680px}
.prow{display:flex;align-items:center;gap:12px;padding:16px 0 12px}
.pbar{flex:1;height:5px;background:var(--bd);border-radius:3px;overflow:hidden}
.pfill{height:100%;width:0%;background:linear-gradient(90deg,#1a2744,#c8a96e);border-radius:3px;transition:width .5s ease}
.plbl{font-size:13px;color:var(--mu);white-space:nowrap}
/* CARDS */
.lgrid{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}
.lcard{background:var(--bg);border:.5px solid var(--bd);border-radius:var(--rlg);overflow:hidden;transition:border-color .2s}
.lcard:hover{border-color:rgba(200,169,110,.4)}
.lcard.open{border-color:rgba(200,169,110,.55);box-shadow:0 4px 24px rgba(200,169,110,.07)}
.lhdr{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;user-select:none}
.lnum{width:36px;height:36px;border-radius:9px;background:#1a2744;color:#c8a96e;font-family:'Playfair Display',serif;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.linfo{flex:1;min-width:0;overflow:hidden}
.lfr{font-family:'Playfair Display',serif;font-size:15px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.les{font-size:12px;color:var(--mu);margin-top:2px}
.lchev{color:var(--mu);font-size:13px;transition:transform .25s;flex-shrink:0}
.lcard.open .lchev{transform:rotate(180deg)}
.lbody{display:none;padding:0 18px 20px;border-top:.5px solid var(--bd)}
.lcard.open .lbody{display:block}
.lctx{font-size:12px;color:var(--mu);margin:12px 0 4px;font-style:italic}
/* TABS */
.tabrow{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0 16px}
.tbtn{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;padding:5px 10px;border-radius:20px;border:.5px solid var(--bd);background:transparent;color:var(--mu);cursor:pointer;transition:all .15s;white-space:nowrap}
.tbtn:hover{border-color:rgba(200,169,110,.45)}
.tbtn.active{background:#1a2744;color:#c8a96e;border-color:#1a2744}
.tpanel{display:none}
.tpanel.active{display:block}
.sec-div{display:flex;align-items:center;gap:10px;margin:14px 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--mu);font-weight:500}
.sec-div::before,.sec-div::after{content:'';flex:1;height:.5px;background:var(--bd)}
.sec-div::before{max-width:16px}
/* VOCABULAIRE */
.ipa-note{background:var(--sf);border-radius:var(--rmd);padding:9px 12px;margin-bottom:10px;font-size:11.5px;color:var(--mu);line-height:1.7}
.ipa-note span{color:#7a6a9a;font-family:monospace;font-size:11px}
.vt{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed;margin-bottom:4px}
.vt tr{border-bottom:.5px solid var(--bd)}
.vt tr:last-child{border-bottom:none}
.vt td{padding:7px 5px;vertical-align:middle}
.vt td:nth-child(1){font-weight:500;color:var(--tx);width:30%}
.vt td:nth-child(2){color:#7a6a9a;font-family:monospace;font-size:10.5px;width:22%}
.vt td:nth-child(3){color:#9a7540;font-size:11.5px;font-style:italic;width:22%}
.vt td:nth-child(4){color:var(--mu);font-size:12px;width:26%}
.vh{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);padding:5px 5px 2px;font-weight:500}
/* GRAMMAIRE */
.gram-wrap{display:flex;flex-direction:column;gap:10px}
.gbox{background:var(--sf);border-radius:var(--rmd);padding:14px 16px;margin-bottom:10px}
.gbox h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:10px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:13px}
.ci{display:flex;gap:8px}
.cp{color:var(--mu);min-width:38px}
.cv{font-weight:500;color:var(--tx)}
.gram-rule{border-radius:var(--rmd);overflow:hidden;border:.5px solid var(--bd)}
.gram-rule-hdr{background:#1a2744;padding:10px 14px;display:flex;align-items:center;gap:8px}
.gram-rule-title{font-size:12px;font-weight:500;color:#e8d5b0;letter-spacing:.04em}
.gram-rule-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.gram-cell{padding:10px 13px;font-size:12.5px;line-height:1.55}
.gram-cell:nth-child(1){background:rgba(200,169,110,.07);border-right:.5px solid var(--bd)}
.gram-cell:nth-child(2){background:rgba(26,200,100,.05);border-right:.5px solid var(--bd)}
.gram-cell:nth-child(3){background:rgba(200,60,60,.05)}
.gram-cell-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:5px;font-weight:500}
.gram-cell-cnt{color:var(--tx)}
.gram-cell-cnt em{color:#9a7540;font-style:italic;font-size:12px}
/* DIALOGUES */
.dlg-wrap{display:flex;flex-direction:column;gap:18px}
.dlg-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dlg-n{width:22px;height:22px;border-radius:50%;background:#1a2744;color:#c8a96e;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dlg-ttl{font-size:12px;font-weight:500;color:var(--mu);text-transform:uppercase;letter-spacing:.08em}
.dlg-sep{height:1px;background:var(--bd);margin:14px 0}
.dlg{display:flex;flex-direction:column;gap:10px}
.bbw{display:flex;flex-direction:column;gap:3px}
.bbw.right{align-items:flex-end}
.bb{max-width:88%;padding:9px 12px;border-radius:11px;font-size:13px;line-height:1.55}
.bba{background:#1a2744;color:#e8f0ff;border-bottom-left-radius:3px}
.bbb{background:var(--gp);border:.5px solid rgba(200,169,110,.22);color:var(--tx);border-bottom-right-radius:3px;text-align:right}
.bsp{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;opacity:.62}
.bb-meta{max-width:88%;display:flex;flex-direction:column;gap:2px;margin-top:2px}
.bb-mrow{display:flex;gap:5px;align-items:flex-start;flex-wrap:wrap}
.bblbl{font-size:9.5px;padding:1px 6px;border-radius:4px;font-weight:500;white-space:nowrap}
.lbl-tr{background:rgba(107,107,107,.1);color:var(--mu)}
.lbl-ipa{background:rgba(122,106,154,.12);color:#7a6a9a}
.lbl-ap{background:rgba(154,117,64,.12);color:#9a7540}
.bb-tr{font-size:11.5px;color:var(--mu);font-style:italic}
.bb-ipa{font-size:10.5px;color:#7a6a9a;font-family:monospace}
.bb-ap{font-size:10.5px;color:#9a7540;font-style:italic}
/* EXERCICES */
.exi{background:var(--sf);border-radius:var(--rmd);padding:13px 15px;margin-bottom:10px}
.exi:last-child{margin-bottom:0}
.exi p{font-size:13px;color:var(--tx);margin-bottom:8px;line-height:1.5}
.exi input{font-family:'DM Sans',sans-serif;font-size:13px;border:.5px solid var(--bd);border-radius:6px;padding:7px 12px;width:100%;background:var(--bg);color:var(--tx);outline:none;transition:border-color .15s}
.exi input:focus{border-color:rgba(200,169,110,.65)}
.cbtn{font-family:'DM Sans',sans-serif;font-size:12px;margin-top:8px;padding:5px 16px;border-radius:20px;border:.5px solid rgba(200,169,110,.5);background:transparent;color:#9a7540;cursor:pointer;transition:all .15s}
.cbtn:hover{background:rgba(200,169,110,.1)}
.eans{margin-top:8px;font-size:12px;color:#1e6b3e;display:none;padding:6px 10px;background:rgba(46,142,90,.08);border-radius:6px;border-left:3px solid rgba(46,142,90,.35)}
/* QUIZ */
.qwrap{display:flex;flex-direction:column;gap:10px}
.qcard{background:var(--sf);border-radius:var(--rmd);padding:13px 15px;border:.5px solid var(--bd)}
.qnum{font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.qpreg{font-size:13px;color:var(--tx);font-weight:500;margin-bottom:10px;line-height:1.5}
.qopts{display:flex;flex-direction:column;gap:6px}
.qopt{font-family:'DM Sans',sans-serif;font-size:13px;padding:8px 12px;border-radius:8px;border:.5px solid var(--bd);background:var(--bg);color:var(--tx);cursor:pointer;text-align:left;transition:all .15s}
.qopt:hover:not([disabled]){border-color:rgba(200,169,110,.5);background:var(--gp)}
.qopt.correct{background:rgba(46,142,90,.1);border-color:rgba(46,142,90,.5);color:#1e6b3e}
.qopt.wrong{background:rgba(200,60,60,.08);border-color:rgba(200,60,60,.4);color:#a32d2d}
.qfb{font-size:12px;margin-top:7px;padding:5px 10px;border-radius:6px;display:none;line-height:1.5}
.qfb.ok{background:rgba(46,142,90,.08);color:#1e6b3e;border-left:3px solid rgba(46,142,90,.4)}
.qfb.ko{background:rgba(200,60,60,.06);color:#a32d2d;border-left:3px solid rgba(200,60,60,.35)}
.qscore{font-size:13px;font-weight:500;color:var(--tx);padding:10px 14px;background:var(--sf);border-radius:var(--rmd);text-align:center;display:none;margin-top:4px}
.qreset{font-family:'DM Sans',sans-serif;font-size:12px;margin-top:8px;padding:5px 16px;border-radius:20px;border:.5px solid rgba(200,169,110,.5);background:transparent;color:#9a7540;cursor:pointer;display:none}
/* PRONONCIATION */
.pron-wrap{display:flex;flex-direction:column;gap:12px}
.pron-hero{background:linear-gradient(135deg,#1a2744,#243a6a);border-radius:10px;padding:14px 16px}
.pron-lbl{display:inline-block;background:rgba(200,169,110,.2);border:1px solid rgba(200,169,110,.4);color:#e8d5b0;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:8px}
.pron-title{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:5px}
.pron-intro{font-size:12.5px;color:rgba(255,255,255,.68);line-height:1.6}
.pron-rules{display:flex;flex-direction:column;gap:8px}
.pron-rule{background:var(--sf);border-radius:var(--rmd);padding:11px 13px;border-left:3px solid rgba(200,169,110,.5)}
.pron-rt{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.pron-sym{font-family:monospace;font-size:15px;color:#7a6a9a;font-weight:500;background:rgba(122,106,154,.1);padding:1px 7px;border-radius:4px}
.pron-nm{font-size:12px;font-weight:500;color:var(--tx)}
.pron-desc{font-size:12px;color:var(--mu);line-height:1.55}
.pron-ex{margin-top:5px;display:flex;flex-wrap:wrap;gap:6px}
.pron-ei{font-size:11.5px;background:var(--bg);border:.5px solid var(--bd);border-radius:6px;padding:3px 9px;color:var(--tx)}
.pron-ei em{color:#9a7540;font-style:italic;font-size:11px}
.pron-tip{background:rgba(200,169,110,.08);border:.5px solid rgba(200,169,110,.25);border-radius:var(--rmd);padding:11px 13px}
.pron-tip h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9a7540;margin-bottom:6px}
.pron-tip p{font-size:12.5px;color:var(--tx);line-height:1.6}
.pron-cmp{background:var(--sf);border-radius:10px;padding:12px 14px}
.pron-cmp h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:10px}
.pron-cgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pron-col{background:var(--bg);border-radius:7px;padding:9px 11px;border:.5px solid var(--bd)}
.pron-col-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:5px}
.pron-col-it{font-size:12.5px;color:var(--tx);padding:2px 0}
/* RELIEZ */
.rlz-wrap{display:flex;flex-direction:column;gap:14px}
.rlz-sec{background:var(--sf);border-radius:10px;padding:14px}
.rlz-ttl{font-size:12px;font-weight:500;color:var(--tx);margin-bottom:3px}
.rlz-typ{font-size:11px;color:var(--mu);margin-bottom:10px;font-style:italic}
.rlz-srow{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:6px}
.rlz-sc{font-size:12.5px;color:var(--tx);font-weight:500}
.rlz-rst{font-family:'DM Sans',sans-serif;font-size:11px;padding:4px 12px;border-radius:20px;border:.5px solid rgba(200,169,110,.48);background:transparent;color:#9a7540;cursor:pointer}
.rlz-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rlz-clbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:6px;text-align:center;font-weight:500}
.rlz-col{display:flex;flex-direction:column;gap:6px}
.rlz-item{font-family:'DM Sans',sans-serif;font-size:12.5px;padding:9px 12px;border-radius:8px;border:.5px solid var(--bd);background:var(--bg);color:var(--tx);cursor:pointer;text-align:center;transition:all .18s;line-height:1.4;min-height:42px;display:flex;align-items:center;justify-content:center}
.rlz-item:hover:not(.matched):not(.wf){border-color:rgba(200,169,110,.55);background:var(--gp)}
.rlz-item.sel{background:#1a2744;color:#c8a96e;border-color:#1a2744;transform:scale(1.02)}
.rlz-item.matched{background:rgba(46,142,90,.1);border-color:rgba(46,142,90,.5);color:#1e6b3e;cursor:default;opacity:.85}
.rlz-item.wf{background:rgba(200,60,60,.08);border-color:rgba(200,60,60,.4);color:#a32d2d}
.rlz-prog{height:4px;background:var(--bd);border-radius:2px;margin-top:10px;overflow:hidden}
.rlz-pf{height:100%;background:linear-gradient(90deg,#1a2744,#c8a96e);border-radius:2px;transition:width .4s}
.rlz-done{text-align:center;padding:10px;font-size:13px;font-weight:500;color:#1e6b3e;display:none}
/* ORDONNER */
.ord-wrap{display:flex;flex-direction:column;gap:12px}
.ord-srow{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:6px}
.ord-sc{font-size:12.5px;color:var(--tx);font-weight:500}
.ord-ra{font-family:'DM Sans',sans-serif;font-size:11px;padding:4px 12px;border-radius:20px;border:.5px solid rgba(200,169,110,.48);background:transparent;color:#9a7540;cursor:pointer}
.ord-item{background:var(--sf);border-radius:10px;padding:13px 14px;border:.5px solid var(--bd)}
.ord-num{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);margin-bottom:4px;font-weight:500}
.ord-tr{font-size:12px;color:var(--mu);font-style:italic;margin-bottom:10px;padding-left:2px}
.ord-bank{display:flex;flex-wrap:wrap;gap:6px;min-height:36px;margin-bottom:10px}
.ord-word{font-family:'DM Sans',sans-serif;font-size:12.5px;padding:6px 11px;border-radius:7px;border:.5px solid var(--bd);background:var(--bg);color:var(--tx);cursor:pointer;transition:all .15s;user-select:none}
.ord-word:hover:not(.used){border-color:rgba(200,169,110,.5);background:var(--gp)}
.ord-word.used{opacity:.3;cursor:not-allowed;pointer-events:none}
.ord-zone{min-height:42px;border:.5px dashed var(--bd);border-radius:7px;padding:7px 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--bg);margin-bottom:8px}
.ord-placed{font-family:'DM Sans',sans-serif;font-size:12.5px;padding:5px 10px;border-radius:6px;background:#1a2744;color:#c8a96e;cursor:pointer;border:.5px solid transparent;transition:all .15s}
.ord-placed:hover{background:#243a6a}
.ord-zone.cz{border-color:rgba(46,142,90,.5);background:rgba(46,142,90,.07)}
.ord-zone.wz{border-color:rgba(200,60,60,.4)}
.ord-btns{display:flex;gap:6px;flex-wrap:wrap}
.ord-chk{font-family:'DM Sans',sans-serif;font-size:12px;padding:5px 14px;border-radius:20px;background:#1a2744;color:#c8a96e;border:none;cursor:pointer;transition:opacity .15s}
.ord-chk:hover{opacity:.85}
.ord-clr{font-family:'DM Sans',sans-serif;font-size:12px;padding:5px 14px;border-radius:20px;border:.5px solid var(--bd);background:transparent;color:var(--mu);cursor:pointer;transition:all .15s}
.ord-clr:hover{border-color:rgba(200,169,110,.45)}
.ord-fb{font-size:12px;margin-top:7px;padding:5px 10px;border-radius:6px;display:none;line-height:1.5}
.ord-fb.ok{background:rgba(46,142,90,.08);color:#1e6b3e;border-left:3px solid rgba(46,142,90,.4)}
.ord-fb.ko{background:rgba(200,60,60,.06);color:#a32d2d;border-left:3px solid rgba(200,60,60,.35)}
/* COMPRÉHENSION */
.ce-wrap{display:flex;flex-direction:column;gap:16px}
.ce-rdg{background:var(--bg);border:.5px solid var(--bd);border-radius:10px;overflow:hidden}
.ce-rlbl{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:.5px solid var(--bd);background:var(--sf)}
.ce-rn{width:22px;height:22px;border-radius:50%;background:#1a2744;color:#c8a96e;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ce-rtype{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);font-weight:500}
.ce-rbadge{margin-left:auto;font-size:10px;padding:2px 8px;border-radius:10px;background:var(--gp);border:.5px solid rgba(200,169,110,.3);color:#9a7540;font-weight:500}
.ce-txt{padding:14px;font-size:13px;color:var(--tx);line-height:1.75;font-style:italic;border-bottom:.5px solid var(--bd)}
.ce-txt strong{font-style:normal;color:#1a2744;font-weight:500}
.ce-gloss{padding:10px 14px;border-bottom:.5px solid var(--bd)}
.ce-gttl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:6px;font-weight:500}
.ce-gitems{display:flex;flex-wrap:wrap;gap:5px}
.ce-gi{font-size:11.5px;padding:2px 9px;border-radius:6px;background:var(--sf);border:.5px solid var(--bd);color:var(--tx)}
.ce-gi em{color:#7a6a9a;font-style:normal;font-family:monospace;font-size:10.5px}
.ce-an{padding:14px}
.ce-ah{background:linear-gradient(135deg,#1a2744,#243a6a);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.ce-at{display:inline-block;background:rgba(200,169,110,.2);border:1px solid rgba(200,169,110,.4);color:#e8d5b0;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:20px;margin-bottom:7px}
.ce-atitle{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
.ce-atext{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.65}
.ce-qs{display:flex;flex-direction:column;gap:8px}
.ce-qsec{background:var(--sf);border-radius:var(--rmd);padding:11px 13px}
.ce-qsec h5{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:8px;font-weight:500}
.ce-vf{display:flex;flex-direction:column;gap:6px}
.ce-vfi{display:flex;align-items:flex-start;gap:8px}
.ce-vfbtns{display:flex;gap:4px;flex-shrink:0;margin-top:1px}
.ce-vfbtn{font-family:'DM Sans',sans-serif;font-size:11px;padding:3px 9px;border-radius:6px;border:.5px solid var(--bd);background:transparent;color:var(--mu);cursor:pointer;transition:all .15s;font-weight:500}
.ce-vfbtn.vok{background:rgba(46,142,90,.1);border-color:rgba(46,142,90,.5);color:#1e6b3e}
.ce-vfbtn.vko{background:rgba(200,60,60,.08);border-color:rgba(200,60,60,.4);color:#a32d2d}
.ce-vftx{font-size:12.5px;color:var(--tx);line-height:1.5}
.ce-vffb{font-size:11.5px;color:var(--mu);margin-top:3px;display:none;font-style:italic}
.ce-open{display:flex;flex-direction:column;gap:6px}
.ce-oi p{font-size:12.5px;color:var(--tx);margin-bottom:5px;line-height:1.5}
.ce-oi textarea{font-family:'DM Sans',sans-serif;font-size:12.5px;border:.5px solid var(--bd);border-radius:6px;padding:7px 10px;width:100%;background:var(--bg);color:var(--tx);outline:none;resize:vertical;min-height:56px;transition:border-color .15s}
.ce-oi textarea:focus{border-color:rgba(200,169,110,.65)}
.ce-prod{background:rgba(200,169,110,.07);border:.5px solid rgba(200,169,110,.25);border-radius:var(--rmd);padding:11px 13px}
.ce-prod h5{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9a7540;margin-bottom:7px;font-weight:500}
.ce-prod p{font-size:12.5px;color:var(--tx);line-height:1.55;margin-bottom:6px}
.ce-prod textarea{font-family:'DM Sans',sans-serif;font-size:12.5px;border:.5px solid rgba(200,169,110,.35);border-radius:6px;padding:7px 10px;width:100%;background:var(--bg);color:var(--tx);outline:none;resize:vertical;min-height:70px}
/* MISSION */
.mwrap{display:flex;flex-direction:column;gap:12px}
.mhero2{background:linear-gradient(135deg,#1a2744,#2d4070);border-radius:10px;padding:14px 16px}
.mbadge{display:inline-block;background:rgba(200,169,110,.25);border:1px solid rgba(200,169,110,.4);color:#e8d5b0;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:8px}
.mtitle2{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;margin-bottom:5px;color:#fff}
.mdesc{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.6}
.msteps{background:var(--sf);border-radius:10px;padding:13px 15px}
.msteps h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:10px}
.mstep{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}
.mstep:last-child{margin-bottom:0}
.mstep-n{width:22px;height:22px;border-radius:50%;background:#1a2744;color:#c8a96e;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.mstep-t{font-size:13px;color:var(--tx);line-height:1.55}
.copybox{font-size:12.5px;color:var(--tx);line-height:1.7;background:var(--sf);border-radius:7px;padding:10px 12px;border-left:3px solid rgba(200,169,110,.5);font-style:italic;white-space:pre-line}
.tpill{font-size:11px;padding:3px 10px;border-radius:20px;background:var(--gp);border:.5px solid rgba(200,169,110,.3);color:#9a7540;font-weight:500;display:inline-block;margin:3px 3px 0 0}
.ppill{font-size:11px;padding:4px 12px;border-radius:20px;border:.5px solid var(--bd);color:var(--mu);background:var(--bg);display:inline-block;margin:3px 3px 0 0}
.mreward{background:rgba(46,142,90,.08);border:.5px solid rgba(46,142,90,.35);border-radius:var(--rmd);padding:10px 14px;font-size:12.5px;color:#1e6b3e;line-height:1.55}
.mcw,.mpw{background:var(--bg);border:.5px solid var(--bd);border-radius:10px;padding:12px 14px}
.mcw h4,.mpw h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:8px}
/* CTA */
.cta-strip{margin:24px 0 0;background:linear-gradient(135deg,#1a2744,#2d4070);border-radius:var(--rlg);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta-text{color:rgba(255,255,255,.75);font-size:14px;line-height:1.5}
.cta-text strong{color:#fff;display:block;margin-bottom:2px}
.cta-btn{font-family:'DM Sans',sans-serif;background:#c8a96e;color:#1a2744;border:none;border-radius:20px;padding:10px 22px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;transition:opacity .15s;display:inline-block}
.cta-btn:hover{opacity:.88}
.footer{text-align:center;padding:32px 20px 0;font-size:12px;color:var(--mu)}
.footer a{color:#c8a96e;text-decoration:none}
@media(max-width:640px){.hero{padding:36px 20px 32px}.hero h1{font-size:28px}.main{padding:0 14px}.cgrid,.pron-cgrid,.gram-rule-body,.rlz-cols{grid-template-columns:1fr}.gram-rule-body .gram-cell{border-right:none;border-bottom:.5px solid var(--bd)}.hst{gap:16px}.cta-strip{flex-direction:column;align-items:flex-start}}
@media(prefers-color-scheme:dark){.ce-txt strong{color:#a0b8ee}.gram-cell:nth-child(1){background:rgba(200,169,110,.05)}.gram-cell:nth-child(2){background:rgba(26,180,90,.04)}.gram-cell:nth-child(3){background:rgba(200,60,60,.04)}.eans,.mreward{color:#5ecc7e;background:rgba(46,180,90,.1);border-color:rgba(46,180,90,.4)}.qopt.correct,.rlz-item.matched,.ord-zone.cz{background:rgba(46,180,90,.12);border-color:rgba(46,180,90,.5);color:#5ecc7e}.qopt.wrong,.rlz-item.wf,.ord-zone.wz{background:rgba(200,60,60,.12);border-color:rgba(200,60,60,.4);color:#f08080}.qfb.ok,.ord-fb.ok,.ce-vfbtn.vok{background:rgba(46,180,90,.1);color:#5ecc7e;border-color:rgba(46,180,90,.4)}.qfb.ko,.ord-fb.ko,.ce-vfbtn.vko{background:rgba(200,60,60,.1);color:#f08080;border-color:rgba(200,60,60,.4)}}
/* ── AUDIOVISUEL ───────────────────────────────── */
.av-wrap{display:flex;flex-direction:column;gap:16px}
.av-section{border-radius:12px;overflow:hidden;border:.5px solid var(--bd);background:var(--bg)}
.av-header{display:flex;align-items:center;gap:10px;padding:11px 15px;background:var(--sf);border-bottom:.5px solid var(--bd)}
.av-icon{font-size:17px;flex-shrink:0}
.av-hinfo{flex:1;min-width:0}
.av-htitle{font-size:13px;font-weight:500;color:var(--tx)}
.av-htype{font-size:11px;color:var(--mu);margin-top:1px}
.av-badge{font-size:10px;padding:2px 9px;border-radius:20px;font-weight:500;white-space:nowrap;flex-shrink:0}
.av-badge.explicatif{background:rgba(26,39,68,.1);color:#1a2744;border:.5px solid rgba(26,39,68,.25)}
.av-badge.chanson{background:rgba(200,169,110,.15);color:#7a5a20;border:.5px solid rgba(200,169,110,.4)}
.av-badge.tiktok{background:rgba(1,1,1,.08);color:#010101;border:.5px solid rgba(1,1,1,.2)}
@media(prefers-color-scheme:dark){
  .av-badge.explicatif{background:rgba(100,140,220,.15);color:#a0c0f0;border-color:rgba(100,140,220,.3)}
  .av-badge.chanson{background:rgba(200,169,110,.12);color:#c8a96e;border-color:rgba(200,169,110,.35)}
  .av-badge.tiktok{background:rgba(255,255,255,.1);color:#e0e0e0;border-color:rgba(255,255,255,.2)}
}
.av-thumb{width:100%;position:relative;aspect-ratio:16/9;background:#111;cursor:pointer;overflow:hidden}
.av-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.av-thumb:hover img,.av-thumb-tt:hover{opacity:.85}
.av-thumb-tt{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#010101,#333);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.av-tt-logo{color:#fff;font-size:22px;font-weight:700;letter-spacing:.05em;opacity:.6}
.av-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;background:rgba(0,0,0,.55);border-radius:50%;border:2.5px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;pointer-events:none;transition:all .2s}
.av-thumb:hover .av-play-btn,.av-thumb-tt:hover .av-play-btn{background:rgba(220,0,0,.8);border-color:#fff}
.av-play-btn::after{content:'';border-style:solid;border-width:9px 0 9px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.av-embed-frame{display:none;position:relative;width:100%;aspect-ratio:16/9;background:#000}
.av-embed-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.av-card-info{padding:12px 15px}
.av-why-title{font-size:11px;font-weight:500;color:var(--tx);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.av-why{font-size:12px;color:var(--mu);line-height:1.65;margin-bottom:8px}
.av-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.av-tag{font-size:10.5px;padding:2px 7px;border-radius:20px;background:var(--sf);border:.5px solid var(--bd);color:var(--mu)}
.av-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.av-play-card-btn{font-family:'DM Sans',sans-serif;font-size:12px;padding:6px 14px;border-radius:20px;background:var(--sf);border:.5px solid var(--bd);color:var(--tx);cursor:pointer;transition:all .15s}
.av-play-card-btn:hover{border-color:rgba(200,169,110,.55);background:var(--gp)}
.av-open-btn{display:inline-flex;align-items:center;gap:5px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;padding:6px 14px;border-radius:20px;background:#ff0000;color:#fff;border:none;cursor:pointer;text-decoration:none;transition:opacity .15s}
.av-open-btn:hover{opacity:.88}

/* ── PROJET FINAL ─────────────────────────────── */
.pf-wrap{display:flex;flex-direction:column;gap:16px}
.pf-hero{background:linear-gradient(135deg,#1a2744 0%,#2d4070 60%,#1a3a5c 100%);border-radius:12px;padding:20px 22px;position:relative;overflow:hidden}
.pf-hero::after{content:"🎤";position:absolute;right:10px;top:10px;font-size:64px;opacity:.08;pointer-events:none}
.pf-badge{display:inline-block;background:rgba(200,169,110,.25);border:1px solid rgba(200,169,110,.45);color:#e8d5b0;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:3px 12px;border-radius:20px;margin-bottom:10px}
.pf-title{font-family:"Playfair Display",serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:6px}
.pf-sub{font-size:13px;color:rgba(255,255,255,.65);line-height:1.6}
.pf-info{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px}
.pf-stat{display:flex;flex-direction:column;gap:2px}
.pf-stat-n{font-family:"Playfair Display",serif;font-size:22px;color:#c8a96e;font-weight:700}
.pf-stat-l{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.45)}
.pf-section{background:var(--bg);border:.5px solid var(--bd);border-radius:10px;overflow:hidden}
.pf-sec-hdr{display:flex;align-items:center;gap:10px;padding:11px 15px;background:var(--sf);border-bottom:.5px solid var(--bd)}
.pf-sec-icon{font-size:16px;flex-shrink:0}
.pf-sec-title{font-size:13px;font-weight:500;color:var(--tx)}
.pf-sec-body{padding:14px 16px}
.pf-steps{display:flex;flex-direction:column;gap:10px}
.pf-step{display:flex;gap:12px;align-items:flex-start}
.pf-step-n{width:28px;height:28px;border-radius:50%;background:#1a2744;color:#c8a96e;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.pf-step-body{}
.pf-step-title{font-size:13px;font-weight:500;color:var(--tx);margin-bottom:3px}
.pf-step-desc{font-size:12px;color:var(--mu);line-height:1.6}
.pf-rubric{display:flex;flex-direction:column;gap:8px}
.pf-rubric-item{display:flex;gap:10px;align-items:flex-start;background:var(--sf);border-radius:8px;padding:10px 12px;border-left:3px solid rgba(200,169,110,.4)}
.pf-rubric-pts{font-family:"Playfair Display",serif;font-size:18px;font-weight:700;color:#c8a96e;min-width:42px;flex-shrink:0}
.pf-rubric-info{}
.pf-rubric-name{font-size:12.5px;font-weight:500;color:var(--tx);margin-bottom:3px}
.pf-rubric-desc{font-size:11.5px;color:var(--mu);line-height:1.55}
.pf-model{background:var(--sf);border-radius:8px;padding:13px 15px;border-left:3px solid rgba(26,39,116,.4)}
.pf-model-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);font-weight:500;margin-bottom:8px}
.pf-model-block{font-size:12.5px;color:var(--tx);line-height:1.75}
.pf-model-block em{color:#9a7540;font-style:italic}
.pf-tip{background:rgba(200,169,110,.07);border:.5px solid rgba(200,169,110,.25);border-radius:8px;padding:12px 14px}
.pf-tip h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9a7540;margin-bottom:6px;font-weight:500}
.pf-tip p{font-size:12.5px;color:var(--tx);line-height:1.65}
.pf-checklist{display:flex;flex-direction:column;gap:6px}
.pf-check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--tx);line-height:1.5}
.pf-check::before{content:"☐";color:#c8a96e;font-size:16px;line-height:1;flex-shrink:0}
.pf-cta{background:linear-gradient(135deg,#1a2744,#2d4070);border-radius:10px;padding:16px 18px;text-align:center}
.pf-cta p{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:12px;line-height:1.55}
.pf-cta strong{color:#fff;display:block;margin-bottom:4px}

@media(prefers-color-scheme:dark){
  .qfb.ok{background:rgba(46,180,90,.15)!important;color:#5de89e!important;border-left-color:rgba(46,180,90,.5)!important}
  .qfb.ko{background:rgba(220,70,70,.15)!important;color:#ff8080!important;border-left-color:rgba(220,70,70,.5)!important}
  .qopt.correct{background:rgba(46,180,90,.2)!important;border-color:rgba(46,180,90,.6)!important;color:#5de89e!important}
  .qopt.wrong{background:rgba(220,70,70,.15)!important;border-color:rgba(220,70,70,.5)!important;color:#ff8080!important}
  .eans{color:#5de89e!important;background:rgba(46,180,90,.1)!important}
  .vok{background:rgba(46,180,90,.2)!important;color:#5de89e!important}
  .vko{background:rgba(220,70,70,.2)!important;color:#ff8080!important}
  .ord-fb.ok{color:#5de89e!important}
  .ord-fb.ko{color:#ff8080!important}
  .rlz-item.matched{background:rgba(46,180,90,.2)!important;border-color:rgba(46,180,90,.5)!important;color:#5de89e!important}
  .ce-vffb{color:#a0c0ff!important}
  .l-complete-badge{color:#1a2744!important}
}

/* ════════════════════════════════════════════════
   NEW UNIFIED SYSTEM CSS
   ════════════════════════════════════════════════ */

/* ── REGISTRATION MODAL ──────────────────────── */


.reg-box{background:linear-gradient(135deg,#0d1b3e,#1a2744);border:1px solid rgba(200,169,110,.4);
  border-radius:20px;padding:40px 36px;max-width:440px;width:90%;text-align:center;position:relative}
.reg-box::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(200,169,110,.12),transparent 65%);
  pointer-events:none;border-radius:20px}
.reg-flag{display:flex;justify-content:center;gap:0;margin-bottom:16px}
.reg-flag span{width:28px;height:18px;display:block}
.reg-title{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;
  color:#fff;margin-bottom:6px}
.reg-sub{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:24px;line-height:1.6}
.reg-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.reg-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.4);display:block;text-align:left;margin-bottom:4px}


.reg-btn{width:100%;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;
  padding:14px;border-radius:28px;background:linear-gradient(135deg,#c8a96e,#e8cc8a);
  color:#1a2744;border:none;cursor:pointer;transition:transform .15s,opacity .15s;
  letter-spacing:.02em}
.reg-btn:hover{transform:scale(1.02)}
.reg-campus{font-size:11px;color:rgba(200,169,110,.4);margin-top:14px}

/* ── TOP HEADER BAR ──────────────────────────── */
.sys-header{background:linear-gradient(90deg,#0d1b3e,#1a2744,#0d1b3e);
  border-bottom:1px solid rgba(200,169,110,.2);padding:10px 20px;
  position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:16px}
.sys-hname{font-size:13px;font-weight:600;color:#c8a96e;white-space:nowrap;
  display:flex;align-items:center;gap:6px}
.sys-hname::before{content:'👤';font-size:14px}
.sys-hbar-wrap{flex:1;display:flex;align-items:center;gap:10px}
.sys-hpct{font-size:11px;color:rgba(255,255,255,.45);white-space:nowrap}
.sys-hdots{display:flex;gap:4px;align-items:center}
.sys-hdot{width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.12);border:.5px solid rgba(255,255,255,.2);
  transition:all .4s ease;flex-shrink:0}
.sys-hdot.done{background:#c8a96e;border-color:#c8a96e;
  box-shadow:0 0 6px rgba(200,169,110,.6)}
.sys-hdot.active{background:rgba(200,169,110,.35);border-color:rgba(200,169,110,.6)}
.sys-hbtns{display:flex;gap:6px;flex-shrink:0}
.sys-hbtn{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;
  padding:5px 12px;border-radius:16px;cursor:pointer;transition:all .15s;
  white-space:nowrap}
.sys-hbtn-rank{background:rgba(200,169,110,.12);color:#c8a96e;
  border:.5px solid rgba(200,169,110,.3)}
.sys-hbtn-rank:hover{background:rgba(200,169,110,.2)}
.sys-hbtn-cert{background:linear-gradient(135deg,rgba(200,169,110,.2),rgba(232,204,138,.15));
  color:#e8cc8a;border:.5px solid rgba(200,169,110,.4)}
.sys-hbtn-cert:hover{background:linear-gradient(135deg,rgba(200,169,110,.3),rgba(232,204,138,.25))}
.sys-hbtn-cert.locked{opacity:.4;cursor:not-allowed}

/* ── LESSON DOTS IN CARD HEADER ─────────────── */
.l-prog-ring{width:36px;height:36px;flex-shrink:0;position:relative;cursor:default}
.l-prog-svg{transform:rotate(-90deg)}
.l-prog-bg{fill:none;stroke:rgba(200,169,110,.15);stroke-width:3}
.l-prog-arc{fill:none;stroke:#c8a96e;stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset .5s ease}
.l-prog-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:13px;line-height:1;color:rgba(255,255,255,.5);font-weight:600}
.l-tabs-done{display:flex;gap:3px;align-items:center;margin-left:auto;margin-right:6px}
.l-tab-dot{width:8px;height:8px;border-radius:50%;background:rgba(200,169,110,.15);
  border:.5px solid rgba(200,169,110,.25);transition:all .3s}
.l-tab-dot.done{background:#c8a96e;border-color:#c8a96e;box-shadow:0 0 4px rgba(200,169,110,.5)}
.l-lscore{display:none;align-items:center;gap:2px;margin-right:4px;
  background:rgba(255,255,255,.05);border:.5px solid rgba(200,169,110,.2);
  border-radius:8px;padding:2px 7px;font-size:13px;font-weight:700}
.l-complete-badge{display:none;align-items:center;gap:3px;
  background:linear-gradient(135deg,#c8a96e,#e8cc8a);color:#1a2744;
  font-size:10px;font-weight:600;padding:3px 8px;border-radius:16px;
  animation:badgePop .4s ease;white-space:nowrap;margin-right:2px}
.lcard.completed .l-complete-badge{display:flex}
.lcard.completed .l-prog-icon{color:#c8a96e}
.lcard.completed .l-prog-arc{stroke:#c8a96e}
.lcard.completed .lhdr{background:linear-gradient(90deg,rgba(200,169,110,.05),transparent)}
@keyframes badgePop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* ── RESULT PANEL (immediate after activity) ─ */
.result-panel{background:var(--sf);border:.5px solid var(--bd);border-radius:10px;
  margin-top:12px;overflow:hidden;animation:slideDown .3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.rp-header{display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:linear-gradient(90deg,rgba(200,169,110,.08),transparent);
  border-bottom:.5px solid var(--bd)}
.rp-title{font-size:12px;font-weight:600;color:var(--tx);flex:1}
.rp-score{font-size:18px;font-weight:700}
.rp-grade{font-size:11px;font-weight:500;margin-left:4px}
.rp-rows{padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.rp-row{display:flex;align-items:center;gap:8px;font-size:12px}
.rp-lbl{color:var(--mu);width:90px;flex-shrink:0}
.rp-bar-wrap{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.rp-bar{height:100%;border-radius:3px;transition:width .6s ease}
.rp-val{font-weight:600;width:36px;text-align:right;flex-shrink:0}
.rp-bonus{font-size:10px;color:#c8a96e;background:rgba(200,169,110,.1);
  border-radius:6px;padding:1px 6px;flex-shrink:0}

/* ── SCOREBOARD ───────────────────────────────── */
.scoreboard-section{background:var(--bg);border:.5px solid var(--bd);
  border-radius:14px;margin:20px 0;overflow:hidden}
.sb-header{display:flex;align-items:center;gap:12px;padding:16px 20px;
  background:linear-gradient(90deg,rgba(200,169,110,.08),transparent);
  border-bottom:.5px solid var(--bd);cursor:pointer;user-select:none}
.sb-title{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:#c8a96e;flex:1}
.sb-toggle-chev{color:var(--mu);transition:transform .25s}
.sb-toggle-chev.open{transform:rotate(180deg)}
.sb-body{display:none;padding:0}
.sb-body.open{display:block}
.sb-table{width:100%;border-collapse:collapse;font-size:12px}
.sb-table th{padding:8px 12px;text-align:left;font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.07em;color:var(--mu);
  border-bottom:.5px solid var(--bd);background:var(--sf)}
.sb-table td{padding:9px 12px;border-bottom:.5px solid rgba(255,255,255,.04)}
.sb-table tr:last-child td{border-bottom:none}
.sb-table tr:hover td{background:rgba(200,169,110,.03)}
.sb-lesson-cell{font-weight:500;color:var(--tx)}
.sb-score-cell{font-weight:700}
.sb-grade-pill{display:inline-block;font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:10px}
.sb-footer{padding:14px 20px;border-top:.5px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(200,169,110,.04)}
.sb-final-lbl{font-size:12px;color:var(--mu)}
.sb-final-score{font-family:'Playfair Display',serif;font-size:28px;font-weight:700}
.sb-final-grade{font-size:13px;font-weight:500;margin-left:6px}

/* ── CLASS RANKING ────────────────────────────── */
.ranking-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);
  z-index:9998;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;backdrop-filter:blur(6px)}
.ranking-overlay.show{display:flex;animation:fadeIn .3s ease}
.ranking-box{background:linear-gradient(135deg,#0d1b3e,#1a2744);
  border:1px solid rgba(200,169,110,.35);border-radius:20px;
  width:100%;max-width:640px;overflow:hidden;margin:auto}
.rk-header{display:flex;align-items:center;gap:12px;padding:18px 22px;
  background:rgba(200,169,110,.06);border-bottom:1px solid rgba(200,169,110,.2)}
.rk-title{font-family:'Playfair Display',serif;font-size:18px;color:#c8a96e;flex:1}
.rk-close{font-size:20px;cursor:pointer;color:rgba(255,255,255,.4);
  transition:color .15s;line-height:1}
.rk-close:hover{color:#fff}
.rk-tabs{display:flex;gap:0;overflow-x:auto;background:rgba(0,0,0,.2);
  border-bottom:1px solid rgba(200,169,110,.1)}
.rk-tab{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;
  padding:9px 16px;cursor:pointer;color:rgba(255,255,255,.45);
  border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;flex-shrink:0}
.rk-tab.active{color:#c8a96e;border-bottom-color:#c8a96e}
.rk-body{padding:16px 20px;max-height:60vh;overflow-y:auto}
.rk-row{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:10px;margin-bottom:6px;background:rgba(255,255,255,.03);
  border:.5px solid rgba(255,255,255,.06);position:relative}
.rk-row.me{background:rgba(200,169,110,.08);border-color:rgba(200,169,110,.3)}
.rk-pos{width:28px;text-align:center;font-size:16px;flex-shrink:0}

.rk-me-tag{font-size:9px;font-weight:600;background:#c8a96e;color:#1a2744;
  padding:1px 6px;border-radius:8px;flex-shrink:0}
.rk-bar-col{width:100px;flex-shrink:0}
.rk-bar-bg{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.rk-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
.rk-score{font-size:13px;font-weight:700;width:36px;text-align:right;flex-shrink:0}
.rk-grade{font-size:10px;font-weight:600;width:16px;text-align:center;flex-shrink:0}
.rk-empty{text-align:center;padding:30px;color:rgba(255,255,255,.3);font-size:13px}

/* ── CERTIFICATE ──────────────────────────────── */
.cert-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);
  z-index:9999;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.cert-overlay.show{display:flex;animation:fadeIn .3s ease}
.cert-box{background:linear-gradient(135deg,#0d1b3e,#1a2744);
  border:1px solid rgba(200,169,110,.4);border-radius:20px;
  padding:32px 36px;max-width:520px;width:92%;
  position:relative;text-align:center}
.cert-box::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(200,169,110,.12),transparent 65%);
  pointer-events:none;border-radius:20px}
.cert-inner{position:relative;z-index:1}
.cert-seal{font-size:60px;display:block;margin-bottom:10px;
  animation:medalSpin .8s cubic-bezier(.34,1.56,.64,1) both}
@keyframes medalSpin{from{transform:rotateY(180deg) scale(.3);opacity:0}
  to{transform:rotateY(0) scale(1);opacity:1}}
.cert-badge{display:inline-block;background:rgba(200,169,110,.15);
  border:.5px solid rgba(200,169,110,.4);color:#c8a96e;
  font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 12px;border-radius:20px;margin-bottom:10px}
.cert-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;
  color:#fff;margin-bottom:4px}
.cert-awarded{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:6px}
.cert-name{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;
  color:#c8a96e;margin-bottom:14px;
  border-bottom:1px solid rgba(200,169,110,.3);padding-bottom:10px}
.cert-course{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:18px}
.cert-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.cert-score-item{background:rgba(255,255,255,.04);border:.5px solid rgba(200,169,110,.15);
  border-radius:10px;padding:10px 6px;text-align:center}
.cert-score-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.07em;
  color:rgba(255,255,255,.35);margin-bottom:4px}
.cert-score-val{font-size:20px;font-weight:700;font-family:'Playfair Display',serif}
.cert-main-score{font-family:'Playfair Display',serif;font-size:52px;font-weight:700;
  color:#c8a96e;line-height:1;margin-bottom:2px}
.cert-main-grade{font-size:13px;margin-bottom:6px}
.cert-lessons{font-size:11px;color:rgba(255,255,255,.35);margin-bottom:4px}
.cert-date{font-size:11px;color:rgba(255,255,255,.3);margin-bottom:18px}
.cert-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.cert-btn-dl{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  padding:10px 22px;border-radius:22px;
  background:linear-gradient(135deg,#c8a96e,#e8cc8a);color:#1a2744;border:none;cursor:pointer}
.cert-btn-share{font-family:'DM Sans',sans-serif;font-size:13px;padding:10px 18px;
  border-radius:22px;background:transparent;color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:all .15s}
.cert-btn-share:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.cert-btn-close{font-family:'DM Sans',sans-serif;font-size:12px;padding:6px 14px;
  border-radius:16px;background:transparent;color:rgba(255,255,255,.3);
  border:none;cursor:pointer;display:block;margin:4px auto 0;transition:color .15s}
.cert-btn-close:hover{color:rgba(255,255,255,.6)}
.cert-locked{text-align:center;padding:16px 0}
.cert-locked p{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:6px}
.cert-locked small{font-size:11px;color:rgba(255,255,255,.3)}

/* ── CONFETTI + MISC ──────────────────────────── */
#sys-confetti{position:fixed;inset:0;pointer-events:none;z-index:10000}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(prefers-color-scheme:dark){
  .l-complete-badge{color:#1a2744!important}
  .eans{color:#5de89e!important;background:rgba(46,180,90,.12)!important;
    border-left-color:rgba(46,180,90,.4)!important}
  .ord-fb.ok{color:#5de89e!important;background:rgba(46,180,90,.15)!important}
  .ord-fb.ko{color:#ff8080!important;background:rgba(220,70,70,.15)!important}
  .qfb.ok{color:#5de89e!important;background:rgba(46,180,90,.15)!important}
  .qfb.ko{color:#ff8080!important;background:rgba(220,70,70,.15)!important}
  .qopt.correct{color:#5de89e!important;background:rgba(46,180,90,.2)!important}
  .qopt.wrong{color:#ff8080!important;background:rgba(220,70,70,.15)!important}
  .exi input{color:#e8e6e0!important;background:rgba(255,255,255,.06)!important}
  .exi input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #2a2a2a inset!important;
    -webkit-text-fill-color:#e8e6e0!important}
  .cbtn{color:#c8a96e!important;border-color:rgba(200,169,110,.5)!important}
}


/* ── MOBILE: lesson header ─────────────────────────── */
@media (max-width: 640px) {
  .lhdr{gap:8px;padding:12px 14px}
  .l-prog-ring{width:30px;height:30px;flex-shrink:0}
  .l-prog-ring svg{width:30px;height:30px}
  .linfo{flex:1;min-width:0;overflow:hidden}
  .lfr{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .les{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .l-tabs-done{gap:2px}
  .l-tab-dot{width:6px;height:6px}
  .l-lscore{padding:2px 5px;min-width:40px}
  .l-complete-badge{font-size:9px;padding:2px 6px;display:none!important}
  .lcard.completed .l-complete-badge{display:none!important}
  .lchev{font-size:10px;flex-shrink:0}
  /* sys-header compact */
  .sys-header{padding:7px 12px;gap:8px;flex-wrap:wrap}
  .sys-hname{font-size:11px}
  .sys-hpct{display:none}
  .sys-hbtn{font-size:10px;padding:4px 8px}
  /* reg modal */
  .reg-box{padding:28px 20px}
  .reg-title{font-size:20px}
}


/* ── RANKING NAME FIX ────────────────────────────────── */
.rk-name{flex:1;font-size:13px;font-weight:500;color:#fff;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── REGISTRATION INPUT — WordPress override ──────────── */
.reg-input{color-scheme:dark!important;caret-color:#c8a96e!important;
  color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
  background:rgba(255,255,255,.08)!important;
  border:.5px solid rgba(200,169,110,.45)!important;
  width:100%;font-family:'DM Sans',sans-serif;font-size:16px;
  text-align:center;border-radius:10px;padding:12px 16px;outline:none;
  transition:border-color .15s;box-sizing:border-box}
.reg-input:focus{border-color:rgba(200,169,110,.85)!important}
.reg-input::placeholder{color:rgba(255,255,255,.4)!important}
.reg-input:-webkit-autofill,.reg-input:-webkit-autofill:focus,
.reg-input:-webkit-autofill:hover{
  -webkit-box-shadow:0 0 0 1000px rgba(13,27,62,.98) inset!important;
  -webkit-text-fill-color:#ffffff!important;
  caret-color:#c8a96e!important}

.course-instructions{background:var(--sf);border:.5px solid var(--bd);
  border-radius:12px;margin:0 0 18px;overflow:hidden}
.ci-toggle{display:flex;align-items:center;gap:10px;padding:13px 18px;
  cursor:pointer;user-select:none;transition:background .15s}
.ci-toggle:hover{background:rgba(200,169,110,.05)}
.ci-toggle-icon{font-size:17px;flex-shrink:0}
.ci-toggle-title{flex:1;font-size:13.5px;font-weight:600;color:var(--tx)}
.ci-chev{font-size:11px;color:var(--mu);transition:transform .25s;flex-shrink:0}
.ci-chev.open{transform:rotate(180deg)}
.ci-body{display:none;border-top:.5px solid var(--bd);padding:16px 20px 18px}
.ci-body.open{display:block}
.ci-steps{display:flex;flex-direction:column;gap:14px}
.ci-step{display:flex;gap:12px;align-items:flex-start}
.ci-step-n{width:26px;height:26px;border-radius:50%;background:#1a2744;
  color:#c8a96e;font-size:12px;font-weight:700;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-top:1px}
.ci-step-body{flex:1}
.ci-step-title{font-size:13px;font-weight:600;color:var(--tx);margin-bottom:3px}
.ci-step-desc{font-size:12px;color:var(--mu);line-height:1.65}
.ci-tag{display:inline-block;background:rgba(200,169,110,.12);
  border:.5px solid rgba(200,169,110,.3);color:#c8a96e;font-size:10px;
  padding:1px 7px;border-radius:10px;margin:1px 2px;white-space:nowrap}
.ci-grade{display:inline-block;font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:10px;margin:1px 2px}
.ci-grade.A{background:rgba(93,232,158,.15);color:#5de89e}
.ci-grade.B{background:rgba(200,169,110,.15);color:#c8a96e}
.ci-grade.C{background:rgba(240,180,41,.15);color:#f0b429}
.ci-grade.D{background:rgba(220,70,70,.15);color:#ff8080}


/* ── INSTRUCTIONS ACCORDION ──────────────────────────── */
.course-instructions{background:var(--sf);border:.5px solid rgba(200,169,110,.2);
  border-radius:12px;margin:14px 0 16px;overflow:hidden}
.ci-toggle{display:flex;align-items:center;gap:10px;padding:13px 18px;
  cursor:pointer;user-select:none;transition:background .15s}
.ci-toggle:hover{background:rgba(200,169,110,.06)}
.ci-icon{font-size:16px;flex-shrink:0}
.ci-title{flex:1;font-size:13px;font-weight:600;color:var(--tx)}
.ci-chev{font-size:11px;color:var(--mu);transition:transform .25s}
.ci-chev.open{transform:rotate(180deg)}
.ci-body{display:none;border-top:.5px solid var(--bd);padding:16px 18px 18px}
.ci-body.open{display:block}
.ci-steps{display:flex;flex-direction:column;gap:13px}
.ci-step{display:flex;gap:11px;align-items:flex-start}
.ci-n{width:24px;height:24px;border-radius:50%;background:#1a2744;color:#c8a96e;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;border:.5px solid rgba(200,169,110,.3)}
.ci-step-title{font-size:12.5px;font-weight:600;color:var(--tx);margin-bottom:3px}
.ci-step-desc{font-size:12px;color:var(--mu);line-height:1.6}
.ci-tag{display:inline-block;background:rgba(200,169,110,.12);
  border:.5px solid rgba(200,169,110,.25);color:#c8a96e;font-size:10px;
  padding:1px 7px;border-radius:10px;margin:1px 2px}
.ci-grade{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;
  border-radius:10px;margin:1px 2px}
.ci-grade.A{background:rgba(93,232,158,.15);color:#5de89e}
.ci-grade.B{background:rgba(200,169,110,.15);color:#c8a96e}
.ci-grade.C{background:rgba(240,180,41,.15);color:#f0b429}
.ci-grade.D{background:rgba(220,70,70,.15);color:#ff8080}

/* ── RANKING MOBILE ───────────────────────────────────── */
@media (max-width:640px){
  .ranking-overlay{padding:0;align-items:flex-end}
  .ranking-box{border-radius:20px 20px 0 0;max-width:100%;width:100%;
    max-height:88vh;display:flex;flex-direction:column}
  .rk-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rk-tab{font-size:10px;padding:8px 12px}
  .rk-body{flex:1;overflow-y:auto;padding:12px 14px;max-height:none}
  .rk-row{gap:7px;padding:7px 8px}
  .rk-pos{width:22px;font-size:14px}
  .rk-name{font-size:12px}
  .rk-bar-col{width:70px}
  .rk-score{font-size:12px;width:28px}
  .rk-grade{font-size:10px;width:14px}
  /* Sys header compact on mobile */
  .sys-header{flex-wrap:wrap;gap:6px;padding:6px 12px}
  .sys-hbar-wrap{order:3;width:100%;gap:6px}
  .sys-hdots{gap:5px}
  .sys-hpct{font-size:10px}
  .sys-hbtn{font-size:10px;padding:4px 8px}
  .sys-hname{font-size:11px}
}

/* ── REG OVERLAY: above WordPress admin bar ──────────── */
.reg-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);
  z-index:9998;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px)}
.reg-overlay.hidden{display:none!important}
/* WP admin bar is 32px (46px on mobile) — overlay starts BELOW it */
body.admin-bar .reg-overlay{top:32px}
@media screen and (max-width:782px){body.admin-bar .reg-overlay{top:46px}}
.reg-overlay.hidden{display:none}