/* ============================================================
   LuBan Panel — CSS Variables Theme System + Responsive
   ============================================================ */

:root {
  /* ─── 色彩 ─── */
  --bg-body: #0f172a;
  --bg-header: linear-gradient(135deg, #141c2e 0%, #0f172a 100%);
  --bg-nav: #141c2e;
  --bg-card: #141c2e;
  --bg-card-hover: #1a2338;
  --bg-input: #0f172a;
  --bg-chat: #0f172a;
  --bg-chat-user: #1a2d4a;
  --bg-chat-ai: #1a2338;
  --bg-chat-system: transparent;
  --bg-code: #0f1520;
  --bg-modal: #1a2338;
  --bg-overlay: rgba(0,0,0,0.6);
  --bg-surface: #141c2e;
  --bg-surface-variant: #1a2338;
  --bg-log: #0f172a;
  --scrollbar-track: #0f172a;
  --scrollbar-thumb: #334155;
  --range-track: #243050;
  --range-thumb: #60a5fa;

  /* 文字 */
  --text-primary: #f1f5f9;
  --text-secondary: #9aa5b8;
  --text-muted: #6b7a94;
  --text-accent: #60a5fa;
  --text-link: #38bdf8;
  --text-on-action: #fff;

  /* 边框 */
  --border-subtle: #1e2a42;
  --border-card: #243050;
  --border-focus: #3b82f6;
  --border-chat-user: #2a4a70;
  --border-chat-ai: #253050;
  --border-chat-system: var(--border-card);

  /* 按钮 */
  --btn-primary: #2563eb;
  --btn-primary-hover: #3b82f6;
  --btn-secondary: #1e3a5f;
  --btn-secondary-hover: #2a4a70;
  --btn-danger: #991b1b;
  --btn-danger-hover: #b91c1c;

  /* ─── 状态色（翠绿/正红/琥珀 标准）─── */
  --status-done: #22c55e;
  --status-done-bg: rgba(34,197,94,0.12);
  --status-failed: #ef4444;
  --status-failed-hover: #dc2626;
  --status-failed-bg: rgba(239,68,68,0.12);
  --status-running: #f59e0b;
  --status-running-bg: rgba(245,158,11,0.12);
  --status-pending: #6b7280;
  --status-pending-bg: rgba(107,114,128,0.12);
  --status-cancelled: #a855f7;
  --status-cancelled-bg: rgba(168,85,247,0.12);
  --status-waiting: #38bdf8;
  --status-waiting-bg: rgba(56,189,248,0.12);
  --status-blocked: #f97316;
  --status-blocked-bg: rgba(249,115,22,0.12);
  --status-scheduled: #8b5cf6;
  --status-scheduled-bg: rgba(139,92,246,0.12);
  --success-border: rgba(34,197,94,0.28);
  --danger-border: rgba(239,68,68,0.32);
  --danger-border-strong: rgba(239,68,68,0.45);
  --warning-border: rgba(245,158,11,0.32);
  --waiting-border: rgba(56,189,248,0.30);
  --cancelled-border: rgba(168,85,247,0.30);
  --scheduled-border: rgba(139,92,246,0.30);
  --accent-bg: rgba(37,99,235,0.10);
  --accent-bg-subtle: rgba(37,99,235,0.08);
  --accent-border: rgba(37,99,235,0.26);
  --warning-glow: rgba(252,204,51,0.25);
  --accent-glow: rgba(37,99,235,0.25);

  /* ─── 阴影 / 动效 ─── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-card: 0 2px 8px var(--bg-overlay);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-modal: 0 20px 50px rgba(0,0,0,0.5);
  --transition-fast: 0.15s ease;
  --transition-card: 0.2s cubic-bezier(0.4,0,0.2,1);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --control-height: 34px;

  /* ─── Widget 富内容卡片别名（var() 在使用处解析，亮暗主题自动跟随）─── */
  --card: var(--bg-card);
  --border: var(--border-card);
  --bg-subtle: var(--bg-surface-variant);
  --text: var(--text-primary);
  --accent: var(--text-link);
  --bg-tag: var(--bg-surface-variant);
}

/* ─── 亮色主题覆盖 ─── */
[data-theme="light"] {
  --bg-body: #f8fafc;
  --bg-header: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);
  --bg-nav: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-input: #ffffff;
  --bg-chat: #f1f5f9;
  --bg-chat-user: #dbeafe;
  --bg-chat-ai: #f8fafc;
  --bg-chat-system: transparent;
  --bg-code: #f1f5f9;
  --bg-modal: #ffffff;
  --bg-overlay: rgba(0,0,0,0.15);
  --bg-surface: #ffffff;
  --bg-surface-variant: #f1f5f9;
  --bg-log: #f8fafc;
  --scrollbar-track: #e2e8f0;
  --scrollbar-thumb: #94a3b8;
  --range-track: #cbd5e1;
  --range-thumb: #2563eb;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-accent: #2563eb;
  --text-link: #0284c7;
  --border-subtle: #e2e8f0;
  --border-card: #cbd5e1;
  --border-focus: #3b82f6;
  --border-chat-user: #93c5fd;
  --border-chat-ai: #e2e8f0;
  --border-chat-system: #cbd5e1;
  --btn-primary: #2563eb;
  --btn-primary-hover: #1d4ed8;
  --btn-secondary: #e2e8f0;
  --btn-secondary-hover: #cbd5e1;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-card: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 8px 20px rgba(0,0,0,0.12);
  --shadow-modal: 0 20px 50px rgba(0,0,0,0.15);
}

/* ─── 主题切换按钮（位于 topbar 操作区） ─── */
.theme-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 999px;
  width: 40px;
  height: 30px;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--border-focus); background: var(--bg-card-hover); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

* { box-sizing: border-box; }
* { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid var(--scrollbar-track); }
input[type="range"] { accent-color: var(--range-thumb); }
input[type="range"]::-webkit-slider-runnable-track { background: var(--range-track); border-radius: 999px; height: 6px; }
input[type="range"]::-webkit-slider-thumb { background: var(--range-thumb); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--range-thumb); }
body { font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; margin: 0; background: var(--bg-body); color: var(--text-primary); transition: background 0.3s ease, color 0.3s ease; }

/* 键盘可达性：统一焦点环（鼠标点击不触发） */
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 216px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--bg-nav);
  border-right: 1px solid var(--border-subtle);
  padding: 18px 12px;
  overflow-y: auto;
}
.app-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  height: 56px;
  padding: 0 24px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.topbar-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.header-brand { display: flex; align-items: center; gap: 12px; padding: 3px 6px 18px; }
.header-brand h1 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0; }
.header-brand .sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.header-logo { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(56,189,248,0.35)); }
.logout-link { color: var(--text-muted); text-decoration: none; font-size: 12px; padding: 6px 14px; border: 1px solid var(--border-card); border-radius: var(--radius-sm); transition: all var(--transition-fast); white-space: nowrap; }
.logout-link:hover { color: var(--text-primary); border-color: var(--border-focus); background: var(--bg-card-hover); }
.side-nav { display: flex; flex-direction: column; gap: 18px; }
.nav-group-title {
  padding: 0 10px 7px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.tab {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  margin: 1px 0;
}
.tab:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.tab.active { background: var(--accent-bg); color: var(--text-accent); font-weight: 700; border-left-color: var(--btn-primary); }
main { flex: 1; padding: 20px 24px 24px; min-width: 0; overflow-x: auto; }
.panel { display: none; }
.panel.active { display: block; }
.hidden-control { display: none !important; }
.u-span-all { grid-column: 1 / -1; }
.section-heading { margin-top: 24px; }
.section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.section-actions-compact { margin-top: 8px; }
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.toolbar-compact { gap: 6px; }
.textarea-mono {
  width: 100%;
  font-family: "Cascadia Code", "Consolas", monospace;
}
.data-table { width: 100%; }
.table-shell {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.table-shell table { margin-top: 0; }
.table-shell th:first-child,
.table-shell td:first-child { padding-left: 14px; }
.table-shell th:last-child,
.table-shell td:last-child { padding-right: 14px; }
.empty-state {
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px dashed var(--border-card);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  font-size: 13px;
}
.panel-card,
.request-card,
.settings-row {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
}
.request-card {
  padding: 12px 14px;
  margin-bottom: 10px;
  border-left: 3px solid var(--text-accent);
}
.request-card .ap-actions,
.request-card .ck-actions,
.request-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.settings-row {
  padding: 10px 12px;
}

/* ─── 面板区块标题 ─── */
.panel > h3 { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-top: 0; margin-bottom: 16px; }

/* ─── 首页状态带 ─── */
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.card {
  background: var(--bg-card);
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  box-shadow: none;
  transition: border-color var(--transition-fast);
  position: relative;
  overflow: hidden;
  min-height: 54px;
}
.card:hover { border-color: var(--border-focus); }
.card h3 { margin: 0 0 4px 0; font-size: 11px; color: var(--text-secondary); font-weight: 600; letter-spacing: 0; }
.card > div { font-size: 20px; font-weight: 800; color: var(--text-accent); line-height: 1.2; font-variant-numeric: tabular-nums; }

/* 状态卡片：左侧色条 + 数字与语义色关联 */
.status-card { border-left: 3px solid var(--border-card); }
.card-running { border-left-color: var(--status-running); }
.card-running > div { color: var(--status-running); }
.card-done { border-left-color: var(--status-done); }
.card-done > div { color: var(--status-done); }
.card-failed { border-left-color: var(--status-failed); }
.card-failed > div { color: var(--status-failed); }
.card-tokens { border-left-color: var(--text-accent); }
.card-balance { border-left-color: var(--status-scheduled); }

/* 余额卡片宽度贴合内容（auto 列，绝不留白），前四卡（运行中/已完成/失败/
   总 Token）等宽分剩余空间。provider 越多，余额越宽、左侧越窄。
   仅宽屏生效，窄屏走文件末尾的堆叠响应式。 */
@media (min-width: 1025px) {
  .status-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  }
}
/* 余额列表：每列一个 .balance-col（最多 2 个 provider），列内用 grid 把
   名字列、值列对齐——同列不同 provider 的名字共享等宽列，值起点对齐。
   provider 超出 2 个后由 JS 拆到右侧新列。 */
#stat-balance {
  font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--text-primary);
  display: flex;
  align-items: start;
  gap: 0 18px;
}
.balance-col {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  row-gap: 3px;
  align-content: start;
}
.balance-provider { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.balance-value { color: var(--text-accent); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance-error { color: var(--text-muted); font-weight: 400; }

/* ─── 上下文水球（聊天框右上角） ─── */
.ctx-orb { position: relative; flex: 0 0 auto; margin-left: 4px; }
.ctx-orb-ball {
  --orb-c: #22c55e;
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--border-card);
  background: var(--bg-input);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.22);
  cursor: default;
}
.ctx-orb-ball.ctx-ok { --orb-c: #22c55e; }
.ctx-orb-ball.ctx-warn { --orb-c: #f59e0b; }
.ctx-orb-ball.ctx-danger { --orb-c: #ef4444; }
/* 液面：锚定底部，高度=占比 */
.ctx-orb-water {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0%;
  background: var(--orb-c);
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}
/* 液面高光：一条更亮的细线标出水位，替代旋转波浪，简约清爽 */
.ctx-orb-water::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}
.ctx-orb-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-shadow: 0 0 3px var(--bg-input), 0 0 3px var(--bg-input), 0 1px 1px var(--bg-input);
  pointer-events: none;
}
/* 悬停气泡 */
.ctx-orb-tip {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  z-index: 60;
  min-width: 130px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11px; line-height: 1.55;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  pointer-events: none;
}
.ctx-orb-tip strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.ctx-orb-tip-sub { color: var(--text-muted); font-size: 10px; }
.ctx-orb:hover .ctx-orb-tip { opacity: 1; visibility: visible; transform: translateY(0); }

form { background: var(--bg-surface); padding: 16px; border-radius: var(--radius-md); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px; border: 1px solid var(--border-subtle); transition: all 0.3s ease; }
form input, form select, form textarea { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-card); padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; transition: border-color var(--transition-fast); }
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-bg); }
form textarea { width: 100%; font-family: inherit; }

