/* ===== QUIZ SETUP ===== */
.quiz-setup,.quiz-active{animation:panelIn .2s var(--ease)}.qs-section{margin-bottom:var(--s5)}
.qs-section-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:750;cursor:pointer;user-select:none}
.qs-section-title .dot{width:8px;height:8px;border-radius:50%}.qs-section-title .dot.h{background:var(--hira)}.qs-section-title .dot.k{background:var(--kata)}
.qs-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:5px}
.qs-chip{display:flex;align-items:center;gap:8px;min-height:42px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface);cursor:pointer;user-select:none;transition:all .12s var(--ease)}
.qs-chip:hover{border-color:var(--border2)}.qs-chip.sel{border-color:var(--hira);background:var(--hira-bg)}.qs-chip.sel.kata-chip{border-color:var(--kata);background:var(--kata-bg)}
.qs-chip .qs-chars{font-family:var(--font-jp);font-size:12px;font-weight:500}.qs-chip .qs-rm{margin-left:auto;color:var(--ink3);font-size:10px}.qs-chip input{position:absolute;opacity:0;pointer-events:none}
.qs-chip .check-ico{display:flex;align-items:center;justify-content:center;flex:0 0 15px;width:15px;height:15px;border:1px solid var(--border2);border-radius:2px;color:transparent;font-size:9px}
.qs-chip.sel .check-ico{border-color:var(--hira);background:var(--hira);color:#fff}.qs-chip.sel.kata-chip .check-ico{border-color:var(--kata);background:var(--kata)}
.qs-actions{display:flex;gap:5px;flex-wrap:wrap}.qs-action{min-height:32px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--r-s);background:transparent;color:var(--ink2);font-size:10px;font-weight:700;cursor:pointer}.qs-action:hover{border-color:var(--ink);color:var(--ink)}
.start-area{text-align:left;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border)}.start-btn{padding-inline:28px}.start-info{margin-top:var(--s3);color:var(--ink3);font-size:11px}

/* ===== SAVED SESSIONS ===== */
.saved-card{display:grid;grid-template-columns:minmax(160px,1fr) 140px auto;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--border)}
.saved-info{min-width:0}.saved-title{font-size:13px;font-weight:750}.saved-detail{margin-top:3px;color:var(--ink3);font-size:10px}.saved-progress{min-width:0}
.saved-pbar{height:6px;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-full);background:var(--bg3)}.saved-pbar-fill{height:100%;border-radius:var(--r-full);background:var(--hira)}.saved-pct{text-align:right;color:var(--ink3);font-size:10px;font-variant-numeric:tabular-nums}
.saved-actions{display:flex;gap:5px}.resume-btn{min-height:36px;padding:7px 13px;font-size:11px}.delete-btn{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--r-s);background:transparent;color:var(--bad);cursor:pointer}.delete-btn:hover{border-color:var(--bad);background:var(--bad-bg)}

