:root {
  --bg:       #0f1117;
  --surface:  #1a1d27;
  --surface2: #20243a;
  --border:   #2a2d3e;
  --accent:   #6366f1;
  --accentH:  #4f52d8;
  --text:     #e2e8f0;
  --dim:      #8892a4;
  --green:    #22c55e;
  --yellow:   #eab308;
  --red:      #ef4444;
  --blue:     #3b82f6;
  --r:        12px;
}

/* ── 5 Original Themes ── */
body[data-theme="morning"]{
  --bg:#faf9f6;--surface:#ffffff;--surface2:#f5f3ee;--border:#e2ddd5;
  --text:#1a1a2e;--dim:#6b7280;--accent:#6366f1;--accentH:#4f52d8;
  --surface-rgb:255,255,255;
}
body[data-theme="mist"]{
  --bg:#e8edf2;--surface:#f0f4f8;--surface2:#e1e8f0;--border:#c9d3df;
  --text:#2d3748;--dim:#64748b;--accent:#6366f1;--accentH:#4f52d8;
  --surface-rgb:240,244,248;
}
body[data-theme="dusk"]{
  --bg:#1e2030;--surface:#252840;--surface2:#2c3050;--border:#3a3f5c;
  --text:#c9d1d9;--dim:#7c849a;--accent:#818cf8;--accentH:#6366f1;
  --surface-rgb:37,40,64;
}
/* deep-space = default :root */
body[data-theme="midnight"]{
  --bg:#050508;--surface:#0c0d12;--surface2:#12131a;--border:#1e1f2a;
  --text:#b0b8c8;--dim:#5a6070;--accent:#818cf8;--accentH:#6366f1;
  --surface-rgb:12,13,18;
}

/* ── 豆包 Theme ─ 亮 ── */
body[data-theme="siliang"]{
  --bg:#fcfdfc;--surface:#fafcfa;--surface2:#fff1eb;--border:#f0ddd6;
  --accent:#e86640;--accentH:#d4572e;--text:#1a120e;--dim:#9b8a82;
  --green:#2da44e;--yellow:#c07810;--red:#c0392b;--blue:#2d7dd2;--r:14px;
  --surface-rgb:250,252,250;
}

/* ══════════════════════════════════════════════════════════════
   四两 (Siliang) 主题 — 100% 复刻自四两 AI Agent 设计系统
   3 色系 × 2 明暗 = 6 种皮肤
   ══════════════════════════════════════════════════════════════ */

/* ── 四两蓝·亮 (Default Light) ── */
body[data-theme="sl-blue-light"]{
  --bg:#f8fbff;--surface:#ffffff;--surface2:#e8f2ff;--border:#e2e8f0;
  --accent:#2462ea;--accentH:#5fa4f9;--text:#0f172a;--dim:#64748b;
  --green:#16a349;--yellow:#f4a10b;--red:#ee4444;--blue:#2462ea;--r:12px;
  --surface-rgb:255,255,255;
}
/* ── 四两蓝·暗 (Default Dark) ── */
body[data-theme="sl-blue-dark"]{
  --bg:#010816;--surface:#0a1628;--surface2:#1e293b;--border:#1e293b;
  --accent:#3b82f5;--accentH:#5492f7;--text:#f7f9fb;--dim:#94a3b7;
  --green:#21c55e;--yellow:#f0b527;--red:#ef4444;--blue:#3b82f5;--r:12px;
  --surface-rgb:10,22,40;
}
/* ── 四两森林·亮 (Forest Light) ── */
body[data-theme="sl-forest-light"]{
  --bg:#f5fbf7;--surface:#f8fbf8;--surface2:#e3f6ec;--border:#d1e0d7;
  --accent:#358c62;--accentH:#40aa77;--text:#182e25;--dim:#577468;
  --green:#2b9662;--yellow:#f2a116;--red:#e13b3b;--blue:#358c62;--r:12px;
  --surface-rgb:248,251,248;
}
/* ── 四两森林·暗 (Forest Dark) ── */
body[data-theme="sl-forest-dark"]{
  --bg:#0f1814;--surface:#131f1a;--surface2:#1f2d27;--border:#2e4238;
  --accent:#49b57b;--accentH:#5fbd8b;--text:#eef6f0;--dim:#a6beb0;
  --green:#42b276;--yellow:#f2b935;--red:#cc2828;--blue:#49b57b;--r:12px;
  --surface-rgb:19,31,26;
}
/* ── 四两日落·亮 (Sunset Light) ── */
body[data-theme="sl-sunset-light"]{
  --bg:#fff9f4;--surface:#fff8f4;--surface2:#ffe5db;--border:#ebd0c0;
  --accent:#f26735;--accentH:#f7704e;--text:#35231b;--dim:#84685c;
  --green:#289968;--yellow:#f7a516;--red:#e43e3e;--blue:#f26735;--r:12px;
  --surface-rgb:255,248,244;
}
/* ── 四两日落·暗 (Sunset Dark) ── */
body[data-theme="sl-sunset-dark"]{
  --bg:#1c1410;--surface:#221915;--surface2:#2c2320;--border:#443630;
  --accent:#f7814e;--accentH:#fb9464;--text:#fff4ea;--dim:#c3b2a6;
  --green:#3aba82;--yellow:#fab937;--red:#d12727;--blue:#f7814e;--r:12px;
  --surface-rgb:34,25,21;
}

/* original light themes: user bubble needs light text */
body[data-theme="morning"] .msg.user .bubble,
body[data-theme="mist"] .msg.user .bubble{color:#fff;}

/* ── 豆包 亮 — chat bubbles ── */
body[data-theme="siliang"] .msg.user .bubble{
  background:#fad0c0;color:#1a120e;border-bottom-right-radius:4px;
}
body[data-theme="siliang"] .msg.bot .bubble{
  background:transparent;border:none;
  border-left:3px solid var(--accent);
  border-bottom-left-radius:4px;padding-left:14px;
}
body[data-theme="siliang"] .msg.bot .avatar{
  background:linear-gradient(135deg,var(--accent),#f0a080);color:#fff;
}

/* ── 豆包 亮 — input/modal focus glow ── */
body[data-theme="siliang"] #input:focus{
  box-shadow:0 0 0 3px rgba(232,102,64,.15);
}
body[data-theme="siliang"] #modal input:focus{
  box-shadow:0 0 0 3px rgba(232,102,64,.15);
}

/* ── 豆包 亮 — send button glow ── */
body[data-theme="siliang"] #btn-send{
  box-shadow:0 2px 8px rgba(232,102,64,.35);
}

/* ── 豆包 亮 — result level gradient ── */
body[data-theme="siliang"] .result-level{
  background:linear-gradient(135deg,var(--accentH),var(--accent));
  -webkit-background-clip:text;background-clip:text;
}

/* ── 豆包 亮 — radar fill ── */
body[data-theme="siliang"] .radar-area{
  fill:rgba(232,102,64,.12);stroke:var(--accent);
}

/* ── 豆包 亮 — drop zone drag tint ── */
body[data-theme="siliang"] #drop-zone.drag{
  border-color:var(--accent);background:rgba(232,102,64,.06);
}

/* ── 豆包 亮 — result card top bar ── */
body[data-theme="siliang"] .result-card::before{
  background:linear-gradient(90deg,var(--accentH),var(--accent),#f0a080);
}

/* ── 豆包 亮 — progress fill ── */
body[data-theme="siliang"] #progress-fill{
  background:linear-gradient(90deg,var(--accentH),var(--accent),#f0a080);
  background-size:200% 100%;
}

/* ── 豆包 亮 — history banner ── */
body[data-theme="siliang"] #history-banner{
  background:rgba(232,102,64,.08);border-bottom-color:var(--accent);color:var(--accent);
}
body[data-theme="siliang"] #history-banner:hover{
  background:rgba(232,102,64,.14);
}