form button { background: var(--btn-primary); color: var(--text-on-action); border: none; padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: background var(--transition-fast); }
form button:hover { background: var(--btn-primary-hover); }
button {
  min-height: var(--control-height);
  background: var(--btn-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin: 4px 2px;
  font-weight: 500;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
button:hover { background: var(--btn-secondary-hover); border-color: var(--border-focus); }
button:active:not([disabled]) { transform: translateY(1px); }
button.btn-primary,
.btn-primary {
  background: var(--btn-primary);
  border-color: var(--btn-primary);
  color: var(--text-on-action);
}
button.btn-primary:hover:not([disabled]),
.btn-primary:hover:not([disabled]) {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}
button.btn-secondary,
.btn-secondary {
  background: var(--btn-secondary);
  border-color: var(--border-card);
  color: var(--text-primary);
}
button.btn-secondary:hover:not([disabled]),
.btn-secondary:hover:not([disabled]) {
  background: var(--btn-secondary-hover);
  border-color: var(--border-focus);
}

table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 12px; }
table th, table td { border-bottom: 1px solid var(--border-subtle); padding: 10px 12px; text-align: left; font-size: 13px; vertical-align: middle; }
table th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg-surface-variant); border-bottom: 1px solid var(--border-card); position: sticky; top: 0; z-index: 1; }
table td code { font-variant-numeric: tabular-nums; }
tr:hover td { background: color-mix(in srgb, var(--bg-card-hover) 72%, transparent); }

#provider-table {
  table-layout: fixed;
}
.col-provider-name { width: 16%; }
.col-provider-model { width: 38%; }
.col-provider-status { width: 22%; }
.col-provider-speed { width: 10%; }
.col-provider-action { width: 14%; }
#provider-table th,
#provider-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#provider-table .provider-action-cell {
  overflow: visible;
}
#provider-table .provider-action-cell button {
  width: 100%;
  min-width: 92px;
  margin: 0;
}
.provider-speed-cell {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.provider-status-ok,
.provider-status-warn,
.provider-status-bad,
.provider-status-muted {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
}
.provider-status-ok { color: var(--status-done); background: var(--status-done-bg); border-color: var(--success-border); }
.provider-status-warn { color: var(--status-running); background: var(--status-running-bg); border-color: var(--warning-border); }
.provider-status-bad { color: var(--status-failed); background: var(--status-failed-bg); border-color: var(--danger-border); }
.provider-status-muted { color: var(--text-muted); background: var(--bg-surface-variant); }
.status-muted { color: var(--text-muted); }
.scheduled-row { opacity: 0.85; }
.action-approve {
  width: auto;
  padding: 6px 18px;
}
.trust-badge {
  color: var(--status-done);
  background: var(--status-done-bg);
  border: 1px solid var(--success-border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  justify-self: start;
}

pre { background: var(--bg-code); padding: 14px; border-radius: var(--radius-sm); overflow: auto; font-size: 12px; border: 1px solid var(--border-subtle); max-height: 480px; }

#skills-list { display: none; }
#skills-list.active { display: block; }
#skills-list > h3 { margin-bottom: 12px; }

#skills-list-content {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.skill-category-sidebar {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 8px;
  max-height: calc(100vh - 240px);
  overflow: auto;
}
.skill-category-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px 0;
  padding: 9px 10px;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  text-align: left;
}
.skill-category-btn.active,
.skill-category-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.skill-category-main {
  min-width: 0;
}
.skill-category-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--text-secondary);
}
.skill-category-title strong { color: var(--text-primary); }
.skill-category-main .category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.skill-category summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  transition: background var(--transition-fast);
  user-select: none;
  list-style: none;
}
.skill-category summary::-webkit-details-marker { display: none; }
.skill-category summary::before {
  content: "▸";
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.skill-category[open] summary::before { transform: rotate(90deg); }
.skill-category summary:hover { background: var(--bg-card-hover); }
.skill-category .category-count {
  margin-left: auto;
  background: var(--bg-surface-variant);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}
.skill-category .category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 0 0 0;
}

/* 技能卡片（列表页） */
.skill-card {
  background: var(--bg-card);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-card), box-shadow var(--transition-card), border-color var(--transition-fast);
  position: relative;
  overflow: hidden;
  flex: 1 1 260px;
  max-width: 400px;
  min-width: 220px;
}
.skill-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--text-accent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.skill-card:hover { box-shadow: var(--shadow-card); border-color: var(--border-focus); }
.skill-card:hover::before { opacity: 1; }
.skill-card .skill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--accent-bg);
  color: var(--text-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 10px;
}
.skill-card h4 {
  margin: 0 0 8px 0;
  color: var(--text-accent);
  font-family: "Cascadia Code", "Consolas", monospace;
  font-size: 14px;
  font-weight: 600;
}
.skill-card .desc {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.skill-card .params {
  font-family: "Cascadia Code", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-code);
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

/* ─── 状态色彩标准化（翠绿/正红/琥珀）─── */
.status-done { color: var(--status-done); }
.status-failed { color: var(--status-failed); }
.status-running { color: var(--status-running); }
.status-pending { color: var(--status-pending); }
.status-cancelled { color: var(--status-cancelled); }
.status-waiting { color: var(--status-waiting); }
.status-blocked { color: var(--status-blocked); }
.status-scheduled { color: var(--status-scheduled); }

.status-pill,
.type-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-variant);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.type-chip {
  min-width: 0;
  margin-left: 6px;
  color: var(--text-accent);
  background: var(--accent-bg);
  border-color: var(--accent-border);
}
.file-kind {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 6px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--bg-surface-variant);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.status-pill.status-done,
.timeline-status.status-done { background: var(--status-done-bg); color: var(--status-done); border-color: var(--success-border); }
.status-pill.status-failed,
.timeline-status.status-failed { background: var(--status-failed-bg); color: var(--status-failed); border-color: var(--danger-border); }
.status-pill.status-running,
.status-pill.status-pending,
.timeline-status.status-running,
.timeline-status.status-pending { background: var(--status-running-bg); color: var(--status-running); border-color: var(--warning-border); }
.status-pill.status-waiting,
.timeline-status.status-waiting { background: var(--status-waiting-bg); color: var(--status-waiting); border-color: var(--waiting-border); }
.status-pill.status-cancelled,
.timeline-status.status-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled); border-color: var(--cancelled-border); }
.status-pill.status-blocked,
.timeline-status.status-blocked { background: var(--status-blocked-bg); color: var(--status-blocked); border-color: var(--warning-border); }
.status-pill.status-scheduled,
.timeline-status.status-scheduled { background: var(--status-scheduled-bg); color: var(--status-scheduled); border-color: var(--scheduled-border); }

.task-toolbar { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
button.danger { background: var(--btn-danger); border-color: var(--danger-border-strong); color: var(--text-on-action); }
button.danger:hover { background: var(--status-failed-hover); border-color: var(--status-failed); }
button.ghost {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-color: var(--border-card);
}
button.ghost:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
button.danger.ghost {
  color: var(--status-failed);
  background: var(--status-failed-bg);
  border-color: var(--danger-border);
}
button.danger.ghost:hover {
  color: var(--text-on-action);
  background: var(--btn-danger);
}
button.btn-sm {
  min-height: 26px;
  padding: 3px 10px;
  font-size: 12px;
  margin: 2px;
}
button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- 标注式表单（首页聊天） ---------- */
form.labeled-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
form.labeled-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; color: var(--text-secondary); }
form.labeled-form label > span { color: var(--text-secondary); font-size: 12px; }
form.labeled-form label > input,
form.labeled-form label > select,
form.labeled-form label > textarea { width: 100%; }
form.labeled-form .full { grid-column: 1 / -1; }
form.labeled-form small.hint-inline { color: var(--text-muted); font-size: 11px; line-height: 1.5; }
form.labeled-form small.hint-inline code { background: var(--bg-log); padding: 1px 4px; border-radius: 3px; color: var(--text-accent); }
form.labeled-form input:invalid { border-color: var(--status-failed); }

