:root{
  --bg:#f6f4ee;--ink:#2b2b2b;--muted:#6b6b6b;--gold:#b8860b;
  --red:#9e2b25;--green:#3a6b4f;--blue:#2f5d8a;--card:#fff;--line:#e3ddd0;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;}
.wrap{max-width:640px;margin:0 auto;padding:18px 16px 60px;}
header{text-align:center;padding:14px 8px 8px;}
header h1{font-size:26px;margin:0 0 4px;letter-spacing:1px;}
header .sub{color:var(--muted);font-size:13px;}
.modebar{margin-top:8px;font-size:12px;}
.modebar .badge{display:inline-block;padding:3px 10px;border-radius:20px;background:#eee;color:#666;}
.modebar .badge.warn{background:#fbeeed;color:var(--red);}
.modebar .badge.ok{background:#eef6f0;color:var(--green);}

.rec-area{text-align:center;padding:24px 0 10px;}
.rec-btn{width:150px;height:150px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 50% 40%,#c0392b,#9e2b25);color:#fff;
  box-shadow:0 8px 24px rgba(158,43,37,.35);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;margin:0 auto;transition:.2s;}
.rec-btn .mic{font-size:42px;}
.rec-btn .rec-label{font-size:14px;}
.rec-btn:active{transform:scale(.96);}
.rec-btn.recording{background:radial-gradient(circle at 50% 40%,#3a6b4f,#2c5640);animation:pulse 1.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,107,79,.5);}70%{box-shadow:0 0 0 22px rgba(58,107,79,0);}100%{box-shadow:0 0 0 0 rgba(58,107,79,0);}}
.rec-btn:disabled{opacity:.6;cursor:not-allowed;}
.rec-timer{font-size:28px;font-weight:700;margin-top:14px;font-variant-numeric:tabular-nums;min-height:34px;}
.rec-hint{color:var(--muted);font-size:13px;margin-top:4px;}

.flow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0;}
.flow-step{font-size:12px;padding:6px 12px;border-radius:20px;background:#fff;border:1px solid var(--line);color:#999;}
.flow-step.active{background:var(--gold);color:#fff;border-color:var(--gold);}
.flow-step.done{background:#eef6f0;color:var(--green);border-color:#cfe3d4;}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:16px 0;}
.panel h2{font-size:17px;margin:0 0 6px;border-left:4px solid var(--gold);padding-left:10px;}
.panel .tip{color:var(--muted);font-size:13px;margin:0 0 12px;}

.speaker-list{display:flex;flex-direction:column;gap:10px;}
.speaker-card{border:2px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fcfbf8;transition:.15s;}
.speaker-card:active{transform:scale(.99);}
.speaker-card .who{font-weight:700;margin-bottom:6px;}
.speaker-card .who .n{font-size:12px;color:var(--muted);font-weight:400;margin-left:6px;}
.speaker-card .samp{font-size:13px;color:#555;}
.speaker-card .samp div{margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 12px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;}
.stat .n{font-size:22px;font-weight:800;color:var(--red);line-height:1.1;}
.stat .l{font-size:11px;color:var(--muted);margin-top:2px;}

.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
select{font-size:14px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);}
.chip{font-size:13px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:#fff;cursor:pointer;}
.chip.on{background:var(--gold);color:#fff;border-color:var(--gold);}

.cards{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:560px){.cards{grid-template-columns:1fr 1fr;}}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;position:relative;}
.qcard .meta{font-size:12px;color:var(--muted);margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.badge{font-size:11px;color:#fff;padding:2px 9px;border-radius:20px;}
.qcard .q{font-size:16px;font-weight:700;margin:0 0 8px;padding-right:24px;}
.qcard .a{font-size:13px;color:#444;margin:4px 0;}
.qcard .a b{color:var(--green);}
.qcard .fu{font-size:13px;color:var(--blue);margin-top:6px;background:#eef3f8;border-radius:8px;padding:6px 10px;}
.qcard .star{position:absolute;top:12px;right:12px;font-size:20px;cursor:pointer;color:#d8cfba;}
.qcard .star.on{color:var(--gold);}
.qcard .del{position:absolute;bottom:10px;right:12px;font-size:12px;color:#c0392b;cursor:pointer;opacity:.6;}
.empty{text-align:center;color:var(--muted);padding:30px 0;}

.link-btn{background:none;border:none;color:var(--blue);font-size:13px;cursor:pointer;margin-top:8px;text-decoration:underline;}
.people-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.person{display:flex;align-items:center;gap:8px;background:#fcfbf8;border:1px solid var(--line);border-radius:10px;padding:8px 12px;}
.person .nm{font-weight:700;}
.person .rl{font-size:12px;color:#fff;padding:1px 8px;border-radius:20px;}
.person .rl.child{background:var(--green);}
.person .rl.parent{background:var(--blue);}
.person .rm{margin-left:auto;color:#c0392b;font-size:12px;cursor:pointer;}
.enroll-form{background:#fbf8f1;border:1px solid var(--line);border-radius:12px;padding:14px;}
.enroll-rec{display:flex;align-items:center;gap:10px;margin:10px 0;}
.en-timer{font-weight:700;font-variant-numeric:tabular-nums;}
#enRecBtn.recording{background:var(--green);color:#fff;}
.speaker-card.sel{border-color:var(--green);background:#eef6f0;}
.speaker-card .mt{font-size:12px;color:var(--blue);margin-top:4px;}
.hidden{display:none;}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#2b2b2b;color:#fff;
  padding:10px 18px;border-radius:24px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;max-width:90%;text-align:center;}
.toast.show{opacity:.94;}