:root { --bg:#f7f7f5; --card:#fff; --text:#1d1d1f; --muted:#6b6b70; --accent:#d23f31; --primary:#1f6feb; --line:#e3e3e0; --warn-bg:#fff4e5; --warn:#a15c00; }
@media (prefers-color-scheme: dark) { :root { --bg:#141416; --card:#1f1f23; --text:#f2f2f2; --muted:#a0a0a8; --line:#33333a; --warn-bg:#3a2a12; --warn:#ffb54d; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
main { max-width:560px; margin:0 auto; padding:20px 16px 48px; }
h1 { font-size:22px; margin:8px 0 12px; }
h2 { font-size:16px; margin:0 0 8px; }
.lead { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:12px 0; }
ul { margin:0; padding-left:20px; }
label { display:block; margin:8px 0; }
select, input[type=text], input:not([type]) { display:block; width:100%; margin-top:4px; padding:10px; font-size:16px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--text); }
.consent { display:flex; gap:8px; align-items:flex-start; margin:16px 0; }
.consent input { margin-top:5px; }
button { font:inherit; padding:12px 18px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--text); cursor:pointer; }
button.primary { background:var(--primary); border-color:var(--primary); color:#fff; width:100%; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.link { background:none; border:none; color:var(--muted); text-decoration:underline; padding:8px; }
.top { display:flex; flex-direction:column; gap:6px; }
.bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; }
#progress-bar { height:100%; width:0; background:var(--primary); transition:width .2s; }
.prompt { text-align:center; padding:24px 16px; }
.group { color:var(--muted); font-size:14px; }
.hanzi { font-size:56px; line-height:1.3; margin:8px 0; word-break:keep-all; }
.pinyin { font-size:24px; color:var(--muted); }
.note { margin-top:14px; padding:10px 12px; border-radius:10px; background:var(--warn-bg); color:var(--warn); font-size:15px; text-align:left; }
.note:empty { display:none; }
.controls { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
button.record { background:var(--accent); border-color:var(--accent); color:#fff; font-size:18px; padding:16px; }
button.record.on { animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.65; } }
.timer { text-align:center; color:var(--muted); min-height:1.6em; }
audio { width:100%; }
.row { display:flex; gap:10px; }
.row button { flex:1; }
.row.small { justify-content:center; }
.row.small button { flex:0 0 auto; }
.status { color:var(--muted); font-size:14px; text-align:center; min-height:1.4em; }