.hint { color: var(--text-secondary); font-size: 12px; margin: -4px 0 12px 0; line-height: 1.5; }

/* ---------- 配置页：每个 provider 一行 ---------- */
#providers-config { display: flex; flex-direction: column; gap: 8px; }
.pr-add-btn { align-self: flex-start; background: var(--btn-primary); color: var(--text-on-action); padding: 7px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; margin-bottom: 4px; }
.pr-add-btn:hover { background: var(--btn-primary-hover); }
.pr-builtin-tag { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px; background: var(--bg-tag, rgba(100,100,100,0.15)); color: var(--text-secondary); margin-left: 6px; vertical-align: middle; }
.pr-custom-tag { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px; background: var(--status-waiting-bg); color: var(--text-link); margin-left: 6px; vertical-align: middle; }
.pr-add-form { background: var(--bg-card, rgba(30,30,40,0.6)); border: 1px solid var(--border-card, rgba(255,255,255,0.08)); border-radius: 8px; padding: 16px 20px; margin-bottom: 4px; }
.pr-add-form-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.pr-add-form-hint { font-size: 11px; color: var(--text-secondary); margin: 0 0 12px; }
.pr-add-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-add-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.pr-add-form-grid label small { font-size: 10px; opacity: 0.7; }
.pr-add-form-grid input { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-card); padding: 7px 10px; border-radius: 4px; font-size: 13px; }
.pr-add-form-grid input:focus { outline: none; border-color: var(--text-accent, #38bdf8); }
.pr-add-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.pr-add-cancel { background: transparent; color: var(--text-secondary); padding: 6px 14px; border: 1px solid var(--border-card); border-radius: 4px; cursor: pointer; font-size: 12px; }
.pr-add-cancel:hover { border-color: var(--text-secondary); }
.pr-add-confirm { background: var(--btn-primary); color: var(--text-on-action); padding: 6px 18px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
.pr-add-confirm:hover:not([disabled]) { background: var(--btn-primary-hover); }
.pr-add-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.pr-add-form-error { color: var(--status-failed); font-size: 12px; margin-top: 8px; }
.provider-row { display: grid; grid-template-columns: 140px 80px 1fr 1.2fr 1fr 1.5fr 150px auto auto; gap: 8px; align-items: end; }
.provider-row > div, .provider-row > label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-secondary); }
.provider-row .pr-name { justify-content: center; font-size: 14px; color: var(--text-accent); flex-direction: row; align-items: center; flex-wrap: wrap; }
.provider-row .pr-enabled { flex-direction: row; align-items: center; gap: 6px; color: var(--text-secondary); }
.provider-row input[type="text"], .provider-row input[type="password"] {
  background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-card); padding: 6px 8px; border-radius: 4px; font-size: 12px;
}
.provider-row .pr-price, .provider-row .pr-ctxwin { font-size: 11px; }
.provider-row .pr-price input, .provider-row .pr-ctxwin input { width: 100%; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-card); padding: 6px 8px; border-radius: 4px; font-size: 12px; }
.provider-row .pr-ctxwin small { color: var(--text-muted); font-size: 10px; }
.provider-row .pr-save { align-self: end; background: var(--btn-primary); color: var(--text-on-action); padding: 7px 14px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
.provider-row .pr-save:hover:not([disabled]) { background: var(--btn-primary-hover); }
.provider-row .pr-delete { align-self: end; background: transparent; color: var(--status-failed); padding: 7px 10px; border: 1px solid var(--danger-border-strong); border-radius: 4px; cursor: pointer; font-size: 12px; }
.provider-row .pr-delete:hover:not([disabled]) { background: var(--status-failed); color: var(--text-on-action); }

@media (max-width: 1100px) {
  form.labeled-form { grid-template-columns: 1fr; }
  .provider-row { grid-template-columns: 1fr 1fr; }
  .pr-add-form-grid { grid-template-columns: 1fr; }
}

/* ---------- 路由配置 ---------- */
.routing-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.routing-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.routing-label { display: flex; flex-direction: column; gap: 2px; }
.routing-label strong { font-size: 13px; color: var(--text-primary); }
.routing-desc { font-size: 11px; color: var(--text-muted); }
.routing-select-wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.routing-select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 13px;
  min-width: 220px;
  max-width: 400px;
}
.routing-select:focus { outline: none; border-color: var(--border-focus); }
.routing-custom-input {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 13px;
  flex: 1;
  min-width: 180px;
}
.routing-custom-input:focus { outline: none; border-color: var(--border-focus); }
.routing-actions { display: flex; gap: 8px; margin-top: 4px; }
.routing-save-btn {
  background: var(--btn-primary);
  color: var(--text-on-action);
  padding: 7px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.routing-save-btn:hover:not([disabled]) { background: var(--btn-primary-hover); }
.routing-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 1100px) {
  .routing-row { grid-template-columns: 1fr; }
  .routing-select { max-width: 100%; }
}

/* ---------- 首页工作空间 / 审批模式 bar ---------- */
.ws-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg-surface); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border-subtle);
  margin-bottom: 12px; }
.ws-bar select { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-card);
  padding: 6px 8px; border-radius: 4px; font-size: 13px; }
.ws-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.ws-path { font-family: monospace; color: var(--text-accent); font-size: 12px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-add { background: var(--btn-secondary); color: var(--text-primary); padding: 6px 12px; }

/* ---------- 聊天流：两列布局 ---------- */
/* 用固定高度 + grid，让左列内部滚动、右列独立，不会被聊天内容撑高 */
.chat-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
  height: min(76vh, calc(100vh - 188px));
  min-height: 420px;
}

/* 左列：消息记录 */
.chat-col-log {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
  min-height: 0;
}
.chat-log-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.chat-log-toolbar .chat-session-label { flex: 1; }
.chat-log-toolbar code {
  background: var(--bg-log); padding: 2px 7px; border-radius: 3px;
  color: var(--text-accent); font-family: monospace; font-size: 11px;
}
.chat-new-btn {
  background: var(--status-done-bg); color: var(--status-done);
  border: 1px solid var(--success-border); padding: 4px 12px; border-radius: 4px;
  font-size: 12px; cursor: pointer; margin: 0;
}
.chat-new-btn:hover { background: var(--status-done); border-color: var(--status-done); color: var(--text-on-action); }
.chat-clear-btn {
  background: transparent; color: var(--text-secondary); border: 1px solid var(--border-card);
  padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; margin: 0;
}
.chat-clear-btn:hover { background: var(--bg-card-hover); color: var(--text-secondary); }

.chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-log);
  min-height: 0;
  scroll-behavior: smooth;
}

/* 右列：输入区 - 固定高度，不随聊天内容拉伸 */
.chat-col-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-surface);
  overflow-y: auto;
  min-height: 0;
}
.composer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.chat-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}
.chat-field > span { color: var(--text-muted); font-size: 10px; }
.chat-field > input,
.chat-field > select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 5px 7px;
  border-radius: 4px;
  font-size: 12px;
}
.chat-col-composer textarea {
  flex: 1;
  min-height: 240px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.chat-col-composer textarea:focus,
.chat-field > input:focus,
.chat-field > select:focus {
  outline: none;
  border-color: var(--btn-primary);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* 发送区按钮行：[+] [发送] [⏸] */
.composer-actions {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.composer-btn {
  background: var(--btn-secondary);
  color: var(--text-primary);
  border: 1px solid var(--btn-secondary-hover);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.composer-btn:hover:not([disabled]) { background: var(--btn-secondary-hover); }
.composer-btn:active:not([disabled]) { background: var(--btn-secondary-hover); }
.composer-btn.send-btn {
  flex: 1;
  padding: 9px 0;
  background: var(--btn-primary);
  border-color: var(--btn-primary);
  color: var(--text-on-action);
}
.composer-btn.send-btn:hover:not([disabled]),
.composer-btn.send-btn:active:not([disabled]) {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}
.composer-btn.add-btn,
.composer-btn.pause-btn {
  flex: 0 0 58px;
  padding: 9px 0;
  font-size: 12px;
  line-height: 1;
}
.composer-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.composer-btn.pause-btn.is-ended {
  background: var(--status-failed-bg);
  border-color: var(--status-failed);
  color: var(--status-failed);
  font-size: 11px;
}

/* ─── 输入区顶部控件行 ─── */
.composer-top-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

/* ─── 高级选项折叠区 ─── */
.composer-advanced {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}
.composer-advanced > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.3px;
}
.composer-advanced > summary::-webkit-details-marker { display: none; }
.composer-advanced > summary::before {
  content: "▸";
  font-size: 9px;
  transition: transform 0.15s;
  display: inline-block;
}
.composer-advanced[open] > summary::before { transform: rotate(90deg); }
.composer-advanced > summary:hover { color: var(--text-secondary); }
.composer-advanced .composer-grid {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border-subtle);
}

/* 已选附件预览 */
.composer-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.composer-attachments:empty { display: none; }
.composer-attachment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 6px;
  background: var(--bg-surface-variant);
  border: 1px solid var(--border-card);
  border-radius: 4px;
  color: var(--text-primary);
}
.composer-attachment .remove {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 600;
}
.composer-attachment .remove:hover { color: var(--status-failed); }

/* 历史会话面板 */
.chat-history {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-primary);
}
.chat-history > summary {
  cursor: pointer;
  padding: 6px 10px;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-history > summary::-webkit-details-marker { display: none; }
.chat-history > summary::before {
  content: "▶";
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.chat-history[open] > summary::before { transform: rotate(90deg); }
.chat-history .chip {
  background: var(--btn-secondary);
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--text-primary);
}
.chat-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid var(--border-card);
}
.chat-history-list li {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.chat-history-list li:hover { background: var(--bg-card-hover); }
.chat-history-list li.active { background: var(--bg-card-hover); }
.chat-history-list .session-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-history-list .session-delete-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.chat-history-list li:hover .session-delete-btn { opacity: 1; }
.chat-history-list .session-delete-btn:hover {
  background: var(--status-failed);
  color: #fff;
  opacity: 1;
}
.chat-history-list .preview {
  color: var(--text-primary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-history-list .meta {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}
.chat-history-list .empty {
  padding: 8px 10px;
  color: var(--text-muted);
  text-align: center;
  cursor: default;
}
.chat-history-list .empty:hover { background: transparent; }

/* ─── 消息气泡（用户右 / AI 左 / 系统居中）─── */
.chat-msg {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.65;
  word-wrap: break-word;
  max-width: 100%;
  animation: msgAppear 0.25s ease;
}
@keyframes msgAppear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-msg.user {
  background: var(--bg-chat-user);
  border: 1px solid var(--border-chat-user);
  align-self: flex-end;
  max-width: 82%;
  border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
}
.chat-msg.user .msg-head {
  color: var(--text-accent);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-msg.user .msg-head::before { content: ""; }
.user-msg-copy {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border-card);
  color: var(--text-muted);
  padding: 0 6px;
  font-size: 10px;
  cursor: pointer;
  border-radius: 3px;
  line-height: 1.4;
}
.user-msg-copy:hover { background: var(--bg-card-hover); color: var(--text-secondary); }

/* ─── 聊天内图片（AI 回复中的 markdown 图片）─── */
.chat-inline-img {
  max-width: 100%;
  max-height: 240px;
  border-radius: 6px;
  margin: 6px 0;
  cursor: pointer;
  object-fit: contain;
  display: block;
  transition: opacity 0.15s;
}
.chat-inline-img:hover { opacity: 0.85; }

/* ─── 用户消息附件图片缩略图 ─── */
.msg-attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chat-attach-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border-card);
  transition: opacity 0.15s;
}
.chat-attach-thumb:hover { opacity: 0.85; }

/* ─── 全屏图片预览弹窗 ─── */
.img-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: imgPreviewIn 0.2s ease;
}
@keyframes imgPreviewIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.img-preview-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.15s;
  z-index: 1;
}
.img-preview-close:hover { background: rgba(255, 255, 255, 0.25); }
.img-preview-img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
}

