/* AI 电商工作台设计系统：全站唯一的 token 和基础组件。
   页面样式（app.css、timeline.css 等）只管布局，按钮、表单、卡片、表格、空态、分段、标签页一律用这里的类，
   不在页面里另写一套。改这里一处，全站一起变。 */

:root {
  /* 颜色 */
  --bg: #eceef1;
  --panel: #ffffff;
  --sunk: #f3f4f6;
  --rail: #f5f6f8;
  --line: #dde0e5;
  --line-strong: #c3c7ce;
  --text: #16171a;
  --muted: #5e626b;
  --faint: #8b8f98;
  --accent: #1646ff;
  --accent-dim: #7d96ff;
  --accent-soft: #e4eaff;
  --accent-ink: #0b2cc2;
  --ink: #ffffff;
  --monitor: #141517;
  --fail: #c9372c;
  --fail-soft: #fbe9e7;
  --ok: #1d8049;
  --ok-soft: #e3f3e9;
  --run: #a86500;
  --run-soft: #fbf0dc;

  /* 字号：只有这几档 */
  --fs-xs: 12px;   /* 时间、辅助说明 */
  --fs-sm: 13px;   /* 表单标签、次要信息、小按钮 */
  --fs-md: 14px;   /* 正文、按钮、表格 */
  --fs-lg: 16px;   /* 卡片标题 */
  --fs-xl: 20px;   /* 大数字 */
  --fs-2xl: 24px;  /* 页面标题 */

  /* 间距：4 的倍数 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* 控件高度、圆角、阴影 */
  --ctl-h: 36px;
  --ctl-h-sm: 28px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(22, 23, 26, .05);
  --shadow-pop: 0 1px 2px rgba(22, 23, 26, .06), 0 10px 30px rgba(22, 23, 26, .12);
  --ease: 160ms ease;

  /* 不从 Google Fonts 拉字体：国内网络下会卡住整张样式表 */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- 页面骨架：每个非编辑页都是 页头 → (筛选栏) → 内容 ---------- */
.page { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
/* 页面里的上下间距只由 gap 决定，旧样式留下的 margin 一律不算 */
.page.page > * { margin-top: 0; margin-bottom: 0; }
.page-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); min-height: var(--ctl-h); }
.page-head h1 { margin: 0; font-size: var(--fs-2xl); font-weight: 600; line-height: 1.25; }
.page-head h2 { margin: 0; line-height: 1.3; }
/* 标签默认贴顶（竖排列表里不被拉宽）；放在标题行里跟标题居中对齐 */
.page-head .tag { align-self: center; }
.page-head .page-count { font-size: var(--fs-md); color: var(--muted); }
.page-head .page-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.page.page > .page-head + .page-desc { margin-top: calc(-1 * var(--sp-3)); }
.page-desc { max-width: 72ch; font-size: var(--fs-md); color: var(--muted); }

/* 筛选栏 / 搜索栏：一行铺满，主输入框吃掉剩余宽度，按钮贴右 */
.toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-3); }
.toolbar > .grow { flex: 1 1 280px; }
.toolbar > .field:not(.grow) { flex: 0 1 180px; }
.toolbar > .toolbar-end { margin-left: auto; display: flex; gap: var(--sp-2); }
/* 栏里的计数、勾选框这类纯文字：和输入框同高、垂直居中，标签在上的字段也对得齐 */
.toolbar > span, .toolbar > label:not(.field) { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--ctl-h); font-size: var(--fs-sm); }
.toolbar > label:not(.field) input { width: auto; }

