:root{--bg:#F5F1F3;--surface:#FFFFFF;--ink:#2A2330;--muted:#6F6470;--line:#E2DADF;--accent:#B6741F;--accent-btn:#9E6017;--accent-ink:#8A5512;--second:#5E4C7C;--second-soft:#EEE8F5;--ok:#3F7D5A;--warn:#A6402C;--tint:#F3EBDD;--rec:#C0392B}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;font-size:17px;line-height:1.7}
body{padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3{font-family:"Songti SC","Noto Serif SC",serif;line-height:1.3;margin:0}
h1{font-size:24px}h2{font-size:20px;margin:22px 0 10px}h3{font-size:17px;margin:14px 0 6px}
.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:10px}
.top .back{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;margin:-8px 0 -8px -8px}
.top .back{font-size:22px;color:var(--muted);text-decoration:none;padding:4px 8px 4px 0}
.top .title{font-family:"Songti SC","Noto Serif SC",serif;font-size:19px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrap{padding:16px;max-width:720px;margin:0 auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:10px 0}
.card.tint{background:var(--tint);border-color:#E6D5B5}
.muted{color:var(--muted);font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 20px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:17px;font-weight:600;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent-btn);border-color:var(--accent);color:#fff}
.btn.second{background:var(--second);border-color:var(--second);color:#fff}
.btn.ghost{background:transparent}
.btn.danger{background:var(--warn);border-color:var(--warn);color:#fff}
.btn.big{width:100%;min-height:58px;font-size:19px}
.btn:disabled{opacity:.5}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.btn{flex:1}
label{display:block;font-size:14px;color:var(--muted);margin:12px 0 4px}
input,textarea,select{width:100%;font-size:17px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-family:inherit}
textarea{min-height:80px}
.tag{display:inline-block;font-size:13px;padding:2px 10px;border-radius:12px;border:1px solid var(--line);color:var(--muted);margin:2px 4px 2px 0;background:var(--surface)}
.tag[data-v],.tag.pick{font-size:15px;padding:10px 16px;min-height:44px;line-height:22px;cursor:pointer}
.tag[data-v].on,.tag.pick.on{background:var(--accent-btn);color:#fff;border-color:var(--accent-btn)}
.tag.on{background:var(--second-soft);border-color:var(--second);color:var(--second)}
.tag.must{border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.tag.warn{border-color:var(--warn);color:var(--warn)}
.tag.ok{border-color:var(--ok);color:var(--ok)}
.q{padding:12px 0;border-bottom:1px dashed var(--line)}
.q .t{font-weight:600;font-size:18px}
.q .h{color:var(--muted);font-size:14px}
.q .fu{display:none;margin-top:8px;padding:8px 12px;background:var(--second-soft);border-radius:8px;font-size:15px}
.q.open .fu{display:block}
.q .fu div{padding:3px 0}
.q .fu b{color:var(--second);font-weight:600;margin-right:6px}
.grid9{display:grid;grid-template-columns:auto repeat(9,1fr);gap:3px;font-size:11px}
.grid9 .h{color:var(--muted);text-align:center;writing-mode:vertical-rl;line-height:1.1;padding:2px 0}
.grid9 .r{color:var(--muted);white-space:nowrap;padding-right:4px;font-size:12px;align-self:center}
.grid9 .c{aspect-ratio:1;border-radius:3px;background:var(--line)}
.grid9 .c.l1{background:#E6D5B5}.grid9 .c.l2{background:#D2A65A}.grid9 .c.l3{background:var(--accent)}
.rec-bar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.rec-dot{width:14px;height:14px;border-radius:50%;background:var(--line)}
.rec-dot.on{background:var(--rec);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.3}}
.timer{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;min-width:70px}
.timer.warn{color:var(--warn)}
.utt{padding:8px 0;border-bottom:1px solid var(--line);font-size:16px}
.utt .ts{font-size:12px;color:var(--muted);margin-right:6px}
.utt .spk{font-size:12px;color:var(--second);margin-right:6px}
.utt.edit textarea{margin-top:6px}
.cardbody{white-space:pre-wrap;font-family:"Songti SC","Noto Serif SC",serif;font-size:18px;line-height:1.9}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#333;color:#fff;padding:10px 18px;border-radius:20px;font-size:15px;z-index:99;opacity:0;transition:.2s}
.toast.on{opacity:1}
.hidden{display:none!important}
.center{text-align:center}
.pill{display:inline-block;padding:2px 10px;border-radius:10px;background:var(--second-soft);color:var(--second);font-size:13px}
.list a{display:block;text-decoration:none;color:inherit}
.photo{width:100%;border-radius:8px;display:block}
.sp{height:10px}

.bnav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--surface);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom));z-index:6}
.bnav a{flex:1;text-align:center;text-decoration:none;color:var(--muted);font-size:14px;padding:6px 0}
.bnav a.on{color:var(--accent-ink);font-weight:700}
body.has-bnav .wrap{padding-bottom:80px}