.chat-msg.assistant {
  background: var(--bg-chat-ai);
  border: 1px solid var(--border-chat-ai);
  align-self: flex-start;
  width: 100%;
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
  box-shadow: var(--shadow-sm);
}
.chat-msg.assistant .msg-head {
  color: var(--status-done);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-msg.assistant .msg-head::before { content: ""; }

.chat-msg.assistant .msg-foot {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border-chat-ai);
  gap: 6px;
}

.chat-msg.system {
  background: var(--bg-surface-variant);
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  max-width: 80%;
  align-self: center;
  padding: 4px 14px;
  border-radius: 999px;
}
.chat-msg.system > * { background: transparent; padding: 0; }

/* ─── 状态徽章（使用标准色）─── */
.chat-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
}
.chat-status-badge.status-pending,
.chat-status-badge.status-running { background: var(--status-running-bg); color: var(--status-running); }
.chat-status-badge.status-paused  { background: var(--status-waiting-bg); color: var(--status-waiting); }
.chat-status-badge.status-waiting { background: var(--status-waiting-bg); color: var(--status-waiting); }
.chat-status-badge.status-done    { background: var(--status-done-bg); color: var(--status-done); }
.chat-status-badge.status-failed,
.chat-status-badge.status-cancelled { background: var(--status-failed-bg); color: var(--status-failed); }
.chat-status-badge.status-blocked { background: var(--status-blocked-bg); color: var(--status-blocked); }

/* 步骤块 */
.chat-steps { margin: 6px 0 8px; display: flex; flex-direction: column; gap: 3px; }
.chat-step {
  background: var(--bg-log);
  border-left: 2px solid var(--btn-secondary);
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
  border-radius: 2px;
}
.chat-step.step-result.ok  { border-left-color: var(--status-done); color: var(--status-done); }
.chat-step.step-result.fail { border-left-color: var(--status-failed); color: var(--status-failed); }
.chat-step .step-skill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.chat-step .step-skill .skill-call { flex: 1; }

/* ─── 技能卡片 ─── */
.skill-card {
  margin-top: 6px;
  background: var(--bg-chat);
  border: 1px solid var(--bg-card-hover);
  border-left: 3px solid var(--btn-secondary);
  border-radius: 4px;
  overflow: hidden;
}
.skill-card[open] {
  border-left-color: var(--border-focus);
}
.skill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  color: var(--text-accent);
}
.skill-header::-webkit-details-marker {
  display: none;
}
.skill-header::before {
  content: "▸";
  margin-right: 6px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.skill-card[open] .skill-header::before {
  content: "▾";
}
.skill-name {
  font-weight: 600;
  flex: 1;
}
.skill-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.skill-body {
  padding: 8px 10px;
  border-top: 1px solid var(--bg-card-hover);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skill-section-title {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.skill-section-copy {
  float: right;
  background: transparent;
  border: 1px solid var(--border-card);
  color: var(--text-muted);
  padding: 0 4px;
  font-size: 10px;
  cursor: pointer;
  border-radius: 3px;
  line-height: 1.4;
}
.skill-section-copy:hover { background: var(--bg-card-hover); color: var(--text-secondary); }
.skill-code {
  background: var(--bg-code);
  border: 1px solid var(--border-card);
  border-radius: 3px;
  padding: 6px 8px;
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow: auto;
}
.skill-pending {
  color: var(--text-muted);
  font-style: italic;
  font-size: 11px;
}
.skill-feedback {
  color: var(--status-failed);
  font-size: 11px;
  padding: 4px 0;
}
.skill-dot { font-size: 16px; line-height: 1; }
.skill-dot.status-done    { color: var(--status-done); }
.skill-dot.status-failed  { color: var(--status-failed); }
.skill-dot.status-pending { color: var(--text-muted); }
.skill-duration { color: var(--text-muted); font-size: 10px; }
.chat-step .step-content { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bg-card-hover); position: relative; }
.step-content-copy { position: absolute; top: 4px; right: 4px; z-index: 1; }
.step-meta { color: var(--text-muted); }

/* 亮色主题下聊天区 skill 卡片覆盖 */
[data-theme="light"] .chat-step .skill-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  border-left-color: var(--btn-primary);
}
[data-theme="light"] .chat-step .skill-card[open] {
  border-left-color: var(--text-accent);
}

/* 答案区 */
.answer-live { white-space: pre-wrap; font-size: 13px; color: var(--text-secondary); }
/* 流式增量渲染：稳定前缀按 markdown 排版，仅未闭合尾块保持纯文本换行 */
.answer-live .live-md { white-space: normal; }
.answer-live .live-tail { white-space: pre-wrap; }
.answer-hint { color: var(--text-muted); font-size: 12px; font-style: italic; }
.answer-body { font-size: 13px; color: var(--text-primary); margin-top: 4px; }
.answer-body p  { margin: 0 0 8px; }
.answer-body h1,.answer-body h2,.answer-body h3,
.answer-body h4,.answer-body h5,.answer-body h6 {
  color: var(--text-accent); margin: 12px 0 6px; font-size: 14px;
}
.answer-body ul,.answer-body ol { padding-left: 20px; margin: 4px 0 8px; }
.answer-body li { margin: 2px 0; }
.answer-body a  { color: var(--text-accent); }
.answer-body code { background: var(--bg-log); padding: 1px 5px; border-radius: 3px;
  font-family: "Cascadia Code","Consolas",monospace; font-size: 12px; color: var(--text-accent); }
.answer-body strong { color: var(--text-primary); }
.answer-body em { color: var(--text-secondary); }
.answer-meta {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.answer-error { color: var(--status-failed); font-size: 12px; margin-top: 6px; }

/* 代码块 */
.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  margin: 8px 0;
  overflow: hidden;
}
.code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 12px;
  background: var(--bg-code);
  border-bottom: 1px solid var(--border-subtle);
}
.code-lang {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: lowercase;
}
.code-copy {
  background: transparent;
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  margin: 0;
}
.code-copy:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.code-block pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: "Cascadia Code","Consolas","Fira Code",monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
  background: transparent;
  border: none;
  max-height: 420px;
}
.code-block pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }

/* 复制全部按钮 */
.answer-copy {
  background: transparent;
  border: 1px solid var(--border-card);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  margin: 0;
}
.answer-copy:hover { background: var(--bg-card-hover); color: var(--text-secondary); }