/* ---------- 表单项：标签在上，说明和错误在下 ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field > label, .field-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.field-hint { font-size: var(--fs-xs); color: var(--muted); }
.field-err { font-size: var(--fs-xs); color: var(--fail); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
.field input, .field select { height: var(--ctl-h); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-shrink: 0;
  width: auto; height: var(--ctl-h); padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text);
  font: inherit; font-size: var(--fs-md); font-weight: 500; line-height: 1; white-space: nowrap; text-align: center; text-decoration: none; cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover:not(:disabled) { border-color: var(--line-strong); background: var(--sunk); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-primary { background: var(--text); border-color: var(--text); color: #fff; font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: #33353b; border-color: #33353b; }
.btn-ai { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.btn-ai:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-ghost { background: none; border-color: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--sunk); border-color: transparent; color: var(--text); }
.btn-danger { color: var(--fail); }
.btn-danger:hover:not(:disabled) { background: var(--fail-soft); border-color: var(--fail); }
.btn-sm { height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-icon { width: var(--ctl-h); padding: 0; }
.btn-icon.btn-sm { width: var(--ctl-h-sm); }

/* ---------- 分段切换（同一组数据换视角） ---------- */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--sunk); border-radius: 8px; max-width: 100%; overflow-x: auto; }
.seg > button {
  width: auto; height: var(--ctl-h-sm); padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--radius);
  background: none; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; text-align: center;
}
.seg > button:hover:not(:disabled) { color: var(--text); border-color: transparent; }
.seg > button.on, .seg > button[aria-pressed="true"], .seg > button[aria-selected="true"] {
  background: var(--panel); border-color: var(--line); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm);
}

/* ---------- 标签页（同一页里的不同板块） ---------- */
/* 底线用内阴影画在框内：不靠按钮 margin-bottom:-1px 压线，否则窄屏横向滚动时会多出一条竖向滚动条 */
.tabs { display: flex; gap: var(--sp-6); box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > button {
  width: auto; flex-shrink: 0; padding: var(--sp-2) 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--muted); font-size: var(--fs-md); white-space: nowrap;
}
.tabs > button:hover:not(:disabled) { color: var(--text); }
.tabs > button.on, .tabs > button[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }

/* ---------- 卡片 ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.card-body { padding: var(--sp-4); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) 0; }
.card-head h2, .card-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.card-head + .card-body { padding-top: var(--sp-3); }

/* ---------- 表格：放在 .card 里，表头浅底，行间细线 ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.table th {
  padding: var(--sp-2) var(--sp-3); text-align: left; font-size: var(--fs-xs); font-weight: 500; color: var(--muted);
  background: var(--sunk); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover td { background: var(--sunk); }

/* ---------- 空态：说清这里放什么、怎么开始 ---------- */
/* 空态放在格子布局里也占满整行，不会被塞进第一个小格 */
.empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-md); }
.empty > b { color: var(--text); font-size: var(--fs-lg); font-weight: 600; }
.empty > span, .empty > p { max-width: 48ch; margin: 0; }
.empty > .btn { margin-top: var(--sp-3); }