/* ── 豆包 亮 — scrollbar: thin 3px, warm coral ── */
body[data-theme="siliang"] *{
  scrollbar-width:thin;scrollbar-color:#f0b8a8 transparent;
}
body[data-theme="siliang"] *::-webkit-scrollbar{width:3px;height:3px;}
body[data-theme="siliang"] *::-webkit-scrollbar-track{background:transparent;}
body[data-theme="siliang"] *::-webkit-scrollbar-thumb{
  background:#f0b8a8;border-radius:3px;
}
body[data-theme="siliang"] *::-webkit-scrollbar-thumb:hover{background:#e8987e;}

/* ── 豆包 亮 — sidebar: refined active card & hover ── */
body[data-theme="siliang"] .hp-item.active{
  background:#ffe5dc;color:var(--text);
  border:1px solid #f0c8b8;border-radius:12px;
}
body[data-theme="siliang"] .hp-item:hover{background:#fff1eb;}

/* ── 豆包 亮 — sidebar current (in-progress) item ── */
body[data-theme="siliang"] .hp-item.current{
  border:1px dashed #e86640;background:rgba(232,102,64,.06);
}

/* ── 豆包 亮 — hp-level badge coral tone ── */
body[data-theme="siliang"] .hp-level{
  background:var(--accent);color:#fff;
}
body[data-theme="siliang"] .hp-item.active .hp-date,
body[data-theme="siliang"] .hp-item.active .hp-preview,
body[data-theme="siliang"] .hp-item.active .hp-dur{color:var(--dim);}

/* ── 豆包 亮 — 模块分割线 ── */
body[data-theme="siliang"] header{border-bottom-color:rgba(0,0,0,.07);}
body[data-theme="siliang"] #history-panel{border-right-color:rgba(0,0,0,.06);}
body[data-theme="siliang"] #chat-panel{border-right-color:rgba(0,0,0,.06);}
body[data-theme="siliang"] #bar{border-top-color:rgba(0,0,0,.07);}
body[data-theme="siliang"] #ev-header{border-bottom-color:rgba(0,0,0,.07);}
body[data-theme="siliang"] .hp-header{border-bottom-color:rgba(0,0,0,.07);}
body[data-theme="siliang"] .ev-detail{border-top-color:rgba(0,0,0,.07);}
body[data-theme="siliang"] .stage-divider::before,
body[data-theme="siliang"] .stage-divider::after{background:rgba(0,0,0,.08);}
body[data-theme="siliang"] .stage-divider span{
  border-color:rgba(0,0,0,.08);background:var(--bg);
}

/* ══════════════════════════════════════════════════════════════
   四两主题 — 组件覆盖（亮色系）
   ══════════════════════════════════════════════════════════════ */

/* ── 亮色共用选择器 ── */
body[data-theme="sl-blue-light"],
body[data-theme="sl-forest-light"],
body[data-theme="sl-sunset-light"]{
  /* 亮色通用: light text on user bubble not needed */
}

/* 四两亮色: user bubble */
body[data-theme="sl-blue-light"] .msg.user .bubble{
  background:#dbeafe;color:#0f172a;border-bottom-right-radius:4px;
}
body[data-theme="sl-forest-light"] .msg.user .bubble{
  background:#d1fae5;color:#182e25;border-bottom-right-radius:4px;
}
body[data-theme="sl-sunset-light"] .msg.user .bubble{
  background:#ffddcc;color:#35231b;border-bottom-right-radius:4px;
}

/* 四两亮色: bot bubble — 透明 + 左侧主色线 */
body[data-theme="sl-blue-light"] .msg.bot .bubble,
body[data-theme="sl-forest-light"] .msg.bot .bubble,
body[data-theme="sl-sunset-light"] .msg.bot .bubble{
  background:transparent;border:none;
  border-left:3px solid var(--accent);
  border-bottom-left-radius:4px;padding-left:14px;
}

/* 四两亮色: bot avatar 渐变 */
body[data-theme="sl-blue-light"] .msg.bot .avatar{
  background:linear-gradient(135deg,#2462ea,#5fa4f9);color:#fff;
}
body[data-theme="sl-forest-light"] .msg.bot .avatar{
  background:linear-gradient(135deg,#358c62,#6dd5a0);color:#fff;
}
body[data-theme="sl-sunset-light"] .msg.bot .avatar{
  background:linear-gradient(135deg,#f26735,#ffab7a);color:#fff;
}

/* 四两亮色: input focus glow */
body[data-theme="sl-blue-light"] #input:focus,
body[data-theme="sl-blue-light"] #modal input:focus{
  box-shadow:0 0 0 3px rgba(36,98,234,.15);
}
body[data-theme="sl-forest-light"] #input:focus,
body[data-theme="sl-forest-light"] #modal input:focus{
  box-shadow:0 0 0 3px rgba(53,140,98,.15);
}
body[data-theme="sl-sunset-light"] #input:focus,
body[data-theme="sl-sunset-light"] #modal input:focus{
  box-shadow:0 0 0 3px rgba(242,103,53,.15);
}

/* 四两亮色: send button glow */
body[data-theme="sl-blue-light"] #btn-send{
  box-shadow:0 2px 8px rgba(36,98,234,.35);
}
body[data-theme="sl-forest-light"] #btn-send{
  box-shadow:0 2px 8px rgba(53,140,98,.35);
}
body[data-theme="sl-sunset-light"] #btn-send{
  box-shadow:0 2px 8px rgba(242,103,53,.35);
}

/* 四两亮色: result level gradient */
body[data-theme="sl-blue-light"] .result-level{
  background:linear-gradient(135deg,var(--accentH),var(--accent));
  -webkit-background-clip:text;background-clip:text;
}
body[data-theme="sl-forest-light"] .result-level{
  background:linear-gradient(135deg,var(--accentH),var(--accent));
  -webkit-background-clip:text;background-clip:text;
}
body[data-theme="sl-sunset-light"] .result-level{
  background:linear-gradient(135deg,var(--accentH),var(--accent));
  -webkit-background-clip:text;background-clip:text;
}

/* 四两亮色: radar fill */
body[data-theme="sl-blue-light"] .radar-area{
  fill:rgba(36,98,234,.12);stroke:var(--accent);
}
body[data-theme="sl-forest-light"] .radar-area{
  fill:rgba(53,140,98,.12);stroke:var(--accent);
}
body[data-theme="sl-sunset-light"] .radar-area{
  fill:rgba(242,103,53,.12);stroke:var(--accent);
}

/* 四两亮色: drop zone drag */
body[data-theme="sl-blue-light"] #drop-zone.drag{
  border-color:var(--accent);background:rgba(36,98,234,.06);
}
body[data-theme="sl-forest-light"] #drop-zone.drag{
  border-color:var(--accent);background:rgba(53,140,98,.06);
}
body[data-theme="sl-sunset-light"] #drop-zone.drag{
  border-color:var(--accent);background:rgba(242,103,53,.06);
}

/* 四两亮色: result card top bar */
body[data-theme="sl-blue-light"] .result-card::before{
  background:linear-gradient(90deg,#2462ea,#5fa4f9,#93c5fd);
}
body[data-theme="sl-forest-light"] .result-card::before{
  background:linear-gradient(90deg,#358c62,#40aa77,#6dd5a0);
}
body[data-theme="sl-sunset-light"] .result-card::before{
  background:linear-gradient(90deg,#f26735,#f7704e,#ffab7a);
}

/* 四两亮色: progress fill */
body[data-theme="sl-blue-light"] #progress-fill{
  background:linear-gradient(90deg,#2462ea,#5fa4f9,#93c5fd);
  background-size:200% 100%;
}
body[data-theme="sl-forest-light"] #progress-fill{
  background:linear-gradient(90deg,#358c62,#40aa77,#6dd5a0);
  background-size:200% 100%;
}
body[data-theme="sl-sunset-light"] #progress-fill{
  background:linear-gradient(90deg,#f26735,#f7704e,#ffab7a);
  background-size:200% 100%;
}

/* 四两亮色: history banner */
body[data-theme="sl-blue-light"] #history-banner{
  background:rgba(36,98,234,.08);border-bottom-color:var(--accent);color:var(--accent);
}
body[data-theme="sl-blue-light"] #history-banner:hover{background:rgba(36,98,234,.14);}
body[data-theme="sl-forest-light"] #history-banner{
  background:rgba(53,140,98,.08);border-bottom-color:var(--accent);color:var(--accent);
}
body[data-theme="sl-forest-light"] #history-banner:hover{background:rgba(53,140,98,.14);}
body[data-theme="sl-sunset-light"] #history-banner{
  background:rgba(242,103,53,.08);border-bottom-color:var(--accent);color:var(--accent);
}
body[data-theme="sl-sunset-light"] #history-banner:hover{background:rgba(242,103,53,.14);}