@media (max-width: 900px) {
  .chat-wrap { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .chat-col-log { border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .chat-col-composer { max-height: 340px; }
  .composer-grid { grid-template-columns: 1fr; }
}

/* ---------- 顶部审批徽章 ---------- */
.badge { display: inline-block; background: var(--btn-danger); color: var(--text-on-action); font-size: 10px;
  padding: 0 6px; border-radius: 8px; margin-left: 4px; vertical-align: middle; }

/* ---------- 审批页面 ---------- */
.approval-card { border-color: var(--status-running-bg); border-left-color: var(--status-running); }
.ap-path { font-size: 13px; color: var(--text-accent); margin-bottom: 4px; }
.ap-meta { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }

/* ---------- 检查点页面 ---------- */
.checkpoint-card { border-color: var(--bg-surface-variant); border-left-color: var(--text-accent); }
.ck-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ck-stage { font-size: 12px; font-weight: 600; color: var(--text-accent); text-transform: uppercase; letter-spacing: 0.5px; }
.ck-time { font-size: 11px; color: var(--text-muted); }
.ck-summary { font-size: 13px; color: var(--text-primary); margin-bottom: 6px; line-height: 1.5; }
.ck-attachments { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.ck-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }

/* ---------- 检查点弹窗（共用 approval-modal） ---------- */
.checkpoint-popup-card {
  background: var(--bg-input);
  border: 1px solid var(--bg-surface-variant);
  border-left: 3px solid var(--text-accent);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.checkpoint-popup-card.resolved { opacity: 0.6; border-left-color: var(--status-done); }
.checkpoint-popup-card.denied { border-left-color: var(--status-failed); }
.ck-popup-stage { font-size: 12px; font-weight: 600; color: var(--text-accent); text-transform: uppercase; margin-bottom: 4px; }
.ck-popup-summary { font-size: 13px; color: var(--text-primary); margin-bottom: 6px; }
.ck-popup-att { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.ck-popup-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.checkpoint-popup-card .ap-actions { display: flex; gap: 8px; justify-content: flex-end; }
.checkpoint-popup-card .ap-actions button { padding: 5px 14px; font-size: 12px; }

/* ---------- 聊天区内联检查点卡片 ---------- */
.chat-msg.checkpoint-inline {
  background: var(--bg-modal);
  border: 1px solid var(--bg-surface-variant);
  border-left: 3px solid var(--text-accent);
  padding: 10px 14px;
}
.chat-msg.checkpoint-inline.approved { border-left-color: var(--status-done); opacity: 0.7; }
.chat-msg.checkpoint-inline.denied   { border-left-color: var(--status-failed); opacity: 0.7; }
.ck-inline-summary { font-size: 13px; color: var(--text-primary); margin-bottom: 6px; }
.ck-inline-att { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
.checkpoint-inline-body .ck-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- 配置页：workspaces ---------- */
#workspaces-list { display: flex; flex-direction: column; gap: 10px; }
.ws-add-form {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.ws-add-form-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.ws-add-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.ws-add-field span { font-weight: 600; }
.ws-add-field input {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 13px;
  min-width: 160px;
}
.ws-add-field-path { flex: 1; min-width: 260px; }
.ws-add-path-input {
  display: flex;
  gap: 6px;
}
.ws-add-path-input input { flex: 1; font-family: monospace; min-width: 0; }
.ws-browse-btn {
  background: var(--btn-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
}
.ws-browse-btn:hover { background: var(--btn-secondary-hover); border-color: var(--border-focus); }
.ws-add-submit {
  background: var(--btn-primary);
  color: var(--text-on-action);
  border: 1px solid var(--btn-primary);
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-end;
  margin: 0;
}
.ws-add-submit:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.ws-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 12px 16px;
  transition: border-color 0.15s;
}
.ws-card:hover { border-color: var(--text-accent); }
.ws-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ws-card-name {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ws-current-badge {
  display: inline-block;
  background: var(--status-running-bg);
  color: var(--status-running);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}
.ws-card-actions { display: flex; gap: 6px; }
.ws-card-btn {
  background: var(--btn-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  margin: 0;
}
.ws-card-btn:hover { background: var(--btn-secondary-hover); border-color: var(--border-focus); }
.ws-card-btn-danger { color: var(--status-failed); border-color: var(--status-failed); }
.ws-card-btn-danger:hover { background: var(--status-failed-bg); }
.ws-card-path, .ws-card-whitelist {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.ws-card-path-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 36px;
}
.ws-card-path code, .ws-card-whitelist code {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-accent);
  background: var(--bg-input);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ---------- Domain 配置 ---------- */
.domain-add-form {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.domain-add-form-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.domain-add-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.domain-add-field span { font-weight: 600; }
.domain-add-field input {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 13px;
  min-width: 160px;
}
.domain-add-submit {
  background: var(--btn-primary);
  color: var(--text-on-action);
  border: 1px solid var(--btn-primary);
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-end;
  margin: 0;
}
.domain-add-submit:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.domain-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.domain-card:hover { border-color: var(--text-accent); }
.domain-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.domain-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.domain-name {
  color: var(--text-primary);
  font-size: 14px;
}
.domain-desc {
  color: var(--text-secondary);
  font-size: 12px;
}
.domain-card-actions { display: flex; gap: 6px; }
.domain-card-btn {
  background: var(--btn-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  margin: 0;
}
.domain-card-btn:hover { background: var(--btn-secondary-hover); border-color: var(--border-focus); }
.domain-card-btn-danger { color: var(--status-failed); border-color: var(--status-failed); }
.domain-card-btn-danger:hover { background: var(--status-failed-bg); }
.domain-card-body { margin-top: 4px; }
.domain-packs-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 6px;
}
.domain-pack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 24px;
}
.domain-pack-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: monospace;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-card);
  background: var(--bg-input);
  color: var(--text-primary);
}
.domain-pack-chip small { color: var(--text-muted); font-family: sans-serif; }
.domain-pack-enabled { border-left: 3px solid var(--status-done); }
.domain-pack-disabled { border-left: 3px solid var(--status-failed); opacity: 0.6; }
.domain-pack-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
}
.domain-pack-remove:hover { color: var(--status-failed); }
.domain-pack-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.domain-pack-select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  min-width: 200px;
  max-width: 360px;
}
.domain-pack-add-btn {
  background: var(--btn-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  border-radius: 4px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.domain-pack-add-btn:hover { background: var(--bg-card-hover); }

/* ---------- 文件夹选择器模态框 ---------- */
.modal-overlay { position: fixed; inset: 0; background: var(--bg-overlay);
  display: flex; align-items: center; justify-content: center; z-index: 999; }
.modal { width: 640px; max-width: 95vw; max-height: 80vh; background: var(--bg-surface);
  border: 1px solid var(--border-card); border-radius: 8px; display: flex; flex-direction: column; }
.modal-head { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.modal-head button { background: transparent; color: var(--text-secondary); font-size: 16px; border: none; cursor: pointer; }
.modal-path { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
.modal-path input { flex: 1; background: var(--bg-input); color: var(--text-accent); border: 1px solid var(--border-card);
  padding: 6px 10px; border-radius: 4px; font-family: monospace; font-size: 12px; }
.modal-path button { background: var(--btn-secondary); }
.modal-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.modal-copy { padding: 0 16px; }
.modal-list-pad { padding: 0 16px 12px; }
.modal-body ul { list-style: none; margin: 0; padding: 0; }
.modal-body li { padding: 6px 16px; cursor: pointer; font-size: 13px; color: var(--text-secondary);
  border-left: 2px solid transparent; }
.modal-body li:hover { background: var(--bg-card-hover); border-left-color: var(--text-accent); color: var(--text-primary); }
.modal-body li.empty { color: var(--text-muted); cursor: default; font-style: italic; }
.modal-body li.empty:hover { background: transparent; border-left-color: transparent; color: var(--text-muted); }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--border-subtle); display: flex;
  gap: 10px; justify-content: flex-end; align-items: center; }
.modal-foot label { color: var(--text-secondary); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.modal-foot label input { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-card);
  padding: 6px 10px; border-radius: 4px; font-size: 12px; }

/* ---------- 审批弹窗（强制弹出，不会错过） ---------- */
.approval-modal {
  width: 600px; max-width: 95vw;
  border: 2px solid var(--status-running);
  box-shadow: 0 8px 32px var(--warning-glow);
  animation: ap-pop 0.2s ease-out;
}
@keyframes ap-pop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.approval-modal .modal-head { background: var(--status-running-bg); border-bottom: 1px solid var(--status-running); }
.approval-modal .modal-head strong { color: var(--status-running); }
.approval-popup-card {
  background: var(--bg-input);
  border: 1px solid var(--status-running-bg);
  border-left: 3px solid var(--status-running);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.approval-popup-card.resolved { opacity: 0.6; border-left-color: var(--status-done); }
.approval-popup-card.denied { border-left-color: var(--status-failed); }
.approval-popup-card .ap-path { font-family: monospace; color: var(--text-accent); font-size: 13px;
  margin-bottom: 4px; word-break: break-all; }
.approval-popup-card .ap-reason { color: var(--text-secondary); font-size: 12px; margin-bottom: 8px; }
.approval-popup-card .ap-task-meta { color: var(--text-muted); font-size: 11px; margin-bottom: 8px; }
.approval-popup-card .ap-actions { display: flex; gap: 8px; justify-content: flex-end; }
.approval-popup-card .ap-actions button { padding: 5px 14px; font-size: 12px; }

/* ---------- 用户选择弹窗 ---------- */
.selection-modal {
  width: 560px; max-width: 95vw;
  border: 2px solid var(--text-accent);
  box-shadow: 0 8px 32px var(--accent-glow);
  animation: ap-pop 0.2s ease-out;
}
.selection-modal .modal-head { background: var(--accent-bg); border-bottom: 1px solid var(--text-accent); }
.selection-modal .modal-head strong { color: var(--text-accent); }
.selection-popup-card {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-left: 3px solid var(--text-accent);
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.selection-popup-card.resolved { opacity: 0.6; border-left-color: var(--status-done); }
.selection-popup-card .sel-question {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
.selection-popup-card .sel-task-meta { color: var(--text-muted); font-size: 11px; margin-bottom: 10px; }
.selection-popup-card .sel-choices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.selection-popup-card .sel-choice {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: background 0.15s;
}
.selection-popup-card .sel-choice:hover { background: var(--bg-card-hover); }
.selection-popup-card .sel-choice input[type=radio] { margin: 0; }
.selection-popup-card .sel-choice.sel-other span { color: var(--text-accent); font-style: italic; }
.selection-popup-card .sel-custom {
  width: 100%;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  margin-top: -2px;
}
.selection-popup-card .sel-custom:disabled { opacity: 0.4; cursor: not-allowed; }
.selection-popup-card .sel-actions { display: flex; gap: 8px; justify-content: flex-end; }
.selection-popup-card .sel-actions button { padding: 5px 18px; font-size: 12px; width: auto; }
.selection-popup-card .sel-actions button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- 聊天区内联审批卡片 ---------- */
.chat-msg.approval-inline {
  background: var(--status-running-bg);
  border: 1px solid var(--status-running-bg);
  border-left: 3px solid var(--status-running);
  padding: 10px 14px;
}
.chat-msg.approval-inline.approved { border-left-color: var(--status-done); opacity: 0.7; }
.chat-msg.approval-inline.denied   { border-left-color: var(--status-failed); opacity: 0.7; }
.approval-inline-body .ap-path { margin-bottom: 4px; }
.approval-inline-body .ap-meta { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
.approval-inline-body .ap-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- 子任务块 ---------- */
.subtask-block { margin: 8px 0; border-left: 3px solid var(--text-accent); padding-left: 12px; border-radius: 4px; background: var(--accent-bg-subtle); }
.subtask-head { cursor: pointer; font-size: 0.9em; color: var(--text-accent); padding: 6px 0; user-select: none; }
.subtask-head code { background: var(--bg-card-hover); padding: 1px 5px; border-radius: 3px; font-size: 0.85em; }
.subtask-block.collapsed .subtask-body { display: none; }
.subtask-badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
.subtask-badge.status-pending, .subtask-badge.status-running { background: var(--btn-secondary); color: var(--text-accent); }
.subtask-badge.status-done { background: var(--status-done-bg); color: var(--status-done); }
.subtask-badge.status-failed { background: var(--status-failed-bg); color: var(--status-failed); }
.subtask-badge.status-cancelled { background: var(--status-cancelled-bg); color: var(--status-running); }
.subtask-prompt { font-size: 0.85em; color: var(--text-secondary); margin: 4px 0; padding: 4px 8px; background: var(--bg-input); border-radius: 3px; }
.subtask-answer { margin-top: 6px; font-size: 0.92em; }
.subtask-answer .answer-body { padding: 4px 0; }
.subtask-answer .answer-error { color: var(--status-failed); font-size: 0.9em; }

/* ---------- 技能结果持久消息 ---------- */
.chat-msg.assistant .skill-result-msg {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-left: 3px solid var(--text-muted);
  padding: 6px 12px;
  margin-top: 8px;
  font-size: 12px;
  border-radius: 4px;
}
.chat-msg.assistant .skill-result-msg .skill-result-line {
  font-size: 12px;
  line-height: 1.4;
}
.chat-msg.assistant .skill-result-msg .skill-result-line.ok {
  color: var(--status-done);
}
.chat-msg.assistant .skill-result-msg .skill-result-line.fail {
  color: var(--status-failed);
}
.chat-msg.assistant .skill-result-msg .skill-result-line code {
  color: var(--text-accent);
}
.chat-msg.assistant .skill-result-msg .skill-result-meta {
  color: var(--text-muted);
}

/* ---------- 任务行内展开 ---------- */
.task-detail-row td {
  padding: 0;
  border-bottom: none;
  background: transparent;
}
.task-detail-row:hover {
  background: transparent;
}

/* ---------- 任务详情时间线 ---------- */
.task-detail-timeline {
  background: var(--bg-log);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
  max-height: 60vh;
  overflow-y: auto;
}
.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.timeline-title { font-size: 14px; font-weight: 600; color: var(--text-accent); }
.timeline-status { font-size: 12px; padding: 2px 10px; border-radius: 10px; }
.timeline-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.timeline-step {
  position: relative;
  padding: 10px 14px 10px 28px;
  margin-bottom: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--bg-card-hover);
  border-radius: 6px;
  border-left: 3px solid var(--btn-secondary);
}
.timeline-step.step-running { border-left-color: var(--status-running); }
.timeline-step.step-done { border-left-color: var(--status-done); }
.timeline-step.step-failed { border-left-color: var(--status-failed); }
.timeline-step::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--btn-secondary);
}
.timeline-step.step-running::before { background: var(--status-running); animation: pulse 1.2s infinite; }
.timeline-step.step-done::before { background: var(--status-done); }
.timeline-step.step-failed::before { background: var(--status-failed); }
@keyframes pulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}
.timeline-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.timeline-step-provider { font-family: monospace; color: var(--text-accent); }
.timeline-step-tokens { color: var(--text-muted); }
.timeline-step-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.timeline-skill-list {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-accent);
  line-height: 1.5;
}
.timeline-step-content .answer-live { font-size: 13px; color: var(--text-secondary); white-space: pre-wrap; }
.timeline-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--status-running);
  margin-left: 8px;
}
.timeline-live-indicator::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-running);
  animation: pulse 1.2s infinite;
}
.timeline-actions { display: flex; gap: 8px; margin-bottom: 12px; }

/* ---------- 安全设置页 ---------- */
.settings-panel {
  width: 100%;
}
.settings-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.settings-page-head h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.settings-page-head .hint {
  margin: 0;
  max-width: 760px;
}
.settings-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-card,
.security-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.settings-card-compact {
  padding: 14px 16px;
}
.settings-card-head {
  margin-bottom: 12px;
}
.settings-card-head .section-heading,
.settings-card .section-heading {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.settings-card-head .hint,
.settings-card > .hint {
  margin: 0;
}
.settings-panel .section-actions {
  justify-content: flex-end;
  padding-top: 4px;
}
.settings-panel .section-actions button,
.settings-page-head button,
.settings-head-actions button {
  margin: 0;
  min-width: 96px;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}
.toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--btn-primary);
  cursor: pointer;
}
.toggle-desc {
  color: var(--text-secondary);
  font-size: 12px;
  margin: 6px 0 0 0;
  line-height: 1.5;
}
.input-row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(180px, 260px);
  align-items: center;
  gap: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
}
.input-row input[type="number"] {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  width: 100%;
}
.input-row input[type="number"]:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* ---------- 维护（定时维护：会话整理 / 知识库扩充 / 技能优化） ---------- */
.mnt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 16px;
  margin-top: 12px;
}
.mnt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.mnt-field > span {
  font-size: 12px;
  color: var(--text-secondary);
}
.mnt-field input[type="number"],
.mnt-field select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  width: 100%;
}
.mnt-field input[type="number"]:focus,
.mnt-field select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.mnt-field-toggle {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: end;
  padding-bottom: 6px;
}
.mnt-field-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--btn-primary);
  cursor: pointer;
}
#security textarea,
#config-editor {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  width: 100%;
}
#security textarea:focus,
#config-editor:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