/* ---------- 状态和标签 ---------- */
.status { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.status.ok::before { background: var(--ok); }
.status.run { color: var(--run); }
.status.run::before { background: var(--run); }
.status.fail { color: var(--fail); }
.status.fail::before { background: var(--fail); }
.tag { align-self: flex-start; justify-self: start; display: inline-flex; font-style: normal; align-items: center; height: 20px; padding: 0 var(--sp-2); border-radius: 4px; background: var(--sunk); color: var(--text); font-size: var(--fs-xs); white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.run { background: var(--run-soft); color: var(--run); }
.tag.fail { background: var(--fail-soft); color: var(--fail); }
.tag.dark { background: var(--text); color: #fff; }

/* ---------- 提示条 ---------- */
.notice { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); font-size: var(--fs-md); background: var(--sunk); color: var(--text); }
.notice.run { background: var(--run-soft); color: var(--run); }
.notice.fail { background: var(--fail-soft); color: var(--fail); }
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice[hidden] { display: none; }
/* 成功提示几秒后淡出（admNote 加 .fade） */
.notice { transition: opacity 300ms ease-in; }
.notice.fade { opacity: 0; }
.tag.warn { background: var(--run-soft); color: var(--run); }

/* ---------- 文字辅助：只有这几种，页面里不再各写一个「浅色字」 ---------- */
.muted { color: var(--muted); }
.hint { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.num-sm { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }  /* 小号数字、时间、ID */
.clip { display: block; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table td > .muted.clip, .table td > b + .muted { display: block; font-size: var(--fs-xs); }
code { font-family: var(--mono); font-size: var(--fs-xs); padding: 1px 4px; border-radius: 4px; background: var(--sunk); }

/* ---------- 横排：输入框吃剩余宽度；按钮组 ---------- */
.row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.row > input, .row > select { flex: 1; min-width: 0; }
.actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.span-all { grid-column: 1 / -1; }

/* ---------- 数字条：一排指标，格子间细线分隔 ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.stat { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); min-width: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }  /* 左线和上线：换行成两排时格子间也有分隔，框外那条被 overflow 裁掉 */
.stat-k { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.stat-v { margin: 0; font-size: var(--fs-xl); font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-v small { margin-left: var(--sp-1); font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.stat-v.fail { color: var(--fail); }
.stat-sub { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 键值列表 ---------- */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- 折叠区：次要内容收起来，标题可点 ---------- */
.fold > summary { width: fit-content; cursor: pointer; font-size: var(--fs-sm); color: var(--muted); list-style-position: inside; }
.fold > summary:hover, .fold[open] > summary { color: var(--text); }
.fold > summary .muted { margin-left: var(--sp-1); }
.fold > :not(summary) { margin-top: var(--sp-3); }

/* ---------- 区间输入：最小 — 最大 两个框并排 ---------- */
.range-pair { display: flex; align-items: center; gap: var(--sp-2); }
.range-pair input { width: 100%; min-width: 0; height: var(--ctl-h); }

/* ---------- 下拉菜单：「更多」按钮外面包 .menu-wrap ---------- */
.menu-wrap { position: relative; display: inline-block; vertical-align: middle; }
.menu {
  position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: 20; min-width: 192px; padding: var(--sp-1);
  display: flex; flex-direction: column; gap: 1px; text-align: left; white-space: normal;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
}
.menu[hidden] { display: none; }
.menu > button, .menu > a { display: block; width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius); background: none; color: var(--text); font-size: var(--fs-sm); text-align: left; text-decoration: none; cursor: pointer; }
.menu > button:hover:not(:disabled), .menu > button:focus-visible, .menu > a:hover { background: var(--sunk); }
.menu > button.danger { color: var(--fail); }
.menu > button:disabled { color: var(--faint); cursor: not-allowed; }
.menu small { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 问号说明：点开一小段解释 ---------- */
.help { position: relative; display: inline-block; }
.help > summary {
  list-style: none; width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; font-size: var(--fs-xs); color: var(--muted); background: var(--panel);
}
.help > summary::-webkit-details-marker { display: none; }
.help > summary:hover, .help[open] > summary { color: var(--text); border-color: var(--line-strong); }
.help > div {
  position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 12; width: min(320px, calc(100vw - 32px));
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.6; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
}

/* ---------- 计数：标题旁的小黑圆角数字 ---------- */
.count { display: inline-block; min-width: 20px; height: 20px; padding: 0 var(--sp-2); margin-left: var(--sp-1); border-radius: 10px; background: var(--text); color: #fff; font-size: var(--fs-xs); line-height: 20px; text-align: center; vertical-align: 1px; font-variant-numeric: tabular-nums; }

/* ---------- 转圈：放在 .tag / .btn / .status 里表示「进行中」 ---------- */
.spin { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; border-right-color: currentColor; opacity: .6; } }

@media (max-width: 760px) {
  .hide-sm { display: none !important; }
  .clip { max-width: 100%; }
  .menu { right: auto; left: 0; }
}