/* 四两亮色: 细滚动条 */
body[data-theme="sl-blue-light"] *{scrollbar-width:thin;scrollbar-color:#b8d0f0 transparent;}
body[data-theme="sl-blue-light"] *::-webkit-scrollbar{width:3px;height:3px;}
body[data-theme="sl-blue-light"] *::-webkit-scrollbar-track{background:transparent;}
body[data-theme="sl-blue-light"] *::-webkit-scrollbar-thumb{background:#b8d0f0;border-radius:3px;}
body[data-theme="sl-blue-light"] *::-webkit-scrollbar-thumb:hover{background:#8bb4e8;}

body[data-theme="sl-forest-light"] *{scrollbar-width:thin;scrollbar-color:#b8d8c8 transparent;}
body[data-theme="sl-forest-light"] *::-webkit-scrollbar{width:3px;height:3px;}
body[data-theme="sl-forest-light"] *::-webkit-scrollbar-track{background:transparent;}
body[data-theme="sl-forest-light"] *::-webkit-scrollbar-thumb{background:#b8d8c8;border-radius:3px;}
body[data-theme="sl-forest-light"] *::-webkit-scrollbar-thumb:hover{background:#8ac0a0;}

body[data-theme="sl-sunset-light"] *{scrollbar-width:thin;scrollbar-color:#f0b8a8 transparent;}
body[data-theme="sl-sunset-light"] *::-webkit-scrollbar{width:3px;height:3px;}
body[data-theme="sl-sunset-light"] *::-webkit-scrollbar-track{background:transparent;}
body[data-theme="sl-sunset-light"] *::-webkit-scrollbar-thumb{background:#f0b8a8;border-radius:3px;}
body[data-theme="sl-sunset-light"] *::-webkit-scrollbar-thumb:hover{background:#e8987e;}

/* 四两亮色: sidebar active & hover */
body[data-theme="sl-blue-light"] .hp-item.active{
  background:#dbeafe;color:var(--text);border:1px solid #b8d0f0;border-radius:12px;
}
body[data-theme="sl-blue-light"] .hp-item:hover{background:#e8f2ff;}
body[data-theme="sl-forest-light"] .hp-item.active{
  background:#d1fae5;color:var(--text);border:1px solid #b8d8c8;border-radius:12px;
}
body[data-theme="sl-forest-light"] .hp-item:hover{background:#e3f6ec;}
body[data-theme="sl-sunset-light"] .hp-item.active{
  background:#ffe5dc;color:var(--text);border:1px solid #ebd0c0;border-radius:12px;
}
body[data-theme="sl-sunset-light"] .hp-item:hover{background:#fff0e5;}

/* 四两亮色: sidebar current (dashed) */
body[data-theme="sl-blue-light"] .hp-item.current{
  border:1px dashed #2462ea;background:rgba(36,98,234,.06);
}
body[data-theme="sl-forest-light"] .hp-item.current{
  border:1px dashed #358c62;background:rgba(53,140,98,.06);
}
body[data-theme="sl-sunset-light"] .hp-item.current{
  border:1px dashed #f26735;background:rgba(242,103,53,.06);
}

/* 四两亮色: hp-level badge */
body[data-theme="sl-blue-light"] .hp-level{background:var(--accent);color:#fff;}
body[data-theme="sl-forest-light"] .hp-level{background:var(--accent);color:#fff;}
body[data-theme="sl-sunset-light"] .hp-level{background:var(--accent);color:#fff;}

body[data-theme="sl-blue-light"] .hp-item.active .hp-date,
body[data-theme="sl-blue-light"] .hp-item.active .hp-preview,
body[data-theme="sl-blue-light"] .hp-item.active .hp-dur{color:var(--dim);}
body[data-theme="sl-forest-light"] .hp-item.active .hp-date,
body[data-theme="sl-forest-light"] .hp-item.active .hp-preview,
body[data-theme="sl-forest-light"] .hp-item.active .hp-dur{color:var(--dim);}
body[data-theme="sl-sunset-light"] .hp-item.active .hp-date,
body[data-theme="sl-sunset-light"] .hp-item.active .hp-preview,
body[data-theme="sl-sunset-light"] .hp-item.active .hp-dur{color:var(--dim);}

/* 四两亮色: 模块分割线 */
body[data-theme="sl-blue-light"] header,
body[data-theme="sl-forest-light"] header,
body[data-theme="sl-sunset-light"] header{border-bottom-color:rgba(0,0,0,.07);}

body[data-theme="sl-blue-light"] #history-panel,
body[data-theme="sl-forest-light"] #history-panel,
body[data-theme="sl-sunset-light"] #history-panel{border-right-color:rgba(0,0,0,.06);}

body[data-theme="sl-blue-light"] #chat-panel,
body[data-theme="sl-forest-light"] #chat-panel,
body[data-theme="sl-sunset-light"] #chat-panel{border-right-color:rgba(0,0,0,.06);}

body[data-theme="sl-blue-light"] #bar,
body[data-theme="sl-forest-light"] #bar,
body[data-theme="sl-sunset-light"] #bar{border-top-color:rgba(0,0,0,.07);}

body[data-theme="sl-blue-light"] #ev-header,
body[data-theme="sl-forest-light"] #ev-header,
body[data-theme="sl-sunset-light"] #ev-header{border-bottom-color:rgba(0,0,0,.07);}

body[data-theme="sl-blue-light"] .hp-header,
body[data-theme="sl-forest-light"] .hp-header,
body[data-theme="sl-sunset-light"] .hp-header{border-bottom-color:rgba(0,0,0,.07);}

body[data-theme="sl-blue-light"] .ev-detail,
body[data-theme="sl-forest-light"] .ev-detail,
body[data-theme="sl-sunset-light"] .ev-detail{border-top-color:rgba(0,0,0,.07);}

body[data-theme="sl-blue-light"] .stage-divider::before,
body[data-theme="sl-blue-light"] .stage-divider::after,
body[data-theme="sl-forest-light"] .stage-divider::before,
body[data-theme="sl-forest-light"] .stage-divider::after,
body[data-theme="sl-sunset-light"] .stage-divider::before,
body[data-theme="sl-sunset-light"] .stage-divider::after{background:rgba(0,0,0,.08);}

body[data-theme="sl-blue-light"] .stage-divider span,
body[data-theme="sl-forest-light"] .stage-divider span,
body[data-theme="sl-sunset-light"] .stage-divider span{
  border-color:rgba(0,0,0,.08);background:var(--bg);
}

/* ══════════════════════════════════════════════════════════════
   四两主题 — 组件覆盖（暗色系）
   ══════════════════════════════════════════════════════════════ */

/* 四两暗色: user bubble */
body[data-theme="sl-blue-dark"] .msg.user .bubble{
  background:linear-gradient(135deg,#1e3a5f,#1a2f4e);
  border-bottom-right-radius:4px;
}
body[data-theme="sl-forest-dark"] .msg.user .bubble{
  background:linear-gradient(135deg,#1a3d2c,#152e24);
  border-bottom-right-radius:4px;
}
body[data-theme="sl-sunset-dark"] .msg.user .bubble{
  background:linear-gradient(135deg,#4a2518,#3d1e14);
  border-bottom-right-radius:4px;
}

/* 四两暗色: bot bubble */
body[data-theme="sl-blue-dark"] .msg.bot .bubble,
body[data-theme="sl-forest-dark"] .msg.bot .bubble,
body[data-theme="sl-sunset-dark"] .msg.bot .bubble{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-bottom-left-radius:4px;
}

/* 四两暗色: bot avatar */
body[data-theme="sl-blue-dark"] .msg.bot .avatar{
  background:linear-gradient(135deg,#2462ea,#5fa4f9);color:#fff;
}
body[data-theme="sl-forest-dark"] .msg.bot .avatar{
  background:linear-gradient(135deg,#358c62,#49b57b);color:#fff;
}
body[data-theme="sl-sunset-dark"] .msg.bot .avatar{
  background:linear-gradient(135deg,#f26735,#f7814e);color:#fff;
}

/* 四两暗色: input focus glow */
body[data-theme="sl-blue-dark"] #input:focus,
body[data-theme="sl-blue-dark"] #modal input:focus{
  box-shadow:0 0 0 3px rgba(59,130,245,.2);
}
body[data-theme="sl-forest-dark"] #input:focus,
body[data-theme="sl-forest-dark"] #modal input:focus{
  box-shadow:0 0 0 3px rgba(73,181,123,.2);
}
body[data-theme="sl-sunset-dark"] #input:focus,
body[data-theme="sl-sunset-dark"] #modal input:focus{
  box-shadow:0 0 0 3px rgba(247,129,78,.2);
}

/* 四两暗色: send button glow */
body[data-theme="sl-blue-dark"] #btn-send{
  box-shadow:0 2px 8px rgba(59,130,245,.4);
}
body[data-theme="sl-forest-dark"] #btn-send{
  box-shadow:0 2px 8px rgba(73,181,123,.4);
}
body[data-theme="sl-sunset-dark"] #btn-send{
  box-shadow:0 2px 8px rgba(247,129,78,.4);
}

/* 四两暗色: result level gradient */
body[data-theme="sl-blue-dark"] .result-level,
body[data-theme="sl-forest-dark"] .result-level,
body[data-theme="sl-sunset-dark"] .result-level{
  background:linear-gradient(135deg,var(--accentH),var(--accent));
  -webkit-background-clip:text;background-clip:text;
}

/* 四两暗色: radar fill */
body[data-theme="sl-blue-dark"] .radar-area{
  fill:rgba(59,130,245,.15);stroke:var(--accent);
}
body[data-theme="sl-forest-dark"] .radar-area{
  fill:rgba(73,181,123,.15);stroke:var(--accent);
}
body[data-theme="sl-sunset-dark"] .radar-area{
  fill:rgba(247,129,78,.15);stroke:var(--accent);
}

/* 四两暗色: drop zone */
body[data-theme="sl-blue-dark"] #drop-zone.drag{
  border-color:var(--accent);background:rgba(59,130,245,.08);
}
body[data-theme="sl-forest-dark"] #drop-zone.drag{
  border-color:var(--accent);background:rgba(73,181,123,.08);
}
body[data-theme="sl-sunset-dark"] #drop-zone.drag{
  border-color:var(--accent);background:rgba(247,129,78,.08);
}

/* 四两暗色: result card top bar */
body[data-theme="sl-blue-dark"] .result-card::before{
  background:linear-gradient(90deg,#2462ea,#3b82f5,#5fa4f9);
}
body[data-theme="sl-forest-dark"] .result-card::before{
  background:linear-gradient(90deg,#358c62,#49b57b,#5fbd8b);
}
body[data-theme="sl-sunset-dark"] .result-card::before{
  background:linear-gradient(90deg,#f26735,#f7814e,#fb9464);
}

/* 四两暗色: progress fill */
body[data-theme="sl-blue-dark"] #progress-fill{
  background:linear-gradient(90deg,#2462ea,#3b82f5,#5fa4f9);
  background-size:200% 100%;
}
body[data-theme="sl-forest-dark"] #progress-fill{
  background:linear-gradient(90deg,#358c62,#49b57b,#5fbd8b);
  background-size:200% 100%;
}
body[data-theme="sl-sunset-dark"] #progress-fill{
  background:linear-gradient(90deg,#f26735,#f7814e,#fb9464);
  background-size:200% 100%;
}

/* 四两暗色: history banner */
body[data-theme="sl-blue-dark"] #history-banner{
  background:rgba(59,130,245,.1);border-bottom-color:var(--accent);color:var(--accent);
}
body[data-theme="sl-blue-dark"] #history-banner:hover{background:rgba(59,130,245,.18);}
body[data-theme="sl-forest-dark"] #history-banner{
  background:rgba(73,181,123,.1);border-bottom-color:var(--accent);color:var(--accent);
}
body[data-theme="sl-forest-dark"] #history-banner:hover{background:rgba(73,181,123,.18);}
body[data-theme="sl-sunset-dark"] #history-banner{
  background:rgba(247,129,78,.1);border-bottom-color:var(--accent);color:var(--accent);
}
body[data-theme="sl-sunset-dark"] #history-banner:hover{background:rgba(247,129,78,.18);}

/* 四两暗色: sidebar current */
body[data-theme="sl-blue-dark"] .hp-item.current{
  border:1px dashed #3b82f5;background:rgba(59,130,245,.08);
}
body[data-theme="sl-forest-dark"] .hp-item.current{
  border:1px dashed #49b57b;background:rgba(73,181,123,.08);
}
body[data-theme="sl-sunset-dark"] .hp-item.current{
  border:1px dashed #f7814e;background:rgba(247,129,78,.08);
}

/* 四两暗色: hp-level badge */
body[data-theme="sl-blue-dark"] .hp-level,
body[data-theme="sl-forest-dark"] .hp-level,
body[data-theme="sl-sunset-dark"] .hp-level{background:var(--accent);color:#fff;}

*{box-sizing:border-box;margin:0;padding:0;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
*::-webkit-scrollbar{width:4px;height:4px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
*::-webkit-scrollbar-thumb:hover{background:var(--dim);}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
     background:var(--bg);color:var(--text);height:100dvh;
     display:flex;flex-direction:column;overflow:hidden;}

/* ── Animations ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes blink{50%{opacity:0;}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4);}50%{box-shadow:0 0 0 10px rgba(239,68,68,0);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes bounce{0%,80%,100%{transform:translateY(0);}40%{transform:translateY(-6px);}}
@keyframes radarDraw{from{stroke-dashoffset:300;}to{stroke-dashoffset:0;}}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
@keyframes gradientShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

.anim-fadeInUp{animation:fadeInUp .35s ease-out both;}
.anim-scaleIn{animation:scaleIn .4s ease-out both;}
.anim-fadeIn{animation:fadeIn .5s ease both;}

/* ── Header ── */
header{padding:10px 20px;border-bottom:1px solid var(--border);
       background:rgba(var(--surface-rgb,26,29,39),.82);
       backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
       display:flex;align-items:center;
       gap:12px;flex-shrink:0;flex-wrap:wrap;
       position:sticky;top:0;z-index:30;}
.logo{width:34px;height:34px;border-radius:10px;flex-shrink:0;
      background:linear-gradient(135deg,#4f46e5,#6366f1);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 2px 8px rgba(99,102,241,.35);}
.hinfo h1{font-size:15px;font-weight:600;}
.hinfo small{font-size:11px;color:var(--dim);}

/* 进度条区域 */
#progress-wrap{flex:1;min-width:160px;max-width:360px;}
#stage-row{display:flex;justify-content:space-between;font-size:11px;
           color:var(--dim);margin-bottom:4px;}
#stage-label{font-weight:600;color:var(--text);}
#progress-track{height:8px;background:var(--border);border-radius:4px;overflow:hidden;}
#progress-fill{height:100%;width:0%;border-radius:4px;transition:width .6s ease;
               background:linear-gradient(90deg,var(--blue),var(--accent),var(--green));
               background-size:200% 100%;animation:gradientShift 4s ease infinite;}

/* 右侧计时器 + 等级 */
.hright{display:flex;align-items:center;gap:10px;margin-left:auto;}
#timer{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;
       background:var(--border);padding:0 12px;border-radius:12px;
       font-family:monospace;height:36px;display:flex;align-items:center;
       flex-shrink:0;}
#level-badge{background:var(--accent);color:#fff;font-size:12px;
             padding:0 14px;border-radius:12px;font-weight:600;
             letter-spacing:.5px;white-space:nowrap;transition:all .3s;
             height:36px;display:flex;align-items:center;}

/* ── Modal (开场弹窗) ── */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);
               display:flex;align-items:center;justify-content:center;z-index:200;
               animation:fadeIn .3s ease;}
#modal{background:rgba(var(--surface-rgb,26,29,39),.88);
       backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
       border:1px solid rgba(255,255,255,.1);
       border-radius:20px;padding:30px 28px;width:min(420px,92vw);text-align:center;
       animation:scaleIn .4s ease-out;
       max-height:92vh;overflow-y:auto;
       scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
/* SVG logo */
#modal .logo-wrap{width:56px;height:56px;margin:0 auto 10px;
                  background:linear-gradient(135deg,#4f46e5,#6366f1);
                  border-radius:16px;display:flex;align-items:center;justify-content:center;
                  box-shadow:0 4px 16px rgba(99,102,241,.35);}
#modal .logo-wrap svg{width:32px;height:32px;}
#modal h2{font-size:20px;margin-bottom:4px;font-weight:700;}
#modal .subtitle{color:var(--dim);font-size:13px;margin-bottom:20px;line-height:1.6;}

/* 三步流程图示 */
.steps{display:flex;justify-content:center;gap:8px;margin-bottom:16px;}
.step{flex:1;max-width:110px;text-align:center;padding:10px 8px;
      background:var(--bg);border-radius:12px;border:1px solid var(--border);}
.step-icon{font-size:20px;margin-bottom:5px;}
.step-label{font-size:11px;font-weight:600;color:var(--text);}
.step-desc{font-size:10px;color:var(--dim);margin-top:2px;}
.step-arrow{display:flex;align-items:center;color:var(--dim);font-size:14px;flex-shrink:0;}

/* 考前须知 折叠 */
.guide-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;
              font-size:12px;color:var(--dim);margin-bottom:0;
              padding:8px 12px;background:var(--bg);border:1px solid var(--border);
              border-radius:10px;user-select:none;transition:border-color .2s,border-radius .15s;}
.guide-toggle:hover{border-color:var(--accent);color:var(--text);}
.guide-toggle.open{border-radius:10px 10px 0 0;border-bottom-color:transparent;}
.guide-toggle-arrow{margin-left:auto;transition:transform .25s;}
.guide-toggle.open .guide-toggle-arrow{transform:rotate(90deg);}
#guide-card-body{overflow:hidden;transition:max-height .35s ease,opacity .3s ease,margin .3s ease;
                 max-height:0;opacity:0;margin-bottom:0;}
#guide-card-body.open{max-height:300px;opacity:1;margin-bottom:16px;}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;
            font-size:12px;color:var(--dim);line-height:1.8;
            padding:10px 12px 10px;
            border:1px solid var(--border);border-top:none;
            border-radius:0 0 10px 10px;background:var(--bg);}

/* 欢迎回来卡片 */
#welcome-back-section{margin-bottom:14px;padding:14px;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;}
.wb-label{font-size:12px;color:var(--dim);margin-bottom:8px;}
.wb-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.wb-avatar{width:38px;height:38px;border-radius:50%;background:var(--accent);
           display:flex;align-items:center;justify-content:center;
           font-size:15px;color:#fff;font-weight:700;flex-shrink:0;overflow:hidden;}
.wb-name{font-size:15px;font-weight:600;color:var(--text);}
.wb-meta{font-size:11px;color:var(--dim);margin-top:2px;}
.wb-time{font-size:10px;color:var(--dim);opacity:.7;}
.wb-start-btn{width:100%;padding:12px;background:var(--accent);
  color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;margin-bottom:8px;
  transition:background .15s,transform .1s;}
.wb-start-btn:hover{background:var(--accentH);}
.wb-start-btn:active{transform:scale(.98);}
.wb-switch{text-align:center;font-size:12px;color:var(--dim);cursor:pointer;
           padding:4px 0;transition:color .15s;}
.wb-switch:hover{color:var(--text);}

/* 钉钉按钮 */
#dingtalk-btn{width:100%;padding:13px;background:#0089FF;color:#fff;
              border:none;border-radius:12px;font-size:15px;font-weight:600;
              cursor:pointer;font-family:inherit;margin-top:12px;
              display:flex;align-items:center;justify-content:center;gap:8px;
              transition:background .15s,transform .1s;}
#dingtalk-btn:hover{background:#0070D6;}
#dingtalk-btn:active{transform:scale(.98);}
#dingtalk-btn:disabled{opacity:.65;cursor:not-allowed;transform:none;}

/* 手动登录切换按钮 */
#manual-toggle{display:flex;align-items:center;gap:12px;
               margin:14px 0 10px;cursor:pointer;user-select:none;}
.divider-line{flex:1;height:1px;background:var(--border);}
.divider-text{font-size:11px;color:var(--dim);white-space:nowrap;}

/* 表单输入 */
.form-field{margin-bottom:12px;text-align:left;}
#modal input{width:100%;padding:12px 16px;background:var(--bg);color:var(--text);
             border:1px solid var(--border);border-radius:12px;
             font-size:15px;outline:none;font-family:inherit;
             transition:border-color .2s,box-shadow .2s;box-sizing:border-box;}
#modal input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.15);}
#modal input.error{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important;}
#modal input.ok{border-color:var(--green)!important;}
.field-hint{font-size:11px;margin-top:4px;padding:0 4px;min-height:16px;
            transition:color .2s;}
.field-hint.error{color:var(--red);}
.field-hint.ok{color:var(--green);}

#modal button.primary{width:100%;padding:13px;background:var(--accent);color:#fff;
              border:none;border-radius:12px;font-size:15px;
              font-weight:600;cursor:pointer;font-family:inherit;
              transition:transform .1s,background .15s;}
#modal button.primary:hover{background:var(--accentH);}
#modal button.primary:active{transform:scale(.98);}
.modal-footer{margin-top:16px;font-size:12px;color:var(--dim);}
.modal-footer a{color:var(--accent);text-decoration:none;}

/* 登录 loading spinner */
.btn-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);
             border-top-color:#fff;border-radius:50%;
             animation:spin .7s linear infinite;display:inline-block;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Stage toast ── */
#stage-toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);
             background:rgba(var(--surface-rgb,26,29,39),.75);
             backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
             border:1px solid var(--accent);
             color:var(--text);padding:8px 20px;border-radius:20px;font-size:13px;
             font-weight:600;z-index:100;opacity:0;pointer-events:none;
             transition:opacity .3s,transform .3s;box-shadow:0 4px 20px rgba(0,0,0,.4);}
#stage-toast.show{opacity:1;animation:slideDown .3s ease-out;}

/* ── Behavior warning toast ── */
#behavior-warn{position:fixed;top:110px;left:50%;transform:translateX(-50%);
               background:#7c3a0a;border:1px solid #f59e0b;
               color:#fef3c7;padding:9px 22px;border-radius:20px;font-size:13px;
               font-weight:600;z-index:101;opacity:0;pointer-events:none;
               transition:opacity .4s,transform .4s;box-shadow:0 4px 20px rgba(0,0,0,.5);}
#behavior-warn.show{opacity:1;animation:slideDown .3s ease-out;}

/* ── Main layout ── */
#main{display:flex;flex:1;overflow:hidden;}

/* ── Chat panel ── */
#chat-panel{display:flex;flex-direction:column;flex:1;min-width:0;
            border-right:1px solid var(--border);position:relative;}
