/* ============================================================
   AI 全自动托管 · 视觉改版（2026-10-26）
   目标：浅色 / 大留白 / 柔和阴影 / 弱边框，先单页试点。
   设计原则：
     1. 全部走局部 token，不污染全局 :root —— 不满意直接删文件即可回滚；
     2. 只作用于 #view-autopilot 及其子元素，其他 20 个页面零影响；
     3. 保留深色侧栏，形成「深导航 + 浅工作区」的现代 SaaS 观感。
   ============================================================ */

#view-autopilot {
  /* ---- 局部 token 全部改为全局色板的别名 ----
     原来这里各有一套 var(--border) / var(--line-soft) / var(--accent) 之类的近似色，
     与全局色板不一致，导致「同一角色两种颜色」。
     现在只做映射，颜色唯一来源 = body.ap-light 的 token。 */
  --ap-bg: var(--bg);
  --ap-card: var(--panel);
  --ap-line: var(--border);
  --ap-line-soft: var(--line-soft);
  --ap-ink: var(--text);
  --ap-ink-2: var(--text-2);
  --ap-ink-3: var(--muted);
  --ap-brand: var(--accent);
  --ap-brand-soft: var(--accent-weak);
  --ap-radius: 16px;
  --ap-shadow: var(--shadow);

  margin: -22px;
  padding: 28px 32px 48px;
  background: var(--ap-bg);
  min-height: calc(100vh - 60px);
  color: var(--ap-ink);
  font-size: 15px;
}

/* ---------- 两栏骨架：左状态 280px + 右设置台 ---------- */
#view-autopilot .ap-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 1180px;
}
@media (max-width: 980px) {
  #view-autopilot { padding: 20px 16px 40px; }
  #view-autopilot .ap-shell { grid-template-columns: 1fr; gap: 18px; }
  #view-autopilot .ap-side { order: 2; }
}

/* ---------- 左栏：状态总览（sticky） ---------- */
#view-autopilot .ap-side {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 16px;
}
#view-autopilot .ap-state {
  background: var(--ap-card); border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius); padding: 18px 18px 16px;
  box-shadow: var(--ap-shadow);
}
#view-autopilot .ap-state-hd { display: flex; align-items: center; gap: 9px; }
#view-autopilot .ap-dot {
  width: 9px; height: 9px; border-radius: 99px; flex: none;
  background: var(--border); box-shadow: 0 0 0 4px rgba(228, 232, 238, .45);
  transition: background .2s, box-shadow .2s;
}
#view-autopilot .ap-dot.on {
  background: var(--accent); box-shadow: 0 0 0 4px rgba(23, 166, 115, .16);
  animation: apPulse 2.4s ease-in-out infinite;
}
@keyframes apPulse {
  50% { box-shadow: 0 0 0 7px rgba(23, 166, 115, .07); }
}
@media (prefers-reduced-motion: reduce) {
  #view-autopilot .ap-dot.on { animation: none; }
}
#view-autopilot .ap-state-t { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
#view-autopilot .ap-state-p {
  margin: 8px 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--ap-ink-3);
}
#view-autopilot .ap-meter-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--ap-ink-3); margin-bottom: 7px;
}
#view-autopilot .ap-meter-top b { color: var(--ap-ink); font-size: 13px; }
#view-autopilot .ap-bar {
  height: 6px; border-radius: 99px; background: var(--ap-line-soft); overflow: hidden;
}
#view-autopilot .ap-bar i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #34c98e);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

/* 锚点导航 */
#view-autopilot .ap-anchors {
  display: flex; flex-direction: column; gap: 1px;
  border-left: 2px solid var(--ap-line-soft); padding-left: 0;
}
#view-autopilot .ap-anchor {
  display: block; padding: 8px 0 8px 14px; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 13.5px; color: var(--ap-ink-3); text-decoration: none;
  transition: color .15s, border-color .15s;
}
#view-autopilot .ap-anchor:hover { color: var(--ap-ink); border-left-color: var(--muted-2); }
#view-autopilot .ap-anchor.on { color: var(--ap-brand); border-left-color: var(--ap-brand); font-weight: 600; }

/* 提示卡 */
#view-autopilot .ap-tip {
  background: var(--ap-brand-soft); border-radius: 12px; padding: 14px 16px;
}
#view-autopilot .ap-tip b { font-size: 13.5px; color: var(--accent); display: block; margin-bottom: 5px; }
#view-autopilot .ap-tip p { margin: 0; font-size: 12.8px; line-height: 1.65; color: var(--muted); }

/* ---------- 右栏：设置台卡片 ---------- */
#view-autopilot .ap-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
#view-autopilot .ap-card {
  background: var(--ap-card); border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius); padding: 22px 24px;
  box-shadow: var(--ap-shadow);
}
#view-autopilot .ap-card-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
#view-autopilot .ap-card-hd h3 {
  margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em;
  color: var(--ap-ink); line-height: 1.35;
}
#view-autopilot .ap-card-hd p {
  margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ap-ink-3);
  max-width: 52ch;
}

/* 事实行（每日上限 / 今日已用 / 模式） */
#view-autopilot .ap-facts {
  display: flex; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--ap-line-soft); padding-top: 16px;
}
#view-autopilot .ap-fact {
  flex: 1 1 150px; display: flex; flex-direction: column; gap: 5px;
}
#view-autopilot .ap-fact span { font-size: 12.5px; color: var(--ap-ink-3); }
#view-autopilot .ap-fact b {
  font-size: 15px; font-weight: 700; color: var(--ap-ink);
  display: flex; align-items: center; gap: 5px;
}
#view-autopilot .ap-num {
  width: 68px; padding: 5px 8px; font-size: 14.5px; font-weight: 700;
  border: 1px solid var(--ap-line); border-radius: 8px;
  background: #fff; color: var(--ap-ink);
  text-align: center;
}
#view-autopilot .ap-num:focus { outline: none; border-color: var(--accent); background: #fff; }