#config .settings-card {
  overflow: hidden;
}
#config #providers-config,
#config #routing-config,
#config #workspaces-list,
#config #domains-list {
  margin-top: 0;
}
#config .pr-add-form,
#config .ws-add-form,
#config .domain-add-form {
  margin-top: 0;
  margin-bottom: 12px;
  background: var(--bg-surface-variant);
  border-color: var(--border-subtle);
}

/* ---------- 日志 Tab ---------- */
.log-toolbar { margin-bottom: 10px; }
.log-status { font-size: 12px; padding: 2px 8px; border-radius: 4px; color: var(--text-secondary); }
.log-status.status-running { color: var(--status-running); }
.log-status.status-done { color: var(--status-done); }
.log-status.status-failed { color: var(--status-failed); }
.log-view {
  background: var(--bg-log);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: "Cascadia Code","Consolas","Fira Code",monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
  height: min(65vh, calc(100vh - 280px));
  min-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-line { padding: 1px 0; }
.log-line-error { color: var(--status-failed); }
.log-line-history { opacity: 0.7; }

/* 6-C: Agent 消息通道 */
.progress-msg {
  color: var(--text-accent);
  font-size: 12px;
  padding: 4px 8px;
  background: var(--accent-bg-subtle);
  border-radius: 4px;
  margin: 4px 0;
}
.inject-msg {
  color: var(--status-running);
  font-size: 12px;
  padding: 4px 8px;
  background: var(--status-running-bg);
  border-radius: 4px;
  margin: 4px 0;
}

/* ---------- 技能 Tab 子面板 ---------- */
.skills-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
}
.sub-tab {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 4px;
}
.sub-tab:hover { background: var(--bg-card-hover); }
.sub-tab.active { background: var(--btn-secondary); color: var(--text-on-action); }

.skill-sub-panel { display: none; }
.skill-sub-panel.active { display: block; }

/* 评分卡片 */
#skills-scores-content { display: flex; flex-direction: column; gap: 10px; }
.score-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 12px 14px;
}
.score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.score-name {
  font-family: monospace;
  font-size: 14px;
  color: var(--text-accent);
  font-weight: 600;
}
.score-badge {
  font-size: 18px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  min-width: 44px;
  text-align: center;
}
.score-badge.score-green { background: var(--status-done-bg); color: var(--status-done); }
.score-badge.score-yellow { background: var(--status-running-bg); color: var(--status-running); }
.score-badge.score-red   { background: var(--status-failed-bg); color: var(--status-failed); }