#chat{flex:1;overflow-y:auto;padding:20px;display:flex;
      flex-direction:column;gap:14px;}

.msg{display:flex;gap:10px;max-width:760px;width:100%;animation:fadeInUp .3s ease-out both;}
.msg.user{flex-direction:row-reverse;align-self:flex-end;}
.msg.bot{align-self:flex-start;}
.avatar{width:34px;height:34px;border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        font-size:16px;flex-shrink:0;background:var(--border);}
.msg.bot .avatar{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;}
.bubble{padding:12px 16px;border-radius:var(--r);font-size:14px;
        line-height:1.7;max-width:calc(100% - 50px);
        white-space:pre-wrap;word-break:break-word;position:relative;}
.msg.user .bubble{background:linear-gradient(135deg,#1e3a5f,#1a2f4e);
                  border-bottom-right-radius:4px;}
.msg.bot  .bubble{background:var(--surface);border:1px solid var(--border);
                  border-left:3px solid var(--accent);border-bottom-left-radius:4px;}
.bubble .ts{display:block;font-size:10px;color:var(--dim);margin-top:6px;
            text-align:right;opacity:.6;}
.quit-keyword-muted{opacity:.35;text-decoration:line-through;}

/* 打字指示器 */
.typing-indicator{display:flex;gap:4px;padding:12px 16px;align-items:center;}
.typing-dot{width:7px;height:7px;background:var(--dim);border-radius:50%;
            animation:bounce 1.2s ease-in-out infinite;}
.typing-dot:nth-child(2){animation-delay:.15s;}
.typing-dot:nth-child(3){animation-delay:.3s;}

/* 阶段分隔线 */
.stage-divider{align-self:center;display:flex;align-items:center;gap:12px;
               width:100%;max-width:400px;margin:8px 0;animation:fadeIn .5s ease;}
.stage-divider::before,.stage-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.stage-divider span{font-size:11px;color:var(--accent);font-weight:600;white-space:nowrap;
                    background:var(--surface2);padding:4px 12px;border-radius:12px;
                    border:1px solid var(--border);}

/* 选择题卡片 */
.mc-card{white-space:normal;}
.mc-stem{font-size:14px;line-height:1.7;margin-bottom:12px;}
.mc-options{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.mc-btn{display:flex;align-items:center;gap:10px;padding:9px 14px;
        border-radius:10px;border:1px solid var(--border);background:var(--surface2);
        color:var(--text);font-size:13px;cursor:pointer;text-align:left;
        transition:background .15s,border-color .15s;line-height:1.5;}
.mc-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.mc-btn.selected{background:var(--accent);color:#fff;border-color:var(--accent);cursor:default;}
.mc-btn.disabled{opacity:.5;cursor:not-allowed;}
.mc-key{font-weight:700;font-size:13px;flex-shrink:0;width:18px;}
.mc-hint{font-size:11px;color:var(--dim);margin-top:2px;}

/* evidence notification card in chat */
.ev-card{align-self:flex-start;max-width:560px;
         background:var(--surface2);border:1px solid var(--border);
         border-left:3px solid var(--accent);border-radius:var(--r);
         padding:12px 16px;font-size:13px;animation:fadeInUp .3s ease-out;}
.ev-card .ev-head{display:flex;align-items:center;gap:8px;
                  font-weight:600;margin-bottom:6px;}
.ev-card .ev-row{color:var(--dim);margin-top:4px;}
.ev-card .ev-row span{color:var(--text);}

/* ── Result overlay (全屏结果页) ── */
#result-overlay{position:fixed;inset:0;z-index:300;background:var(--bg);
                display:none;flex-direction:column;align-items:center;
                justify-content:flex-start;overflow-y:auto;padding:40px 20px;}
#result-overlay.show{display:flex;animation:fadeIn .6s ease;}

.result-card{width:min(480px,92vw);
             background:rgba(var(--surface-rgb,26,29,39),.80);
             backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
             border:1px solid rgba(255,255,255,.12);border-radius:24px;
             padding:40px 32px;text-align:center;position:relative;
             animation:scaleIn .5s ease-out .2s both;
             overflow-y:auto;
             box-shadow:0 8px 40px rgba(0,0,0,.35);}
.result-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
                     background:linear-gradient(90deg,var(--blue),var(--accent),var(--green));}
.result-level{font-size:56px;font-weight:800;margin:12px 0 4px;
              background:linear-gradient(135deg,var(--blue),var(--accent));
              -webkit-background-clip:text;-webkit-text-fill-color:transparent;
              background-clip:text;}
.result-name{font-size:14px;color:var(--dim);margin-bottom:4px;}
.result-title-text{font-size:18px;font-weight:700;margin-bottom:24px;}

/* 雷达图 */
.radar-wrap{width:200px;height:200px;margin:0 auto 20px;}
.radar-wrap svg{width:100%;height:100%;}
.radar-area{fill:rgba(99,102,241,.15);stroke:var(--accent);stroke-width:2;
            stroke-dasharray:300;animation:radarDraw 1s ease-out .5s both;}
.radar-label{font-size:11px;fill:var(--dim);font-weight:600;}
.radar-val{font-size:12px;fill:var(--accent);font-weight:700;}

.result-dims{display:flex;justify-content:center;gap:20px;margin-bottom:20px;}
.result-dim{text-align:center;}
.result-dim-label{font-size:11px;color:var(--dim);margin-bottom:4px;}
.result-dim-val{font-size:20px;font-weight:700;}

.result-conf{display:inline-block;padding:4px 14px;border-radius:12px;
             font-size:12px;font-weight:600;margin-bottom:20px;}
.result-date{font-size:11px;color:var(--dim);margin-bottom:20px;}

/* 提升建议 */
.improve-section{text-align:left;background:var(--bg);border-radius:12px;
                 padding:16px;margin-top:16px;}
.improve-section h4{font-size:13px;font-weight:600;margin-bottom:10px;color:var(--dim);}
.improve-item{font-size:12px;color:var(--text);padding:6px 0;
              border-bottom:1px solid var(--border);line-height:1.5;}
.improve-item:last-child{border-bottom:none;}

.result-actions{display:flex;gap:10px;justify-content:center;margin-top:24px;}
.result-actions button{padding:10px 24px;border-radius:12px;font-size:14px;
                       font-weight:600;cursor:pointer;font-family:inherit;
                       border:none;transition:transform .1s;}
.result-actions button:active{transform:scale(.97);}
.btn-primary-r{background:var(--accent);color:#fff;}
.btn-ghost-r{background:var(--border);color:var(--text);}

/* Old result banner (hidden, replaced by overlay) */
#result-banner{display:none !important;}

/* ── Input bar ── */
#bar{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);
     background:rgba(var(--surface-rgb,26,29,39),.80);
     backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
     display:flex;gap:8px;
     align-items:flex-end;flex-shrink:0;
     padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
#input{flex:1;width:100%;background:var(--bg);border:1px solid var(--border);
       border-radius:12px;color:var(--text);font-size:14px;
       padding:10px 14px 22px;resize:none;outline:none;max-height:100px;
       overflow-y:hidden;
       line-height:1.5;font-family:inherit;transition:border-color .2s;}
#input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.1);}
#input::placeholder{color:var(--dim);}
#kbd-hint{position:absolute;bottom:5px;right:10px;font-size:10px;color:var(--dim);
          opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;}