/* 主开关（iOS 风格） */
#view-autopilot .ap-switch { position: relative; flex: none; width: 52px; height: 30px; cursor: pointer; margin: 0; }
#view-autopilot .ap-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
#view-autopilot .ap-slider {
  position: absolute; inset: 0; border-radius: 99px;
  background: var(--border); transition: background .22s cubic-bezier(.22, 1, .36, 1);
}
#view-autopilot .ap-slider::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 99px; background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .22);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
#view-autopilot .ap-switch input:checked + .ap-slider { background: var(--accent); }
#view-autopilot .ap-switch input:checked + .ap-slider::after { transform: translateX(22px); }
#view-autopilot .ap-switch input:focus-visible + .ap-slider { box-shadow: 0 0 0 3px rgba(23, 166, 115, .25); }

/* 字段行 */
#view-autopilot .ap-field-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
#view-autopilot .ap-field { flex: 1 1 220px; min-width: 0; }
#view-autopilot .ap-field label {
  display: block; font-size: 12.8px; font-weight: 600; color: var(--ap-ink-2);
  margin: 0 0 7px; text-transform: none; letter-spacing: 0;
}
#view-autopilot .ap-field input,
#view-autopilot .ap-field select,
#view-autopilot .ap-field textarea,
#view-autopilot .ap-input-suffix input {
  width: 100%; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--ap-line); border-radius: 10px;
  background: #fff; color: var(--ap-ink);
  font-family: inherit; transition: border-color .15s, background .15s;
}
#view-autopilot .ap-field input:focus,
#view-autopilot .ap-field select:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 166, 115, .1);
}
#view-autopilot .ap-input-suffix { position: relative; display: flex; align-items: center; }
#view-autopilot .ap-input-suffix input { padding-right: 62px; }
#view-autopilot .ap-input-suffix span {
  position: absolute; right: 12px; font-size: 12.5px; color: var(--ap-ink-3); pointer-events: none;
}
/* 统一：所有 AP 面板内输入框白底（覆盖历史 --ap-bg 灰底残留） */
body.ap-light #view-autopilot input[type=text],
body.ap-light #view-autopilot input[type=number],
body.ap-light #view-autopilot input[type=email],
body.ap-light #view-autopilot input:not([type]),
body.ap-light #view-autopilot textarea,
body.ap-light #view-autopilot select { background: #fff; }

/* 运行区 */
#view-autopilot .ap-run {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ap-line-soft);
}
#view-autopilot .ap-run-note { font-size: 13px; color: var(--ap-ink-3); line-height: 1.55; }
#view-autopilot .ap-save {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px;
}

/* 按钮：浅色主题下的主按钮 */
#view-autopilot .btn {
  border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--ap-line); background: #fff; color: var(--ap-ink-2);
  cursor: pointer; transition: all .15s; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
#view-autopilot .btn:hover { border-color: var(--muted-2); color: var(--ap-ink); }
#view-autopilot .btn.primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(23, 166, 115, .22);
}
#view-autopilot .btn.primary:hover { background: #148f63; border-color: #148f63; color: #fff; }
#view-autopilot .btn:disabled { opacity: .55; cursor: not-allowed; }

/* 屏蔽词标签 */
#view-autopilot .ap-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
#view-autopilot .ap-tag {
  font-size: 12.5px; padding: 4px 10px; border-radius: 99px;
  background: #fdeded; color: var(--danger); font-weight: 500;
}

/* 固定规则列表 */
#view-autopilot .ap-lock {
  flex: none; font-size: 12px; padding: 4px 10px; border-radius: 99px;
  background: var(--ap-line-soft); color: var(--ap-ink-3); font-weight: 600;
}
#view-autopilot .ap-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
#view-autopilot .ap-rules li {
  display: flex; align-items: baseline; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--ap-line-soft); font-size: 13.8px;
}
#view-autopilot .ap-rules li:last-child { border-bottom: none; padding-bottom: 0; }
#view-autopilot .ap-rules b { flex: 0 0 130px; font-weight: 600; color: var(--ap-ink); }
#view-autopilot .ap-rules span { color: var(--ap-ink-3); font-size: 13.2px; }
@media (max-width: 640px) {
  #view-autopilot .ap-rules li { flex-direction: column; gap: 4px; }
  #view-autopilot .ap-rules b { flex: none; }
}
#view-autopilot .ap-foot {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--ap-line-soft);
  font-size: 12.8px; color: var(--ap-ink-3);
}

/* ---------- 浅色下的工作流三通道（覆盖 styles.css 的深色版） ---------- */
#view-autopilot .wf-flow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-top: 0; }
#view-autopilot .wf-node {
  flex: 1 1 190px; min-width: 170px; display: flex; align-items: center; gap: 11px;
  padding: 14px 15px; border: 1px solid var(--ap-line); border-radius: 13px;
  background: var(--ap-bg); transition: border-color .18s, background .18s, box-shadow .18s;
}
#view-autopilot .wf-node.on {
  background: #fff; border-color: #b7e4d0;
  box-shadow: 0 0 0 3px rgba(23, 166, 115, .08);
}
#view-autopilot .wf-node.off { opacity: .58; }

/* 已开但通道不可用：琥珀色告警，避免「开着绿灯却发不出去」的误读 */
#view-autopilot .wf-node.warn {
  background: var(--warn-weak); border-color: #f5d9a8;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, .08);
}
#view-autopilot .wf-node.warn .wf-ic { background: #fdf3e2; border-color: transparent; }
#view-autopilot .wf-st.bad::before { content: "⚠ "; }
#view-autopilot .wf-node.warn .wf-bd b { color: var(--warn); }
#view-autopilot .wf-ic {
  font-size: 20px; line-height: 1; flex: none;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: #fff; border: 1px solid var(--ap-line-soft);
}
#view-autopilot .wf-node.on .wf-ic { background: var(--ap-brand-soft); border-color: transparent; }
#view-autopilot .wf-bd { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#view-autopilot .wf-bd b { font-size: 14.2px; color: var(--ap-ink); font-weight: 650; }
#view-autopilot .wf-st {
  font-size: 12px; color: var(--ap-ink-3); line-height: 1.35;
  white-space: normal; word-break: break-word;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#view-autopilot .wf-st.ok { color: #14804f; }
#view-autopilot .wf-st.bad { color: var(--warn); }
#view-autopilot .wf-sw { flex: none; margin: 0; display: flex; align-items: center; }
#view-autopilot .wf-sw input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
#view-autopilot .wf-node.warn .wf-sw input { accent-color: #d97706; }
#view-autopilot .wf-arrow { align-self: center; color: var(--muted-2); font-size: 15px; flex: none; }
@media (max-width: 780px) {
  #view-autopilot .wf-arrow { display: none; }
  #view-autopilot .wf-node { flex: 1 1 100%; }
}