.score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.score-errors, .score-hints {
  margin: 6px 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.score-errors summary, .score-hints summary { color: var(--text-secondary); cursor: pointer; font-size: 12px; }
.score-errors ul, .score-hints ul { margin: 4px 0; padding-left: 18px; }
.score-errors li { color: var(--status-running); }
.score-hints li { color: var(--status-running); }

.score-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.score-actions input {
  flex: 1;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
}
.score-actions button {
  background: var(--status-done-bg);
  color: var(--status-done);
  border: 1px solid var(--status-done);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.score-actions button:hover { background: var(--status-done); color: var(--text-on-action); }

/* 待审批卡片 */
#skills-pending-content { display: flex; flex-direction: column; gap: 10px; }
.pending-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 12px 14px;
}
.pending-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.pending-header strong {
  font-family: monospace;
  font-size: 14px;
  color: var(--text-accent);
}
.pending-date { font-size: 11px; color: var(--text-muted); }
.pending-meta { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.pending-summary { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.pending-path { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.pending-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 10px;
}
.pending-actions button {
  padding: 5px 14px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.pending-actions .deploy-btn {
  background: var(--status-done-bg);
  color: var(--status-done);
  border: 1px solid var(--status-done);
}
.pending-actions .deploy-btn:hover { background: var(--status-done); color: var(--text-on-action); }
.pending-actions .reject-btn {
  background: var(--btn-danger);
  color: var(--status-failed);
  border: 1px solid var(--status-failed-hover);
}
.pending-actions .reject-btn:hover { background: var(--status-failed-hover); color: var(--text-on-action); }

/* ---------- 工具管理 ---------- */
.tpps-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  flex-wrap: wrap;
}
.tpps-head-copy { flex-shrink: 0; }
.tpps-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}
.tpps-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tpps-head-actions button {
  margin: 0;
}
.tpps-head-actions .tpps-primary-button {
  color: var(--text-on-action);
  background: var(--btn-primary);
  border-color: var(--btn-primary);
}
.tpps-head-actions .tpps-primary-button:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}
.tpps-replace-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 12px;
}
.tpps-message {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  max-width: min(460px, calc(100vw - 44px));
  padding: 11px 14px;
  border-radius: var(--radius-md);
  margin: 0;
  font-size: 13px;
  box-shadow: var(--shadow-modal);
}
.tpps-message.success {
  color: var(--status-done);
  background: var(--status-done-bg);
  border: 1px solid var(--success-border);
}
.tpps-message.failed {
  color: var(--status-failed);
  background: var(--status-failed-bg);
  border: 1px solid var(--danger-border);
}
.tpps-summary {
  display: flex;
  gap: 4px;
}
.tpps-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  padding: 4px 10px;
}
.tpps-stat strong {
  color: var(--text-accent);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.tpps-stat span {
  color: var(--text-secondary);
  font-size: 12px;
}
.tpps-browser {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  height: calc(100vh - 200px);
  min-height: 440px;
}
.tpps-pack-sidebar {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 10px;
  overflow-y: auto;
}
.tpps-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 5px 0;
}
.tpps-sidebar-head strong {
  color: var(--text-primary);
  font-size: 14px;
}
.tpps-sidebar-hint {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
  padding: 0 5px 10px;
  margin: 5px 0 0;
}
.tpps-pack-item {
  position: relative;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  padding: 10px 9px;
  margin: 0 0 6px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
}
button.tpps-pack-item {
  appearance: none;
}
.tpps-pack-item.active,
.tpps-pack-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-card);
}
.tpps-pack-item.is-disabled {
  background: var(--bg-surface-variant);
  border-color: transparent;
  opacity: 0.62;
}
.tpps-pack-item.is-disabled.active,
.tpps-pack-item.is-disabled:hover {
  opacity: 0.82;
  border-color: var(--border-card);
}
.tpps-pack-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.tpps-pack-open {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  padding: 0;
}
.tpps-pack-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-primary);
}
.tpps-pack-total {
  color: var(--text-muted);
  font-size: 11px;
}
.tpps-pack-badges,
.tpps-export-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tpps-pack-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-accent);
  background: var(--accent-bg);
  font-size: 11px;
  font-weight: 600;
}
.tpps-pack-badge.external {
  color: var(--status-running);
  background: var(--status-running-bg);
  border-color: var(--warning-border);
}
.tpps-pack-badge.level-kernel {
  color: var(--status-failed);
  background: var(--status-failed-bg);
  border-color: var(--danger-border);
}
.tpps-pack-badge.level-official {
  color: var(--text-accent);
  background: var(--accent-bg);
  border-color: var(--accent-border);
}
.tpps-pack-badge.level-extension {
  color: var(--status-running);
  background: var(--status-running-bg);
  border-color: var(--warning-border);
}
.tpps-pack-badge.disabled {
  color: var(--text-muted);
  background: var(--bg-surface-variant);
  border-color: var(--border-card);
}
.tpps-pack-actions-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 8px;
}
.tpps-pack-actions-inline {
  margin-top: 0;
}
.link-action {
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.link-action:hover {
  background: transparent;
  color: var(--text-primary);
  text-decoration: underline;
}
.link-action.danger {
  color: var(--text-secondary);
}
.link-action.danger:hover {
  color: var(--status-failed);
}
.link-action.muted {
  color: var(--text-secondary);
  font-weight: 400;
}
.link-action.muted:hover {
  color: var(--text-muted);
}
.tpps-pack-disabled-note {
  color: var(--text-muted);
  font-size: 11px;
}
.tpps-tool-main {
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.tpps-sticky-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-body);
}
.tpps-tools-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 0 2px 10px;
  color: var(--text-secondary);
}
.tpps-tools-toolbar strong {
  color: var(--text-primary);
  margin-right: 8px;
}
.tpps-tools-toolbar input {
  width: min(320px, 45%);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text-primary);
}
.tpps-tools-toolbar input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.tpps-pack-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.tpps-pack-action-meta {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.tpps-pack-action-status {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.tpps-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 2px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.tpps-subtabs button {
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
}
.tpps-subtabs button.active {
  color: var(--text-primary);
  border-bottom-color: var(--btn-primary);
}
.tpps-subpage-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#tpps-tool-grid.tpps-subpage-list {
  display: flex;
  flex-direction: column;
}
#tpps-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 14px;
}
.tpps-tool-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: none;
  min-height: 185px;
}
.tpps-tool-tags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tpps-tool-tags .skill-icon {
  margin-bottom: 0;
}
.tpps-tool-card.has-conflict::before {
  background: var(--status-failed);
  opacity: 1;
}
.tpps-tool-source {
  color: var(--text-muted);
  font-size: 11px;
  margin: -3px 0 10px;
}
.tpps-tool-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
}
.tpps-score {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.tpps-tool-errors {
  margin: 0 0 10px;
  color: var(--status-running);
  font-size: 11px;
  line-height: 1.45;
}
.tpps-tool-card .params {
  margin-top: auto;
}
.tpps-review-card,
.tpps-pending-card {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  padding: 14px;
}
.tpps-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tpps-review-head strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
}
.tpps-review-head span,
.tpps-review-grid {
  color: var(--text-muted);
  font-size: 12px;
}
.tpps-review-score {
  margin: 10px 0;
  color: var(--text-secondary);
  font-weight: 600;
}
.tpps-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.tpps-review-note {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.tpps-history-table {
  width: 100%;
}
.tpps-status,
.tpps-conflict {
  display: inline-block;
  border: 1px solid;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.tpps-status.enabled {
  color: var(--status-done);
  background: var(--status-done-bg);
  border-color: var(--success-border);
}
.tpps-status.disabled {
  color: var(--text-muted);
  background: var(--bg-surface-variant);
  border-color: var(--border-card);
}
.tpps-conflict {
  color: var(--status-failed);
  background: var(--status-failed-bg);
  border-color: var(--danger-border);
}
.tpps-export-modal {
  max-width: 560px;
}
.tpps-settings-modal {
  max-width: 640px;
}
.tpps-settings-form {
  display: grid;
  gap: 14px;
}
.tpps-settings-field {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.tpps-settings-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.tpps-settings-label .required {
  color: var(--status-failed);
}
.tpps-secret-status {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.tpps-settings-field input,
.tpps-settings-field select {
  width: 100%;
}
.tpps-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}
.tpps-settings-toggle input {
  width: auto;
}
.tpps-settings-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tpps-export-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 12px;
}
.tpps-export-toolbar button {
  min-height: 28px;
  margin: 0;
  padding: 4px 9px;
  font-size: 12px;
}
.tpps-export-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  padding-right: 3px;
}
.tpps-export-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.tpps-export-item input {
  margin-top: 4px;
}
.tpps-export-name {
  display: block;
  color: var(--text-primary);
  font-weight: 700;
  margin-bottom: 5px;
}
.tpps-export-meta {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 5px;
}

/* ---------- 经验知识库 ---------- */
.knowledge-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.knowledge-head h3 { margin: 0 0 6px 0; }
.knowledge-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.knowledge-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px 170px 140px auto;
  gap: 8px;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.knowledge-toolbar input,
.knowledge-toolbar select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  font-size: 13px;
}
.knowledge-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 12px;
  min-height: calc(100vh - 220px);
}
.knowledge-list {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 8px;
  overflow: auto;
  max-height: calc(100vh - 220px);
}
.knowledge-item {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  margin-bottom: 6px;
  cursor: pointer;
  background: var(--bg-input);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.knowledge-item:hover,
.knowledge-item.active {
  background: var(--bg-card-hover);
  border-color: var(--border-focus);
}
.knowledge-item-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  word-break: break-word;
}
.knowledge-item-meta,
.knowledge-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
}
.knowledge-item-meta span,
.knowledge-detail-meta span,
.knowledge-readonly {
  background: var(--bg-surface-variant);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 2px 8px;
}
.knowledge-item-summary {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  margin: 7px 0;
}
.knowledge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.knowledge-tags span {
  background: var(--accent-bg);
  color: var(--text-accent);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
}
.knowledge-detail {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px;
  overflow: auto;
  max-height: calc(100vh - 220px);
}
.knowledge-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.knowledge-detail-head h3 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
}
.knowledge-detail-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.knowledge-summary {
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 12px 0;
}
.knowledge-path {
  color: var(--text-muted);
  font-size: 11px;
  margin: 8px 0;
  word-break: break-all;
}
.knowledge-content {
  max-height: none;
  white-space: pre-wrap;
  word-break: break-word;
}
.knowledge-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.knowledge-editor label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}
.knowledge-editor input,
.knowledge-editor select,
.knowledge-editor textarea {
  width: 100%;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
}
.knowledge-editor textarea {
  font-family: "Cascadia Code", "Consolas", monospace;
  line-height: 1.5;
}
.knowledge-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.knowledge-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.empty { color: var(--text-muted); font-size: 13px; padding: 20px; text-align: center; }

/* ============================================================
   响应式适配 Responsive
   ============================================================ */