#input:focus ~ #kbd-hint{opacity:.7;}
.ibtn{border:none;cursor:pointer;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      flex-shrink:0;transition:transform .1s,background .15s;}
.ibtn:active{transform:scale(.92);}
#btn-mic{width:40px;height:40px;background:var(--border);color:var(--text);font-size:18px;}
#btn-mic.recording{background:var(--red);color:#fff;animation:pulse 1s ease-in-out infinite;}
#btn-mute{width:36px;height:36px;background:transparent;color:var(--dim);font-size:16px;}
#btn-mute.muted{opacity:.4;}
#btn-send{width:44px;height:44px;background:var(--accent);color:#fff;font-size:20px;
          border-radius:14px;box-shadow:0 2px 8px rgba(99,102,241,.3);}
#btn-send:hover{background:var(--accentH);}
#btn-send:disabled{background:var(--border);box-shadow:none;cursor:not-allowed;}

/* 音色设置行 - 精简 */
#voice-row{padding:0 14px 6px;font-size:11px;color:var(--dim);
           display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;}
#tts-engine-select,#tts-voice-select{
  font-size:11px;background:var(--bg2);color:var(--fg);
  border:1px solid var(--border);border-radius:4px;
  padding:2px 6px;cursor:pointer;outline:none;max-width:160px;}