/* ============================================================
   全局浅色化（2026-10-26 第二步）：侧栏 + 顶栏
   依然只通过 body.ap-light 开关生效 —— 不加这个 class 就完全是原样，
   一行 JS 撤销即可整体回滚。
   ============================================================ */

/* ---------- 侧栏：深 → 浅 ---------- */
body.ap-light .sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border);
}
body.ap-light .brand .name { color: var(--text); }
body.ap-light .brand .sub { color: var(--muted); }
body.ap-light .side-toggle {
  background: #fff; border-color: var(--border); color: var(--muted);
}
body.ap-light .side-toggle:hover { color: var(--text); border-color: var(--muted-2); }

body.ap-light .nav-item { color: var(--text-2); }
body.ap-light .nav-item:hover { background: var(--line-soft); color: var(--text); }
body.ap-light .nav-item.active {
  background: var(--accent-weak); color: var(--accent);
  border-left: 3px solid var(--accent);
}
body.ap-light .nav-sep { color: var(--muted); border-top-color: #eef1f5; }
body.ap-light .nav-ghead { color: var(--text); }
body.ap-light .nav-ghead:hover { background: var(--line-soft); }
body.ap-light .nav-ghead i { color: var(--muted); }
body.ap-light .nav-sub { border-left-color: #eef1f5; }
body.ap-light .nav-item.nav-top { color: var(--text); }

/* Lia 徽标在浅底下略降透明度，减少突兀 */
body.ap-light .lia-nav .lia-badge { background: #6a49f2; }
body.ap-light .lia-nav.active {
  background: #f1edff; border-color: #d8ccff;
}
/* AUTO 徽标（托管开启提示） */
#ap-badge { background: var(--accent); color: #fff; }
body.ap-light #ap-badge { box-shadow: 0 1px 3px rgba(23,166,115,.35); }

/* 折叠态激活项：浅底高亮 */
body.ap-light .app.sidebar-collapsed .nav-item.active,
body.ap-light .app .sidebar-collapsed .nav-item.active { background: var(--accent-weak); }

/* 侧栏底部 */
body.ap-light .side-foot { color: var(--muted); }
body.ap-light .side-logout { color: var(--text-2); }
body.ap-light .side-logout:hover { color: var(--danger); }

/* ---------- 顶栏：深 → 浅 ---------- */
body.ap-light .topbar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border);
}
body.ap-light .topbar h1 { color: var(--text); }
body.ap-light .topbar .right { color: var(--text-2); }
/* 顶栏里的按钮/输入框若有深色继承，统一提亮 */
body.ap-light .topbar .btn { background: #fff; border-color: var(--border); color: var(--text-2); }
body.ap-light .topbar .btn:hover { color: var(--text); border-color: var(--muted-2); }
body.ap-light .topbar .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* body 基底也要提亮，否则滚动过界露深色 */
body.ap-light {
  background: #f7f8fa;
  color: var(--text);
}
/* 弹窗遮罩下的 modal 保持白底 */
body.ap-light .modal-card,
body.ap-light .modal-box,
body.ap-light .modal { background: #fff; color: var(--text); }

/* ============================================================
   全局浅色化（第三步）：内容区
   这一步才是真正的大头 —— 卡片、表格、KPI、漏斗、表单全都挂在
   --panel / --border / --text / --muted 这些全局变量上。
   做法：在 body.ap-light 下**覆写这几个变量本身**，让所有既有组件
   自动继承浅色，而不是逐个 class 去改（那是几百处，且容易漏）。
   ============================================================ */
body.ap-light {
  /* ============================================================
     核心色板（2026-10-26 统一）：一处改，全站生效。
     原则：6 个色系 × 少量语义层级，不再出现随手写的近似色。
     ============================================================ */

  /* ---- 中性灰阶（5 级，够用且不脏） ---- */
  --bg: #f7f8fa;          /* 页面底 */
  --bg-soft: #f2f4f8;     /* 区块底 */
  --panel: #ffffff;       /* 卡片底 */
  --panel-2: #f5f7fa;     /* 表头 / hover 底 */
  --border: #e4e8ee;      /* 主边框 */
  --line: #e4e8ee;
  --line-soft: #eef1f5;   /* 次级分隔线 */

  /* ---- 文字（3 级） ---- */
  --text: #12161f;        /* 正文 / 标题 */
  --txt: #12161f;
  --text-2: #4a5364;      /* 次级正文 */
  --muted: #5f6b7f;       /* 辅助说明 / 表头 / 占位 */
  --muted-2: #8b95a7;     /* 极弱（仅图标、装饰） */

  /* ---- 品牌绿（3 级） ---- */
  --accent: #0f7d55;      /* 主色：按钮底 / 强调文字（白字 5.14） */
  --accent-hover: #0b6644;
  --accent-weak: #e6f6ef; /* 浅底：徽章 / 选中行 */
  --accent-line: #b7e4d0; /* 浅边框 */
  --accent-on: #ffffff;   /* 压在 accent 上的字色 */

  /* ---- 信息蓝（3 级） ---- */
  --accent-2: #2f6feb;
  --info: #1e40af;
  --info-weak: #eff4ff;
  --info-line: #c7d9fe;

  /* ---- 警告琥珀（3 级） ---- */
  --warn: #b45309;        /* 文字用（白底 4.6+） */
  --warn-soft: #d97706;   /* 图形 / 边框用 */
  --warn-weak: #fdf3e2;
  --warn-line: #f5d9a8;

  /* ---- 危险红（3 级） ---- */
  --danger: #c62828;      /* 文字用（白底 5.62） */
  --danger-weak: #fdeded;
  --danger-line: #fecaca;

  /* ---- 成功（与品牌绿同源，避免"两种绿"） ---- */
  --ok: #0f7d55;
  --ok-weak: #e6f6ef;
  --ok-line: #b7e4d0;

  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
  --radius: 14px;
}

/* body 基底：去掉深色径向渐变 */
body.ap-light {
  background: var(--bg) !important;
  color: var(--text);
}

/* 卡片：白底 + 细边 + 柔和阴影 */
body.ap-light .card,
body.ap-light .crm-stat,
body.ap-light .board-col,
body.ap-light .wa-kpi {
  background: #fff;
  border-color: var(--border);
}

/* 表格：去掉深色斑马纹，用极浅灰 */
body.ap-light table th,
body.ap-light table td { border-bottom-color: var(--line-soft); }
body.ap-light th {
  color: var(--muted); background: transparent;
  text-transform: none; letter-spacing: 0;
}
body.ap-light tr:hover td { background: var(--bg-soft); }
body.ap-light thead th { background: var(--bg); }

/* 表单控件 */
body.ap-light input,
body.ap-light textarea,
body.ap-light select {
  background: #fff; border-color: var(--border); color: var(--text);
}
body.ap-light input::placeholder,
body.ap-light textarea::placeholder { color: #aab3c2; }
body.ap-light input:focus,
body.ap-light textarea:focus,
body.ap-light select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23, 166, 115, .1);
}

/* 按钮 */
body.ap-light .btn {
  background: #fff; border-color: var(--border); color: var(--text-2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
body.ap-light .btn:hover { border-color: var(--muted-2); color: var(--text); }
body.ap-light .btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(15,125,85,.2);
}
body.ap-light .btn.primary:hover { background: #0b6644; border-color: #0b6644; color: #fff; }
body.ap-light .btn.ghost { background: transparent; border-color: var(--border); color: var(--muted); }
body.ap-light .btn.ghost:hover { color: var(--text); border-color: var(--accent); background: var(--bg-soft); }

/* hint / 提示块 */
body.ap-light .hint {
  background: var(--bg-soft); border-color: var(--border); color: var(--muted);
}

/* 弹窗 */
body.ap-light .modal-card,
body.ap-light .modal-box,
body.ap-light .modal-content,
body.ap-light .modal { background: #fff; color: var(--text); }

/* 标签 / 徽章：浅底柔色 */
body.ap-light .badge { border: 1px solid transparent; }
body.ap-light .badge.accent { background: var(--accent-weak); color: #0f7d55; }
body.ap-light .b-A { background: var(--accent-weak); color: var(--accent); }
body.ap-light .b-B { background: var(--info-weak); color: var(--info); }
body.ap-light .b-C { background: var(--warn-weak); color: var(--warn); }
body.ap-light .b-muted { background: var(--line-soft); color: var(--muted); }

/* CRM 统计卡：左侧色条保留，底色转白 */
body.ap-light .crm-stat { box-shadow: 0 1px 2px rgba(16,24,40,.04); }

/* CRM 漏斗条：深色半透明 → 浅灰 */
body.ap-light .cl-f-bar { background: #dfe4ec; border-radius: 3px; }
body.ap-light .cl-arrow { opacity: 1; color: var(--muted); font-weight: 600; }
body.ap-light .cl-cell { background: var(--bg); border-color: var(--line-soft); }
body.ap-light .cl-f:hover { background: var(--bg-soft); }
body.ap-light .crm-links {
  background: linear-gradient(135deg, rgba(23,166,115,.05), rgba(47,111,235,.04));
  border-color: var(--border);
}

/* 大标签页 */
body.ap-light .crm-bigtab:hover,
body.ap-light .tab:hover { background: var(--bg-soft); }
body.ap-light .crm-bigtabs { border-bottom-color: var(--border); }

/* Toast */
body.ap-light .toast {
  background: #fff; border-color: var(--border); color: var(--text);
  box-shadow: 0 8px 28px rgba(16, 24, 40, .12);
}

/* 滚动条（深色主题的滚动条在白底上很脏） */
body.ap-light ::-webkit-scrollbar { width: 10px; height: 10px; }
body.ap-light ::-webkit-scrollbar-track { background: transparent; }
body.ap-light ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; border: 2px solid #f7f8fa; }
body.ap-light ::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ---------- 内容区：深色半透明残留（白色叠加改成浅灰） ---------- */
body.ap-light tr:hover td { background: var(--bg-soft); }
body.ap-light .cl-f:hover,
body.ap-light .nav-ghead:hover { background: var(--bg-soft); }

/* 数据看板 / KPI 数值在浅底上需要加深，否则绿字发飘 */
body.ap-light .wa-kpi b,
body.ap-light .cl-f-v,
body.ap-light .stat .value,
body.ap-light .crm-stat-v { color: var(--accent); }
/* crm-stat-v 的数值统一走绿色，不再单独压成近黑（此前 502 行的覆盖已移除） */

/* 深色遮罩类（弹窗背后）保持半透明黑，不跟着变浅 */
body.ap-light .modal-mask,
body.ap-light .overlay { background: rgba(16, 24, 40, .45); }

/* ============================================================
   全局浅色化（第四步）：硬编码深色的"钉子户"
   这些地方写死了颜色没走变量，必须逐个按住。
   ============================================================ */

/* 1) 弹窗底座：深色渐变 → 白卡片 */
body.ap-light .modal-bg { background: rgba(16, 24, 40, .38); }
body.ap-light .modal {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 24px 70px rgba(16, 24, 40, .18);
}
body.ap-light .modal h3 { border-bottom-color: var(--line-soft); }
body.ap-light .modal input:focus,
body.ap-light .modal textarea:focus,
body.ap-light .modal select:focus { box-shadow: 0 0 0 3px rgba(23, 166, 115, .12); }

/* 2) 白色半透明叠加（深色主题下提亮、浅色主题下会变成"泛白脏块"） */
body.ap-light .cl-f:hover,
body.ap-light .crm-bigtab:hover { background: var(--bg-soft); }

/* 3) 下拉 / 选项 */
body.ap-light option { background: #fff; color: var(--text); }

/* 4) 数字看板里的大数值：浅底上绿色偏浅，加深一档 */
body.ap-light .cl-f-v,
body.ap-light .wa-kpi b,
body.ap-light .stat .value { color: var(--accent); }

/* 5) 进度条轨道（深色主题用白 8%，浅底上几乎看不见） */
body.ap-light .cl-f-bar { background: var(--border); }

/* 6) 分栏边框、分隔线统一 */
body.ap-light .nav-sep,
body.ap-light .crm-bigtabs { border-color: var(--line-soft); }

/* 7) 滚动容器（部分页面自身带 overflow 且有底色） */
body.ap-light .content { background: #f7f8fa; }

/* 8) 表格里"未验证""低意向"这类灰色徽标在浅底上要加深 */
body.ap-light .b-muted,
body.ap-light .badge.b-muted { background: var(--line-soft); color: var(--muted); }

/* 9) 空状态 / 占位文案 */
body.ap-light .muted,
body.ap-light .muted * { color: var(--muted); }

/* 10) 输入框内的图标按钮 */
body.ap-light .inp-btn { background: #f5f7fa; border-color: var(--border); color: var(--muted); }

/* ============================================================
   第五步：品牌页例外
   登录页 / 启动画面是「品牌第一印象」，深色渐变是有意设计，
   不该被工作台的浅色覆盖。用 :has() + 登录态 class 精确还原。
   ============================================================ */

/* 登录页：还原原深色径向渐变 + 深色面板 */
body.ap-light:has(#login-view:not(.hidden)) {
  background:
    radial-gradient(1200px 600px at 80% -10%, #1a2332 0%, transparent 60%),
    #0f1420 !important;
  color: #e6ebf5;
}
body.ap-light:has(#login-view:not(.hidden)) .login-card .hint,
body.ap-light:has(#login-view:not(.hidden)) .hint {
  background: #161c2c; border-color: #2c3650; color: #93a0bb;
}
body.ap-light:has(#login-view:not(.hidden)) input {
  background: #161c2c; border-color: #2c3650; color: #e6ebf5;
}
body.ap-light:has(#login-view:not(.hidden)) input::placeholder { color: var(--muted); }
body.ap-light:has(#login-view:not(.hidden)) .muted { color: #93a0bb; }

/* 兼容不支持 :has() 的老浏览器：给 body 加 .on-login 类（app.js 里维护） */
body.ap-light.on-login {
  background:
    radial-gradient(1200px 600px at 80% -10%, #1a2332 0%, transparent 60%),
    #0f1420 !important;
  color: #e6ebf5;
}

/* 启动画面保持深色（不动），但外层 body 也还原，避免闪现白底 */
body.ap-light .splash-running { background: #0b1220; }

/* 抽屉底部 / 浮层层：深色半透明在浅底上会发脏 */
body.ap-light .drawer-ft {
  background: var(--bg);
  border-top-color: var(--line-soft);
}

/* 登录页里的次要按钮：还原深色描边样式（浅色 .btn 规则会把它刷白） */
body.ap-light.on-login .btn:not(.primary),
body.ap-light:has(#login-view:not(.hidden)) .btn:not(.primary) {
  background: #1b2233; border-color: #2c3650; color: #c7d0e0;
  box-shadow: none;
}
body.ap-light.on-login .btn:not(.primary):hover,
body.ap-light:has(#login-view:not(.hidden)) .btn:not(.primary):hover {
  background: #222b40; border-color: #3d4a6b; color: #e6ebf5;
}
/* 登录页 tab 条（验证码/密码切换）也还原 */
body.ap-light.on-login .tab,
body.ap-light:has(#login-view:not(.hidden)) .tab { color: #93a0bb; }
body.ap-light:has(#login-view:not(.hidden)) .tabs { border-color: #2c3650; background: #161c2c; }

/* ============================================================
   对比度修正（2026-10-26 第三轮）
   深色主题下这些位置是「浅字压深底」，浅色化后底色变白，
   文字色没跟着换 → 白字压白底 / 深字压深绿。逐条归位。
   ============================================================ */

/* 邮件子标签激活态：原为浅底深字，浅色下要反过来 */
body.ap-light .mail-subtab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
body.ap-light .mail-subtab { color: var(--text); }

/* 多语种语言标签：原 #04241a 深墨绿压在品牌绿上，浅色下改白字 */
body.ap-light .ml-lang-tag,
body.ap-light .ml-lang-name,
body.ap-light .ml-lang-row { color: #fff; }

/* WhatsApp 健康提示条：原 #bff5e2 浅绿字压浅绿底，几乎不可见 */
body.ap-light .wa-notice { color: var(--info); background: var(--info-weak); border-color: var(--info-line); }
body.ap-light .wa-notice.ok { color: var(--accent); background: var(--accent-weak); border-color: var(--accent-line); }
body.ap-light .wa-notice.err { color: var(--danger); background: var(--danger-weak); border-color: var(--danger-line); }

/* 「一键对账」等橙色链接按钮：var(--warn) 压白底 1.72，改深琥珀 */
body.ap-light .btn.sm.link-o { color: var(--warn); }
body.ap-light .btn.sm.link-o:hover { color: var(--warn); }

/* 工作流箭头：装饰性但过淡，提到可见 */
body.ap-light #view-autopilot .wf-arrow { color: var(--muted); }

/* 锁定提示 */
body.ap-light #view-autopilot .ap-lock { color: var(--text-2); background: var(--line-soft); }

/* 完成态徽章与标签：略提对比 */
body.ap-light .badge.st-done { color: var(--accent); background: var(--accent-weak); }
body.ap-light .tag.ok { color: var(--accent); background: var(--accent-weak); }

/* 大数值 / 日期等绿字：统一走已加深的 --accent */
body.ap-light .crm-stat-v,
body.ap-light .value { color: var(--accent); }

/* 金额红字：var(--danger) 压白底 4.23，略加深到 4.98，红色观感不变 */
body.ap-light .cf-price b { color: var(--danger); }

/* 多语种语言行：未激活是白底深字，激活才是绿底白字（上一条规则改反了，这里修正） */
body.ap-light .ml-lang { color: var(--text); background: #fff; border-color: var(--border); }
body.ap-light .ml-lang .ml-lang-tag,
body.ap-light .ml-lang .ml-lang-name { color: var(--text); opacity: 1; }
body.ap-light .ml-lang.on { color: #fff; background: var(--accent); border-color: var(--accent); }
body.ap-light .ml-lang.on .ml-lang-tag,
body.ap-light .ml-lang.on .ml-lang-name { color: #fff; }

/* 仪表盘 KPI 数值：styles.css 的 .kpi-bar .card.stat .value 优先级更高，需同级叠加 */
body.ap-light .kpi-bar .card.stat .value,
body.ap-light .stat .value { color: var(--accent); }

/* 次要文字压在 #f2f4f8 等浅灰底上时，4.41 略欠，统一提一档 */
body.ap-light .pb-sum .muted,
body.ap-light .muted { color: var(--muted); }

/* 知识库/模型配置里的键值对说明文字：压在 #f2f4f8 上 4.41，提一档 */
body.ap-light .brain .k,
body.ap-light .brain .sub,
body.ap-light #view-brain .k,
body.ap-light #view-brain .sub { color: var(--text-2); }

/* 工作流箭头：装饰符号，给足对比度免得像断开 */
body.ap-light .wf-arrow { color: var(--muted); }
body.ap-light #view-brain .met .k,
body.ap-light #view-brain .met .sub,
body.ap-light #view-brain .meta-row,
body.ap-light #view-brain .kv span { color: var(--text-2); }
/* 知识库指标卡里的 <small> 说明：压在 #f2f4f8 上 4.41 */
body.ap-light #view-brain .v small,
body.ap-light #view-brain .v span { color: var(--text-2); }

/* CRM 统计卡：浅色下边框太淡，卡片边界糊在页面底色里，看起来像被截断 */
body.ap-light .crm-stat {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}

/* 登录页是深色品牌页，不参与工作台的对比度调整：
   品牌亮绿保持原样，避免被 --accent 的加深连带改掉 */
body.ap-light.on-login .tab.on,
body.ap-light:has(#login-view:not(.hidden)) .tab.on {
  background: #2bd9a0; color: #06231a; border-color: #2bd9a0;
}
body.ap-light.on-login .btn.primary,
body.ap-light:has(#login-view:not(.hidden)) .btn.primary {
  background: #2bd9a0; border-color: #2bd9a0; color: #06231a;
}
body.ap-light.on-login .btn.primary:hover,
body.ap-light:has(#login-view:not(.hidden)) .btn.primary:hover {
  background: #22c48f; border-color: #22c48f; color: #06231a;
}

/* 登录页内联 style 直接用 var(--accent)，CSS 类覆盖不到。
   在登录态把 --accent 局部还原成品牌亮绿，比逐个改内联样式更干净。 */
body.ap-light.on-login,
body.ap-light:has(#login-view:not(.hidden)) {
  --accent: #2bd9a0;
  --muted: #93a0bb;
}

/* ============================================================
   语义一致性（2026-10-26 第五轮）
   颜色值统一后，仍存在「同一角色两种长相」。这里按角色对齐。
   ============================================================ */

/* 输入框：统一白底。原表单用小写 var(--bg-soft)（灰底），
   弹窗/抽屉里却是白底，同类控件两种底色。 */
body.ap-light input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
body.ap-light textarea,
body.ap-light select {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
body.ap-light input::placeholder,
body.ap-light textarea::placeholder { color: var(--muted-2); }
body.ap-light input:focus,
body.ap-light textarea:focus,
body.ap-light select:focus { border-color: var(--accent); }

/* 说明文字：.sub / .hint / .muted 统一到 --muted 一档，
   原来 .sub 用 --text-2(更深)、.hint 用 --muted，同层级两种灰。 */
body.ap-light .sub,
body.ap-light .hint,
body.ap-light .muted { color: var(--muted); }

/* 表头：统一浅色实底，避免透明/实底混用 */
body.ap-light th {
  background: var(--panel-2);
  color: var(--muted);
  border-bottom-color: var(--border);
}

/* 卡片：统一边框与阴影，去掉个别内联写死的 border */
body.ap-light .card {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* 「一键对账」是强调型动作（橙=需注意），保留语义色但配浅底，
   免得它跟旁边的 ghost 按钮混在一起只有字色不同，显得突兀。 */
body.ap-light .btn.sm.link-o {
  background: var(--warn-weak);
  border-color: var(--warn-line);
  color: var(--warn);
}
body.ap-light .btn.sm.link-o:hover { background: #fce9cf; border-color: var(--warn); }

/* autopilot 页内的 select 也统一白底（原继承 --bg-soft 显灰） */
body.ap-light #view-autopilot select { background: #fff; }

/* 表头底色统一：个别表格（如 tc-tbl）用了 --bg 而非 --panel-2，
   导致有的表头偏灰、有的偏白。统一到 --panel-2。 */
body.ap-light thead th,
body.ap-light table th,
body.ap-light .tbl thead th,
body.ap-light .tc-tbl thead th {
  background: var(--panel-2) !important;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

/* 说明文字最终收敛：只有两种形态，避免同级出现 3~4 种灰
   ① .hint  = 带底色的提示块（浅底 + muted 字）
   ② .muted / .sub = 纯文字说明（统一 muted 字，无底色）
   .sub 之前用 --text-2（比 muted 深一档），同层级两种灰，统一到 muted。 */
body.ap-light .sub { color: var(--muted); }
body.ap-light .hint { background: var(--bg-soft); border: 1px dashed var(--border); color: var(--muted); }

/* brain 页的 .sub 被 #view-brain 前缀规则拉回 --text-2，
   同层级说明文字应统一到 --muted。 */
body.ap-light #view-brain .sub { color: var(--muted); }

/* ============================================================
   图标底色兜底（2026-10-27）
   Lia 导航图标 / 外贸小精灵悬浮球用 background-image 渐变，
   backgroundColor 是透明的，读到的背景色其实是页面底色 →
   自动对比度审计永远报「白字压白底」。这里补一层实底兜底色，
   渐变盖在上面视觉不变，但底色可被真实采样。
   ============================================================ */
body.ap-light .lia-nav .lia-ic { background-color: #6a49f2; }
body.ap-light .elf-ball { background-color: var(--accent); }

/* ============================================================
   浅色层第三批（2026-10-27）：残留的「深色主题态」组件
   这些都是深色主题下写的半透明浅绿/橙/红底，浅色化后底变白，
   文字仍是亮色 → 白字压白底、或者亮绿压浅绿。逐条改实底配对。
   ============================================================ */

/* 技能胶囊：rgba(43,217,160,.14) 底 + 品牌绿字，浅底上只有 4.3 */
body.ap-light .skill-chip {
  background: var(--accent-weak);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* 技能分类 tab 激活态：同样的半透明绿底，4.41 差一点 */
body.ap-light .sk-tab.on {
  background: var(--accent-weak);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* 付费技能徽标：橙红渐变 + 白字，底色被采样成透明 → 白字压白底 */
body.ap-light .badge.b-pro {
  background: #c2410c;
  color: #fff;
  border: 0;
  box-shadow: none;
}

/* 数据源 ROI 状态标签：亮绿/亮橙/亮红压浅底，全部不达标 */
body.ap-light .ds-roi-alert.ok {
  background: var(--accent-weak); color: var(--accent); border: 1px solid var(--accent-line);
}
body.ap-light .ds-roi-alert.warn {
  background: var(--warn-weak); color: var(--warn); border: 1px solid var(--warn-line);
}
body.ap-light .ds-roi-alert.danger {
  background: var(--danger-weak); color: var(--danger); border: 1px solid var(--danger-line);
}

/* 徽章全套：深色主题用「半透明亮底 + 亮字」，浅色化后全部换成「浅实底 + 深字」
   st-failed 之前只改了 done/ok，其余状态在浅底上仍是 2~3 的对比度。 */
body.ap-light .badge.st-failed, body.ap-light .badge.err, body.ap-light .badge.b-red {
  background: var(--danger-weak); color: var(--danger); border: 1px solid var(--danger-line);
}
body.ap-light .badge.b-amber, body.ap-light .badge.b-warn {
  background: var(--warn-weak); color: var(--warn); border: 1px solid var(--warn-line);
}
body.ap-light .badge.b-green, body.ap-light .badge.ok, body.ap-light .badge.accent,
body.ap-light .badge.b-high {
  background: var(--accent-weak); color: var(--accent); border: 1px solid var(--accent-line);
}
body.ap-light .badge.b-medium {
  background: var(--warn-weak); color: var(--warn); border: 1px solid var(--warn-line);
}
body.ap-light .badge.b-low, body.ap-light .badge.st-pending {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
}
body.ap-light .badge.st-running {
  background: var(--info-weak); color: var(--info); border: 1px solid var(--info-line);
}
body.ap-light .badge.b-type {
  background: var(--info-weak); color: var(--info); border: 1px solid var(--info-line);
}

/* ============================================================
   指标卡色条去彩（2026-10-27）
   客户页 6 张指标卡的左侧色条，原本按「第几个指标」随机分配
   绿/橙/蓝/紫/红（c-green→绿、c-accent→橙、c-warn→蓝…连语义都错位），
   同一层级的并列指标却出现 6 种颜色，正是「五颜六色」的重灾区。
   指标卡之间本来就是并列关系、无语义分级 → 统一中性灰条，
   把颜色留给真正需要区分的状态（成功/警告/失败）。
   ============================================================ */
body.ap-light .crm-stat::before,
body.ap-light .crm-stat.c-green::before,
body.ap-light .crm-stat.c-accent::before,
body.ap-light .crm-stat.c-warn::before,
body.ap-light .crm-stat.c-purple::before,
body.ap-light .crm-stat.c-blue::before,
body.ap-light .crm-stat.c-red::before {
  background: var(--border);
  opacity: 1;
  width: 3px;
}
/* 唯一例外：失败指标需要红条提示（语义 = 需处理），其余保持中性 */
body.ap-light .crm-stat.c-red::before { background: var(--danger-line); }

/* 五环看板：轨道底色原本是 rgba(255,255,255,.08)，浅底上完全看不见，
   渐变条又跨绿→蓝两个色相。统一成「浅灰轨道 + 单色品牌绿条」。 */
body.ap-light .cl-f:hover { background: var(--bg-soft); }
body.ap-light .cl-f-bar { background: #dfe4ec; border-radius: 3px; }
body.ap-light .cl-arrow { opacity: 1; color: var(--muted); font-weight: 600; }
body.ap-light .cl-f-bar i { background: var(--accent); }
body.ap-light .cl-f-v { color: var(--accent); }

/* 根节点兜底：html 没设 color 时浏览器默认取 rgb(0,0,0)，
   会让色板统计里多出一个「纯黑」，且深色登录页切浅色时闪现黑字。
   统一跟随 --text。 */
html:has(body.ap-light):not(:has(body.on-login)) { color: var(--text); }
body.ap-light { color: var(--text); }
/* 启动画面只存在几百毫秒，用同一个 --text 免得色板统计里多出一个近似色 */
body.ap-light .splash, body.ap-light #splash { color: var(--text); }

/* ============================================================
   Lia 工具执行轨迹条（2026-10-27 用户反馈）
   截图问题：「产品库查询 执行完成」这类胶囊字太淡、看不出状态。
   根因：styles.css:567 写死 #60a5fa（浅蓝），这是深色主题的
   「亮蓝字压半透明蓝底」写法；浅色化后底色合成为 #f9fcff，
   浅蓝压近白底 → 对比度 2.2，远低于 4.5。
   另外 4 个问题一起修：
     · 成功/失败同色，状态靠读文字才知道 → 分别用绿/红
     · 未展开的胶囊有 opacity:.75，把 12.5px 小字压到 2.0
     · 蓝色系与全站品牌绿冲突，属残留散色
     · 三角 ▸ 与文字基线不齐，折叠态看不清是「可展开」
   ============================================================ */

/* 成功态：浅绿实底 + 深绿字 + 同色系描边（与全站 .badge 一致） */
body.ap-light .tool-trace {
  background: var(--accent-weak);
  border: 1px solid var(--accent-line);
  color: var(--text-2);
}
body.ap-light .tool-trace .tt-head {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

/* 失败态：浅红实底 + 深红字 */
body.ap-light .tool-trace.err {
  background: var(--danger-weak);
  border-color: var(--danger-line);
}
body.ap-light .tool-trace.err .tt-head { color: var(--danger); }

/* 折叠态不再整体降透明度：小字经不起压。
   改用「浅一档底 + 常规字」，靠色块差异表达折叠，不用透明度。 */
body.ap-light .tool-trace.folded {
  opacity: 1;
  background: var(--panel-2);
  border-color: var(--border);
}
body.ap-light .tool-trace.folded .tt-head { color: var(--text-2); }

/* 展开三角：给足对比，并固定宽度让多行文字左对齐 */
body.ap-light .tool-trace .tt-toggle {
  display: inline-block;
  width: 13px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  transform: translateY(-.5px);
}
body.ap-light .tool-trace:not(.folded) .tt-toggle { color: var(--accent); }
body.ap-light .tool-trace.err .tt-toggle { color: var(--danger); }

/* 折叠态整条可点：补 hover 反馈，免得用户不知道能点开 */
body.ap-light .tool-trace.folded:hover {
  background: var(--accent-weak);
  border-color: var(--accent-line);
}
body.ap-light .tool-trace.folded:hover .tt-head,
body.ap-light .tool-trace.folded:hover .tt-toggle { color: var(--accent); }

/* 轨迹正文（工具返回的原文）：等宽 + 灰字，压在浅绿底上提到 --text-2 */
body.ap-light .tool-trace .tt-body {
  color: var(--text-2);
  border-top: 1px dashed var(--accent-line);
  padding-top: 6px;
}
body.ap-light .tool-trace.err .tt-body { border-top-color: var(--danger-line); }
body.ap-light .tool-trace .tt-body::-webkit-scrollbar-thumb { background: var(--border); }

/* 轨迹条是「同一轮的连续动作」，不该按对话消息的 14px 间距排，
   否则 8 个胶囊纵向拉出一屏，像 8 条独立消息。
   用负 margin 抵消父级 gap（只吃一半，保留 6px 视觉分组）。 */
body.ap-light .lia-msgs .tool-trace + .tool-trace { margin-top: -8px; }
body.ap-light .lia-msgs .tool-trace { padding: 6px 11px; border-radius: 9px; }
body.ap-light .lia-msgs .tool-trace .tt-body { margin-top: 5px; }

/* 折叠态的三角：折叠时用更实的灰，展开时用品牌绿，
   让「能点开 / 已展开」两种状态一眼可分 */
body.ap-light .lia-msgs .tool-trace.folded .tt-toggle { color: var(--muted); }

/* 轨迹条按内容宽度收（原 max-width:88% 让短文案也撑满 88%，
   右侧留一大片空，像排版错位的文本框） */
body.ap-light .lia-msgs .tool-trace {
  align-self: flex-start;
  max-width: min(620px, 88%);
  width: fit-content;
}

/* 失败态优先级修正：「折叠」不能盖住「失败」。
   原来 .folded 规则写在 .err 之后，同特异性下后者胜出 →
   「执行失败 + 已折叠」的胶囊会被刷成灰色，用户看不出这条工具挂了。
   这里给 .err 加上 .folded 组合，确保折叠的失败条仍然是红的。 */
body.ap-light .tool-trace.err,
body.ap-light .tool-trace.err.folded,
body.ap-light .tool-trace.err.folded:hover {
  background: var(--danger-weak);
  border-color: var(--danger-line);
}
body.ap-light .tool-trace.err.folded .tt-head,
body.ap-light .tool-trace.err.folded:hover .tt-head { color: var(--danger); }
body.ap-light .tool-trace.err.folded .tt-toggle,
body.ap-light .tool-trace.err.folded:hover .tt-toggle { color: var(--danger); }
/* 折叠失败态的描边加粗一点，扫一眼就能定位到出问题的那条 */
body.ap-light .tool-trace.err.folded { border-left-width: 3px; }

/* ============================================================================
   LLM 欠费降级告警条（2026-10-30）
   需求原文：「管理后台出现报警提醒，管理员充值后报警消失」。
   放在 topbar 之下、content 之上 = 任何 tab 都看得见。
   配色刻意用「危险红」而非琥珀：欠费是花钱就能立刻解决的事，
   升级成红色是为了让管理员当天就处理，而不是"回头再看"。
   ============================================================================ */
.llm-fo-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 2px;
  padding: 12px 16px;
  background: var(--danger-weak);
  border-bottom: 1px solid var(--danger-line);
  /* 左侧粗描边：横幅横跨整屏时，靠它把视线钉在"这是一条告警"上 */
  box-shadow: inset 3px 0 0 var(--danger);
  animation: llmFoIn .22s ease-out;
}
.llm-fo-bar.hidden { display: none; }

/* 呼吸动画只在首次出现时跑一遍；不做无限循环 ——
   后台是长时间开着的页面，闪个不停会让人没法专心干别的 */
@keyframes llmFoIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.llm-fo-ico {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 13px; font-weight: 700;
  /* 图标略微下沉，与 16px 标题的基线对齐 */
  margin-top: 1px;
}

.llm-fo-main { flex: 1 1 auto; min-width: 0; }

.llm-fo-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 700; color: var(--danger);
  line-height: 1.4;
}
.llm-fo-tag {
  font-size: 11.5px; font-weight: 600;
  padding: 1.5px 7px; border-radius: 999px;
  background: #fff;
  border: 1px solid var(--danger-line);
  color: var(--danger);
  /* 标签是"类型"，不该抢标题的主次 */
  font-weight: 500;
}

.llm-fo-sub {
  margin-top: 3px;
  font-size: 13px; line-height: 1.55;
  color: #7f1d1d;   /* 红系深色：比纯黑更贴横幅气质，白底对比仍 > 7:1 */
}
.llm-fo-sub b { font-weight: 650; }

/* 厂商原文：等宽 + 可换行，长 JSON 不撑破布局；
   限高可滚动，避免一条超长报错把整屏顶下去 */
.llm-fo-err {
  margin-top: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.5;
  color: #9b2c2c;
  opacity: .85;
  max-height: 52px;
  overflow: auto;
  word-break: break-all;
  white-space: pre-wrap;
}
.llm-fo-err:empty { display: none; }

.llm-fo-actions {
  flex: 0 0 auto;
  display: flex; gap: 8px; align-items: center;
  padding-top: 2px;
}
/* 按钮在白底红框横幅里：用白底把按钮从粉底上"抬"出来，避免糊成一片 */
.llm-fo-actions .btn {
  background: #fff;
  border-color: var(--danger-line);
  color: var(--danger);
}
.llm-fo-actions .btn:hover { border-color: var(--danger); }
.llm-fo-actions .btn:disabled { opacity: .55; cursor: default; }

/* 窄屏：按钮换行到内容下方，避免把标题挤成一列字 */
@media (max-width: 760px) {
  .llm-fo-bar { flex-wrap: wrap; }
  .llm-fo-actions { width: 100%; padding-left: 34px; }
}