*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#f4f3ef;
  --card:#ffffff;
  --ink:#191a1c;
  --ink2:#4a4d53;
  --muted:#8b8f97;
  --line:#e8e6e0;
  --line2:#f1efea;
  --accent:#3d4fd6;
  --accent2:#5a6bf0;
  --ok:#0f9b6c;
  --okbg:#e9f8f1;
  --bad:#d9463b;
  --badbg:#fdeceb;
  --r:18px;
  --shadow:0 1px 2px rgba(20,20,30,.04), 0 10px 28px rgba(20,20,30,.055);
  --ko:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Nanum Gothic",sans-serif;
}
html,body{min-height:100%}
body{
  margin:0;padding:34px 18px 60px;
  display:flex;justify-content:center;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(880px 480px at 8% -12%, #e7eaff 0%, rgba(231,234,255,0) 62%),
    radial-gradient(720px 420px at 98% -6%, #ffece5 0%, rgba(255,236,229,0) 58%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
.app{width:100%;max-width:720px}

/* ---------- 头部 ---------- */
.head{display:flex;align-items:center;gap:14px;margin:0 4px 20px}
.logo{
  width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,#3d4fd6,#6d5cf0 55%,#d9463b 130%);
  color:#fff;font-family:var(--ko);font-size:23px;font-weight:700;
  box-shadow:0 8px 20px rgba(61,79,214,.28);
}
.head h1{margin:0;font-size:19px;font-weight:700;letter-spacing:.01em}
.head p{margin:3px 0 0;font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.head .spacer{flex:1}
.user-box{display:flex;align-items:center;gap:10px}
.user-box .who{font-size:13px;color:var(--muted)}
.logout{
  appearance:none;border:1px solid var(--line);background:#fbfaf8;color:var(--ink2);
  padding:8px 14px;border-radius:11px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:.14s;
}
.logout:hover{background:#fff;border-color:#d6d3cb}

/* ---------- 通用 ---------- */
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow);
}
.hidden{display:none !important}
.group{margin-bottom:22px}
.group:last-of-type{margin-bottom:6px}
.group-label{
  font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.08em;
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  appearance:none;border:1px solid var(--line);background:#fbfaf8;color:var(--ink2);
  padding:11px 16px;border-radius:12px;font-size:14.5px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;line-height:1;font-family:inherit;
  transition:transform .14s, background .14s, border-color .14s, box-shadow .14s, color .14s;
}
.chip small{font-size:11.5px;opacity:.55;font-weight:600}
.chip:hover{border-color:#d6d3cb;background:#fff;transform:translateY(-1px)}
.chip[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 7px 18px rgba(61,79,214,.26);
}
.chip[aria-pressed="true"] small{opacity:.8}

.switch{
  display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink2);
  cursor:pointer;user-select:none;margin-top:4px;
}
.switch input{
  appearance:none;width:38px;height:22px;border-radius:99px;background:#dedbd3;
  position:relative;transition:background .18s;cursor:pointer;flex:none;
}
.switch input::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s;
}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(16px)}

.btn-primary{
  width:100%;margin-top:22px;padding:16px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#5a5fe0);color:#fff;
  font-size:16px;font-weight:600;letter-spacing:.04em;font-family:inherit;
  box-shadow:0 10px 24px rgba(61,79,214,.28);
  transition:transform .14s, box-shadow .14s, filter .14s;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(61,79,214,.33)}
.btn-primary:active{transform:translateY(0) scale(.995)}
.btn-primary:disabled{filter:grayscale(.35);opacity:.6;cursor:default;transform:none}
.btn-ghost{
  padding:15px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;
  color:var(--ink2);font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:.14s;
}
.btn-ghost:hover{background:#fbfaf8;border-color:#d6d3cb}
.error-text{color:var(--bad);font-size:13px;margin-top:12px;min-height:16px;font-weight:500}

/* ---------- 登录 ---------- */
.auth-wrap{max-width:400px;margin:40px auto 0}
.auth-wrap .panel{padding:34px 30px}
.auth-title{font-size:20px;font-weight:700;margin:0 0 6px}
.auth-sub{font-size:13px;color:var(--muted);margin:0 0 22px;line-height:1.6}
.auth-input{
  width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:14px;
  font-size:16px;font-family:inherit;background:#fbfaf8;color:var(--ink);outline:none;
  transition:border-color .14s, background .14s, box-shadow .14s;
}
.auth-input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(61,79,214,.12)}
.auth-foot{margin-top:18px;text-align:center;font-size:12px;color:var(--muted)}
.auth-foot button{
  border:0;background:none;color:var(--accent);font-size:12px;cursor:pointer;font-family:inherit;
  padding:4px;text-decoration:underline;
}
.otp-row{display:flex;gap:10px}
.otp-row .auth-input{flex:1}
.otp-row .send-btn{
  flex:none;padding:0 18px;border:1px solid var(--accent);border-radius:14px;background:#f1f3fe;
  color:var(--accent);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.14s;
}
.otp-row .send-btn:disabled{opacity:.5;cursor:default}

/* ---------- 仪表盘 ---------- */
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.stat-cards .stat{background:#fbfaf8;border:1px solid var(--line2);border-radius:14px;padding:15px 16px}
.stat .k{font-size:12px;color:var(--muted);margin-bottom:7px;letter-spacing:.03em}
.stat .v{font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .v em{font-size:13px;font-weight:600;font-style:normal;color:var(--muted);margin:0 2px}
.stat.accent{background:#f3f5fe;border-color:#e3e7fb}
.stat.accent .v{color:var(--accent)}
.stat.good .v{color:var(--ok)}

.mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mod-card{
  text-align:left;border:1px solid var(--line);border-radius:16px;background:#fff;
  padding:20px;cursor:pointer;font-family:inherit;transition:transform .14s, box-shadow .14s, border-color .14s;
}
.mod-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#d6d3cb}
.mod-card .ic{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px;
  font-family:var(--ko);font-size:19px;font-weight:700;color:#fff;
}
.mod-card h3{margin:0 0 5px;font-size:15.5px;font-weight:700}
.mod-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55}
.mod-card .stat-line{margin-top:10px;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.mod-card .stat-line b{color:var(--accent)}
.mod-card .ic.c-letter{background:linear-gradient(135deg,#3d4fd6,#5a6bf0)}
.mod-card .ic.c-sound{background:linear-gradient(135deg,#d9463b,#e8754a)}
.mod-card .ic.c-vocab{background:linear-gradient(135deg,#0f9b6c,#2ab98a)}
.mod-card .ic.c-grammar{background:linear-gradient(135deg,#b05ce0,#8d4fd6)}

.milestone{
  margin-top:20px;padding:13px 16px;border-radius:12px;background:#fbfaf8;
  border:1px dashed var(--line);font-size:12.5px;color:var(--muted);line-height:1.7;
}
.milestone b{color:var(--ink2);font-weight:600}
.milestone .done{color:var(--ok);font-weight:600}

.sec-title{font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.05em;margin:24px 0 10px}
.rec-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto;padding-right:2px}
.rec-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  background:#fff;border:1px solid var(--line2);font-size:13px;
}
.rec-row .tag{
  flex:none;font-size:11px;font-weight:700;padding:4px 9px;border-radius:99px;letter-spacing:.03em;
}
.tag.c-letter{background:#eef1fe;color:#3d4fd6}
.tag.c-sound{background:#fdeeed;color:#c23a30}
.tag.c-vocab{background:#e9f8f1;color:#0b6b4b}
.tag.c-grammar{background:#f5edfb;color:#8d4fd6}
.rec-row .mid{flex:1;min-width:0;color:var(--ink2)}
.rec-row .t{font-size:11.5px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.rec-row .acc{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.rec-row .acc.good{color:var(--ok)}
.rec-row .acc.mid{color:#e39a34}
.rec-row .acc.bad{color:var(--bad)}
.empty-tip{padding:18px;border-radius:12px;background:#fbfaf8;border:1px dashed var(--line);text-align:center;font-size:13px;color:var(--muted)}

/* ---------- 答题区 ---------- */
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.metas{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:99px;
  background:#fbfaf8;border:1px solid var(--line2);font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.pill b{color:var(--ink);font-weight:700;font-size:14px}
.pill.good b{color:var(--ok)}
.pill .esc{margin-left:2px;font-size:11px;opacity:.7}

.ring{position:relative;width:74px;height:74px;flex:none}
.ring svg{width:74px;height:74px;transform:rotate(-90deg);display:block}
.ring circle{fill:none;stroke-width:6.5;stroke-linecap:round}
.ring .bg{stroke:var(--line2)}
.ring .fg{stroke:var(--accent);transition:stroke .25s}
.ring.warn .fg{stroke:#e39a34}
.ring.danger .fg{stroke:var(--bad)}
.ring-label{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.ring.danger .ring-label{color:var(--bad)}

.progress{height:4px;border-radius:99px;background:var(--line2);margin:18px 0 0;overflow:hidden}
.progress i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),#7c6bf0);
  transition:width .32s cubic-bezier(.4,0,.2,1);
}

.stage{
  min-height:196px;padding:22px 0 6px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.stage-hint{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;
  color:#4352c8;background:#f1f3fe;border:1px solid #e2e6fb;
  padding:4px 11px;border-radius:99px;line-height:1.5;
}
.prompt{
  font-family:var(--ko);font-size:88px;line-height:1.15;font-weight:600;
  letter-spacing:.01em;color:var(--ink);
  transition:color .2s, transform .2s;
}
.prompt.text{font-size:44px;font-weight:700;letter-spacing:.04em;line-height:1.35}
.prompt.text-sm{font-size:34px;font-weight:700;letter-spacing:.03em;line-height:1.4}
.prompt.good{color:var(--ok)}
.prompt.bad{color:var(--bad);animation:shake .34s ease}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-7px)}
  52%{transform:translateX(6px)}
  78%{transform:translateX(-3px)}
}
.stage-zh{font-size:13px;color:var(--muted);letter-spacing:.03em}

.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{
  position:relative;padding:22px 26px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  font-family:inherit;font-size:18px;font-weight:600;line-height:1.35;text-align:center;
  display:flex;align-items:center;justify-content:center;min-height:66px;
  transition:transform .13s, border-color .13s, box-shadow .13s, background .13s, color .13s;
}
.opt .ko{font-family:var(--ko);font-size:26px;font-weight:600}
.opt .key{
  position:absolute;left:11px;top:9px;font-size:11px;font-weight:700;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.75;
}
.opt:hover:not(:disabled){border-color:#cbc7bd;transform:translateY(-2px);box-shadow:0 12px 22px rgba(20,20,30,.07)}
.opt:disabled{cursor:default}
.opt.ok{background:var(--okbg);border-color:var(--ok);color:#0b6b4b}
.opt.ok .key{color:#0b6b4b;opacity:.6}
.opt.bad{background:var(--badbg);border-color:var(--bad);color:#a32a22}
.opt.bad .key{color:#a32a22;opacity:.6}
.opt.dim{opacity:.5}

/* ---------- 暂停 ---------- */
#view-quiz{position:relative}
.pill-btn{
  font-family:inherit;cursor:pointer;background:#fbfaf8;color:var(--ink2);
  transition:background .14s, color .14s, border-color .14s;
}
.pill-btn:hover{background:#f1f0eb;color:var(--ink);border-color:#dcd9d1}
.pill-btn:active{transform:scale(.98)}
.pause-mask{
  position:absolute;inset:0;z-index:6;border-radius:var(--r);
  background:rgba(250,249,246,.78);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pause-card{text-align:center;padding:10px 16px;animation:popIn .2s cubic-bezier(.2,.8,.3,1)}
@keyframes popIn{from{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}}
.pause-icon{color:var(--ink2);opacity:.85;margin-bottom:12px;line-height:0}
.pause-title{font-size:17px;font-weight:700;letter-spacing:.04em}
.pause-sub{font-size:12.5px;color:var(--muted);margin-top:7px;letter-spacing:.02em}
.pause-card .btn-primary{
  width:auto;margin:18px auto 0;padding:12px 30px;font-size:15px;
  box-shadow:0 8px 18px rgba(61,79,214,.24);
}

.hint{
  margin-top:18px;text-align:center;font-size:12px;color:var(--muted);letter-spacing:.03em;
}
kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  padding:2px 5px;border-radius:5px;border:1px solid var(--line);background:#fbfaf8;color:var(--ink2);
}

/* ---------- 结果 ---------- */
.result-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.result-head h2{margin:0;font-size:18px;font-weight:700}
.badge{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:4px 9px;border-radius:99px;
  background:linear-gradient(135deg,#f7b32b,#e8543f);color:#fff;
  box-shadow:0 4px 12px rgba(232,84,63,.3);
}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat .v .saved{font-size:12px;color:var(--ok);font-weight:600;margin-left:6px}
.stat .v .saved.off{color:var(--muted)}

.best{
  margin-top:14px;padding:11px 14px;border-radius:12px;background:#fbfaf8;
  border:1px dashed var(--line);font-size:12.5px;color:var(--muted);line-height:1.6;
}
.best b{color:var(--ink2);font-weight:600}

.review{margin-top:24px}
.list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto;padding-right:2px}
.row{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;
  background:#fff;border:1px solid var(--line2);font-size:13.5px;
}
.row .ch{font-family:var(--ko);font-size:22px;font-weight:600;max-width:150px;text-align:center;flex:none;word-break:break-all;line-height:1.3}
.row .mid{flex:1;min-width:0;color:var(--ink2);line-height:1.5}
.row .mid span{color:var(--muted)}
.row .ans{font-weight:700;color:var(--ok)}
.row .ans.ko{font-family:var(--ko);font-size:18px;line-height:1.3;word-break:break-all}
.row .mine{color:var(--bad);font-weight:600}
.row .t{
  font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.row .spk{
  border:0;background:#f4f3ef;color:var(--ink2);width:28px;height:28px;border-radius:9px;
  cursor:pointer;font-size:13px;flex:none;display:grid;place-items:center;
}
.row .spk:hover{background:#ecebe5}
.allright{
  padding:16px;border-radius:12px;background:var(--okbg);border:1px solid #cbebdd;
  color:#0b6b4b;font-size:13.5px;text-align:center;font-weight:600;
}
.actions{display:flex;gap:10px;margin-top:22px}
.actions .btn-primary{margin-top:0;flex:1}

/* ---------- 模块设置返回 ---------- */
.back-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.back-btn{
  appearance:none;border:1px solid var(--line);background:#fbfaf8;color:var(--ink2);
  padding:9px 16px;border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:.14s;display:inline-flex;align-items:center;gap:6px;
}
.back-btn:hover{background:#fff;border-color:#d6d3cb}

@media (max-width:560px){
  body{padding:22px 14px 48px}
  .panel{padding:20px}
  .prompt{font-size:64px}
  .prompt.text{font-size:34px}
  .prompt.text-sm{font-size:27px}
  .opt{font-size:15px;padding:16px 20px;min-height:58px}
  .opt .ko{font-size:22px}
  .stat .v{font-size:20px}
  .stat-cards{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .mod-grid{grid-template-columns:1fr}
  .auth-wrap{margin-top:16px}
}