#tts-engine-select:hover,#tts-voice-select:hover{border-color:var(--accent);}
#tts-test-btn{font-size:11px;background:none;border:1px solid var(--border);
  color:var(--dim);border-radius:4px;padding:2px 8px;cursor:pointer;}
#tts-test-btn:hover{border-color:var(--accent);color:var(--accent);}
#status-bar{padding:4px 14px 2px;font-size:11px;color:var(--dim);
            flex-shrink:0;text-align:center;}

/* ── User info bar ── */
#user-info-bar{display:none;align-items:center;justify-content:space-between;
  padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);
  flex-shrink:0;}
#user-info-left{display:flex;align-items:center;gap:10px;min-width:0;}
#user-avatar-circle{width:36px;height:36px;border-radius:50%;overflow:hidden;
  flex-shrink:0;background:var(--border);display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:700;color:#fff;
  text-transform:uppercase;}
#user-avatar-circle img{width:100%;height:100%;object-fit:cover;}
#user-name-display{font-size:14px;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}
#btn-new-exam{padding:5px 10px;background:var(--accent);color:#fff;
  border:none;border-radius:8px;font-size:12px;cursor:pointer;
  font-family:inherit;transition:background .15s,opacity .15s;
  white-space:nowrap;flex-shrink:0;opacity:.85;}
