:root {
  --bg:#f4f6fa; --panel:#fff; --ink:#16212f; --ink2:#5d6b7e; --ink3:#93a0b1;
  --line:#e3e8f0; --brand:#1f6feb; --brand2:#0d4fc4; --ok:#12805c; --warn:#b7791f;
  --err:#c0392b; --purple:#6b46c1; --radius:10px;
}
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body {
  background:var(--bg); color:var(--ink);
  font:14px/1.6 "Microsoft YaHei","PingFang SC",-apple-system,Arial,sans-serif;
}
.app { display:grid; grid-template-columns:232px 1fr; height:100vh; overflow:hidden; }

/* ---------------- 渚ф爮 ---------------- */
.sidebar { background:#10203a; color:#c8d4e6; display:flex; flex-direction:column; padding:16px 12px; gap:16px; }
.brand { display:flex; gap:10px; align-items:center; padding:4px 6px; }
.logo { width:38px; height:38px; flex:0 0 38px; border-radius:10px;
  background:linear-gradient(135deg,#1f6feb,#58a6ff); display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:18px; }
.brand h1 { font-size:15px; margin:0; color:#fff; }
.brand .sub { margin:1px 0 0; font-size:11px; color:#7f90a8; }
#nav { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; }
#nav a { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px;
  color:#b6c4d8; cursor:pointer; font-size:13.5px; text-decoration:none; transition:.15s; }
#nav a i { font-style:normal; width:16px; text-align:center; opacity:.8; }
#nav a:hover { background:#1b3050; color:#fff; }
#nav a.active { background:var(--brand); color:#fff; font-weight:600; }
.sidebar-foot { display:flex; flex-direction:column; gap:8px; }
.io { font-size:11px; color:#7f90a8; line-height:1.5; word-break:break-all; }
.io b { color:#c8d4e6; display:block; font-size:12px; }
.sidebar button.ghost, .sidebar a.ghost { background:#1b3050; border-color:#24405f; color:#b6c4d8;
  text-align:center; font-size:12.5px; text-decoration:none; padding:7px 10px; border-radius:8px;
  border:1px solid #24405f; cursor:pointer; }
.sidebar button.ghost:hover, .sidebar a.ghost:hover { background:#24405f; color:#fff; }
.sidebar button.danger:hover { background:#5a2020; border-color:#7a2a2a; color:#ffb4b4; }

/* ---------------- 涓诲尯 ---------------- */
.main { display:flex; flex-direction:column; min-width:0; height:100vh; }
.topbar { height:56px; flex:0 0 56px; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.topbar h2 { font-size:16px; margin:0; }
.user-box { display:flex; align-items:center; gap:9px; font-size:13px; }
.role-tag { font-size:11px; padding:2px 8px; border-radius:20px; border:1px solid var(--line); background:#f2f4f7; color:var(--ink2); }
.role-tag.role-admin { background:#e8f1ff; color:#14539e; border-color:#cfe2ff; }
.role-tag.role-reviewer { background:#f0eaff; color:var(--purple); border-color:#ddd0f7; }
.role-tag.role-trainee { background:#e6f7f0; color:var(--ok); border-color:#c3ebdb; }
.view { flex:1 1 auto; overflow-y:auto; padding:18px 20px 40px; }

/* ---------------- 閫氱敤鎺т欢 ---------------- */
button, .btn { font:inherit; cursor:pointer; border-radius:8px; border:1px solid var(--line);
  background:#fff; color:var(--ink); padding:7px 13px; font-size:13px; transition:.15s;
  text-decoration:none; display:inline-block; }
button:hover, .btn:hover { border-color:var(--brand); color:var(--brand); }
button.primary, .btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
button.primary:hover, .btn-primary:hover { background:var(--brand2); color:#fff; }
button.danger:hover { border-color:var(--err); color:var(--err); }
button:disabled { opacity:.5; cursor:not-allowed; }
.btn-block { width:100%; padding:12px; font-size:15px; font-weight:600; }
input, select, textarea { font:inherit; border:1px solid var(--line); border-radius:8px;
  padding:7px 10px; background:#fff; color:var(--ink); font-size:13px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); }

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:16px; }
.card > h3 { margin:0 0 12px; font-size:14px; display:flex; align-items:center; gap:8px; }
.card > h3 small { font-weight:400; color:var(--ink3); font-size:12px; }
.grid { display:grid; gap:14px; }
.grid.c2 { grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.grid.c3 { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grid.c4 { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }

.kpi { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.kpi .label { font-size:12px; color:var(--ink2); display:flex; justify-content:space-between; }
.kpi .value { font-size:26px; font-weight:700; margin-top:4px; letter-spacing:-.02em; }
.kpi .hint { font-size:11.5px; color:var(--ink3); margin-top:2px; }
.kpi.accent { border-left:3px solid var(--brand); }
.kpi.ok { border-left:3px solid var(--ok); }
.kpi.warn { border-left:3px solid var(--warn); }
.kpi.err { border-left:3px solid var(--err); }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#f8fafc; color:var(--ink2); font-weight:600; font-size:12px; white-space:nowrap; }
tbody tr:hover { background:#f9fbfe; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.stem-cell { max-width:460px; }
.stem-cell .s { color:var(--ink); }
.stem-cell .m { color:var(--ink3); font-size:11.5px; margin-top:2px; }

.tag { display:inline-block; padding:1px 7px; border-radius:20px; font-size:11px;
  background:#eef2f7; color:var(--ink2); border:1px solid var(--line); white-space:nowrap; }
.tag.blue { background:#e8f1ff; color:#14539e; border-color:#cfe2ff; }
.tag.green { background:#e6f7f0; color:var(--ok); border-color:#c3ebdb; }
.tag.amber { background:#fdf5e4; color:var(--warn); border-color:#f6e3b8; }
.tag.red { background:#fdecea; color:var(--err); border-color:#f7cfc9; }
.tag.purple { background:#f0eaff; color:var(--purple); border-color:#ddd0f7; }
.tag.gray { background:#f2f4f7; color:var(--ink3); }

.opt-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.opt-label { width:22px; height:22px; flex:0 0 22px; border-radius:6px; background:#eef2f7;
  display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--ink2); }
.opt-row.correct .opt-label { background:var(--ok); color:#fff; }
.opt-body { flex:1 1 auto; min-width:0; }
.opt-text { font-size:13px; margin-bottom:3px; }
.opt-bar { height:8px; background:#eef2f7; border-radius:20px; overflow:hidden; }
.opt-bar > i { display:block; height:100%; background:#9db8dd; border-radius:20px; }
.opt-row.correct .opt-bar > i { background:var(--ok); }
.opt-count { font-size:11.5px; color:var(--ink2); white-space:nowrap; font-variant-numeric:tabular-nums; }

.stars { color:#f0a020; letter-spacing:1px; font-size:13px; }
.stars .off { color:#d8dee7; }
.rate-picker { display:inline-flex; gap:4px; }
.rate-picker b { cursor:pointer; font-size:24px; color:#d8dee7; line-height:1; font-weight:400;
  transition:.12s; user-select:none; }
.rate-picker b:hover, .rate-picker b.on { color:#f0a020; }

.dist { display:flex; align-items:flex-end; gap:8px; height:120px; padding-top:8px; }
.dist .col { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:4px;
  height:100%; justify-content:flex-end; }
.dist .bar { width:100%; background:linear-gradient(180deg,#4a8ff0,#1f6feb); border-radius:5px 5px 0 0; min-height:2px; }
.dist .bar.g1 { background:linear-gradient(180deg,#e57373,#c0392b); }
.dist .bar.g2 { background:linear-gradient(180deg,#f0b357,#d68910); }
.dist .bar.g3 { background:linear-gradient(180deg,#7fb3e8,#4a8ff0); }
.dist .bar.g4 { background:linear-gradient(180deg,#63c9a0,#12805c); }
.dist .bar.g5 { background:linear-gradient(180deg,#3fb27f,#0e6b4d); }
.dist .cap { font-size:11px; color:var(--ink2); }
.dist .n { font-size:11px; color:var(--ink3); }

.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.filters input[type=text] { min-width:200px; }
.filters .spacer { flex:1 1 auto; }

.drawer { position:fixed; inset:0 0 0 auto; width:min(780px,94vw); background:var(--panel);
  z-index:40; box-shadow:-14px 0 44px rgba(16,32,58,.18); display:flex; flex-direction:column; }
.drawer.hidden { display:none; }
.drawer-head { display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line); }
.drawer-body { overflow-y:auto; padding:16px 18px 40px; }

.source-box { background:#fbfcfe; border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:8px; padding:12px 14px; font-size:12.5px; line-height:1.75; white-space:pre-wrap;
  max-height:320px; overflow-y:auto; color:#2c3e50; }
.source-head { font-size:11.5px; color:var(--ink3); margin-bottom:6px; }

.toast { position:fixed; left:50%; bottom:30px; transform:translateX(-50%); background:#16212f;
  color:#fff; padding:9px 18px; border-radius:22px; font-size:12.5px; z-index:60;
  box-shadow:0 10px 26px rgba(0,0,0,.22); }
.toast.hidden { display:none; }
.empty { color:var(--ink3); text-align:center; padding:34px; font-size:13px; }
.muted { color:var(--ink2); font-size:12.5px; }
.mono { font-family:Consolas,Monaco,monospace; font-size:12px; }

.q-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.q-stem { font-size:15px; line-height:1.75; margin:10px 0 16px; white-space:pre-wrap; }
.choice { display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border:1px solid var(--line);
  border-radius:9px; margin-bottom:8px; cursor:pointer; transition:.15s; background:#fff; }
.choice:hover { border-color:var(--brand); background:#f7fbff; }
.choice.sel { border-color:var(--brand); background:#eaf2ff; }
.choice.right { border-color:var(--ok); background:#e9f8f1; }
.choice.wrong { border-color:var(--err); background:#fdeeec; }
.choice .k { width:24px; height:24px; flex:0 0 24px; border-radius:6px; background:#eef2f7;
  display:grid; place-items:center; font-weight:600; font-size:12.5px; color:var(--ink2); }
.choice.sel .k { background:var(--brand); color:#fff; }
.choice.right .k { background:var(--ok); color:#fff; }
.choice.wrong .k { background:var(--err); color:#fff; }
.answer-box { margin-top:14px; padding:13px 15px; border-radius:9px; background:#f7fafc;
  border:1px solid var(--line); font-size:13px; line-height:1.75; white-space:pre-wrap; }
.answer-box.good { background:#e9f8f1; border-color:#bfe8d6; }
.answer-box.bad { background:#fdeeec; border-color:#f6d0ca; }
.progress-line { height:6px; background:#eef2f7; border-radius:20px; overflow:hidden; margin-top:10px; }
.progress-line > i { display:block; height:100%; background:var(--brand); transition:width .3s; }
.practice-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

@media (max-width:900px) { .app { grid-template-columns:1fr; } .sidebar { display:none; } }
.login-body { display:grid; place-items:center; min-height:100vh; margin:0;
  background:linear-gradient(135deg,#0f2743 0%,#1c4b7d 45%,#123255 100%); }
.login-wrap { width:min(460px,calc(100% - 32px)); padding:24px 0; }
.login-card { background:#fff; border-radius:18px; padding:30px 30px 24px;
  box-shadow:0 24px 60px rgba(6,20,40,.42); }
.login-brand { display:flex; gap:13px; align-items:center; margin-bottom:24px; }
.login-brand .logo { width:46px; height:46px; flex:0 0 46px; border-radius:13px; font-size:21px;
  background:linear-gradient(135deg,#1f6feb,#58a6ff); display:grid; place-items:center; color:#fff; font-weight:700; }
.login-brand h1 { margin:0; font-size:19px; }
.login-brand p { margin:2px 0 0; font-size:12.5px; color:var(--ink2); }
#loginForm label { display:block; font-size:12.5px; color:var(--ink2); margin-bottom:14px; }
#loginForm input { width:100%; margin-top:5px; padding:11px 13px; font-size:14px; }
.login-msg { min-height:20px; font-size:12.5px; margin-bottom:8px; color:var(--err); }
/* 登录页底部的一句话说明。
   原来这里是一张「演示账号」表格，把账号和密码直接印在登录页上 ——
   部署到公网后等于对所有人公开凭据，已删除。现在只留这句中性提示。
   （.login-hint/.hint-* 保留着，万一以后要放公告之类的内容还能用。） */
.login-foot { margin:18px 0 0; padding-top:14px; border-top:1px dashed var(--line);
  font-size:11.5px; color:var(--ink3); text-align:center; line-height:1.6; }
/* 免登录模式下登录页上的「直接开始练习」出口 */
.login-guest {
  display:block; margin:16px 0 0; padding:11px 12px;
  text-align:center; text-decoration:none;
  font-size:13.5px; font-weight:600; color:#0b6ba8;
  background:#eef7fd; border:1px solid #bfe0f3; border-radius:10px;
}
.login-guest:hover { background:#e3f2fb; border-color:#9ed2ee; }
.login-hint { margin-top:22px; padding-top:16px; border-top:1px dashed var(--line); }
.hint-title { font-size:12px; color:var(--ink2); margin-bottom:8px; }
.hint-table { width:100%; font-size:12px; }
.hint-table td { padding:4px 6px; border:0; color:var(--ink2); }
.hint-table code { background:#f2f5f9; padding:1px 6px; border-radius:5px; font-size:11.5px; color:#1f4e8c; }
.hint-note { font-size:11.5px; color:var(--ink3); margin:10px 0 0; line-height:1.6; }
.trainee-app { grid-template-columns:210px 1fr; }
.trainee-side { background:linear-gradient(180deg,#123a2e,#0e2a22); }
.trainee-side #nav a.active { background:#12805c; }
.trainee-side .logo { background:linear-gradient(135deg,#12a06a,#3fd39a); }
.trainee-side .sidebar button.ghost, .trainee-side a.ghost { background:#174133; border-color:#1e5343; color:#a8ccbd; }
.trainee-side .sidebar button.ghost:hover, .trainee-side a.ghost:hover { background:#1e5343; color:#fff; }
.trainee-side .io { color:#7ba892; }
.trainee-side .io b { color:#bfe0d1; }

.hero { background:linear-gradient(135deg,#12805c,#1f9e73); color:#fff; border-radius:14px;
  padding:22px 24px; margin-bottom:16px; }
.hero h3 { margin:0 0 6px; font-size:20px; }
.hero p { margin:0; opacity:.9; font-size:13px; }
.hero .hero-kpis { display:flex; gap:28px; margin-top:16px; flex-wrap:wrap; }
.hero .hero-kpis div b { display:block; font-size:24px; line-height:1.2; }
.hero .hero-kpis div span { font-size:12px; opacity:.85; }

.exam-card { border:1px solid var(--line); border-radius:12px; padding:16px; background:#fff;
  display:flex; flex-direction:column; gap:8px; }
.exam-card h4 { margin:0; font-size:15px; }
.exam-card .meta { font-size:12px; color:var(--ink2); display:flex; gap:14px; flex-wrap:wrap; }

.timer { font-variant-numeric:tabular-nums; font-weight:700; color:var(--err); font-size:15px; }
.result-big { font-size:52px; font-weight:700; letter-spacing:-.03em; }
.result-big.pass { color:var(--ok); }
.result-big.fail { color:var(--err); }

/* 璇煶杈撳叆鎺т欢 */
.voice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  min-height: 34px;
}

.voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: .16s;
  white-space: nowrap;
}
.voice-btn:hover { border-color: var(--brand); color: var(--brand); }
.voice-btn .voice-ico { font-size: 15px; line-height: 1; }

/* 褰曢煶涓細绾㈣壊鑴夊啿锛屾槑纭?姝ｅ湪閲囬泦" */
.voice-btn.on {
  background: #e5484d;
  border-color: #e5484d;
  color: #fff;
  box-shadow: 0 0 0 0 rgba(229, 72, 77, .55);
  animation: voicePulse 1.6s infinite;
}
.voice-btn.on:hover { background: #cf3c41; border-color: #cf3c41; color: #fff; }
@keyframes voicePulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 72, 77, .5); }
  70%  { box-shadow: 0 0 0 12px rgba(229, 72, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

.voice-status { font-size: 12.5px; color: var(--ink2); }
.voice-status.listening { color: #e5484d; font-weight: 600; font-variant-numeric: tabular-nums; }
.voice-status.err { color: var(--err); }

.voice-hint { font-size: 12px; color: var(--ink3); }

/* 闊抽噺寰嬪姩鏉★紙绾楗帮紝璁?鍦ㄥ惉"杩欎欢浜嬪彲鎰熺煡锛?*/
.voice-meter { display: none; align-items: flex-end; gap: 2px; height: 16px; }
.voice-bar[data-state="listening"] .voice-meter { display: inline-flex; }
.voice-meter i {
  width: 3px; background: #e5484d; border-radius: 2px; height: 5px;
  animation: voiceWave 900ms ease-in-out infinite;
}
.voice-meter i:nth-child(1) { animation-delay: 0ms; }
.voice-meter i:nth-child(2) { animation-delay: 120ms; }
.voice-meter i:nth-child(3) { animation-delay: 240ms; }
.voice-meter i:nth-child(4) { animation-delay: 360ms; }
.voice-meter i:nth-child(5) { animation-delay: 480ms; }
@keyframes voiceWave {
  0%, 100% { height: 5px; }
  50%      { height: 15px; }
}

/* 涓嶆敮鎸佽闊虫椂鐨勮鏄庢潯 */
.voice-unsupported {
  font-size: 12px; color: var(--ink3); background: #f7f9fc;
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 6px 10px; display: inline-block;
}

@media (max-width: 560px) {
  .voice-bar { gap: 7px; }
  .voice-hint { flex-basis: 100%; }
}

/* 场景可视化播放器 */
.sc-modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 20, 35, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.sc-modal.hidden { display: none; }

.sc-panel {
  width: min(1080px, 100%); max-height: 92vh;
  background: linear-gradient(180deg, #fbfdff, #f4f7fb);
  border-radius: 16px; box-shadow: 0 26px 70px rgba(8, 20, 40, .4);
  display: flex; flex-direction: column; overflow: hidden;
}

/* ---------- 头部 ---------- */
.sc-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--line);
}
.sc-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; }
.sc-badge {
  background: linear-gradient(135deg, #6b46c1, #8b5cf6); color: #fff;
  font-size: 11.5px; padding: 2px 9px; border-radius: 20px; font-weight: 600;
}
.sc-setting { font-size: 13px; color: var(--ink2); margin-top: 5px; }
.sc-close {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; color: var(--ink2); font-size: 14px;
}
.sc-close:hover { border-color: var(--err); color: var(--err); }

/* ---------- 角色表 ---------- */
.sc-cast {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 9px 20px; background: #f8fafc; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink2);
}
.sc-cast-item { display: flex; align-items: center; gap: 6px; }
.sc-cast-item .sc-face { font-size: 17px; }
.sc-voice { font-size: 11px; color: var(--ink3); }
.sc-tts-off { color: var(--warn); font-size: 12px; }

/* ---------- 主体：左对话 + 右道具 ---------- */
.sc-body { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
.sc-lines { overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.sc-props {
  overflow-y: auto; padding: 16px; border-left: 1px dashed var(--line);
  background: #fcfdff; display: flex; flex-direction: column; gap: 12px;
}
.sc-props-hint { font-size: 12px; color: var(--ink3); text-align: center; padding: 20px 8px; }

/* ---------- 对话行 ---------- */
.sc-line {
  display: flex; gap: 10px; align-items: flex-start;
  opacity: .45; transition: opacity .25s; cursor: pointer;
}
.sc-line.active { opacity: 1; }
.sc-line.active .sc-bubble { box-shadow: 0 0 0 2px rgba(31, 111, 235, .18); }
.sc-line.sc-right { flex-direction: row-reverse; }
.sc-line.sc-right .sc-bubble-wrap { align-items: flex-end; }

.sc-avatar {
  position: relative; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
  background: #eef2f7; display: grid; place-items: center; font-size: 21px;
}
.sc-line.active .sc-avatar { background: #e3ecfb; }
.sc-emo {
  position: absolute; right: -3px; bottom: -3px; font-size: 13px;
  background: #fff; border-radius: 50%; padding: 1px; line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.sc-bubble-wrap { min-width: 0; max-width: 78%; display: flex; flex-direction: column; }
.sc-who {
  font-size: 11.5px; color: var(--ink3); margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.sc-line.sc-right .sc-who { flex-direction: row-reverse; }
.sc-emo-tag {
  font-size: 10.5px; padding: 1px 6px; border-radius: 20px;
  background: #eef2f7; color: var(--ink2);
}
.sc-kind {
  font-size: 10.5px; padding: 1px 6px; border-radius: 20px;
  background: #e6f7f0; color: var(--ok); border: 1px solid #c3ebdb;
}

.sc-bubble {
  padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.7;
  background: #fff; border: 1px solid var(--line); white-space: pre-wrap;
  transition: .2s;
}
/* 情绪 -> 气泡配色（tone 由后端给出） */
.sc-line.sc-right .sc-bubble { background: #eaf2ff; border-color: #cfe0ff; }
.sc-bubble.tone-urgent { background: #fff6e8; border-color: #f6dfb4; }
.sc-bubble.tone-angry { background: #fdeeec; border-color: #f6cfc9; }
.sc-bubble.tone-worried { background: #f3f0fb; border-color: #ddd0f7; }
.sc-bubble.tone-positive { background: #eafaf1; border-color: #bfe8d6; }
.sc-bubble.tone-pro { background: #eef4fb; border-color: #d3e2f5; }
.sc-line.sc-right .sc-bubble.tone-pro { background: #eaf2ff; border-color: #cfe0ff; }

.sc-replay {
  align-self: center; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 13px;
  flex: 0 0 30px; opacity: .6; transition: .15s;
}
.sc-line:hover .sc-replay { opacity: 1; }
.sc-replay:hover { border-color: var(--brand); }

/* ---------- 道具卡 ---------- */
.sc-prop {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 2px 8px rgba(20, 40, 70, .05);
  animation: propIn .4s ease-out;
}
@keyframes propIn {
  from { opacity: 0; transform: translateX(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.sc-prop-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; }
.sc-prop-type {
  font-size: 10.5px; padding: 1px 7px; border-radius: 20px;
  background: #eef2f7; color: var(--ink2); flex: 0 0 auto;
}
.sc-prop-title { font-size: 13px; font-weight: 600; line-height: 1.4; }
.sc-prop ul { margin: 0; padding-left: 17px; }
.sc-prop li { font-size: 12.5px; line-height: 1.75; color: #2c3e50; }
.sc-prop-src { font-size: 10.5px; color: var(--ink3); margin-top: 8px; }
.sc-prop-policy_card { border-left: 3px solid var(--brand); }
.sc-prop-policy_card .sc-prop-type { background: #e8f1ff; color: #14539e; }
.sc-prop-warning { border-left: 3px solid var(--warn); background: #fffdf7; }
.sc-prop-warning .sc-prop-type { background: #fdf5e4; color: var(--warn); }
.sc-prop-rule_card { border-left: 3px solid var(--purple); }
.sc-prop-rule_card .sc-prop-type { background: #f0eaff; color: var(--purple); }
.sc-prop-checklist { border-left: 3px solid var(--ok); }
.sc-prop-checklist .sc-prop-type { background: #e6f7f0; color: var(--ok); }
.sc-prop-timeline { border-left: 3px solid #0ea5e9; }

/* ---------- 控制条 ---------- */
.sc-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 20px; background: #fff; border-top: 1px solid var(--line);
}
.sc-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 7px 14px; cursor: pointer; font-size: 13px; transition: .15s;
}
.sc-btn:hover { border-color: var(--brand); color: var(--brand); }
.sc-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.sc-btn.primary:hover { background: var(--brand2); color: #fff; }
.sc-speed { font-size: 12.5px; color: var(--ink2); display: flex; align-items: center; gap: 5px; }
.sc-speed select { padding: 5px 8px; font-size: 12.5px; }
.sc-progress {
  flex: 1 1 90px; min-width: 70px; height: 6px; background: #eef2f7;
  border-radius: 20px; overflow: hidden;
}
.sc-progress > i { display: block; height: 100%; background: var(--brand); transition: width .3s; }
.sc-count { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.sc-done { font-size: 12.5px; color: var(--ok); font-weight: 600; }

/* ---------- 题目里的入口 ---------- */
.sc-cta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, #f3f0ff, #eef4ff);
  border: 1px solid #ddd0f7; border-radius: 12px;
  padding: 13px 16px; margin-bottom: 14px;
}
.sc-cta .sc-cta-icon { font-size: 26px; }
.sc-cta .sc-cta-text { flex: 1 1 200px; min-width: 0; }
.sc-cta .sc-cta-text b { font-size: 14px; }
.sc-cta .sc-cta-text div { font-size: 12.5px; color: var(--ink2); margin-top: 3px; }
.sc-cta .sc-cta-btn {
  background: linear-gradient(135deg, #6b46c1, #8b5cf6); color: #fff;
  border: 0; border-radius: 9px; padding: 9px 18px; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
}
.sc-cta .sc-cta-btn:hover { filter: brightness(1.08); }
.sc-cta-done { font-size: 12.5px; color: var(--ok); }

@media (max-width: 860px) {
  .sc-body { grid-template-columns: 1fr; }
  .sc-props { border-left: 0; border-top: 1px dashed var(--line); max-height: 190px; }
  .sc-bubble-wrap { max-width: 88%; }
}

/* ============================================================ 工作流模块 */
.wf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr));
           gap:14px; margin-bottom:14px; }
.wf-card { display:flex; flex-direction:column; }
.wf-head { display:flex; justify-content:space-between; align-items:flex-start;
           gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.wf-name { font-size:15px; font-weight:600; }
.wf-sub { font-size:12px; color:var(--ink3); margin-top:3px; font-family:ui-monospace,Consolas,monospace; }
.wf-row { display:flex; gap:8px; font-size:12.5px; line-height:1.9; }
.wf-row > span:first-child { flex:0 0 74px; color:var(--ink3); }
.wf-row code { background:#f2f5f9; padding:1px 6px; border-radius:5px; font-size:11.5px; color:#1f4e8c; }
.wf-warn { margin-top:9px; font-size:12px; line-height:1.7; color:#9a6b00;
           background:#fff8e6; border:1px solid #f0d9a0; border-radius:8px; padding:7px 10px; }
.wf-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.wf-health { margin-top:9px; }
.wf-ok, .wf-bad { font-size:12.5px; line-height:1.7; border-radius:8px; padding:8px 10px; }
.wf-ok { background:#e9f8f1; border:1px solid #bfe8d6; color:#14805a; }
.wf-bad { background:#fdeeec; border:1px solid #f6cfc9; color:#c0392b; }
.wf-result { margin-top:12px; font-size:12.5px; line-height:1.8; background:#f7fafc;
             border-left:3px solid var(--brand); border-radius:8px; padding:11px 13px; }
.sec-title { font-size:12.5px; font-weight:600; color:var(--ink2);
             margin:16px 0 7px; padding-bottom:5px; border-bottom:1px solid var(--line); }
.kv { display:flex; gap:10px; font-size:12.5px; line-height:2; }
.kv > span:first-child { flex:0 0 88px; color:var(--ink3); }
pre.raw { background:#f6f8fb; border:1px solid var(--line); border-radius:8px;
          padding:10px 12px; font-size:11.5px; line-height:1.7; overflow-x:auto;
          white-space:pre-wrap; word-break:break-all; margin:6px 0 0; max-height:340px; }
#drawerBody table { margin-bottom:4px; }

/* ============================================================ 情景对话（大模型扮演客户） */
.msg { display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
.msg.me { flex-direction:row-reverse; }
.msg .av { width:36px; height:36px; flex:0 0 36px; border-radius:11px;
           background:#eef2f7; display:grid; place-items:center; font-size:19px; }
.msg .bub { max-width:76%; }
.msg .meta { font-size:11.5px; color:var(--ink3); margin-bottom:4px; }
.msg.me .meta { text-align:right; }
.msg .text { padding:10px 13px; border-radius:14px; font-size:14.3px; line-height:1.75;
             background:#f4f8ff; border:1px solid #d6e4f7; white-space:pre-wrap; }
.msg.me .text { background:#eaf7f0; border-color:#bfe8d6; }
.fb { font-size:13px; line-height:1.8; padding:10px 13px; border-radius:9px;
      background:#f7fafc; border-left:3px solid var(--ok,#14805a); margin-top:10px; color:#33475b; }