:root {
  --bg:#0d1117; --s1:#161b27; --s2:#1e2435; --border:#2a3050;
  --acc:#f5a623; --acc2:#e8563a; --grn:#3ecf8e; --blu:#4a9eff; --red:#ff5a5a;
  --txt:#e8e4d8; --muted:#6e7592; --hl:rgba(245,166,35,0.2); --cur:rgba(245,166,35,0.38);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:'Nunito',sans-serif;min-height:100vh;overflow-x:hidden}

/* NAV */
.nav{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;background:var(--s1);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:300}
.nav-logo{font-family:'Lora',serif;font-size:1.05rem;color:var(--acc)}
.nav-center{display:flex;gap:4px}
.ntab{padding:6px 14px;border-radius:20px;font-size:0.82rem;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:all .2s}
.ntab.on{background:var(--acc);color:#000}
.ntab:hover:not(.on){color:var(--txt);background:var(--border)}
.nav-right{display:flex;align-items:center;gap:10px}
.hearts{display:flex;gap:4px}
.hrt{font-size:1.2rem;transition:all .3s}
.hrt.dead{filter:grayscale(1);opacity:.25;transform:scale(.8)}
.vbadge{font-size:0.78rem;color:var(--muted);background:var(--s2);border-radius:20px;padding:4px 11px;cursor:pointer;border:1px solid var(--border);transition:all .2s}
.vbadge:hover{color:var(--acc);border-color:var(--acc)}

/* SCREENS */
.scr{display:none}.scr.on{display:block}

/* HOME */
#home{padding:40px 20px 80px;max-width:940px;margin:0 auto}
.hero{text-align:center;margin-bottom:48px}
.hero h1{font-family:'Lora',serif;font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:10px}
.hero h1 em{color:var(--acc);font-style:italic}
.hero p{color:var(--muted);font-size:1rem}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.scard{background:var(--s1);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .25s;position:relative}
.scard:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(245,166,35,.13);border-color:var(--acc)}
.scard-img{height:130px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.scard-body{padding:16px}
.scard-num{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:4px}
.scard-title{font-family:'Lora',serif;font-size:1.08rem;margin-bottom:6px}
.scard-meta{font-size:.78rem;color:var(--muted)}
.scard-done{position:absolute;top:10px;right:10px;font-size:1rem;background:var(--s2);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center}

/* SEGMENT FLIP */
.seg-outer{margin-bottom:16px;border-radius:14px;overflow:hidden;border:1px solid var(--border);transition:border-color .3s,box-shadow .3s}
.seg-outer.dim{opacity:.5}
.seg-outer.lit{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.seg{background:var(--s1);padding:24px 28px;font-family:'Lora',serif;font-size:1.05rem;line-height:2.1;transition:all .3s;border:none;border-radius:0;margin-bottom:0}
.flip-bar{display:flex;border-top:1px solid var(--border);background:var(--s1)}
.flip-btn{flex:1;padding:10px 0;font-size:.8rem;font-weight:700;font-family:'Nunito',sans-serif;cursor:pointer;border:none;transition:all .2s;letter-spacing:.04em;text-align:center}
.flip-btn-de{background:rgba(245,166,35,.06);color:var(--acc)}.flip-btn-de.active{background:var(--acc);color:#000}
.flip-btn-en{background:rgba(74,158,255,.06);color:var(--blu)}.flip-btn-en.active{background:var(--blu);color:#fff}
.seg-de,.seg-en{transition:opacity .2s}
.seg-en{display:none;color:var(--blu);font-style:italic;font-size:1rem;line-height:1.9}

/* AUDIO BAR */
.abar{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--border);border-radius:50px;padding:9px 18px;margin-bottom:28px;position:sticky;top:64px;z-index:100;backdrop-filter:blur(8px)}
.abtn{width:38px;height:38px;border-radius:50%;background:var(--acc);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:#000;flex-shrink:0;transition:all .2s}
.abtn:hover{background:#ffb820;transform:scale(1.08)}
.abtn.sec{background:var(--s2);color:var(--txt)}
.abtn.sec:hover{background:var(--border)}
.ptrack{flex:1;height:5px;background:var(--border);border-radius:3px;cursor:pointer;position:relative}
.pfill{height:100%;background:var(--acc);border-radius:3px;width:0%;pointer-events:none;transition:width .12s linear}
.phandle{position:absolute;top:50%;right:0;transform:translate(50%,-50%);width:12px;height:12px;background:var(--acc);border-radius:50%;pointer-events:none}
.spill{background:var(--s2);border:1px solid var(--border);color:var(--txt);border-radius:20px;padding:4px 11px;font-size:.78rem;cursor:pointer;transition:all .2s;font-family:'Nunito',sans-serif;flex-shrink:0}
.spill:hover{border-color:var(--acc);color:var(--acc)}

/* SEGMENTS */
.w{display:inline;cursor:pointer;border-radius:3px;padding:1px 2px;transition:background .12s}
.w:hover{background:var(--hl)}
.w.sp{color:var(--acc)}
.w.cur{background:var(--cur);color:#fff;border-radius:4px}

/* TOOLTIP */
/* TOOLTIP — fixed to viewport, always fully visible */
.tip{
  position:fixed;z-index:9999;
  background:var(--s2);border:1px solid var(--acc);
  border-radius:16px;padding:18px 18px 14px;
  width:min(300px,92vw);
  box-shadow:0 20px 60px rgba(0,0,0,.75);
  pointer-events:all;display:none;
  animation:tipIn .2s cubic-bezier(.34,1.56,.64,1);
}
/* mobile: always appear as bottom sheet */
@media(max-width:600px){
  .tip{
    position:fixed !important;
    bottom:0 !important; top:auto !important;
    left:0 !important; right:0 !important;
    width:100% !important; max-width:100% !important;
    border-radius:20px 20px 0 0;
    padding:20px 20px 32px;
    border:none;border-top:2px solid var(--acc);
    animation:tipSlideUp .22s ease;
  }
}
@keyframes tipIn{from{opacity:0;transform:scale(.88) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes tipSlideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.tip-handle{display:none;width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 14px;}
@media(max-width:600px){.tip-handle{display:block}}
.tip-word{font-family:'Lora',serif;font-size:1.3rem;color:var(--acc);margin-bottom:3px}
.tip-en{font-size:.95rem;color:var(--txt);font-weight:700;margin-bottom:9px}
.tip-gr{font-size:.78rem;color:var(--muted);padding:8px 10px;background:var(--bg);border-radius:8px;margin-bottom:12px;line-height:1.7}
.tip-gr b{color:var(--blu)}
.tip-acts{display:flex;gap:8px}
.tip-save{flex:1;padding:10px 8px;border-radius:9px;border:1.5px solid var(--grn);background:transparent;color:var(--grn);font-size:.85rem;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:700;transition:all .2s}
.tip-save:hover,.tip-save.sv{background:var(--grn);color:#000}
.tip-x{width:40px;height:40px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:1rem;cursor:pointer;transition:all .2s;flex-shrink:0}
.tip-x:hover{border-color:var(--red);color:var(--red)}

/* QUIZ CARD */
.qcard{background:linear-gradient(135deg,var(--s2),var(--s1));border:1px solid var(--acc);border-radius:18px;padding:26px;margin:20px 0;animation:qIn .35s ease;box-shadow:0 6px 32px rgba(245,166,35,.09)}
@keyframes qIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.qbadge{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);font-weight:700;border:1px solid var(--acc);border-radius:20px;padding:3px 11px;margin-bottom:13px}
.qq{font-family:'Lora',serif;font-size:1.15rem;margin-bottom:8px;line-height:1.55}
.qsub{font-size:.85rem;color:var(--muted);margin-bottom:20px}
.qfb{display:none;border-radius:9px;padding:11px 14px;font-size:.88rem;font-weight:700;margin-bottom:13px;align-items:center;gap:8px}
.qfb.show{display:flex}
.qfb.ok{background:rgba(62,207,142,.1);color:var(--grn);border:1px solid rgba(62,207,142,.3)}
.qfb.err{background:rgba(255,90,90,.1);color:var(--red);border:1px solid rgba(255,90,90,.3)}
.qacts{display:flex;gap:9px;justify-content:flex-end;margin-top:10px}
.qbtn{padding:9px 22px;border-radius:50px;font-size:.85rem;font-family:'Nunito',sans-serif;font-weight:700;cursor:pointer;border:none;transition:all .2s}
.qbtn-chk{background:var(--acc);color:#000}
.qbtn-chk:hover{background:#ffb820}
.qbtn-nxt{background:var(--grn);color:#000;display:none}
.qbtn-nxt.on{display:block}
.qbtn-nxt:hover{background:#32b87a}

/* FILL WITH LETTER TILES */
.fill-sentence{font-family:'Lora',serif;font-size:1.05rem;line-height:2.4;margin-bottom:18px}
.blank-box{display:inline-flex;gap:4px;align-items:center;vertical-align:middle;flex-wrap:wrap;background:rgba(245,166,35,.06);border-radius:8px;padding:3px 6px;min-width:60px;border:1.5px dashed var(--acc);cursor:pointer;transition:all .2s}
.blank-box:hover{background:rgba(245,166,35,.12)}
.ltile{display:inline-flex;width:28px;height:32px;align-items:center;justify-content:center;background:var(--acc);color:#000;border-radius:6px;font-weight:800;font-size:.95rem;font-family:'Nunito',sans-serif;cursor:pointer;transition:all .15s;user-select:none}
.ltile:hover{background:#ffb820;transform:translateY(-2px)}
.ltile.used{opacity:.2;pointer-events:none}
.ltile.wrong-tile{background:var(--red);color:#fff;animation:shake .3s ease}
.letter-bank{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding:14px;background:var(--bg);border-radius:10px;min-height:48px}
.blank-placeholder{font-size:.85rem;color:var(--muted);font-style:italic}

/* DRAG */
.wbank{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;min-height:40px}
.wchip{background:var(--s1);border:1.5px solid var(--border);color:var(--txt);border-radius:7px;padding:7px 13px;font-size:.88rem;cursor:pointer;transition:all .2s;user-select:none}
.wchip:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)}
.wchip.used{opacity:.22;pointer-events:none}
.dropz{min-height:50px;border:2px dashed var(--border);border-radius:10px;padding:9px 12px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;transition:all .2s;margin-bottom:14px;background:rgba(0,0,0,.12)}
.dropz.ov{border-color:var(--acc);background:rgba(245,166,35,.05)}
.dchip{background:var(--acc);color:#000;border-radius:7px;padding:7px 13px;font-size:.88rem;cursor:pointer;font-weight:700;transition:all .2s}
.dchip:hover{background:var(--acc2);color:#fff}
.dphint{color:var(--muted);font-size:.85rem;font-style:italic}

/* MATCH — scrollable two-column */
.match-wrap{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;max-height:340px;overflow-y:auto}
.match-col{display:flex;flex-direction:column;gap:6px}
.mi{padding:9px 12px;border-radius:8px;border:1.5px solid var(--border);cursor:pointer;transition:all .2s;font-size:.88rem;text-align:center;background:var(--bg);user-select:none;line-height:1.3}
.mi:hover{border-color:var(--acc);background:rgba(245,166,35,.06)}
.mi.sel{border-color:var(--acc);background:rgba(245,166,35,.18);color:var(--acc);font-weight:700}
.mi.paired-ok{border-color:var(--grn);background:rgba(62,207,142,.1);color:var(--grn);pointer-events:none;font-weight:600}
.mi.paired-err{border-color:var(--red);background:rgba(255,90,90,.12);color:var(--red)}

/* MCQ */
.mcq-prog{display:flex;gap:5px;margin-bottom:16px}
.mcq-pip{width:28px;height:5px;border-radius:3px;background:var(--border);transition:background .3s}
.mcq-pip.done{background:var(--grn)}
.mcq-pip.active{background:var(--acc)}
.mcq-word{font-family:'Lora',serif;font-size:2rem;color:var(--acc);text-align:center;margin:8px 0 4px;letter-spacing:.02em}
.mcq-hint{font-size:.78rem;color:var(--muted);text-align:center;margin-bottom:20px;font-style:italic}
.mcq-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.mcq-opt{padding:13px 10px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg);color:var(--txt);font-size:.9rem;font-family:'Nunito',sans-serif;cursor:pointer;transition:all .2s;text-align:center;line-height:1.3}
.mcq-opt:hover:not(:disabled){border-color:var(--acc);background:rgba(245,166,35,.08);color:var(--acc)}
.mcq-opt:disabled{cursor:default}
.mcq-opt.mcq-correct{border-color:var(--grn);background:rgba(62,207,142,.15);color:var(--grn);font-weight:700}
.mcq-opt.mcq-wrong{border-color:var(--red);background:rgba(255,90,90,.12);color:var(--red);font-weight:700}

/* FILL updates */
.lbank-wrap{margin-bottom:16px}
.lbank-label{font-size:.73rem;color:var(--muted);margin-bottom:7px;text-transform:uppercase;letter-spacing:.1em}
.typed-tile{display:inline-flex;width:24px;height:28px;align-items:center;justify-content:center;background:var(--acc);color:#000;border-radius:5px;font-weight:800;font-size:.9rem;margin:1px}

/* COMPLETE BANNER */
.done-banner{display:none;background:linear-gradient(135deg,var(--s2),var(--s1));border:1px solid var(--grn);border-radius:18px;padding:32px;text-align:center;margin-top:28px;animation:qIn .4s ease}
.done-banner.show{display:block}
.db-icon{font-size:3.2rem;margin-bottom:10px}
.db-title{font-family:'Lora',serif;font-size:1.7rem;margin-bottom:7px;color:var(--grn)}
.db-sub{color:var(--muted);margin-bottom:22px;font-size:.95rem}
.db-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dbtn{padding:11px 26px;border-radius:50px;font-size:.9rem;font-family:'Nunito',sans-serif;font-weight:700;cursor:pointer;border:none;transition:all .2s}
.dbtn-p{background:var(--acc);color:#000}.dbtn-p:hover{background:#ffb820;transform:translateY(-2px)}
.dbtn-o{background:transparent;color:var(--txt);border:2px solid var(--border)}.dbtn-o:hover{border-color:var(--txt)}

/* GAME OVER */
#gover{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:500;align-items:center;justify-content:center}
#gover.show{display:flex}
.go-box{background:var(--s2);border:1px solid var(--red);border-radius:22px;padding:44px 32px;text-align:center;max-width:380px;width:90%;animation:qIn .4s ease}
.go-t{font-family:'Lora',serif;font-size:1.9rem;color:var(--red);margin-bottom:7px}
.go-s{color:var(--muted);margin-bottom:26px;font-size:.93rem}

/* VOCAB PAGE */
#vocab{max-width:800px;margin:0 auto;padding:36px 18px 100px}
.vh{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:10px}
.vh h2{font-family:'Lora',serif;font-size:1.7rem}
.varow{display:flex;gap:8px}
.vbtn{padding:8px 18px;border-radius:50px;font-size:.82rem;font-family:'Nunito',sans-serif;font-weight:700;cursor:pointer;border:none;transition:all .2s}
.vbp{background:var(--acc);color:#000}.vbp:hover{background:#ffb820}
.vbo{background:transparent;color:var(--txt);border:2px solid var(--border)}.vbo:hover{border-color:var(--acc);color:var(--acc)}
.vempty{text-align:center;padding:72px 20px;color:var(--muted)}
.vempty .ei{font-size:3.5rem;margin-bottom:14px}
.vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:36px}
.vc{background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:15px 14px;position:relative;transition:all .2s}
.vc:hover{border-color:var(--acc)}
.vc-w{font-family:'Lora',serif;font-size:1.1rem;color:var(--acc);margin-bottom:3px}
.vc-e{font-size:.88rem;color:var(--txt);font-weight:600;margin-bottom:6px}
.vc-g{font-size:.75rem;color:var(--muted);line-height:1.5}
.vc-del{position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:5px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:.8rem;transition:all .2s}
.vc-del:hover{background:rgba(255,90,90,.15);color:var(--red)}
.vc-mbar{height:3px;border-radius:2px;margin-top:9px;background:var(--border);overflow:hidden}
.vc-mfill{height:100%;border-radius:2px;background:var(--grn);transition:width .4s}

/* PRACTICE */
.prac-sec{border-top:1px solid var(--border);padding-top:32px}
.prac-sec h3{font-family:'Lora',serif;font-size:1.35rem;margin-bottom:6px}
.prac-desc{color:var(--muted);font-size:.88rem;margin-bottom:22px}
.ppbar{height:6px;background:var(--border);border-radius:3px;margin-bottom:18px;overflow:hidden}
.ppfill{height:100%;background:linear-gradient(90deg,var(--acc),var(--grn));border-radius:3px;transition:width .4s}
.pstats{display:flex;gap:22px;justify-content:center;margin-bottom:20px}
.pst{text-align:center}
.pst-v{font-size:1.4rem;font-weight:800;font-family:'Lora',serif}
.pst-l{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.fcard{background:var(--s2);border:1px solid var(--border);border-radius:18px;min-height:190px;cursor:pointer;perspective:1000px;margin-bottom:18px;position:relative}
.fci{width:100%;height:100%;min-height:190px;transition:transform .45s;transform-style:preserve-3d;position:relative}
.fcard.flip .fci{transform:rotateY(180deg)}
.fc-f,.fc-b{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;border-radius:18px}
.fc-b{transform:rotateY(180deg);background:var(--s2)}
.fc-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.fc-dw{font-family:'Lora',serif;font-size:1.9rem;color:var(--acc)}
.fc-ew{font-size:1.2rem;color:var(--txt);font-weight:700;margin-bottom:6px}
.fc-gr{font-size:.82rem;color:var(--muted);max-width:250px;line-height:1.6}
.fc-hint{font-size:.8rem;color:var(--muted);margin-top:7px}
.pctrls{display:flex;gap:10px;justify-content:center;margin-top:4px}
.pc{padding:10px 26px;border-radius:50px;font-size:.88rem;font-family:'Nunito',sans-serif;font-weight:700;cursor:pointer;border:none;transition:all .2s}
.pc-w{background:rgba(255,90,90,.12);color:var(--red);border:1.5px solid var(--red)}.pc-w:hover{background:rgba(255,90,90,.25)}
.pc-r{background:rgba(62,207,142,.12);color:var(--grn);border:1.5px solid var(--grn)}.pc-r:hover{background:rgba(62,207,142,.25)}
.sdone{display:none;text-align:center;padding:36px 18px;background:var(--s2);border-radius:18px;border:1px solid var(--grn)}
.sdone.show{display:block}

/* PRACTICE TABS */
.ptabs{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.ptab{padding:8px 16px;border-radius:20px;font-size:.82rem;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--muted);transition:all .2s;font-family:'Nunito',sans-serif}
.ptab.on{background:var(--acc);color:#000;border-color:var(--acc)}
.ptab:hover:not(.on){color:var(--txt);border-color:var(--txt)}

/* CHAPTER-END QUIZ BANNER */
.chapter-quiz-wrap{background:linear-gradient(135deg,var(--s2),var(--s1));border:2px solid var(--acc);border-radius:20px;padding:28px;margin-top:32px;animation:qIn .4s ease}
.cq-title{font-family:'Lora',serif;font-size:1.4rem;margin-bottom:6px;color:var(--acc)}
.cq-sub{color:var(--muted);font-size:.88rem;margin-bottom:20px}
.cq-prog-bar{height:6px;background:var(--border);border-radius:3px;margin-bottom:18px;overflow:hidden}
.cq-prog-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--grn));border-radius:3px;transition:width .4s}
.cq-stats{display:flex;gap:20px;margin-bottom:18px}
.cq-stat{text-align:center}
.cq-stat-v{font-size:1.3rem;font-weight:800;font-family:'Lora',serif}
.cq-stat-l{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* MATCH 6-AT-A-TIME — pairs fade out when matched */
.match-pairs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.match-col{display:flex;flex-direction:column;gap:6px}
.mi{padding:10px 12px;border-radius:8px;border:1.5px solid var(--border);cursor:pointer;transition:all .25s;font-size:.88rem;text-align:center;background:var(--bg);user-select:none;line-height:1.3;min-height:40px;display:flex;align-items:center;justify-content:center}
.mi:hover{border-color:var(--acc);background:rgba(245,166,35,.06)}
.mi.sel{border-color:var(--acc);background:rgba(245,166,35,.2);color:var(--acc);font-weight:700;transform:scale(1.03)}
.mi.paired-ok{border-color:var(--grn);background:rgba(62,207,142,.12);color:var(--grn);pointer-events:none;font-weight:600;animation:pairPop .3s ease}
.mi.paired-err{border-color:var(--red);background:rgba(255,90,90,.12);color:var(--red);animation:shake .35s ease}
.mi.fading{opacity:0;transform:scale(.85);transition:all .4s ease;pointer-events:none}
.mi.sliding-in{animation:slideInPair .35s ease}
.mi.mi-ghost{border-color:transparent;background:transparent;pointer-events:none;cursor:default}
@keyframes pairPop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes slideInPair{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.match-counter{font-size:.8rem;color:var(--muted);margin-bottom:10px;text-align:center}

/* VOCAB MCQ in vocab page */
.vmcq-card{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:14px;animation:qIn .3s ease}
.vmcq-word{font-family:'Lora',serif;font-size:1.8rem;color:var(--acc);text-align:center;margin:10px 0 4px}
.vmcq-sub{font-size:.78rem;color:var(--muted);text-align:center;margin-bottom:18px;font-style:italic}
.vmcq-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vmcq-opt{padding:12px 10px;border-radius:9px;border:1.5px solid var(--border);background:var(--bg);color:var(--txt);font-size:.88rem;font-family:'Nunito',sans-serif;cursor:pointer;transition:all .2s;text-align:center}
.vmcq-opt:hover:not(:disabled){border-color:var(--acc);background:rgba(245,166,35,.08)}
.vmcq-opt:disabled{cursor:default}
.vmcq-opt.v-correct{border-color:var(--grn)!important;background:rgba(62,207,142,.15)!important;color:var(--grn)!important;font-weight:700}
.vmcq-opt.v-wrong{border-color:var(--red)!important;background:rgba(255,90,90,.12)!important;color:var(--red)!important;font-weight:700}
.vmcq-prog{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.vmcq-pip{width:18px;height:5px;border-radius:3px;background:var(--border);transition:background .3s;flex-shrink:0}
.vmcq-pip.done-ok{background:var(--grn)}
.vmcq-pip.done-err{background:var(--red)}
.vmcq-pip.cur{background:var(--acc)}
.shake{animation:shake .35s ease}
@keyframes hpop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(.8);opacity:.25}}
.hpop{animation:hpop .45s ease forwards}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
@media(max-width:580px){.seg{padding:18px 14px;font-size:.97rem}.flip-btn{font-size:.72rem;padding:9px 0}.qcard{padding:18px 14px}.match-grid{grid-template-columns:1fr 1fr}}

/* ── Written Answer ──────────────────────────────── */
.write-input{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg);color:var(--txt);font-size:1rem;font-family:'Nunito',sans-serif;resize:vertical;box-sizing:border-box;margin:12px 0 6px}
.write-input:focus{outline:none;border-color:var(--acc)}
.write-input:disabled{opacity:.7}
.wa-others{margin-top:10px;padding:10px 12px;background:var(--s2);border-radius:8px;border:1px solid var(--border)}
.wa-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.wa-chip{display:inline-block;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:.82rem;margin:3px 4px 3px 0;color:var(--txt)}
.qq-hint{font-size:.82rem;color:var(--blu);background:rgba(74,158,255,.08);border-radius:7px;padding:6px 10px;margin-bottom:10px}

/* ── Gender Drums ────────────────────────────────── */
.gender-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;min-height:44px;padding:8px;background:var(--s2);border-radius:10px;border:1px solid var(--border)}
.gender-chip{padding:8px 16px;border-radius:20px;border:2px solid var(--acc);background:var(--bg);color:var(--acc);font-weight:700;cursor:grab;user-select:none;transition:all .2s;font-size:.92rem}
.gender-chip:hover{background:rgba(245,166,35,.1);transform:scale(1.05)}
.gender-chip.sel{background:var(--acc);color:#000;transform:scale(1.08)}
.gender-chip.placed{opacity:.35;cursor:default;border-style:dashed}
.gender-chip.correct-placed{border-color:var(--grn);color:var(--grn);opacity:1}
.gender-chip.wrong-placed{border-color:var(--red);color:var(--red);opacity:1}
.gender-drums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
@media(min-width:600px){.gender-drums{grid-template-columns:repeat(4,1fr)}}
.gender-drum{border:2px solid;border-radius:12px;overflow:hidden;min-height:100px;cursor:pointer;transition:all .2s}
.gender-drum.gdrum-hover{transform:scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.gdrum-header{padding:8px 0;text-align:center;font-size:1.2rem;font-weight:800;font-family:'Lora',serif}
.gdrum-sub{font-size:.68rem;color:var(--muted);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:.1em}
.gdrum-items{padding:6px;display:flex;flex-wrap:wrap;gap:4px;min-height:36px}
.gdrum-item{padding:3px 10px;border-radius:20px;background:var(--s2);border:1px solid var(--border);font-size:.8rem;cursor:pointer;transition:all .15s}
.gdrum-item:hover{border-color:var(--red);background:rgba(255,90,90,.08)}

/* ── Admin extras ────────────────────────────────── */
.dg-seg-preview{background:#f6f7f7;border-left:3px solid #0073aa;padding:8px 12px;margin:0 0 16px;font-size:13px;border-radius:0 4px 4px 0}
.dg-qtype-legend{background:#fff;border:1px solid #ddd;border-radius:4px;padding:12px 16px;margin-bottom:16px;font-size:13px;line-height:2}
.dg-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;text-transform:uppercase;margin:0 2px}
.dg-badge-match{background:#e5f5e5;color:#1a7f37}
.dg-badge-mcq{background:#fff3cd;color:#856404}
.dg-badge-fill{background:#e3f0fb;color:#0550ae}
.dg-badge-drag{background:#fde8e8;color:#b91c1c}
.dg-badge-write{background:#f3e8ff;color:#6b21a8}
.dg-badge-gender{background:#e0f2fe;color:#075985}