/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* 设计令牌（PC端实施方案 / 界面设计规范）：单一强调色 靛蓝 + 0.5px 发丝线 + 两档字重 400/500 */
  --accent: #4f46e5;          /* 靛蓝，唯一强调色 */
  --accent-strong: #4338ca;   /* 强调色按下 / 悬浮 */
  --accent-weak: #eef2ff;     /* 浅强调底（激活态） */
  --hairline: rgba(24,24,27,0.08);  /* 0.5px 发丝线 */
  --surface: #ffffff;         /* 表面 */
  --page-bg: #f6f8fb;         /* 页面底 */
  --text-1: #18181b;          /* 主文字 */
  --text-2: #71717a;          /* 次文字 */
  --text-3: #a1a1aa;          /* 弱文字 */

  /* 语义色：达标绿 / 预警琥珀 / 止损红棕 / 暂停灰 */
  --success: #0f6e56;
  --warning: #ba7517;
  --danger: #993c1d;
  --muted: #a1a1aa;

  /* 兼容别名：既有组件沿用以下变量名，统一映射到新令牌 */
  --primary: var(--accent);
  --primary-dark: var(--accent-strong);
  --border: var(--hairline);
  --content-bg: var(--page-bg);
  --card-bg: var(--surface);
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --text-light: var(--text-3);
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f4f4f5;
  --sidebar-active: var(--accent);

  --purple: #8b5cf6;
  --teal: #14b8a6;
  --bg-card: var(--surface);
  --bg-secondary: #f8fafc;
  --shadow: 0 1px 2px rgba(24,24,27,0.05);
  --shadow-lg: 0 8px 24px rgba(24,24,27,0.08);
  --radius: 12px;
  --radius-sm: 8px;
}
/* 语义块令牌（浅/深色共用变量名，供结果摘要等复用，收敛硬编码 #f0fdf4 等） */
:root {
  --ok-bg: #f0fdf4;
  --ok-bd: #bbf7d0;
  --ok-fg: #166534;
  --fail-bg: #fee2e2;
  --fail-bd: #fecaca;
  --fail-fg: #991b1b;
}

/* ===== 深色令牌（决策 D / T5）：仅覆盖变量，不改结构（默认 light，不跟随系统） ===== */
:root[data-theme="dark"] {
  --surface: #1e222b;
  --page-bg: #15181f;
  --text-1: #e6e8ec;
  --text-2: #a7adb8;
  --text-3: #6b7280;
  --hairline: rgba(255,255,255,0.10);
  --sidebar-bg: #1a1d24;
  --sidebar-hover: #262a33;
  --accent-weak: #2a2f45;
  --bg-secondary: #23272f;
  --border: rgba(255,255,255,0.12);
  --content-bg: #15181f;
  --card-bg: #1e222b;
  --shadow: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --ok-bg: rgba(15,110,86,0.18);
  --ok-bd: rgba(15,110,86,0.5);
  --ok-fg: #6ee7b7;
  --fail-bg: rgba(239,68,68,0.16);
  --fail-bd: rgba(239,68,68,0.5);
  --fail-fg: #fca5a5;
}
/* 顶栏在深色下用半透明深色底（原 rgba(255,255,255,0.92) 在暗色下会发白） */
:root[data-theme="dark"] .topbar { background: rgba(30,34,43,0.92); }
/* 排序高亮在深色下改用卡片底+浅蓝，避免浅色块刺眼 */
:root[data-theme="dark"] thead th.sortable:hover { background: var(--bg-secondary); }
:root[data-theme="dark"] thead th.sorted { background: var(--bg-secondary); color: #8ab4f8; }
:root[data-theme="dark"] thead th .sort-arrow { color: #8ab4f8; }

body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--content-bg); color: var(--text-primary); font-size: 14px; line-height: 1.5; overflow-wrap: break-word; word-break: break-word; }
code, .code { font-family: monospace; word-break: break-all; overflow-wrap: break-word; }

/* ===== Layout（三栏外壳：左手风琴 ｜ 中内容+顶栏 ｜ 右运行工作区） ===== */
#app { display: flex; min-height: 100vh; }
.sidebar { width: 232px; background: var(--sidebar-bg); color: var(--text-2); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; flex-shrink: 0; position: fixed; height: 100vh; overflow-y: auto; z-index: 70; }
/* 中间工作区：顶栏(面包屑/选择器/健康灯) + 内容 + 右侧工作区 三栏 */
.workarea { flex: 1; margin-left: 232px; display: flex; flex-direction: column; min-height: 100vh; }
/* T2：workbody 限高并隐藏溢出，使 .content 与 .workspace 各自独立滚动、互不干扰 */
.workbody { flex: 1; display: flex; align-items: stretch; min-height: 0; overflow: hidden; }
.content { flex: 1; padding: 24px; min-height: 0; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; }