#btn-new-exam:hover{opacity:1;}
#btn-logout{padding:5px 10px;background:var(--border);color:var(--dim);
  border:none;border-radius:8px;font-size:12px;cursor:pointer;
  font-family:inherit;transition:background .15s,color .15s;
  white-space:nowrap;flex-shrink:0;}
#btn-logout:hover{background:var(--red);color:#fff;}

/* ── Evidence panel ── */
#ev-panel{width:340px;flex-shrink:0;display:flex;flex-direction:column;
          overflow:hidden;background:var(--surface);transition:box-shadow .3s;}
#ev-panel.highlight{box-shadow:inset 0 0 0 2px var(--accent);animation:shake .4s ease;}
#ev-header{height:40px;padding:0 16px;border-bottom:1px solid var(--border);
           display:flex;align-items:center;gap:8px;flex-shrink:0;}
#ev-header h2{font-size:13px;font-weight:600;flex:1;}
#ev-count{background:var(--border);color:var(--dim);font-size:11px;
          padding:2px 8px;border-radius:10px;}

/* Evidence upload reminder */
#ev-reminder{display:none;margin:10px 12px 0;padding:9px 12px;border-radius:10px;
             background:#f59e0b18;border:1px solid #f59e0b55;
             font-size:12px;color:#f59e0b;line-height:1.5;}
#ev-reminder strong{display:block;font-size:12px;margin-bottom:2px;color:#f59e0b;}

/* Drop zone */
#drop-zone{margin:12px;border:2px dashed var(--border);border-radius:var(--r);
           padding:22px;text-align:center;cursor:pointer;
           transition:border-color .2s,background .2s;flex-shrink:0;}
#drop-zone.drag{border-color:var(--accent);background:rgba(99,102,241,.08);}
#drop-zone:hover{border-color:var(--dim);}
#drop-zone .dz-icon{font-size:28px;margin-bottom:8px;}
#drop-zone p{font-size:12px;color:var(--dim);line-height:1.5;}
#drop-zone strong{color:var(--text);font-size:13px;display:block;margin-bottom:4px;}
#drop-zone .dz-hint{display:none;color:var(--accent);font-weight:600;margin-top:6px;font-size:12px;}
#file-input{display:none;}

/* Evidence list */
#ev-list{overflow-y:auto;padding:0 12px 12px;}

.ev-item{background:var(--bg);border:1px solid var(--border);
         border-radius:var(--r);margin-bottom:10px;overflow:hidden;
         animation:fadeInUp .3s ease-out;}
.ev-item-head{padding:10px 12px;display:flex;align-items:center;
              gap:8px;cursor:pointer;user-select:none;}
.ev-item-head:hover{background:rgba(255,255,255,.03);}
.fi-icon{font-size:20px;flex-shrink:0;}
.fi-name{flex:1;font-size:12px;font-weight:500;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vbadge{font-size:10px;font-weight:700;padding:2px 7px;
        border-radius:8px;flex-shrink:0;}
.v-high{background:rgba(34,197,94,.15);color:var(--green);}
.v-mid {background:rgba(234,179, 8,.15);color:var(--yellow);}
.v-low {background:rgba(239, 68,68,.15);color:var(--red);}
.v-wait{background:rgba(255,255,255,.08);color:var(--dim);}
.ev-remove{background:none;border:none;color:var(--dim);cursor:pointer;font-size:13px;
           padding:2px 5px;border-radius:4px;flex-shrink:0;line-height:1;
           transition:color .15s,background .15s;}
.ev-remove:hover{color:var(--red);background:rgba(239,68,68,.1);}
.ev-remove{background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;
           padding:2px 4px;border-radius:4px;flex-shrink:0;transition:color .15s;}
.ev-remove:hover{color:var(--red);}

.ev-detail{display:none;padding:0 12px 12px;border-top:1px solid var(--border);}
.ev-detail.open{display:block;}
.ev-row2{font-size:12px;margin-top:8px;color:var(--dim);line-height:1.6;}
.ev-row2 b{color:var(--text);font-weight:500;}
.tag-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.tag{background:var(--surface2);border:1px solid var(--border);
     border-radius:6px;font-size:11px;padding:2px 7px;color:var(--dim);}
.tag.warn{border-color:var(--yellow);color:var(--yellow);}
.tag.ok  {border-color:var(--green); color:var(--green);}

/* Evidence preview button */
.ev-preview-btn{cursor:pointer;font-size:14px;opacity:.45;transition:opacity .15s;flex-shrink:0;}
.ev-preview-btn:hover{opacity:1;}

/* ── Preview overlay ── */
#preview-overlay{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.78);
                 display:none;align-items:center;justify-content:center;}
#preview-overlay.show{display:flex;animation:fadeIn .3s ease;}
#preview-modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;
               width:min(860px,92vw);max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
#preview-header{display:flex;align-items:center;justify-content:space-between;
                padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
#preview-filename{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#preview-close{background:none;border:none;color:var(--dim);font-size:22px;cursor:pointer;
               padding:0 4px;line-height:1;}
#preview-close:hover{color:var(--text);}
#preview-body{flex:1;overflow:auto;padding:16px;}
#preview-body img{max-width:100%;height:auto;display:block;margin:0 auto;border-radius:8px;}
#preview-body pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;
                  padding:16px;font-size:13px;line-height:1.6;overflow-x:auto;
                  white-space:pre-wrap;word-wrap:break-word;color:var(--text);
                  font-family:'SF Mono','Fira Code','Consolas',monospace;max-height:70vh;}