/* ===== ACTIVE QUIZ ===== */
.qa-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}.qa-stage{color:var(--hira);font-size:12px;font-weight:750}.qa-exit{min-height:36px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--r-s);background:transparent;color:var(--ink2);font-size:11px;font-weight:650;cursor:pointer}.qa-exit:hover{border-color:var(--ink);color:var(--ink)}
.qa-progress{margin-bottom:var(--s3)}.qa-plabel{display:flex;justify-content:space-between;margin-bottom:5px;color:var(--ink3);font-size:10px;font-weight:650}.qa-bar-out{height:7px;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-full);background:var(--bg3)}.qa-bar-in{height:100%;border-radius:var(--r-full);background:var(--accent);transition:width .3s var(--ease)}
.qa-toast{display:none;margin-bottom:var(--s3);padding:10px 14px;border-radius:var(--r-s);background:var(--good);color:#fff;text-align:center;font-size:12px;font-weight:700;animation:slideD .2s var(--ease)}
@keyframes slideD{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qa-score{display:flex;gap:var(--s5);margin-bottom:var(--s4);color:var(--ink3);font-size:11px;font-weight:500}.qa-score b{color:var(--ink);font-weight:750}.qa-area{display:flex;flex-direction:column;align-items:center;gap:var(--s4);padding:var(--s4) 0}

/* ===== QUESTION ELEMENTS ===== */
.q-char,.q-romaji{padding:18px 48px;border:1px solid var(--ink);border-radius:var(--r-s);background:var(--bg2);box-shadow:var(--shadow-m);user-select:none}
.q-char{font-family:var(--font-jp);font-size:78px;line-height:1.2;cursor:pointer;transition:transform .2s var(--spring)}.q-char:hover{transform:scale(1.025)}
.q-romaji{color:var(--hira);font-size:36px;font-weight:800;letter-spacing:.02em}.q-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;width:100%;max-width:440px}
.q-opt{min-height:58px;padding:12px;border:1px solid var(--border2);border-radius:var(--r-s);background:var(--bg2);color:var(--ink);font-size:18px;font-weight:700;text-align:center;cursor:pointer;transition:all .12s var(--ease)}.q-opt:hover{border-color:var(--hira);background:var(--hira-bg)}
.q-opt.correct{border-color:var(--good);background:var(--good);color:#fff;animation:popIn .25s var(--ease)}.q-opt.wrong{border-color:var(--bad);background:var(--bad);color:#fff;animation:shake .32s ease}
@keyframes popIn{50%{transform:scale(1.025)}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.q-input{width:min(260px,100%);padding:11px 16px;border:1px solid var(--border2);border-radius:var(--r-s);outline:0;background:var(--bg2);color:var(--ink);font-size:20px;font-weight:600;text-align:center}.q-input:focus{border-color:var(--hira);box-shadow:0 0 0 3px var(--hira-glow)}.q-input.correct{border-color:var(--good)}.q-input.wrong{border-color:var(--bad)}
.speak-btn{width:52px;height:52px;border:1px solid var(--ink);border-radius:50%;background:var(--warn);color:#fff;font-size:21px;cursor:pointer}.speak-btn:hover{transform:scale(1.04)}.feedback{min-height:24px;font-size:13px;font-weight:700;text-align:center}.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}

/* ===== MATCHING, TIMER, STUDY ===== */
.match-area{display:flex;justify-content:center;gap:var(--s5);width:100%;flex-wrap:wrap}.match-col{display:flex;flex-direction:column;gap:7px;min-width:120px}
.mchip,.dropzone{min-height:52px;padding:11px;border-radius:var(--r-s);text-align:center;font-size:19px;font-weight:700}.mchip{border:1px solid var(--border);background:var(--bg2);cursor:grab;touch-action:none;user-select:none;font-family:var(--font-jp)}.mchip:hover{border-color:var(--ink)}.mchip.matched,.dropzone.matched{border-color:var(--good);background:var(--good);color:#fff;opacity:.75}
.dropzone{border:1px dashed var(--border2);background:var(--surface)}.dropzone.hover{border-color:var(--accent);background:var(--accent-bg)}.drag-ghost{position:fixed;z-index:999;padding:12px 18px;border-radius:var(--r-s);background:var(--accent);color:#fff;box-shadow:var(--shadow-l);font-family:var(--font-jp);font-size:20px;font-weight:700;pointer-events:none}
.timerbar{width:100%;max-width:440px;height:4px;overflow:hidden;border-radius:var(--r-full);background:var(--bg3)}.timerbar-fill{width:100%;height:100%;border-radius:var(--r-full);background:var(--accent);transition:width .1s linear}
.study-card{display:flex;flex-direction:column;align-items:center;width:100%;max-width:380px;padding:var(--s5);border:1px solid var(--ink);border-radius:var(--r-s);background:var(--bg2);box-shadow:var(--shadow-m);text-align:center}.study-word{margin-bottom:4px;font-family:var(--font-jp);font-size:44px;font-weight:700}.study-reading{margin-bottom:8px;color:var(--ink2);font-family:var(--font-jp);font-size:18px}.study-meaning{margin-bottom:var(--s4);color:var(--hira);font-size:16px;font-weight:700}.study-card .speak-btn{margin-bottom:8px}
.translation-source{margin-top:10px;color:var(--ink3);font-size:10px;text-align:center}

@media(max-width:600px){.qs-rows{grid-template-columns:1fr}.qs-chip{min-height:46px}.saved-card{grid-template-columns:1fr}.saved-progress{width:100%}.saved-actions{justify-content:flex-start}.q-opt{min-height:54px}.qa-score{gap:var(--s4)}}