/* ===== Sidebar ===== */
.logo { padding: 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--hairline); }
.logo-icon { width: 32px; height: 32px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 500; color: #fff; font-size: 13px; }
.logo-text { font-size: 14px; font-weight: 500; color: var(--text-1); letter-spacing: .2px; }
.nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: block; padding: 9px 14px; color: var(--text-2); text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 400; transition: background .15s, color .15s; }
.nav-item:hover { background: var(--sidebar-hover); color: var(--text-1); }
.nav-item.active { background: var(--accent-weak); color: var(--accent); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.sync-box { padding: 14px 16px; border-top: 1px solid var(--hairline); }
.btn-sync { width: 100%; padding: 8px 14px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 13px; cursor: pointer; font-weight: 500; transition: background .15s; }
.btn-sync:hover { background: var(--accent-strong); }
.btn-sync:disabled { opacity: .5; cursor: not-allowed; }
.sync-msg { margin-top: 8px; font-size: 12px; color: var(--text-3); min-height: 16px; }

/* ===== Cards & Grid ===== */
.card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.card-compact { padding: 12px 16px; margin-bottom: 12px; }
.card-compact .card-title { font-size: 14px; margin-bottom: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ===== Stat Cards ===== */
.stat-card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.stat-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.stat-sub { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.stat-card.blue .stat-value { color: var(--primary); }
.stat-card.green .stat-value { color: var(--success); }
.stat-card.orange .stat-value { color: var(--warning); }
.stat-card.red .stat-value { color: var(--danger); }
.stat-card.purple .stat-value { color: var(--purple); }

/* ===== Table ===== */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { background: var(--bg-secondary); padding: 10px 12px; text-align: left; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid var(--border); white-space: nowrap; position: sticky; top: 0; cursor: pointer; user-select: none; }
thead th:hover { background: var(--bg-secondary); }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: normal; word-break: break-word; overflow-wrap: break-word; vertical-align: top; }
tbody tr:hover { background: var(--bg-secondary); }
.t-num { text-align: right; font-variant-numeric: tabular-nums; }
.t-money { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 500; }
/* ===== 计划列表表头排序 ===== */
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { background: #eef2f7; }
thead th.sorted { background: #e8f0fe; color: #1a73e8; }
thead th .sort-arrow { color: #1a73e8; font-size: 11px; margin-left: 2px; }
thead th .sort-hint { color: #c4ccd6; font-size: 11px; margin-left: 2px; }

/* ===== Badges ===== */
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-orange { background: #ffedd5; color: #c2410c; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-gray { background: #f1f5f9; color: #475569; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-amber { background: #fef3c7; color: #92400e; }

/* ===== 监控计划 · 候选投放计划选择器（创建/编辑 & 成员管理共用） ===== */
.picker { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 6px; background: var(--bg-secondary); }
.picker-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pk-search { flex: 1; min-width: 180px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--card-bg); color: var(--text-primary); }
.pk-shop { border-top: 1px dashed var(--border); padding: 6px 0; }
.pk-shop:first-of-type { border-top: none; }
.pk-shop-h { font-weight: 600; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.pk-shop-all { cursor: pointer; }
.pk-item { display: flex; align-items: center; gap: 6px; padding: 3px 0 3px 14px; font-size: 13px; cursor: pointer; }
.pk-item small { color: var(--text-secondary); }
/* 分页选择器（候选投放计划）：列表独立滚动，工具栏/加载更多固定可见 */
.pk-list { max-height: 320px; overflow: auto; }
.pk-mode { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--card-bg); color: var(--text-primary); }
.pk-allpage { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; user-select: none; white-space: nowrap; }
.pk-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
#pkLoadMore { min-width: 132px; }
/* 投放类型标签：全域=靛蓝 / 乘方=琥珀，便于区分 */
.pk-tag { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 18px; font-weight: 500; }
.pk-tag-uni { background: #eef2ff; color: #4338ca; }
.pk-tag-cf { background: #fef3c7; color: #92400e; }
.mem-fs { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0; }

/* ===== Buttons ===== */
.btn { display: inline-block; padding: 7px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; background: var(--surface); color: var(--text-primary); font-weight: 500; transition: all .15s; }
.btn:hover { background: var(--bg-secondary); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #0c5a47; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #7c3015; }
.btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-warning:hover { background: #9a5e12; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-weak); }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ===== Plans checkbox column & batch bar ===== */
.col-check { width: 34px; text-align: center; cursor: default; }
.col-check input { width: 16px; height: 16px; cursor: pointer; }
tr.selected-row { background: #eff6ff; }
.batch-bar { position: fixed; left: 232px; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -3px 14px rgba(0,0,0,.10); padding: 12px 20px; display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; z-index: 60; }
.batch-info { font-size: 14px; color: var(--text-primary); }
.batch-info b { color: var(--primary); font-size: 17px; }
.batch-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.batch-actions label { font-size: 13px; color: var(--text-secondary); margin-left: 4px; }
.batch-actions input[type=number] { width: 92px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 13px; }
.batch-actions input[type=number]:focus { outline: none; border-color: var(--primary); }
.batch-sep { color: var(--border); }
@media (max-width: 900px) { .batch-bar { left: 0; } }

/* ===== Forms ===== */
.form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; }
input[type="text"], input[type="number"], input[type="search"], select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--surface); color: var(--text-primary); outline: none; transition: border .15s;
}
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,130,246,.1); }
input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-bar select, .filter-bar input { min-width: 120px; }
/* 列显示固定容器：独立于筛选条，不随筛选控件显隐而重排，稳定钉在卡片右上区域 */
.plans-coltools { display: flex; justify-content: flex-end; margin: 0 0 12px; }

/* ===== Pagination ===== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; }
.pagination button { min-width: 32px; height: 32px; padding: 0 8px; }
.pagination .page-info { font-size: 13px; color: var(--text-secondary); }

/* ===== Misc ===== */
.page-title { font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.loading { text-align: center; padding: 60px; color: var(--text-light); font-size: 15px; }
.empty { text-align: center; padding: 40px; color: var(--text-light); }
.alert-row { display: flex; align-items: center; gap: 8px; }
.roi-bad { color: var(--danger); font-weight: 600; }
.roi-good { color: var(--success); font-weight: 600; }
.roi-warn { color: var(--warning); font-weight: 600; }
.progress-bar { width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .3s; }
.progress-fill.warn { background: var(--warning); }
.progress-fill.danger { background: var(--danger); }
.tag-select { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tag-btn { padding: 4px 12px; border: 1px solid var(--border); border-radius: 16px; cursor: pointer; font-size: 13px; background: var(--surface); }
.tag-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.preset-form { background: var(--bg-secondary); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.result-box { margin-top: 16px; }
.result-row { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.result-success { background: var(--ok-bg); color: var(--ok-fg); }
.result-failed { background: var(--fail-bg); color: var(--fail-fg); }
.result-preview { background: #dbeafe; }

/* ===== 计划管理交互元素 ===== */
.status-select {
  padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px; cursor: pointer; background: var(--surface); color: var(--text-primary);
  max-width: 110px;
}
.status-select:hover { border-color: var(--primary); }
.status-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.type-select {
  padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px; cursor: pointer; background: var(--surface); color: var(--text-primary);
  max-width: 90px;
}
.type-select:hover { border-color: var(--primary); }
.mtpl-select {
  padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px; cursor: pointer; background: var(--surface); color: var(--text-primary);
  max-width: 150px;
}
.mtpl-select:hover { border-color: var(--primary); }
.mtpl-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.modal-select {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; background: var(--surface); color: var(--text-primary); margin-top: 4px;
}
.inline-edit {
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
  border: 1px dashed transparent; display: inline-block; min-width: 40px;
  transition: all .15s;
}
.inline-edit:hover { border-color: var(--primary); background: var(--accent-weak); }
.trend-bar { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.trend-col { flex: 1; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.trend-col:hover::after { content: attr(data-val); position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; white-space: nowrap; }
.trend-label { font-size: 10px; color: var(--text-light); text-align: center; margin-top: 2px; }

/* Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-card { background: var(--surface); border-radius: var(--radius); padding: 24px; min-width: 420px; max-width: 600px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.modal-card h3 { margin: 0 0 16px; font-size: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.form-grid label { display: flex; flex-direction: column; font-size: 13px; color: var(--text); gap: 4px; }
.form-grid input { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: var(--surface); color: var(--text-primary); }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 16px; }
.modal-close { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--text-secondary); line-height: 1; padding: 2px 6px; border-radius: 6px; }
.modal-close:hover { background: var(--bg); color: var(--text); }
.cost-preview { margin-top: 12px; padding: 8px 12px; background: var(--bg-secondary); border-radius: 6px; }

/* ===== 授权健康灯 / 数据时效 ===== */
.health-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.health-normal { background: #2ecc71; }
.health-limited { background: #f1c40f; }
.health-warning { background: #e67e22; }
.health-danger { background: #e74c3c; }
.health-unknown { background: #95a5a6; }
.data-stale { color: var(--text-light); opacity: .75; }
.sync-banner { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); }
.sync-banner.stale { border-color: #e67e22; color: #e67e22; }

/* ===== 登录用户栏 ===== */
.user-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
/* 顶栏内的账号区：中和侧边栏样式（去内边距/顶边框），作为右上角登录信息 */
.topbar-right .user-bar { padding: 0; border: 0; gap: 10px; }
.user-label { color: var(--text-1); font-weight: 500; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#feishuBindArea { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ===== 页面内帮助 ===== */
.help-body { font-size: 14px; line-height: 1.85; color: var(--text); padding: 4px 2px; max-height: 60vh; overflow: auto; }
.help-body b { color: var(--primary); }
.badge-purple { background: #ede9fe; color: #5b21b6; }

/* Toast */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 14px; z-index: 2000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: fadeIn .3s; }
.toast.error { background: var(--danger); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; }
.form-row { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-end; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.form-group input, .form-group select { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; background: var(--surface); color: var(--text-primary); }
.hint { font-size: 11px; color: var(--text-light); }
.btn-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.switch input { width: 18px; height: 18px; cursor: pointer; }
.mini { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; width: 90px; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-primary); cursor: pointer; margin-right: 6px; }
.chk input { cursor: pointer; }
.scope-block { margin-top: 12px; }
.scope-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; }
.chk-wrap { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.result-summary { padding: 10px 14px; background: var(--ok-bg); border: 1px solid var(--ok-bd); color: var(--ok-fg); border-radius: var(--radius-sm); margin-bottom: 12px; font-weight: 600; font-size: 14px; }
.result-summary:empty { display: none; }

/* ===== 监控模板 · 规则构造器（紧凑 / 动作色条 / tooltip） ===== */
.adv { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 4px 0 14px; background: var(--card-bg); }
.adv > summary { cursor: pointer; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); user-select: none; }
.adv > summary::-webkit-details-marker { color: var(--text-light); }
.adv .form-row { padding: 0 12px; }
.adv fieldset { margin: 8px 12px; }

/* ===== 账号管理 · 按平台折叠（手风琴） ===== */
.acc-body { padding: 8px 4px 0; }
.acc-sec[open] > summary { color: var(--primary, #4f46e5); }
.acc-sec > summary:hover { background: var(--border); }

.rules-fs { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 10px 0; }
.rules-fs > legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--text-primary); }

.tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-secondary); color: var(--text-secondary); font-size: 11px; cursor: help; margin-left: 4px; }

.rule-card { border: 1px solid var(--border); border-left-width: 3px; border-left-color: var(--hairline); border-radius: var(--radius-sm); margin: 8px 0; background: var(--card-bg); }
.rule-card.act-stop .sdot { background: #ef4444; }
.rule-card.act-tune .sdot { background: var(--accent); }
.rule-card.act-suggest .sdot { background: #94a3b8; }
.rule-card .rule-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.rk-pri { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent-weak); color: var(--accent); font-size: 12px; font-weight: 500; }
.rule-card .rk-label { flex: 0 0 180px; max-width: 220px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }
.rule-card .rk-sum { flex: 1 1 200px; font-size: 12px; color: var(--text-secondary); min-width: 160px; word-break: break-word; }
.rk-up, .rk-dn, .rk-del { border: 1px solid var(--border); background: var(--card-bg); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 12px; cursor: pointer; }
.rk-del { color: #ef4444; }
.rk-up:hover, .rk-dn:hover, .rk-del:hover { background: var(--bg-secondary); }
.rule-card .rule-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.cond-match { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.cond-match .mm { font-weight: 600; color: var(--text-primary); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn { border: none; background: var(--card-bg); color: var(--text-secondary); font-size: 12px; padding: 4px 10px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.on { background: var(--accent); color: #fff; }
.cond-list { display: flex; flex-direction: column; gap: 6px; }
.cond-row { display: flex; align-items: center; gap: 6px; }
.cond-row select, .cond-row input.cond-val { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--card-bg); color: var(--text-primary); }
.cond-row select { min-width: 120px; }
.cond-row .cond-val { width: 100px; }
.cond-del { border: none; background: transparent; color: #ef4444; font-size: 13px; cursor: pointer; padding: 2px 6px; }
.cond-del:hover { background: #fee2e2; border-radius: 4px; }
.cond-add { border: 1px dashed var(--border); background: transparent; color: var(--text-secondary); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12px; cursor: pointer; align-self: flex-start; }
.cond-add:hover { border-color: var(--accent); color: var(--accent); }
.rule-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule-action .lbl { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.rule-action select, .rk-pct { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--card-bg); color: var(--text-primary); }
.rk-pct { width: 64px; }
.rk-pct-wrap { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-secondary); }
.rk-unit { width: auto; min-width: 76px; }
.rk-pct-unit { font-size: 12px; color: var(--text-secondary); }
.rk-sugg { width: 100%; max-width: 480px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }
#rulesWrap .empty { padding: 14px; color: var(--text-secondary); font-size: 13px; text-align: center; background: var(--bg-secondary); border-radius: var(--radius-sm); }

/* 试跑预览结果 */
.pv { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pv-h { padding: 8px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tbl-sm { font-size: 12px; }
.tbl-sm th, .tbl-sm td { padding: 6px 8px; }
.pv-act td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.pv-suggest td:first-child { box-shadow: inset 3px 0 0 #94a3b8; }
.pv-keep td:first-child { box-shadow: inset 3px 0 0 #22c55e; }
.pv-sugg { color: var(--text-secondary); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { background: #334155; }
.toolbar { margin-bottom: 10px; }

/* ===== 主页工作台 · P1 概览看板（按 PC端实施方案重排版） ===== */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 2px; }
.dash-head .page-title { font-weight: 500; margin-bottom: 0; }
.dash-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
/* KPI 四宫格：发丝竖线分隔，不套边框 */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 22px; }
.dash-kpi { padding: 2px 22px; border-left: 1px solid var(--hairline); }
.dash-kpi:first-child { border-left: none; padding-left: 0; }
.dash-kpi-label { font-size: 13px; color: var(--text-2); font-weight: 400; }
.dash-kpi-value { font-size: 28px; font-weight: 500; color: var(--text-1); line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.dash-kpi-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.dash-kpi.accent .dash-kpi-value { color: var(--accent); }
.dash-kpi.good .dash-kpi-value { color: var(--success); }
/* 监控列表 + 右侧洞察 / 预警卡 */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.dash-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 18px; }
.dash-card .card-title { font-size: 15px; font-weight: 500; color: var(--text-1); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.dash-card-sub { font-size: 12px; font-weight: 400; color: var(--text-3); }
.dash-aside { display: flex; flex-direction: column; gap: 16px; }
.dash-insight { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.insight-ok { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-1); margin-bottom: 10px; }
.insight-line { color: var(--text-2); }
.insight-line b { color: var(--text-1); font-weight: 500; }
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-kpi:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 640px) {
  .dash-kpis { grid-template-columns: 1fr; }
  .dash-kpi { border-left: none; padding-left: 0; border-top: 1px solid var(--hairline); }
  .dash-kpi:first-child { border-top: none; }
}

/* ===== 左侧手风琴导航（一级 + 二级，可折叠） ===== */
.acc-group { margin: 4px 8px; }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 14px;
  background: transparent; border: none; cursor: pointer; color: var(--text-1); font-size: 13px; font-weight: 600;
  letter-spacing: .3px; border-radius: 8px; transition: background .15s; }
.acc-head:hover { background: var(--sidebar-hover); }
.acc-caret { color: var(--text-3); font-size: 11px; transition: transform .18s; }
.acc-group.collapsed .acc-caret { transform: rotate(-90deg); }
.acc-body { display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 2px 0 4px; }
.acc-group.collapsed .acc-body { display: none; }
.acc-body .nav-item { padding-left: 26px; font-size: 13px; position: relative; }
.acc-body .nav-item::before { content: ""; position: absolute; left: 16px; top: 50%; width: 4px; height: 4px;
  border-radius: 50%; background: var(--text-3); transform: translateY(-50%); opacity: .55; }
.acc-body .nav-item.active::before { background: var(--accent); opacity: 1; }
/* 三级「计划管理」父级折叠节点（组内再缩进一层，下辖 全域投放 / 乘方投放） */
.acc-sub { margin: 1px 0; }
.acc-subhead { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 8px 26px;
  background: transparent; border: none; cursor: pointer; color: var(--text-2); font-size: 13px; font-weight: 500;
  letter-spacing: .2px; border-radius: 8px; transition: background .15s; }
.acc-subhead:hover { background: var(--sidebar-hover); }
.acc-sub.collapsed .acc-caret { transform: rotate(-90deg); }
.acc-subbody { display: flex; flex-direction: column; gap: 1px; padding: 1px 0 2px; }
.acc-sub.collapsed .acc-subbody { display: none; }
.acc-body .nav-item.nav-sub { padding-left: 40px; }
.acc-body .nav-item.nav-sub::before { left: 30px; }

/* ===== 顶栏（面包屑 + 店铺/时间选择器 + 账号健康灯） ===== */
.topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 20px; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.breadcrumb { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.breadcrumb .bc-sep { color: var(--text-3); }
.breadcrumb .bc-l1 { color: var(--text-2); font-weight: 500; }
.breadcrumb .bc-l2 { color: var(--text-1); font-weight: 600; }
.ws-toggle { display: none; padding: 5px 10px; font-size: 12px; border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--surface); color: var(--text-2); cursor: pointer; }
.ws-toggle:hover { background: var(--sidebar-hover); color: var(--text-1); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); color: var(--text-1);
  font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0; }
.theme-toggle:hover { background: var(--sidebar-hover); color: var(--accent); }
.tb-sel { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.tb-sel select { padding: 5px 8px; font-size: 12px; min-width: 96px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-1); }
.health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2);
  padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); white-space: nowrap; }
.health .health-text { font-weight: 500; }

/* ===== 右侧运行工作区（修订：固定竖向 6 槽缩略图坞，像左导航，槽位固定不重排） ===== */
.workspace { width: 340px; flex-shrink: 0; border-left: 1px solid var(--hairline); background: var(--page-bg);
  height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.ws-head { font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: .4px; padding: 8px 12px 6px; flex-shrink: 0; }
.ws-cards { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* 单个槽位：有内容的等分空间，空槽折叠为最小高度（避免 3 项时空槽撑大工作区） */
.ws-slot { position: relative; flex: 0 0 150px; border-bottom: 1px solid var(--hairline);
  overflow: hidden; cursor: pointer; background: var(--surface); transition: background .15s; }
/* 空槽折叠：无 data-page 时收缩到最小，让有内容的槽位占满空间 */
.ws-slot:not([data-page]) { flex: 0 0 36px; background: transparent; border-bottom-style: dashed; }
.ws-slot:not([data-page]) .slot-empty { display: none; }
.ws-slot:not([data-page]) .slot-bar { display: none; }
.ws-slot:last-child { border-bottom: none; }
.ws-slot:hover { background: var(--bg-secondary); }
.ws-slot.active { box-shadow: inset 0 0 0 2px var(--accent); }
.ws-slot.done { background: var(--ok-bg); }
.slot-inner { position: relative; width: 100%; height: 100%; }
/* 空槽占位 */
.slot-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--text-3); pointer-events: none; }
.slot-empty-plus { font-size: 22px; line-height: 1; opacity: .45; }
.slot-empty-tip { font-size: 11px; }
/* live 缩略图：虚拟 680×520，缩放 0.5 → 340×260，槽位只显示顶部（固定缩略图） */
.slot-frame { position: absolute; top: 0; left: 0; width: 680px; height: 520px; border: none;
  background: var(--surface); transform: scale(0.5); transform-origin: top left; pointer-events: none; }
/* 槽位底栏（标题/状态/关闭） */
.slot-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; background: linear-gradient(to top, var(--bg-secondary), rgba(0,0,0,0)); font-size: 11px; pointer-events: none; }
.slot-title { font-weight: 500; color: var(--text-1); flex: 0 0 auto; max-width: 130px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.slot-state { color: var(--text-2); margin-left: auto; white-space: nowrap; }
.slot-dot { width: 8px; height: 8px; }
/* 槽位关闭按钮（悬浮/当前页显示），需 auto 以覆盖 slot-bar 的 none */
.slot-close { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; display: none;
  align-items: center; justify-content: center; padding: 0; border: none; border-radius: 4px;
  background: rgba(24,24,27,0.18); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; z-index: 3; pointer-events: auto; }
.ws-slot[data-page] .slot-close, .ws-slot:hover .slot-close, .ws-slot.active .slot-close { display: inline-flex; }
.slot-close:hover { background: var(--danger); color: #fff; }
/* 完成角标（不重排，仅角标提示） */
.slot-badge { position: absolute; top: 6px; left: 6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-size: 11px; font-weight: 700; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; z-index: 3; }
.slot-badge.badge-ok { background: var(--success); }
.slot-badge.badge-fail { background: var(--danger); }

/* ===== 状态色点（替代粗色条） ===== */
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; }
.sdot-gray { background: #94a3b8; }
.sdot-green { background: var(--success); }
.sdot-yellow { background: var(--warning); }
.sdot-red { background: var(--danger); }
.sdot-accent { background: var(--accent); }

/* 悬停放大浮窗（peek）：纯预览大浮层，不抢焦点 */
.ws-peek { position: fixed; right: 352px; top: 56px; width: min(900px, 60vw); height: min(660px, 82vh);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; box-shadow: var(--shadow-lg);
  z-index: 1500; display: none; overflow: hidden; flex-direction: column; }
.ws-peek.show { display: flex; }
.ws-peek .peek-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-secondary);
  border-bottom: 1px solid var(--hairline); font-size: 12px; color: var(--text-1); }
.ws-peek .peek-hint { margin-left: auto; color: var(--text-3); font-size: 11px; }
.ws-peek .peek-frame { width: 100%; flex: 1; border: none; background: var(--surface); pointer-events: none; }

/* 顶部 toast（完成提示，区别于右下角 toast） */
.toast-top { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); bottom: auto; right: auto;
  padding: 10px 18px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 14px; z-index: 2600;
  box-shadow: var(--shadow-lg); animation: fadeIn .3s; max-width: 80vw; }
.toast-top.ok { background: var(--success); }
.toast-top.error { background: var(--danger); }

/* ===== frame-mode：iframe 内仅保留 #content，隐藏外壳（避免外壳套外壳，决策 A） ===== */
html.frame-mode .sidebar,
html.frame-mode .topbar,
html.frame-mode .workspace { display: none !important; }
html.frame-mode .workarea { margin-left: 0; }
html.frame-mode .workbody { margin: 0; height: 100vh; overflow: hidden; }
html.frame-mode .content { padding: 16px; height: 100vh; overflow-y: auto; }
/* frame-mode（工作区 iframe 内）：槽位栏已显示页面标题，页面自身再渲染的 .page-title
   即重复，统一隐藏。直连页面（非 iframe，无 frame-mode 类）不受影响。
   此前仅计划管理页逐页加了 isFrame 判断，现由本规则统一接管所有页面。 */
html.frame-mode .page-title { display: none !important; }

/* 窄屏：运行工作区收为可开关键（抽屉式） */
@media (max-width: 1360px) {
  .workspace { position: fixed; top: 0; right: 0; height: 100vh; width: 300px; z-index: 90;
    transform: translateX(100%); transition: transform .2s ease; box-shadow: -8px 0 24px rgba(24,24,27,0.10); }
  .workarea.show-ws .workspace { transform: translateX(0); }
  .ws-toggle { display: inline-flex; }
}
@media (max-width: 900px) { .batch-bar { left: 0; } }

/* ===== 自动调优监控 · 重设计（2026-08-12）===== */
.page-monitor .mon-sub{color:var(--text-2);font-size:13px;}
.page-monitor .dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;vertical-align:middle;}
.page-monitor .dot.g{background:var(--success);}
.page-monitor .dot.a{background:var(--warning);}
.page-monitor .dot.r{background:var(--danger);}
.page-monitor .dot.i{background:var(--accent);}

/* 引导步进 */
.page-monitor .stepper{display:flex;align-items:center;gap:0;margin:18px 0 24px;flex-wrap:wrap;}
.page-monitor .step{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 4px;}
.page-monitor .step .num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;border:1px solid var(--hairline);background:var(--surface);color:var(--text-2);flex:none;}
.page-monitor .step .lbl{font-size:13px;color:var(--text-2);white-space:nowrap;}
.page-monitor .step .meta{font-size:11px;color:var(--text-3);}
.page-monitor .step.on .num{background:var(--accent);border-color:var(--accent);color:#fff;}
.page-monitor .step.on .lbl{color:var(--text-1);font-weight:500;}
.page-monitor .step.done .num{background:var(--accent-weak);border-color:#c7d2fe;color:var(--accent);}
.page-monitor .step-line{height:1px;width:34px;background:var(--hairline);flex:none;}

/* 卡片头（监控页复用 .dash-card） */
.page-monitor .card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.page-monitor .card-h .ct{font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px;}
.page-monitor .card-h .cnt{font-size:12px;color:var(--text-3);font-weight:400;}
.page-monitor .card-h .act{display:flex;gap:8px;}

/* KPI 概览 */
.page-monitor .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:24px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:18px 8px;}
.page-monitor .kpi{padding:2px 22px;border-left:1px solid var(--hairline);}
.page-monitor .kpi:first-child{border-left:none;padding-left:14px;}
.page-monitor .kpi .kl{font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:6px;}
.page-monitor .kpi .kv{font-size:26px;font-weight:500;color:var(--text-1);margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.1;}
.page-monitor .kpi .kv.accent{color:var(--accent);}
.page-monitor .kpi .kv.good{color:var(--success);}
.page-monitor .kpi .ks{font-size:12px;color:var(--text-3);margin-top:4px;}
.page-monitor .kpi .ks.alarm{color:var(--danger);}

/* 计划行卡（列表，替代宽表） */
.page-monitor .plan{border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:13px 15px;margin-bottom:10px;display:flex;align-items:center;gap:14px;}
.page-monitor .plan .lead{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0;}
.page-monitor .plan .pname{font-size:14px;font-weight:500;color:var(--text-1);}
.page-monitor .plan .pmeta{font-size:12px;color:var(--text-2);margin-top:3px;}
.page-monitor .plan .pmeta b{color:var(--text-1);font-weight:500;}
.page-monitor .plan .ptail{display:flex;align-items:center;gap:8px;flex:none;}
.page-monitor .badge.auto{background:#eafaf0;color:var(--success);}
.page-monitor .badge.suggest{background:var(--accent-weak);color:var(--accent);}
.page-monitor .badge.warn{background:#fef6e7;color:var(--warning);}

/* 运行记录 · 时间线（替代宽表） */
.page-monitor .run{border-left:2px solid var(--hairline);padding:0 0 16px 16px;position:relative;margin-left:5px;}
.page-monitor .run:last-child{border-left-color:transparent;padding-bottom:0;}
.page-monitor .run::before{content:"";position:absolute;left:-5px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--text-3);}
.page-monitor .run.alarm::before{border-color:var(--danger);background:var(--danger);}
.page-monitor .run .rh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.page-monitor .run .rt{font-size:13px;font-weight:500;color:var(--text-1);}
.page-monitor .run .rp{font-size:12px;color:var(--text-2);}
.page-monitor .run .mode{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--accent-weak);color:var(--accent);}
.page-monitor .run .mode.exec{background:#eafaf0;color:var(--success);}
.page-monitor .chips{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 4px;}
.page-monitor .chip{font-size:12px;padding:3px 10px;border-radius:7px;background:var(--page-bg);color:var(--text-2);display:inline-flex;align-items:center;gap:5px;}
.page-monitor .run .summary{font-size:12px;color:var(--text-2);margin-top:5px;}
/* 运行记录 · 可折叠明细（点击卡片懒加载逐计划决策表） */
.page-monitor .run.clickable{cursor:pointer;}
.page-monitor .run.clickable:hover .rh .rt{color:var(--accent);}
.page-monitor .run .rundetail{margin-top:10px;overflow-x:auto;}
.page-monitor .run .rundetail .rs-ok{color:var(--success);font-weight:500;}
.page-monitor .run .rundetail .rs-fail{color:var(--danger);font-weight:500;}
.page-monitor .run .rundetail .rs-preview{color:var(--text-3);}

/* 规则卡 · 句子化（模板展示） */
.page-monitor .rule{border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;}
.page-monitor .rule .pri{flex:none;width:22px;height:22px;border-radius:6px;background:var(--accent-weak);color:var(--accent);font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;}
.page-monitor .rule .body{flex:1 1 auto;min-width:0;}
.page-monitor .rule .sentence{font-size:14px;color:var(--text-1);line-height:1.7;}
.page-monitor .rule .sentence .kw{color:var(--accent);font-weight:500;}
.page-monitor .rule .sentence .act{font-weight:500;padding:1px 7px;border-radius:6px;font-size:13px;}
.page-monitor .rule .sentence .act.stop{background:#fdecec;color:var(--danger);}
.page-monitor .rule .sentence .act.tune{background:var(--accent-weak);color:var(--accent);}
.page-monitor .rule .sentence .act.sug{background:var(--page-bg);color:var(--text-2);}
.page-monitor .rule .when{font-size:12px;color:var(--text-3);margin-top:5px;}

/* 空状态引导 */
.page-monitor .empty-guide{text-align:center;padding:42px 24px;border:1px dashed var(--hairline);border-radius:var(--radius);background:var(--surface);}
.page-monitor .empty-guide .eicon{width:48px;height:48px;border-radius:50%;background:var(--accent-weak);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:20px;font-weight:500;}
.page-monitor .empty-guide h3{font-size:15px;font-weight:500;margin:0 0 6px;}
.page-monitor .empty-guide p{font-size:13px;color:var(--text-2);margin:0 0 18px;}
.page-monitor .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:620px;margin:0 auto 20px;text-align:left;}
.page-monitor .steps3 .s{border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:12px 13px;background:var(--page-bg);}
.page-monitor .steps3 .s .n{font-size:12px;color:var(--accent);font-weight:500;margin-bottom:3px;}
.page-monitor .steps3 .s .t{font-size:13px;color:var(--text-1);font-weight:500;}
.page-monitor .steps3 .s .d{font-size:12px;color:var(--text-2);margin-top:3px;line-height:1.5;}

@media(max-width:820px){
 .page-monitor .kpis{grid-template-columns:repeat(2,1fr);}
 .page-monitor .kpi:nth-child(3){border-left:none;padding-left:14px;}
 .page-monitor .steps3{grid-template-columns:1fr;}
}

/* 清理旧的违规样式（统一到设计系统；本段在文件末尾，覆盖中部原有规则） */
.page-monitor .rule-card{border-left:1px solid var(--hairline);}
.rule-card.act-stop .sdot{background:var(--danger);}
.rule-card.act-tune .sdot{background:var(--accent);}
.rule-card.act-suggest .sdot{background:var(--text-3);}
.rule-card .rk-pri{background:var(--accent-weak);color:var(--accent);font-weight:500;}
.seg-btn.on{background:var(--accent);color:#fff;}
.cond-add:hover{border-color:var(--accent);color:var(--accent);}
.btn-accent{background:var(--accent);border-color:var(--accent);}
.btn-accent:hover{background:var(--accent-strong);}
.pv-act td:first-child,.pv-suggest td:first-child,.pv-keep td:first-child{box-shadow:none;}