/* Spinner */
.spinner{display:inline-block;width:14px;height:14px;
         border:2px solid var(--border);border-top-color:var(--accent);
         border-radius:50%;animation:spin .7s linear infinite;}

/* ── Icon buttons (ranking / history / evidence / theme) ── */
.icon-btn{width:36px;height:36px;background:var(--border);border:none;border-radius:12px;
          cursor:pointer;color:var(--text);display:flex;align-items:center;
          justify-content:center;position:relative;transition:background .15s,color .15s;
          padding:0;flex-shrink:0;}
.icon-btn:hover{background:var(--accent);color:#fff;}
.icon-btn svg{display:block;}
/* ── Theme picker ── */
.theme-btn{width:36px;height:36px;background:var(--border);border:none;border-radius:12px;
           cursor:pointer;color:var(--text);font-size:16px;display:flex;align-items:center;
           justify-content:center;position:relative;}
.theme-menu{display:none;position:absolute;top:44px;right:0;background:var(--surface);
            border:1px solid var(--border);border-radius:12px;padding:10px;z-index:100;
            box-shadow:0 8px 24px rgba(0,0,0,.4);min-width:170px;
            max-height:70vh;overflow-y:auto;}
.theme-menu.open{display:block;animation:fadeIn .2s ease;}
.theme-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
           cursor:pointer;font-size:12px;color:var(--text);transition:background .15s;
           border:none;background:none;width:100%;text-align:left;font-family:inherit;}
.theme-opt:hover{background:var(--surface2);}
.theme-opt.active{background:var(--accent);color:#fff;}
.theme-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;
           border:2px solid var(--border);}
.theme-opt.active .theme-dot{border-color:#fff;}

/* ── History panel (left sidebar) ── */
#history-panel{width:260px;flex-shrink:0;background:var(--surface);
               border-right:1px solid var(--border);display:flex;
               flex-direction:column;overflow:hidden;transition:width .3s;}
#history-panel.collapsed{width:0;border-right:none;overflow:hidden;}
.hp-header{height:40px;padding:0 16px;border-bottom:1px solid var(--border);
           display:flex;align-items:center;flex-shrink:0;}
.hp-header h2{font-size:13px;font-weight:600;color:var(--dim);margin-bottom:0;}
.hp-name{font-size:13px;font-weight:600;color:var(--dim);}
.hp-list{flex:1;overflow-y:auto;padding:8px;}
.hp-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
         cursor:pointer;transition:background .15s;margin-bottom:4px;font-size:12px;}
.hp-item:hover{background:var(--surface2);}
.hp-item.active{background:var(--accent);color:#fff;}
.hp-item.active .hp-date,.hp-item.active .hp-dur{color:rgba(255,255,255,.7);}
.hp-item.current{border:1px dashed var(--accent);background:rgba(99,102,241,.08);}
.hp-level{font-weight:700;font-size:13px;padding:2px 8px;border-radius:8px;
          min-width:32px;text-align:center;color:#fff;}
.hp-info{flex:1;min-width:0;}
.hp-date{color:var(--dim);font-size:11px;white-space:nowrap;}
.hp-preview{font-size:11px;color:var(--dim);margin-top:2px;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
            line-height:1.4;}
.hp-item.active .hp-date,.hp-item.active .hp-preview{color:rgba(255,255,255,.6);}
.hp-empty{padding:20px;text-align:center;color:var(--dim);font-size:12px;}

/* History read-only mode banner */
#history-banner{display:none;height:40px;padding:0 16px;background:rgba(99,102,241,.1);
                border-bottom:1px solid var(--border);font-size:12px;
                color:var(--accent);text-align:center;flex-shrink:0;cursor:pointer;
                align-items:center;justify-content:center;}
#history-banner:hover{background:rgba(99,102,241,.15);}

/* Mobile toggles */
#ev-toggle,#history-toggle{display:none;}

@media(max-width:680px){
  header{padding:8px 14px;gap:8px;}
  #progress-wrap{min-width:120px;order:10;flex-basis:100%;}
  #history-panel{display:none;position:fixed;top:0;left:0;bottom:0;width:280px;
                 z-index:70;box-shadow:4px 0 20px rgba(0,0,0,.5);
                 transform:translateX(-100%);transition:transform .3s ease;}
  #history-panel.open{display:flex;transform:translateX(0);}
  #history-panel.collapsed{display:none;}
  #ev-panel{display:none;position:fixed;bottom:0;left:0;right:0;top:auto;
            height:60vh;z-index:60;width:100%;border-radius:20px 20px 0 0;
            border:1px solid var(--border);border-bottom:none;
            transform:translateY(100%);transition:transform .3s ease;}
  #ev-panel.open{display:flex;transform:translateY(0);animation:slideUp .3s ease-out;}
  #ev-toggle,#history-toggle{display:flex;width:40px;height:40px;}
  .result-card{padding:28px 20px;}
  .result-level{font-size:44px;}
  /* 移动端输入区优化：防止 iOS 字体缩放，固定在键盘上方 */
  #input{font-size:16px;} /* ≥16px 可阻止 iOS Safari 自动缩放 */
  #bar{position:sticky;bottom:0;
       background:rgba(var(--surface-rgb,26,29,39),.85);
       backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
       padding:8px 10px 12px;border-top:1px solid rgba(255,255,255,.08);}
  #chat-panel{padding-bottom:0;}
  /* 点击历史面板遮罩关闭 */
  #history-panel.open::after{
    content:'';position:fixed;inset:0;left:280px;background:rgba(0,0,0,.4);z-index:-1;
  }
}
#scroll-bottom{position:absolute;bottom:108px;right:16px;width:36px;height:36px;
               border-radius:50%;background:var(--accent);color:#fff;border:none;
               cursor:pointer;font-size:18px;display:none;align-items:center;
               justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.4);z-index:10;
               transition:opacity .2s;}
#scroll-bottom:hover{opacity:.85;}

/* ── 排名面板：分组卡片响应式网格 ── */
.rk-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;padding:0 4px;}
@media(min-width:760px){.rk-cards-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:900px){.rk-cards-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:500px){.rk-cards-grid{grid-template-columns:1fr;}}

/* ── F9: 阶段里程碑 ── */
#stage-milestones{
  display:flex;justify-content:space-between;padding:4px 2px 0;gap:4px;
}
.milestone{
  flex:1;text-align:center;font-size:10px;color:var(--dim);padding:2px 0;
  border-radius:4px;transition:all .3s ease;position:relative;
}
.milestone::before{
  content:'';display:block;width:6px;height:6px;border-radius:50%;
  background:var(--border);margin:0 auto 2px;transition:all .3s ease;
}
.milestone.done::before{background:var(--accent);}
.milestone.done{color:var(--text);font-weight:600;}
.milestone.active::before{
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(79,70,229,.2);
  animation:pulse-dot 1.5s infinite;
}
.milestone.active{color:var(--accent);}

@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 3px rgba(79,70,229,.2);}
  50%{box-shadow:0 0 0 6px rgba(79,70,229,.08);}
}

#eta-row{
  font-size:10px;color:var(--dim);text-align:center;padding-top:2px;
}

/* ── F9: 能力预览弹窗 ── */
#preview-grade-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
  z-index:500;align-items:center;justify-content:center;padding:24px 16px;
}
.pg-dim-tag{
  font-size:11px;padding:4px 10px;border-radius:6px;
  background:var(--surface2);color:var(--text);
}
.pg-dim-tag b{color:var(--accent);}
#preview-grade-overlay h5{
  margin:0 0 8px;font-size:13px;color:var(--text);font-weight:600;
}
#preview-grade-overlay ul{
  margin:0;padding-left:20px;color:var(--dim);font-size:12px;line-height:1.8;
}