/* vocab/app.css — 四級／六級詞彙練習（沿用學習練習站的淺色卡片風格） */
:root{
  --bg:#f4f6fb; --card:#ffffff; --line:#dce3ef; --fg:#16223a; --muted:#5d6b86;
  --accent:#1f6feb; --accent-soft:#e8f0ff; --ok:#0f8f63; --bad:#c62828; --warn:#b25f00;
  --shadow:0 4px 16px rgba(22,34,58,.08); --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1522; --card:#151f31; --line:#25334c; --fg:#e8eefc; --muted:#9db0cc;
    --accent:#5aa9ff; --accent-soft:#17263d; --ok:#3fcf9b; --bad:#ff7b7b; --warn:#ffb454;
    --shadow:0 4px 18px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
body{
  margin:0; padding:14px 14px 48px; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;
  line-height:1.6; -webkit-text-size-adjust:100%;
}
.wrap{max-width:760px;margin:0 auto}
.warn{background:#fff3cd;color:#7a5a00;border:1px solid #ffe08a;padding:10px 12px;border-radius:10px}

/* ---------- 頂欄 ---------- */
.top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.top h1{font-size:1.15rem;margin:0;flex:1 1 auto}
.top .nav{font-size:.86rem;color:var(--muted)}
.top .nav a{color:var(--accent);text-decoration:none;margin-right:8px}
.btn{
  border:1px solid var(--line); background:var(--card); color:var(--fg);
  border-radius:10px; padding:8px 14px; font-size:.92rem; cursor:pointer; font-family:inherit;
  transition:background .15s,border-color .15s,transform .1s;
}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;cursor:default}
.mini{font-size:.8rem;padding:4px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--accent);cursor:pointer}

/* ---------- 考試切換 ---------- */
.exam-bar{display:flex;gap:8px;margin-bottom:14px}
.exam-bar button{
  flex:1;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  color:var(--fg);font-size:.95rem;cursor:pointer;font-family:inherit;
}
.exam-bar button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700}

/* ---------- 今日目標 ---------- */
.today{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-bottom:14px;
}
.ring-wrap{position:relative;width:76px;height:76px;flex:0 0 auto}
.ring{width:76px;height:76px;display:block}
.ring-bg{fill:none;stroke:var(--line);stroke-width:10}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .45s ease}
.ring-wrap.done .ring-fg{stroke:var(--ok)}
.ring-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.today-info{flex:1 1 180px;min-width:0}
.today-title{font-weight:700}
.today-hint{font-size:.82rem;color:var(--muted)}
.cal-row{display:flex;gap:4px;flex:1 1 100%;margin-top:6px;flex-wrap:wrap}
.cal{width:18px;height:18px;border-radius:4px;background:rgba(120,140,170,.16);display:inline-block}
.cal.lv1{background:rgba(31,111,235,.3)} .cal.lv2{background:rgba(31,111,235,.5)}
.cal.lv3{background:rgba(31,111,235,.72)} .cal.lv4{background:var(--ok)}
.cal.today{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- 模式卡 ---------- */
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.mode{
  text-align:left;padding:14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);
  cursor:pointer;font-family:inherit;color:var(--fg);box-shadow:var(--shadow);transition:transform .12s,border-color .12s;
}
.mode:hover{transform:translateY(-2px);border-color:var(--accent)}
.mode b{display:block;font-size:1rem;margin-bottom:2px}
.mode span{font-size:.8rem;color:var(--muted)}

/* ---------- 統計 ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.stats .cell .k{font-size:.75rem;color:var(--muted)}
.stats .cell .v{font-size:1.15rem;font-weight:800}
.stats .bar{grid-column:1/-1;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.stats .bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.stats .hint{grid-column:1/-1;font-size:.78rem;color:var(--muted)}

/* ---------- 作答 ---------- */
.qwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.qhead{display:flex;justify-content:space-between;font-size:.84rem;color:var(--muted);margin-bottom:8px}
.qbar{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:16px}
.qbar i{display:block;height:100%;background:var(--accent)}
.word{font-size:2rem;font-weight:800;letter-spacing:.01em;word-break:break-word}
.ph{color:var(--muted);font-size:.95rem;margin-bottom:10px}
.mean{font-size:1.02rem;line-height:1.75}
.mean-q{font-size:1.02rem;line-height:1.75;margin-bottom:8px}
.flip-hint{font-size:.8rem;color:var(--muted);margin-top:10px}
.card-mean{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.opts{display:grid;gap:10px;margin-top:14px}
.opt{
  display:flex;gap:10px;align-items:flex-start;text-align:left;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;font-family:inherit;font-size:.95rem;
}
.opt b{color:var(--accent);flex:0 0 auto}
.opt:hover{border-color:var(--accent)}
.opt.right{border-color:var(--ok);background:rgba(15,143,99,.08)}
.opt.wrong{border-color:var(--bad);background:rgba(198,40,40,.07)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.spell{flex:1 1 220px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg);color:var(--fg);font-size:1.05rem;font-family:ui-monospace,Consolas,monospace}
.spell:focus{outline:2px solid var(--accent);outline-offset:1px}
.feedback{margin-top:14px;font-size:.92rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.feedback.ok{color:var(--ok)}
.feedback.bad{color:var(--bad)}
.btn.next{margin-left:auto}

/* ---------- 結算 ---------- */
.end-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 18px;
  text-align:center;box-shadow:var(--shadow)}
.big{font-size:2.6rem;font-weight:800;line-height:1.1}
.big.good{color:var(--ok)} .big.mid{color:var(--warn)} .big.low{color:var(--bad)}
.end-line{color:var(--muted);margin:8px 0}
.end-wrap .row{justify-content:center}

/* ---------- 頁腳 ---------- */
.foot{margin-top:22px;font-size:.78rem;color:var(--muted);text-align:center}
.foot a{color:var(--accent);text-decoration:none}
@media (max-width:420px){
  .word{font-size:1.65rem}
  .modes{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}