@media (max-width: 1024px) {
  .app-shell { grid-template-columns: 188px minmax(0, 1fr); }
  .sidebar { padding: 14px 10px; }
  main { padding: 16px; }
  .cards { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .settings-page-head {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-head-actions {
    justify-content: flex-start;
  }
  .provider-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-row .pr-name,
  .provider-row .pr-enabled,
  .provider-row .pr-save { align-self: stretch; }
  .chat-wrap {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 500px;
  }
  .chat-col-log {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    max-height: 60vh;
  }
  .chat-col-composer {
    max-height: none;
  }
  .chat-msg.user { max-width: 90%; }
}

@media (max-width: 768px) {
  .app-shell { display: block; }
  .sidebar {
    position: static;
    height: auto;
    padding: 12px 12px 10px;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .header-brand { padding: 0 4px 10px; }
  .header-logo { width: 26px; height: 26px; }
  .header-brand h1 { font-size: 16px; }
  .side-nav { display: block; }
  .nav-group { margin-bottom: 8px; }
  .nav-group-title { padding: 0 4px 5px; }
  .nav-group { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav-group-title { flex-basis: 100%; }
  .tab { width: auto; min-height: 30px; padding: 6px 10px; font-size: 12px; border-left-width: 1px; }
  .tab.active { border-left-color: transparent; box-shadow: inset 0 -2px 0 var(--btn-primary); }
  .topbar { height: 50px; padding: 0 14px; }
  .topbar-sub { display: none; }
  main { padding: 14px 14px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card { padding: 14px; }
  .settings-card,
  .security-card {
    padding: 12px;
  }
  .settings-page-head button,
  .settings-head-actions button,
  .settings-panel .section-actions button {
    width: 100%;
  }
  .input-row,
  .mnt-grid {
    grid-template-columns: 1fr;
  }
  .card > div { font-size: 22px; }
  #stat-balance { font-size: 12px; }
  .balance-value { font-size: 11px; }
  .chat-wrap { min-height: 400px; }
  .chat-log { padding: 10px; }
  .chat-msg.user { max-width: 92%; }
  .composer-grid { grid-template-columns: 1fr; }
  form.labeled-form { grid-template-columns: 1fr; }
  .provider-row,
  .ws-add-form-row,
  .domain-add-form-row { flex-direction: column; align-items: stretch; }
  .provider-row .pr-save,
  .ws-add-submit,
  .domain-add-submit { width: 100%; }
  .ws-card-header,
  .domain-card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ws-card-actions,
  .domain-card-actions { width: 100%; }
  .ws-card-btn,
  .domain-card-btn { flex: 1; text-align: center; }
  .domain-pack-add-row { flex-direction: column; align-items: stretch; }
  .domain-pack-select { max-width: 100%; }
  .table-shell { border-radius: var(--radius-sm); }
  .ws-bar { gap: 8px; padding: 8px 10px; }
  .skill-category .category-grid,
  #skills-list,
  .knowledge-layout,
  .knowledge-toolbar,
  .knowledge-editor-grid { grid-template-columns: 1fr; }
  .tpps-head,
  .tpps-tools-toolbar { flex-direction: column; align-items: stretch; }
  .tpps-head { padding: 12px; }
  .tpps-head-actions { justify-content: stretch; }
  .tpps-head-actions button { flex: 1 1 120px; }
  .tpps-summary { width: 100%; }
  .tpps-browser { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .tpps-pack-sidebar { max-height: 42vh; }
  .tpps-tool-main { max-height: none; overflow: visible; padding-right: 0; }
  .tpps-tools-toolbar { position: static; background: transparent; }
  .tpps-tools-toolbar input { width: 100%; }
  .tpps-pack-actions { flex-direction: column; align-items: stretch; }
  .tpps-review-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; height: auto; min-height: 50px; padding-top: 8px; padding-bottom: 8px; }
  .logout-link { padding: 5px 9px; }
  .chat-msg.user { max-width: 95%; }
  .chat-msg.assistant { width: 100%; }
  .modal-overlay { align-items: flex-start; padding: 12px 0; overflow-y: auto; }
  .modal { width: 96vw; max-width: 96vw; max-height: calc(100vh - 24px); margin: 0 auto; }
  .modal-path,
  .modal-foot { flex-direction: column; align-items: stretch; }
  .modal-foot button,
  .modal-path button { width: 100%; }
  table th, table td { padding: 6px 8px; font-size: 12px; }
  .chat-field > span { font-size: 10px; }
  .chat-field > input, .chat-field > select { font-size: 12px; padding: 5px; }
}

/* ========== Widget 富内容卡片 ========== */
.widget {
  margin: 8px 0;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border, #e0e0e0);
  background: var(--card, #fff);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  max-width: 480px;
}
.widget-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-subtle, #f5f5f5);
  border-bottom: 1px solid var(--border, #e0e0e0);
  font-weight: 600;
  font-size: 13px;
}
.widget-icon { font-size: 16px; }
.widget-title { flex: 1; }
.widget-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--text-muted, #999);
}
.widget-json {
  margin: 0;
  padding: 10px 14px;
  font-size: 11px;
  max-height: 200px;
  overflow: auto;
  background: var(--bg-code, #1e1e1e);
  color: var(--text-code, #d4d4d4);
}

/* -- 美团商家列表 -- */
.mw-shop-list {
  max-height: 360px;
  overflow-y: auto;
}
.mw-shop-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #eee);
  cursor: pointer;
  transition: background 0.15s;
}
.mw-shop-item:hover { background: var(--bg-subtle, #f9f9f9); }
.mw-shop-item:last-child { border-bottom: none; }
.mw-shop-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-subtle, #f0f0f0);
}
.mw-shop-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.mw-shop-info { flex: 1; min-width: 0; }
.mw-shop-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mw-shop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.mw-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  background: var(--bg-subtle, #f0f0f0);
  color: var(--text-secondary, #666);
}
.mw-tag-rating { color: #f90; background: #fff8e6; }
.mw-tag-voucher { color: #e64340; background: #fdeceb; }
.mw-tag-combo { color: #c77b00; background: #fff4e0; }
.mw-shop-deals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* -- 美团团购券/套餐 -- */
.mw-deal-list { padding: 4px 0; }
.mw-deal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #f0f0f0);
}
.mw-deal-item:last-child { border-bottom: none; }
.mw-deal-icon { font-size: 16px; }
.mw-deal-label { flex: 1; font-size: 13px; color: var(--text, #333); }
.mw-deal-save {
  font-size: 12px;
  font-weight: 600;
  color: #e64340;
  background: #fdeceb;
  padding: 1px 6px;
  border-radius: 4px;
}

/* -- 美团菜单 -- */
.mw-menu-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border, #eee);
  padding: 0 10px;
}
.mw-menu-tab {
  padding: 8px 12px;
  border: none;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-secondary, #666);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.mw-menu-tab:hover { color: var(--text, #333); }
.mw-menu-tab.active {
  color: var(--accent, #f90);
  border-bottom-color: var(--accent, #f90);
  font-weight: 600;
}
.mw-menu-panel { display: none; max-height: 320px; overflow-y: auto; }
.mw-menu-panel.active { display: block; }
.mw-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #f5f5f5);
}
.mw-menu-img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.mw-menu-info { flex: 1; min-width: 0; }
.mw-menu-name {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mw-menu-desc {
  font-size: 11px;
  color: var(--text-muted, #999);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.mw-menu-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.mw-menu-price {
  font-weight: 700;
  color: var(--accent, #f60);
  font-size: 14px;
}
.mw-menu-add {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--accent, #f90);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}
.mw-menu-add:hover { transform: scale(1.15); }

/* -- 美团购物车 -- */
.mw-cart-items { padding: 8px 14px; }
.mw-cart-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #f5f5f5);
  font-size: 13px;
}
.mw-cart-item:last-child { border-bottom: none; }
.mw-cart-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-cart-qty { color: var(--text-muted, #999); font-size: 12px; }
.mw-cart-price { font-weight: 600; color: var(--accent, #f60); }
.mw-cart-summary {
  padding: 10px 14px;
  border-top: 1px solid var(--border, #eee);
  background: var(--bg-subtle, #fafafa);
}
.mw-cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary, #666);
  padding: 2px 0;
}
.mw-cart-discount { color: #52c41a; }
.mw-cart-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #333);
  margin-top: 4px;
}

/* -- 美团订单 -- */
.mw-order-shop {
  padding: 8px 14px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border, #f5f5f5);
}
.mw-order-items { padding: 6px 14px; }
.mw-order-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  color: var(--text-secondary, #666);
}
.mw-order-total {
  padding: 8px 14px;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent, #f60);
  border-top: 1px solid var(--border, #eee);
}
.mw-order-status { font-size: 12px; }
.mw-order-done { color: #52c41a; }
.mw-order-pending { color: #faad14; }
.mw-order-running { color: #1890ff; }
.mw-order-rider {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-secondary, #666);
  border-top: 1px solid var(--border, #f5f5f5);
}
.mw-order-approval-hint {
  padding: 8px 14px;
  background: #fff7e6;
  color: #d48806;
  font-size: 12px;
  text-align: center;
}

/* -- 高德地图 -- */
.mw-route-list, .mw-poi-list { max-height: 280px; overflow-y: auto; }
.mw-route-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #f5f5f5);
}
.mw-route-item:last-child { border-bottom: none; }
.mw-route-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mw-route-dist {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent, #1890ff);
}
.mw-route-time {
  font-size: 13px;
  color: var(--text-secondary, #666);
}
.mw-poi-item {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border, #f5f5f5);
  cursor: pointer;
}
.mw-poi-item:hover { background: var(--bg-subtle, #f9f9f9); }
.mw-poi-item:last-child { border-bottom: none; }
.mw-poi-name { font-weight: 500; font-size: 13px; }
.mw-poi-addr { font-size: 11px; color: var(--text-muted, #999); margin-top: 2px; }

/* -- Widget 暗色主题适配 -- */
[data-theme="dark"] .widget {
  border-color: var(--border, #333);
  background: var(--card, #1e1e1e);
}
[data-theme="dark"] .widget-header {
  background: var(--bg-subtle, #252525);
  border-color: var(--border, #333);
}
[data-theme="dark"] .mw-shop-item:hover,
[data-theme="dark"] .mw-poi-item:hover { background: var(--bg-subtle, #2a2a2a); }
[data-theme="dark"] .mw-tag { background: var(--bg-subtle, #2a2a2a); color: var(--text-secondary, #aaa); }
[data-theme="dark"] .mw-tag-rating { background: #3a2800; color: #f90; }
[data-theme="dark"] .mw-tag-voucher { background: #3a1413; color: #ff6b68; }
[data-theme="dark"] .mw-tag-combo { background: #3a2800; color: #e0a040; }
[data-theme="dark"] .mw-deal-save { background: #3a1413; color: #ff6b68; }
[data-theme="dark"] .mw-deal-label { color: var(--text, #ddd); }
[data-theme="dark"] .mw-menu-tab { color: var(--text-secondary, #aaa); }
[data-theme="dark"] .mw-menu-tab.active { color: var(--accent, #f90); }
[data-theme="dark"] .mw-cart-summary { background: var(--bg-subtle, #1a1a1a); }
[data-theme="dark"] .mw-order-approval-hint { background: #2a2000; color: #faad14; }
[data-theme="dark"] .mw-route-dist { color: var(--accent, #40a9ff); }

/* ---------- App 扫码连接 ---------- */
.connect-qr-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.connect-qr-controls select { max-width: 320px; }
.connect-qr:empty { display: none; }
.connect-qr {
  display: inline-block;
  background: #fff;
  padding: 14px;
  border-radius: 10px;
  line-height: 0;
  margin-bottom: 8px;
}