/* ============================================================
   运营看板 · 采集控制台 样式
   ------------------------------------------------------------
   视觉语言遵循：design/报表设计标准.md
   主题：V1 浅灰蓝（§2.1 / §2.2）

   复用：§2 配色 token · §3.3 汇总卡 · §4.1 进度条 · §4.4 数字格式
        · §11.3 四档色板 · §3.2 告警条
   不适用：§1.1 移动端画布（393px）与 §6「一屏铁律」—— 控制台是桌面网页，
          不按手机截图渲染，故画布参数与高度预算不套用。
   ============================================================ */

:root {
  /* ── 主题 token · V1 浅灰蓝 ───────────────────────── */
  --bg:      #eef1f6;
  --panel:   #ffffff;
  --panel-2: #f5f7fa;
  --line:    #e2e7f0;
  --txt:     #1c2333;
  --txt-2:   #5a6478;
  --txt-3:   #99a3b6;
  --accent:  #2f6bff;

  /* 衍生色（随主题联动） */
  --hero-grad: linear-gradient(160deg, #e3ebfc 0%, #f4f7fd 70%);
  --hero-glow: radial-gradient(circle, rgba(47, 107, 255, .14) 0%, transparent 70%);
  --track:     #e2e7f0;
  --warn-bg:   #fdf3e1;
  --warn-line: #f0dcae;

  /* ── 语义色 · 全报表统一，不随主题变 ─────────────── */
  --up:        #e0483f;   /* 涨 · 红 */
  --down:      #0f9d68;   /* 跌 · 绿 */
  --alert:     #fa8c16;   /* 告警强调边 */
  --alert-txt: #8a5a13;

  /* ── 库存四档色板 ───────────────────────────────── */
  --urgent: #c81f1f;  --urgent-bg: #fdeceb;
  --low:    #c4611a;  --low-bg:    #fdf1e7;
  --watch:  #9a8412;  --watch-bg:  #fbf6dd;
  --ok:     #1f9d55;  --ok-bg:     #e9f7ef;

  /* ── 运行态（控制台专用，取自语义色） ───────────── */
  --run:  #2f6bff;
  --err:  #c81f1f;
  --warn: #c4611a;
  --idle: #99a3b6;

  --shadow: 0 1px 3px rgba(28, 35, 51, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; }

/* ---------------- 页头 ---------------- */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 2px;
}
h1 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.2px; }
h1 .sep { color: var(--accent); font-weight: 700; }
.sub { font-size: 12px; color: var(--txt-3); margin-top: 3px; }
.page-date {
  font-size: 11.5px;
  color: var(--txt-2);
  white-space: nowrap;
  padding-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 导航（pill tabs） ---------------- */

.nav {
  display: flex;
  flex-wrap: wrap;          /* 6 个入口在窄屏自动折行 */
  gap: 3px;
  max-width: 100%;
  margin-top: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  width: fit-content;
  box-shadow: var(--shadow);
}
.nav a {
  color: var(--txt-2);
  text-decoration: none;
  white-space: nowrap;
  padding: 5px 15px;
  border-radius: 7px;
  font-size: 12.5px;
  transition: background .15s, color .15s;
}
.nav a:hover { color: var(--txt); background: var(--panel-2); }
.nav a.active { color: #fff; background: var(--accent); font-weight: 500; }

/* ---------------- 卡片 ---------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 18px 13px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}
.card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 8px;
}
/* 卡头右侧组：匹配数 + 采集时间，整组右对齐，窄屏随卡头折行 */
.card-head .head-right {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-left: auto;
}
.card-head .stamp { font-variant-numeric: tabular-nums; }

/* 明细区筛选标签：档位 + 分类，与标题同一行，窄屏自动折行 */
.chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--txt-2);
  font: inherit;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover:not(:disabled) { color: var(--txt); border-color: #cbd3e1; }
.chip .n {
  margin-left: 5px;
  font-size: 11px;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}
.chip:disabled { opacity: .45; cursor: default; }
.chip.on { font-weight: 600; box-shadow: var(--shadow); }
/* 选中态沿用档位色板，与货品卡、hero 档位格保持同一语义 */
.chip.on.tier-urgent { color: var(--urgent); background: var(--urgent-bg); border-color: var(--urgent); }
.chip.on.tier-low    { color: var(--low);    background: var(--low-bg);    border-color: var(--low); }
.chip.on.tier-watch  { color: var(--watch);  background: var(--watch-bg);  border-color: var(--watch); }
.chip.on.tier-ok     { color: var(--ok);     background: var(--ok-bg);     border-color: var(--ok); }
.chip.on.cat { color: #fff; background: var(--accent); border-color: var(--accent); }
.chip.on .n { opacity: .8; }

/* ---------------- 走势图（发货页） ---------------- */

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 2px 0 6px; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txt-2); }
.legend .lg-name { color: var(--txt); }
.legend .lg-sum { font-weight: 600; color: var(--txt); font-variant-numeric: tabular-nums; }
.legend .lg-avg { font-size: 11px; color: var(--txt-3); font-variant-numeric: tabular-nums; }

.chart-wrap { position: relative; }
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--txt-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .cursor { stroke: var(--txt-3); stroke-width: 1; stroke-dasharray: 3 3; }
/* SVG 元素的 hidden：显式声明，避免 UA 样式差异 */
.chart .cursor[hidden], .chart .cdot[hidden] { display: none; }

.tip {
  position: absolute;
  top: 6px;
  z-index: 2;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px 9px;
  font-size: 11.5px;
  white-space: nowrap;
}
.tip[hidden] { display: none; }
.tip .tip-d { color: var(--txt-3); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.tip .tip-r { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
.tip .tip-n { color: var(--txt-2); }
.tip .tip-v { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.chart-note { margin-top: 8px; font-size: 11.5px; color: var(--txt-3); line-height: 1.55; }

/* 两组标签之间的细分隔线 */
.vsep {
  width: 1px;
  height: 14px;
  background: var(--line);
  align-self: center;
}
.card-title { font-size: 13.5px; font-weight: 600; letter-spacing: .2px; }
.hint { font-size: 11.5px; color: var(--txt-3); }

/* ---------------- 汇总卡 hero（§3.3） ---------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-grad);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 18px 11px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}
.hero::before {
  content: '';
  position: absolute;
  right: -50px;
  top: -70px;
  width: 200px;
  height: 200px;
  background: var(--hero-glow);
  pointer-events: none;
}
.hero-main { position: relative; display: flex; align-items: center; gap: 12px; }
.hero .k { font-size: 11px; color: var(--txt-2); letter-spacing: 1px; }
.hero .v {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.hero .v.small { font-size: 20px; letter-spacing: -.2px; }
.hero .unit { font-size: 13px; font-weight: 500; color: var(--txt-2); margin-left: 2px; }
.hero .chg { font-size: 12.5px; font-weight: 600; white-space: nowrap; margin-left: 2px; }
.hero-side { margin-left: auto; text-align: right; position: relative; }

/* 通道自测条（采集管理页 hero）：无副作用的连通性验证入口 */
.hero-acts {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}
.hero-acts .hint { font-size: 11.5px; color: var(--txt-3); }
.hero-acts button { flex: none; }
#worker-host { font-size: 10.5px; color: var(--txt-3); letter-spacing: 0; }

/* 采集管理 hero 的 5 格指标（最后心跳/任务总数/执行中/今日成功/今日失败）：
   桌面一行平分；移动端 3+2 两行（stats-5col，见 ≤720px 层），避免五格挤爆 */
.hero .stats.stats-5col { border-top: 1px solid var(--line); }

/* 采集管理两张表的行距比报表略松（贴近 v1 demo 的表格行高），
   只作用于 jobs-card / runs-card，不影响其他页共用 .row */
.jobs-card .row:not(.head),
.runs-card .row:not(.head) { padding: 12px 10px; }

.hero .stats {
  position: relative;
  display: flex;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 9px;
}
.hero .m { flex: 1; text-align: center; }
.hero .m + .m { border-left: 1px solid var(--line); }
.hero .m .k { font-size: 10.5px; color: var(--txt-3); letter-spacing: 0; }
.hero .m .v {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
}
.hero .m .v.accent { color: var(--accent); }
.hero .m .v.err { color: var(--err); }
.hero .m .v.dim { color: var(--txt-3); font-weight: 500; }
/* hero 统计格里的「前一天」对照小字（没值就整个隐藏，不占行高） */
.hero .m .prev-sub {
  font-size: 10px;
  color: var(--txt-3);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero .m .prev-sub:empty { display: none; }
.hero .hero-side .k { font-size: 10.5px; color: var(--txt-3); }

/* 可点选的档位格（点击 = 明细区只看该档位，再点取消） */
.hero .m.pick {
  cursor: pointer;
  border-radius: 9px;
  transition: background .12s, box-shadow .12s;
}
.hero .m.pick:hover { background: rgba(255, 255, 255, .72); }
.hero .m.pick.on {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.hero .m.pick.on .k { color: var(--accent); font-weight: 600; }
/* 计数为 0 的档位不可点（点了只会空列表） */
.hero .m.pick.zero { cursor: default; opacity: .5; }
.hero .m.pick.zero:hover { background: transparent; }

/* ---------------- 告警条（§3.2） ---------------- */

.warn-bar {
  display: none;
  align-items: flex-start;
  gap: 8px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-left: 3px solid var(--alert);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--alert-txt);
  line-height: 1.55;
}
.warn-bar.show { display: flex; }
/* 告警条里的可执行命令：等宽、可横向滚动（移动端一行放不下时不撑破卡片） */
.warn-bar .cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .06);
  white-space: nowrap;
  overflow-x: auto;
  max-width: 100%;
  display: inline-block;
  vertical-align: bottom;
}

/* ---------------- 指标卡 ---------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 15px;
  box-shadow: var(--shadow);
}
.metric .label { font-size: 11.5px; color: var(--txt-3); }
.metric .value {
  font-size: 21px;
  font-weight: 700;
  margin-top: 3px;
  line-height: 1.3;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.metric .value.err { color: var(--err); }
.metric .value.accent { color: var(--accent); }

/* ---------------- 表格行 ---------------- */

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-top: 1px solid var(--line);
  border-radius: 7px;
  transition: background .12s;
}
.row.head {
  color: var(--txt-3);
  font-size: 11.5px;
  padding: 7px 10px;
  border-top: none;
}
.row:not(.head):hover { background: var(--panel-2); }

/* 列宽 */
.c-sku  { flex: 1.3; min-width: 0; }
.c-name { flex: 2.1; min-width: 0; }
.c-plat { flex: 1.3; min-width: 0; }
.c-num  { flex: .75; min-width: 0; text-align: right; }
.c-amt  { flex: 1;   min-width: 0; text-align: right; }
.c-stat { flex: .9;  min-width: 0; }
.c-spark{ flex: 1.2; min-width: 90px; }
.c-cron { flex: 1.3; min-width: 0; }
.c-last { flex: 1.5; min-width: 0; }
.c-act  { flex: 1.3; min-width: 0; text-align: right; }
/* 采集管理：一行的操作按钮较多（立即执行 / 暂停 / 定时 / 脚本），数据源列也更长 */
.c-plat.wide { flex: 2.1; }
.c-cron.tight { flex: 1.2; }
.c-last.tight { flex: 1.2; }
.c-act.wide { flex: 2.6; min-width: 0; white-space: nowrap; }
.c-act.wide button { padding: 4px 9px; font-size: 11.5px; }
.c-act.wide button + button { margin-left: 4px; }

/* kv-hero / kv-pair / kv-trio 是移动端布局钩子（见 ≤720px 层），桌面无样式；
   唯一例外：财务台账的「资金合计」在移动 DOM 里提前到可用余额之前，
   桌面 flex 用 order 拉回原位（可用/支付宝在前、合计在后、三个次要字段在末尾） */
.fin-card .row:not(.head) .kv-pair { order: 1; }
.fin-card .row:not(.head) .kv-hero { order: 2; }
.fin-card .row:not(.head) .kv-trio { order: 3; }

/* 采集任务的设置面板（定时管理 / 更新脚本） */
.job-panel {
  padding: 12px 12px 14px;
  background: var(--panel-2);
  border-top: 1px dashed var(--line);
  border-radius: 0 0 7px 7px;
}
.pane-title { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.pane-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.pane-row .fld > label { display: block; font-size: 11px; color: var(--txt-3); margin-bottom: 4px; }
.pane-row .inline { display: flex; gap: 6px; align-items: center; }
.pane-row select, .pane-row input { width: auto; min-width: 92px; }
.pane-note { margin-top: 9px; font-size: 11.5px; color: var(--txt-3); line-height: 1.6; }
.pane-note b { color: var(--txt-2); font-weight: 600; }

/* 运行状态开关行 */
.sw { display: inline-flex; align-items: center; gap: 8px; }
.sw-txt { font-size: 12px; color: var(--idle); }
.sw.on .sw-txt { color: var(--ok); }

/* 脚本版本行 */
.script-line { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--txt-2); line-height: 1.9; }
.script-line .k { color: var(--txt-3); min-width: 88px; }
.new-flag { color: var(--warn); font-weight: 600; }

/* 卡片底部说明 */
.card-note { margin-top: 10px; font-size: 11.5px; color: var(--txt-3); line-height: 1.6; }

/* 单行省略：避免长文案撑破表格行高 */
.c-name, .c-plat, .c-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 执行历史的「说明」列：允许两行，超出截断 */
.c-msg {
  flex: 1.3;
  min-width: 0;
  color: var(--txt-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  text-align: right;
}

/* 执行记录列宽重排（2026-10-17）
   原比例沿用报表通用列（任务 2.1 / 数据源 1.3 / 触发 1.3 / 耗时 1.5 / 状态 .9 / 说明 1.3），
   但执行记录的内容长度完全不同：任务名只有 2~5 字、数据源 1 个平台、状态是个胶囊，
   而「说明」承载失败原因（如「登录态失效：页面未出现已登录工作台（超时 20s）」）——
   结果就是短列空荡荡、说明列 141px 就被截断。
   故按内容重排：把富余空间整体让给「说明」（141px → 约 360px），
   触发 / 耗时保持一行不折行，说明改左对齐（多行文本右对齐难读，且与表头不对齐）。 */
.runs-card .c-name { flex: 1.1; }
.runs-card .c-plat { flex: .7; }
.runs-card .c-cron { flex: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runs-card .c-last { flex: 1.65; }   /* 要装得下「52.3 秒 · 12,217 / 12,217」这种大行数 */
.runs-card .c-stat { flex: .65; }
.runs-card .c-msg  { flex: 2.9; text-align: left; }

/* ---------------- 文本工具类 ---------------- */

.muted { color: var(--txt-2); }
.dim   { color: var(--txt-3); }
.na    { color: var(--txt-3); }
.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }
.num   { font-variant-numeric: tabular-nums; }

/* 语义色：涨红跌绿（§2.3，中式习惯） */
.up   { color: var(--up); }
.down { color: var(--down); }

/* 运行态 */
.s-ok   { color: var(--ok); }
.s-run  { color: var(--run); }
.s-err  { color: var(--err); }
.s-warn { color: var(--warn); }
.s-idle { color: var(--idle); }

/* ---------------- 状态胶囊 ---------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge.ok   { background: var(--ok-bg);     color: var(--ok); }
.badge.run  { background: #e6edff;          color: var(--accent); }
.badge.err  { background: var(--urgent-bg); color: var(--err); }
.badge.warn { background: var(--low-bg);    color: var(--warn); }
.badge.idle { background: var(--panel-2);   color: var(--idle); }

/* ---------------- 采集环境卡（数据源状态 + 全采进度） ---------------- */
/* 与 .badge 同色板、同圆角语言；只是多了「名称 + 状态」两段，便于横向排一串 */

.env-card .env-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 12px 14px 4px;
}
.env-card .env-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.env-card .env-k {
  font-size: 11.5px;
  color: var(--txt-3);
  white-space: nowrap;
}
.env-card .env-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.env-card .src-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
  cursor: default;
}
.env-card .src-chip .dot { font-size: 10px; line-height: 1; }
.env-card .src-chip .st {
  font-size: 10.5px;
  opacity: .8;
  padding-left: 3px;
  border-left: 1px solid currentColor;
  margin-left: 2px;
}
.env-card .src-chip.ok   { background: var(--ok-bg);     color: var(--ok); }
.env-card .src-chip.run  { background: #e6edff;          color: var(--accent); }
.env-card .src-chip.err  { background: var(--urgent-bg); color: var(--err); }
.env-card .src-chip.warn { background: var(--low-bg);    color: var(--warn); }
.env-card .src-chip.idle { background: var(--panel-2);   color: var(--idle); }
.env-card .b-head {
  font-size: 11.5px;
  font-weight: 600;
  margin-right: 2px;
}
.env-card .b-head.ok  { color: var(--ok); }
.env-card .b-head.err { color: var(--err); }
.env-card .b-head.run { color: var(--accent); }

/* ---------------- 四档档位胶囊（§11.3） ---------------- */

.tier {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
/* 必须用 .tier.tier-* 双限定，否则会误命中 .gcard.tier-*（卡片左缘色条） */
.tier.tier-urgent { color: var(--urgent); background: var(--urgent-bg); }
.tier.tier-low    { color: var(--low);    background: var(--low-bg); }
.tier.tier-watch  { color: var(--watch);  background: var(--watch-bg); }
.tier.tier-ok     { color: var(--ok);     background: var(--ok-bg); }
.tier.tier-none   { color: var(--idle);   background: var(--panel-2); }

/* ---------------- 进度条（§4.1） ---------------- */

.bar { display: flex; align-items: center; gap: 7px; }
.bar .track {
  display: block;
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}
.bar .fill {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--accent);
  transition: width .3s;
}
.bar .pct {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--txt-2);
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 按钮 ---------------- */

button {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--txt-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
button:hover:not(:disabled) { border-color: #c9d3e6; color: var(--txt); background: var(--panel-2); }
button:disabled { color: var(--txt-3); cursor: default; opacity: .55; }
button + button { margin-left: 6px; }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.primary:hover:not(:disabled) { background: #245bd8; border-color: #245bd8; color: #fff; }
/* 面板入口按钮的「已展开」态 */
button.on { background: var(--panel); color: var(--txt); border-color: var(--accent); font-weight: 600; }

/* ---------------- 表单 ---------------- */

select, input {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--txt);
  transition: border-color .15s, box-shadow .15s;
}
select:focus, input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
}
input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  padding: 0;
}

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters label { display: block; font-size: 11.5px; color: var(--txt-3); margin-bottom: 4px; }
.filters .check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txt-2); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.form-grid label { display: block; font-size: 11.5px; color: var(--txt-3); margin-bottom: 4px; }
.form-grid select, .form-grid input { width: 100%; }

/* ---------------- 货品卡网格（§11.1） ---------------- */

.list {
  display: grid;
  /* 桌面一行 3 卡；窄屏（≤860px，含手机）回到一行 2 卡 */
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
@media (max-width: 860px) {
  .list { grid-template-columns: repeat(2, 1fr); }
}

.gcard {
  background: var(--panel);
  border: 0;
  border-left: 3px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px 6px 7px;
  transition: box-shadow .12s, filter .12s;
}
/* 悬停不换底色（卡片底色即档位信号），只做轻微压暗 */
.gcard:hover { box-shadow: var(--shadow); filter: brightness(.985); }

/* 档位底色 + 左缘色条（§11.3）
   定稿图实测：卡片整面即四档色板底色，无外边框，只靠左缘 3px 色条 + 底色区分档位 */
.gcard.tier-urgent { background: var(--urgent-bg); border-left-color: var(--urgent); }
.gcard.tier-low    { background: var(--low-bg);    border-left-color: var(--low); }
.gcard.tier-watch  { background: var(--watch-bg);  border-left-color: var(--watch); }
.gcard.tier-ok     { background: var(--ok-bg);     border-left-color: var(--ok); }
.gcard.tier-none   { background: var(--panel-2);   border-left-color: var(--idle); }

/* 卡内档位胶囊：卡片已有底色，胶囊只保留文字色与字号（定稿图无胶囊底） */
.gcard .tier { background: transparent; padding: 1px 0; }

/* 行1：货品名 */
.g1 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 行2：可用天数大数字 + 档位胶囊 */
.g2 {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 1px;
}
.g2 .days {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.g2 .unit { font-size: 11px; color: var(--txt-3); }

/* 行3：可用库存 + 日均 + 增减，两端对齐 */
.g3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  color: var(--txt-2);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
/* 右半「日均 · 增减」弱一档：底色加深后需压回对比（定稿图同处理） */
.g3 span:last-child { color: var(--txt-3); }

/* ---------------- 页脚口径说明 ---------------- */

.footer {
  margin-top: 14px;
  font-size: 10.5px;
  color: var(--txt-3);
  line-height: 1.7;
  text-align: center;
}

/* ---------------- 视图切换（分段控件） ---------------- */

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--txt-2);
  font: inherit;
  font-size: 12.5px;
  padding: 4px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.seg button:hover { color: var(--txt); }
.seg button.on { background: var(--panel); color: var(--txt); font-weight: 600; box-shadow: var(--shadow); }

/* ---------------- 角色徽标 / 无权限面板（演示用） ---------------- */

.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  color: var(--txt-2);
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
  vertical-align: 1px;
  transition: background .12s, border-color .12s;
}
.role-chip:hover { background: var(--panel-2); }
.role-chip .rdot { width: 6px; height: 6px; border-radius: 50%; background: var(--idle); }
.role-chip.is-admin { border-color: #c9d8fb; background: #eaf1ff; color: var(--accent); }
.role-chip.is-admin .rdot { background: var(--accent); }

.nav-lock { font-size: 9.5px; margin-left: 4px; opacity: .7; }
.nav a.active .nav-lock { opacity: .85; }

.denied {
  margin-top: 40px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--alert);
  border-radius: 12px;
  padding: 34px 28px;
  text-align: center;
  box-shadow: var(--shadow);
}
.denied .lock { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.denied h2 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.denied p { font-size: 12.5px; color: var(--txt-2); margin: 0 0 18px; }
.denied .acts { display: flex; gap: 8px; justify-content: center; }

/* ---------------- 其他 ---------------- */

.toast { margin-top: 10px; font-size: 12px; color: var(--ok); min-height: 18px; }
.toast.err { color: var(--err); }

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.dot.pulse { animation: pulse 1.8s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.spark { display: block; }
/* 执行记录分页条：默认只列最新 RUNS_PER_PAGE(=3) 条，更早的翻页查看。
   总数 ≤3 时整条 hidden —— 不让「只有一页」还摆一排按钮。 */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 6px;
  margin-top: 2px;
  padding: 11px 10px 1px;
  border-top: 1px dashed var(--line);
}
.pager .pg-info {
  min-width: 168px;
  text-align: center;
  font-size: 11.5px;
  color: var(--txt-2);
  font-variant-numeric: tabular-nums;
}
.pager .pg-info .dim { color: var(--txt-3); }
.pager button { padding: 3px 10px; font-size: 11.5px; }
.pager button + button { margin-left: 0; }

.empty { padding: 28px 0; text-align: center; color: var(--txt-3); font-size: 12px; }

/* ---------------- 登录页 ---------------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 15%, rgba(47, 107, 255, .08) 0%, transparent 45%),
    var(--bg);
}
.login-card {
  width: 360px;
  max-width: 100%;
  padding: 28px;
}
.login-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}
.login-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.login-fields label {
  display: block; font-size: 11.5px; color: var(--txt-3); margin: 12px 0 4px;
}
.login-fields input {
  width: 100%;
}
.login-btn { width: 100%; margin-top: 18px; padding: 9px 0; font-size: 14px; }
.login-err {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid #f2c7c7;
  background: #fdecec;
  color: var(--err);
  border-radius: 8px;
  font-size: 12px;
}
.login-foot {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--txt-3); text-align: center;
}

/* ---------------- 通用弹窗（用户管理等） ---------------- */

.modal-mask {
  position: fixed; inset: 0;
  background: rgba(28, 35, 51, .38);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
/* display:flex 会压过 UA 的 [hidden]，必须显式声明 */
.modal-mask[hidden] { display: none; }
.modal {
  width: 460px; max-width: calc(100vw - 32px);
  padding: 18px 20px 20px;
}
.modal .form-grid { grid-template-columns: 1fr; margin-top: 4px; }
.m-close {
  border: 0; background: none; cursor: pointer;
  color: var(--txt-3); font-size: 14px; padding: 2px 6px;
}
.m-close:hover { color: var(--txt); }
.m-acts {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
}
.m-acts button { min-width: 72px; }

/* ---- 窄桌面（721~1000px，如 iPad 竖屏 768）：执行记录列距收窄、触发/耗时补宽 ----
   这一段仍走桌面横排（≤720px 才转堆叠块），但容器已不足，
   「手动 · 10-17 13:01:38」「14.7 秒 · 412 / 412」会被省略号切掉。
   故列距 12→8px，并把省下的空间补给这两列，说明列相应让出一点。 */
@media (min-width: 721px) and (max-width: 1000px) {
  .runs-card .row { gap: 8px; }
  /* 触发列这里允许折成两行（「手动 ·」/「10-17 13:04:30」）——
     768px 下强行单行会把秒数切掉，两段分行比省略号可读；
     耗时列反而要保大（12,217 / 12,217），说明列相应让出 */
  .runs-card .c-cron { flex: 1.3; white-space: normal; line-height: 1.35; }
  .runs-card .c-last { flex: 2.25; }
  .runs-card .c-stat { min-width: 58px; }   /* 兜住状态胶囊，别被挤到切字 */
  .runs-card .c-msg  { flex: 2.4; }
}

/* ---------------- 用户管理 · 列栅格（仅 users.html 使用） ---------------- */

.users-row {
  display: grid;
  grid-template-columns: 120px 1fr 92px 92px 150px auto;
  gap: 12px;
  align-items: center;
  padding: 10px 10px;
  border-top: 1px solid var(--line);
}
.users-row.head {
  color: var(--txt-3);
  font-size: 11.5px;
  padding: 7px 10px;
  border-top: none;
}
.users-row .u-act {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.users-row .u-act button {
  padding: 3px 9px;
  font-size: 11.5px;
}

/* ============================================================
   移动端适配（宽度 ≤ 720px）
   ------------------------------------------------------------
   控制台是「网页」不是「报表截图」——手机上要真的能点、能填、能看完，
   因此不套用 §1.1 的 393px 画布与 §6「一屏铁律」（网页可纵向滚动），
   只复用 §2 配色 token 与 §3/§4 组件语言。

   这一层只解决小屏可用性：
     ① 字号 / 点按目标放大（≥ 36px；输入 16px 防 iOS 聚焦自动放大）；
     ② 表格行转「标签-值」堆叠块 —— 仅限带 .kv 标记的行（见 console.html），
        其余页面未加 .kv 前维持原样，后续逐页接入；
     ③ 表单纵向铺满、刘海与底部安全区留白、触屏去 hover 残留。
   断点 720px：手机竖屏（≤430）与折叠屏外屏；平板 / 桌面走原版式。
   ============================================================ */

@media (max-width: 720px) {
  body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;   /* 横屏时 iOS 不再擅自放大文字 */
  }
  .wrap { padding: 18px 14px calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* ---- 页头：标题一行，日期 + 身份随后 ---- */
  .page-head { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
  h1 { font-size: 17px; }
  .sub { font-size: 12px; }
  .page-date {
    font-size: 12px;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .role-chip { font-size: 12px; }

  /* ---- 导航：整行铺满，逐格可点 ---- */
  .nav { width: 100%; gap: 4px; padding: 4px; }
  .nav a { flex: 1 1 auto; text-align: center; padding: 8px 10px; }

  /* ---- 卡片 / hero ---- */
  .card { padding: 13px 13px 12px; border-radius: 11px; margin-top: 12px; }
  .card-title { font-size: 14px; }
  .hint, .card-note, .pane-note, .chart-note { font-size: 12px; }
  .hero { padding: 12px 14px 10px; border-radius: 12px; }
  .hero .v { font-size: 26px; }
  .hero .v.small { font-size: 18px; }
  .hero .stats { margin-top: 9px; padding-top: 8px; }
  /* 运营/财务的概览格：4 列折行（库存页档位格不加此类、不受影响）；
     标签 nowrap —— 最长「推广费占成交比」约 74px < 91px（365px/4），不会溢出 */
  .hero .stats.stats-4col { flex-wrap: wrap; row-gap: 10px; }
  .hero .stats.stats-4col .m { flex: 1 1 25%; border-left: 0; }
  .hero .stats.stats-4col .m .k { font-size: 10px; white-space: nowrap; }
  /* 采集管理 hero 的 5 格指标：3 + 2 两行（一行五格在 393px 下挤爆） */
  .hero .stats.stats-5col { flex-wrap: wrap; row-gap: 10px; }
  .hero .stats.stats-5col .m { flex: 1 1 33%; border-left: 0; }
  .hero .stats.stats-5col .m:nth-child(n+4) { flex: 1 1 50%; }
  .hero .m .k { font-size: 10px; letter-spacing: 0; }
  .hero .m .v { font-size: 13px; }
  .hero-acts { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero-acts button { width: 100%; min-height: 40px; font-size: 14px; }

  /* ---- 表单：纵向铺满；16px 防 iOS 聚焦自动缩放 ---- */
  select, input { font-size: 16px; padding: 8px 10px; border-radius: 8px; }
  .form-grid { grid-template-columns: 1fr; gap: 10px; }
  .filters { gap: 10px; }
  .filters .fld { flex: 1 1 100%; }
  .pane-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .pane-row .fld { width: 100%; }
  .pane-row .fld > label { font-size: 12px; margin-bottom: 5px; }
  .pane-row .fld > label.sp { display: none; }   /* 纯对齐用的占位标签 */
  .pane-row select, .pane-row input,
  .pane-row .inline input, .pane-row .inline select { width: 100%; min-width: 0; }
  .pane-row .inline { width: 100%; }
  .pane-row .fld > button { width: 100%; min-height: 40px; }

  /* ---- 弹窗：贴底全宽按钮 ---- */
  .modal { width: auto; padding: 16px 16px 18px; }
  .m-acts { flex-direction: column-reverse; gap: 8px; }
  .m-acts button { width: 100%; min-height: 42px; margin-left: 0; }

  /* ---- 按钮 / 点按目标 ---- */
  button { padding: 8px 14px; min-height: 36px; }
  button + button { margin-left: 0; }
  .chip { padding: 6px 12px; }

  /* ---- 表格行 → 堆叠块（只对带 .kv 的行生效） ---- */
  .jobs-card .row.head,
  .runs-card .row.head,
  .ops-card .row.head,
  .ops-plat-card .row.head,
  .fin-card .row.head,
  .flow-card .row.head { display: none; }

  .row.kv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;   /* 第 1 行 = 标题 | 状态胶囊 */
    align-items: start;
    gap: 0;            /* 抵消 .row 的 flex gap；行距用 margin 控制 */
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }
  .jobs-card .row.kv:first-child,
  .runs-card .row.kv:first-child,
  .ops-card .row.kv:first-child,
  .ops-plat-card .row.kv:first-child,
  .fin-card .row.kv:first-child,
  .flow-card .row.kv:first-child { border-top: 0; padding-top: 2px; }

  /* 普通格整行铺满 = 「标签 | 值」两列 */
  .row.kv > span {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .row.kv > span + span { margin-top: 7px; }
  .row.kv > span::before {
    content: attr(data-l);
    color: var(--txt-3);
    font-size: 12px;
  }

  /* 首行：任务名（左）与状态胶囊（右）同一行；两格都不带标签 */
  .row.kv > .c-name {
    grid-column: 1;
    grid-row: 1;
    display: block;
    padding-right: 10px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    overflow: visible;
    white-space: normal;
  }
  .row.kv > .c-name::before { display: none; }
  .row.kv > .c-stat {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: block;
    margin-top: 0;
  }
  .row.kv > .c-stat::before { display: none; }

  /* 运营明细的状态胶囊由 .c-last 顶到标题右侧（kv-grid 版式，见下方「报表卡进阶」） */

  /* 说明列：整段文本，最多 3 行 */
  .row.kv > .c-msg { margin-top: 7px; }
  .row.kv > .c-msg .m {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
  }

  /* 操作区：等宽按钮铺满一行，虚线与信息区分隔 */
  .row.kv > .c-act {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 8px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px dashed var(--line);
    white-space: normal;
  }
  .row.kv > .c-act::before { display: none; }
  .row.kv > .c-act button,
  .row.kv > .c-act button + button {
    margin-left: 0;
    min-height: 40px;
    padding: 8px 6px;
    font-size: 13px;
  }
  /* 采集任务行恒为 4 个按钮（立即执行/暂停/定时/脚本）：auto-fit 在 393px 下
     富余不足 4px 会掉成 3+1，直接锁 4 列等分（≤380px 由下方窄机规则转 2×2） */
  .jobs-card .row.kv > .c-act { grid-template-columns: repeat(4, 1fr); }

  /* ---- 执行记录分页条：页码独占一行在上，四个按钮等分铺满在下 ---- */
  .pager { gap: 10px 8px; padding: 12px 0 2px; }
  .pager .pg-info { flex: 1 1 100%; order: -1; min-width: 0; }
  .pager button { flex: 1 1 0; min-height: 38px; padding: 8px 6px; font-size: 12.5px; }

  /* ---- 报表卡进阶（运营 / 财务 / 区间发生额）：6 列子网格 ----
     .kv-grid 行在通用「一行一个字段」之上做压缩：
       kv-hero = 核心金额，标签左、大值右，独占一行
       kv-pair = 两列并排；kv-trio = 三列并排（标签在值上方）
       kv-sub  = 次要说明小字
     桌面端这些类无样式（财务的列序修正见上方 order 规则） */
  .row.kv.kv-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 10px;
  }
  .row.kv.kv-grid > span,
  .row.kv.kv-grid > span + span { margin-top: 9px; }

  .row.kv.kv-grid > .kv-hero {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 17.5px;
    font-weight: 600;
    color: var(--txt);
  }
  .row.kv.kv-grid > .kv-hero::before {
    font-size: 12.5px;
    font-weight: 400;
  }
  .kv-hero .dim { font-size: 12px; font-weight: 400; }

  .row.kv.kv-grid > .kv-pair,
  .row.kv.kv-grid > .kv-trio { display: block; }
  .row.kv.kv-grid > .kv-pair::before,
  .row.kv.kv-grid > .kv-trio::before {
    display: block;
    margin-bottom: 1px;
    font-size: 11px;
  }
  .row.kv.kv-grid > .kv-pair { grid-column: span 3; }
  .row.kv.kv-grid > .kv-trio { grid-column: span 2; font-size: 13px; }

  .row.kv.kv-grid > .kv-sub {
    grid-column: 1 / -1;
    display: block;
    color: var(--txt-3);
    font-size: 11.5px;
    margin-top: 4px;
  }

  /* 标题行：店铺名 col1-4，徽章 col5-6 */
  .row.kv.kv-grid > .c-name {
    grid-column: 1 / 5;
    grid-row: 1;
    padding-right: 0;
  }
  .row.kv.kv-grid > .c-stat,
  .row.kv.kv-grid > .c-last {
    grid-column: 5 / 7;
    grid-row: 1;
    justify-self: end;
    margin-top: 0;
  }
  .row.kv.kv-grid > .c-last::before { display: none; }

  /* 财务台账：平台做成标题右侧小胶囊 */
  .fin-card .row.kv > .c-plat {
    grid-column: 5 / 7;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: block;
    margin-top: 0;
    padding: 4px 10px;
    background: var(--panel-2);
    border-radius: 999px;
    color: var(--txt-2);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }
  .fin-card .row.kv > .c-plat::before { display: none; }
  .fin-card .row.kv > .kv-hero { grid-row: 2; }
  .fin-card .row.kv > .kv-pair { grid-row: 3; }
  .fin-card .row.kv > .kv-trio { grid-row: 4; color: var(--txt-2); }

  /* 运营明细：hero 成交金额（r2）→ 两列×2（r3/r4）→ 三列比率（r5）→ 平台小字收尾 */
  .ops-card .row.kv > .kv-hero { grid-row: 2; }
  .ops-card .row.kv > .c-plat {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--txt-3);
    font-size: 11.5px;
    margin-top: 2px;
  }

  /* 平台汇总：平台名做标题、店铺数右上小字 */
  .ops-plat-card .row.kv > .c-plat {
    grid-column: 1 / 5;
    grid-row: 1;
    display: block;
    margin-top: 0;
    font-size: 14.5px;
    font-weight: 600;
  }
  .ops-plat-card .row.kv > .c-plat::before { display: none; }
  .ops-plat-card .row.kv > .kv-shops {
    grid-column: 5 / 7;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 0;
    font-size: 12px;
    color: var(--txt-3);
  }
  .ops-plat-card .row.kv > .kv-hero { grid-row: 2; }

  /* 区间发生额：店铺名整行标题，三个金额并排 */
  .flow-card .row.kv > .c-name {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 14.5px;
  }
  .flow-card .row.kv > .c-name::before { display: none; }
  .flow-card .row.kv > .kv-trio { grid-row: 2; }

  /* ---- 设置面板（定时管理 / 更新脚本）：取消内嵌底色，纵向铺满 ---- */
  .job-panel {
    padding: 12px 0 2px;
    margin-top: 12px;
    background: transparent;
    border: 0;
    border-top: 1px dashed var(--line);
    border-radius: 0;
  }
  .script-line { display: block; line-height: 1.7; }
  .script-line .k { display: block; min-width: 0; }

  /* ---- 提示浮层：底部固定，点完按钮的反馈在拇指边 ---- */
  .toast:not(:empty) {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    margin: 0;
    padding: 11px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ok);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(28, 35, 51, .16);
    font-size: 13px;
    line-height: 1.5;
  }
  .toast.err:not(:empty) { border-left-color: var(--err); }
}

/* ---- 窄机（≤ 380px，如 SE）：标签列收窄，操作按钮两列，三列字段降两列 ---- */
@media (max-width: 380px) {
  .row.kv > span { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
  .row.kv > .c-act { grid-template-columns: repeat(2, 1fr); }
  .jobs-card .row.kv > .c-act { grid-template-columns: repeat(2, 1fr); }
  .hero .m .v { font-size: 12px; }
  .row.kv.kv-grid > .kv-trio { grid-column: span 3; }
}

/* ---- 触屏：去掉 hover 残留（手机上点完不会留下压暗底色） ---- */
@media (hover: none) {
  .row:not(.head):hover { background: transparent; }
  .gcard:hover { box-shadow: none; filter: none; }
  .nav a:not(.active):hover { color: var(--txt-2); background: transparent; }
  .chip:not(.on):hover:not(:disabled) { color: var(--txt-2); border-color: var(--line); background: var(--panel-2); }
  button:not(.primary):not(.on):hover:not(:disabled) {
    background: var(--panel);
    border-color: var(--line);
    color: var(--txt-2);
  }
}

/* ── 缺采整店行（MISSING）：店还在，但当天没数据 → 淡化，别让人以为店消失了 ── */
.row.miss { opacity: .55; }
.row.miss .c-name .badge { margin-left: 6px; font-size: 11px; }

/* ── 财务页 · 分店资金卡片 ──────────────────────────────────────────
   对齐 design/v1_light_gray_blue_rendered.html：行1 店名+合计+变化，
   资金占比进度条，行2 可用/支付宝 两个余额，行3 冻结/保证金/直通车小字。
   平台色取自设计稿（点 + 进度条同色，靠颜色就能分辨平台）。 */
.dot.pdd  { background: #ff6b5e; }
.dot.tb   { background: #ffa04d; }
.dot.tm   { background: #c07bff; }
.bar .fill.pdd { background: #ff6b5e; }
.bar .fill.tb  { background: #ffa04d; }
.bar .fill.tm  { background: #c07bff; }

.fin-shop {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 14px 7px;
  box-shadow: var(--shadow);
}
.fin-shop + .fin-shop { margin-top: 4px; }
.fin-shop.miss { opacity: .55; }          /* 本日没采到：店还在，别让它凭空消失 */

/* 发货明细行可点击：点一下把下方走势聚焦到这一行，再点取消 */
.ship-row { cursor: pointer; transition: border-color .15s, background .15s; }
.ship-row:hover { border-color: #b9c6dd; }
.ship-row.on {
  border-color: var(--accent);
  background: #eef3ff;
  box-shadow: 0 0 0 2px rgba(47, 107, 255, .13), var(--shadow);
}
/* 走势卡片里的窗口标签行：标签与说明同行，窄屏自动折行 */
.trend-bar { margin: 2px 0 10px; justify-content: space-between; }
.trend-bar .chips { margin-right: auto; }
.fin-r1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fin-id { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fin-id .n {
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-id .badge { flex: none; font-size: 11px; }
.fin-r1 .right { display: flex; align-items: baseline; gap: 9px; flex: none; }
.fin-total {
  font-size: 17px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fin-chg { font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-chg.dim { color: var(--txt-3); font-weight: 500; }
.fin-r2 { display: flex; font-size: 11px; color: var(--txt-3); white-space: nowrap; margin-top: 2px; }
.fin-r2 .m b { font-weight: 500; color: var(--txt-2); margin-left: 3px; font-variant-numeric: tabular-nums; }
.fin-r2 .sep { flex: 1; }
.fin-r3 { display: flex; flex-wrap: wrap; gap: 12px; font-size: 10.5px; color: var(--txt-3); margin-top: 3px; }
.fin-r3 .m b { font-weight: 500; color: var(--txt-2); margin-left: 3px; font-variant-numeric: tabular-nums; }

/* 其他资金项（冻结 / 保证金 / 直通车）全站汇总 —— 千牛口径，拼多多没有 */
.fin-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.fin-mini .m {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 12px; box-shadow: var(--shadow);
}
.fin-mini .k { font-size: 10.5px; color: var(--txt-3); margin-bottom: 2px; }
.fin-mini .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .fin-mini { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .fin-mini .m { padding: 6px 8px; }
  .fin-mini .v { font-size: 13px; }
  .fin-shop { padding: 8px 12px 7px; }
  .fin-r3 { gap: 8px; }
}

/* ── 发货页 · 日期区间选择 + 明细卡 ────────────────────────────────
   区间卡：快捷 chips（近 7/15/30/90 天 · 全部）+ 自定义起止日期；
   明细卡沿用财务分店卡的结构（店名+大数+变化 / 占比条 / 三项小字 / 走势）。 */
.range-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.range-inputs { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.range-inputs .fld { display: inline-flex; align-items: center; gap: 6px; }
.range-inputs label { font-size: 11.5px; color: var(--txt-3); }
.range-inputs input[type="date"] {
  padding: 4px 8px;
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.range-inputs input[type="date"]:focus { outline: 2px solid #c9d8fb; outline-offset: 1px; }

/* 无平台归属（发货产品）用中性灰圆点，不与平台色混淆 */
.dot.gen { background: var(--txt-3); }
.bar .fill.gen { background: var(--txt-3); }

.ship-row .fin-r3 { align-items: center; justify-content: space-between; gap: 10px; }
.ship-row .spark-wrap { flex: none; line-height: 0; }
.ship-row .spark { display: block; }

/* ── 运营页 · 分店 / 平台卡（沿用财务 .fin-shop 结构，行3 四项小字）── */
.ops-shop .fin-r3 { gap: 10px; }
.ops-plat .fin-id .badge { background: var(--panel-2); }

/* ── 移动层续（发货页 / 运营页）──────────────────────────────────
   区间卡纵向铺满、日期输入全宽（16px 防 iOS 聚焦缩放）；
   明细卡三项小字换行，不再被 nowrap 挤出屏幕。 */
@media (max-width: 720px) {
  .range-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .range-inputs { margin-left: 0; gap: 8px; }
  .range-inputs .fld { flex: 1 1 0; min-width: 0; }
  .range-inputs label { font-size: 12px; }
  /* 日期输入沿用全局移动端 16px 规则，这里只补宽度与高度 */
  .range-inputs input[type="date"] { width: 100%; min-height: 38px; padding: 8px 10px; font-size: 16px; }

  .ship-row .fin-r2 { flex-wrap: wrap; gap: 2px 14px; white-space: normal; }
  .ship-row .fin-r2 .sep { display: none; }
  .ship-row .fin-r3 { font-size: 11px; }

  /* 运营卡：三项小字换行（nowrap 在 393px 下会溢出），四项比率两行放 */
  .ops-shop .fin-r2 { flex-wrap: wrap; gap: 2px 14px; white-space: normal; }
  .ops-shop .fin-r2 .sep { display: none; }
  .ops-shop .fin-r3 { font-size: 11px; gap: 6px 12px; }

  /* 库存页「近 7 日总览」：393px 下五列挤不下 → 日期独占一行，库存量/货值/环比一行 */
  .daily-card .row { flex-wrap: wrap; row-gap: 2px; }
  .daily-card .row .c-name { display: none; }
  .daily-card .row .c-plat { flex: 1 1 100%; }
  .daily-card .row .c-num { flex: 1; text-align: left; }
  .daily-card .row .c-amt { flex: 1; text-align: right; }
  .daily-card .row .c-spark { flex: 0 0 auto; min-width: 0; text-align: right; }
}