/* 英文練習台 — 共用外觀（沿用儀表板的配色，兩邊看起來像同一套系統） */
:root{
  --bg:#f5f3ee;--panel:#fffefb;--ink:#25231f;--soft:#6d675e;--line:#e2ddd2;
  --accent:#1f6f5c;--warn:#b5651d;--bad:#b23b3b;--good:#2e7d4f;--mute:#9a948a;
  --radius:14px;--shadow:0 1px 2px rgba(37,35,31,.06),0 6px 18px rgba(37,35,31,.07);
  --sans:"PingFang TC","Noto Sans TC","Hiragino Sans",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
:root[data-theme="dark"]{--bg:#1a1917;--panel:#232220;--ink:#ece7de;--soft:#a49d92;
  --line:#37342e;--accent:#5cbfa0;--warn:#e0a05a;--bad:#e07a72;--good:#68c48d;--mute:#7d776e;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.35);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1a1917;--panel:#232220;
  --ink:#ece7de;--soft:#a49d92;--line:#37342e;--accent:#5cbfa0;--warn:#e0a05a;--bad:#e07a72;
  --good:#68c48d;--mute:#7d776e;--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.35);}}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;padding:16px;
  -webkit-text-size-adjust:100%}
.wrap{max-width:860px;margin:0 auto}
a{color:var(--accent)}
header{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;margin-bottom:6px}
h1{font-size:1.3rem}
h2{font-size:1.02rem;margin-bottom:10px}
.sub{color:var(--soft);font-size:.82rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.nav{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.nav a{display:inline-block;padding:5px 13px;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;color:var(--soft);font-size:.82rem;background:var(--panel)}
.nav a.on{color:var(--accent);border-color:var(--accent);font-weight:600}
.tag{display:inline-block;font-size:.72rem;padding:1px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--soft);white-space:nowrap}
.tag.bad{color:var(--bad);border-color:var(--bad)}
.tag.warn{color:var(--warn);border-color:var(--warn)}
.tag.good{color:var(--good);border-color:var(--good)}
.tag.acc{color:var(--accent);border-color:var(--accent)}
button{font-family:inherit;font-size:.9rem;padding:9px 18px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.rec{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:600}
button:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat .k{font-size:.74rem;color:var(--soft)}
.stat .v{font-size:1.45rem;font-weight:650;line-height:1.25}
.stat .n{font-size:.75rem;color:var(--soft)}
.muted{color:var(--mute)}
.note{font-size:.79rem;color:var(--soft);margin-top:8px;padding-left:10px;border-left:2px solid var(--line)}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.86rem}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.74rem;color:var(--soft);font-weight:600;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:7px;border-radius:999px;background:var(--line);overflow:hidden;min-width:52px}
.bar>i{display:block;height:100%;background:var(--bad)}

/* 練習步驟卡 */
.step{display:flex;gap:14px;align-items:flex-start;padding:15px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);margin-bottom:11px;box-shadow:var(--shadow);
  text-decoration:none;color:inherit}
.step:hover{border-color:var(--accent)}
.step.off{opacity:.5;pointer-events:none}
.step .no{flex:0 0 34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}
.step.off .no{background:var(--mute)}
.step .t{font-weight:650;margin-bottom:2px}
.step .d{font-size:.83rem;color:var(--soft)}

/* 逐句跟讀 */
.sent{padding:11px 13px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;
  background:var(--panel)}
.sent.cur{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.sent.done{opacity:.92}
.sent .hd{display:flex;gap:9px;align-items:baseline;justify-content:space-between;margin-bottom:5px}
.sent .n{font-size:.74rem;color:var(--mute);font-variant-numeric:tabular-nums}
.sent .en{font-size:1rem;line-height:1.7}
.sent .en b{font-weight:400}
.sent .en .miss{color:var(--bad);font-weight:700;text-decoration:underline wavy var(--bad) 1px}
.sent .heard{font-size:.8rem;color:var(--soft);margin-top:5px;font-family:var(--mono)}
.big{font-size:1.35rem;line-height:1.75;padding:18px 0}
.big .miss{color:var(--bad);font-weight:700;text-decoration:underline wavy var(--bad) 1px}
.prog{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin:10px 0}
.prog>i{display:block;height:100%;background:var(--accent);transition:width .25s}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bad);
  margin-right:6px;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.banner{border:1px solid var(--warn);color:var(--warn);border-radius:10px;padding:9px 13px;
  font-size:.83rem;margin-bottom:12px}
.banner.bad{border-color:var(--bad);color:var(--bad)}
footer{color:var(--soft);font-size:.76rem;text-align:center;margin:22px 0 8px;line-height:1.9}
@media (max-width:560px){body{padding:10px}h1{font-size:1.14rem}.big{font-size:1.15rem}}