/* ==========================================================================
   商账云 · 生意参谋（sycm）皮肤层
   --------------------------------------------------------------------------
   角色：覆盖 style.css（Soft Minimal / Apple 观感）→ 生意参谋观感。
   规则：本文件只做「覆盖」，不改 style.css 一个字节；令牌取自 tokens.css。
   关键不变量（对齐 复刻任务书/01-设计系统.md、02-共享外壳.md）：
     1 页面底色 #eef1f6          2 卡片 12px 圆角 / 无阴影 / 间距 18px
     3 数字 AlibabaSans102       4 涨红 #f23c3c / 跌绿 #08c45c
     5 主色只 #2062e6（AI 才 #007aff）
     6 侧栏右侧 100px 胶囊 + 淡蓝渐变选中
     7 body min-width:1240px，不做响应式
       （2026-10-24 例外：≤768px 接移动端 —— 沿用原先系统的底部导航外壳，
         桌面端仍严格 1240 最小宽、无断点；见文末第 15 节）
     8 表格只有横线 #e6e6e6、表头白底字重 500
     9 正文 12 / 强调 14 / 卡片标题 16
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 变量重映射：把 style.css 的旧变量名接到 sycm 令牌上
   （style.css 用 --bg/--accent/--radius…；tokens.css 用 --color-* / --corner-*）
   -------------------------------------------------------------------------- */
:root {
  --bg:              var(--color-bg-page);        /* #eef1f6 */
  --surface:         var(--color-bg-surface);     /* #ffffff */
  --surface-subtle:  var(--color-bg-subtle);      /* #f7f8fa */
  --card:            #ffffff;

  --text:            var(--color-text-primary);   /* #333 */
  --label:           var(--color-text-primary);
  --text-muted:      var(--color-text-regular);   /* #666 */
  --sub:             var(--color-text-regular);

  --border:          var(--color-border);         /* #e6e6e6 */
  --sep:             var(--color-border);
  --sep-strong:      var(--color-border);

  --accent:          var(--color-primary);        /* #2062e6 */
  --accent-hover:    var(--color-primary-hover);  /* #4987f2 */
  --accent-soft:     var(--color-primary-light);  /* #f0f7ff */
  --blue:            var(--color-primary);
  --blue-soft:       var(--color-primary-light);

  --success:         var(--color-success);        /* #08c45c 跌/好 */
  --green:           var(--color-success);
  --danger:          var(--color-up);             /* #f23c3c 涨/警示 */
  --red:             var(--color-up);
  --danger-soft:     #fef2f2;
  --warning:         #ff8f1f;
  --orange:          #ff8f1f;

  /* 圆角：按钮/输入 4 · 卡片 12 · 弹层 8 */
  --radius-sm:       var(--corner-1);             /* 4px  */
  --radius:          var(--corner-card);          /* 12px */
  --radius-lg:       var(--corner-2);             /* 8px  */

  /* 阴影：卡片一律无（铁律 2）；弹层保留柔和投影 */
  --shadow-sm:       none;
  --shadow-md:       none;
  --shadow-lg:       var(--shadow-popup);
}

/* --------------------------------------------------------------------------
   1. 全局：底色 / 字体 / 最小宽度
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-base);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-size: var(--fs-12);
  line-height: 1.5;
  padding-bottom: 0;
  min-width: var(--body-min-w);          /* 铁律 7：桌面不做响应式（≤768 由第 15 节接管） */
  -webkit-font-smoothing: antialiased;
}

/* 数字/金额一律走 AlibabaSans102（铁律 3） */
.num, td.num, th.num,
.kpi .v, .rpkpi-num .v, .sv-ov-val,
.settings-row b, .red-num, .count,
.mitem .hint, .mono, .sup-check-text,
#metaInfo b, .kpi .s, .rpkpi .s {
  font-family: var(--font-num);
  font-feature-settings: "tnum" 1;
}
.num, td.num, .kpi .v, .rpkpi-num .v { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   2. 顶栏：两层 60 + 50，外加 8px 背景延伸 = 视觉高 118
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 0 8px;
  background-image: var(--header-bg-image), var(--header-bg-gradient);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-width: var(--layout-min-w);
}

/* 第一行 60px */
.nav-inner {
  max-width: none;
  margin: 0;
  padding: 0 var(--header-pad-h);
  height: var(--header-top-h);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-title { display: flex; align-items: center; gap: 0; min-width: 0; }
.nav-title h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
  text-wrap: initial;
}
/* logo 尺寸；不再垫白底 —— 上传的 logo 若是透明 PNG 就直接透出顶栏蓝底
   （早期为了压住深色位图才加的白色小方块，2026-10-24 按要求去掉） */
.nav-logo {
  height: 36px;   /* 2026-10-24 按用户要求放大（原 26px） */
  width: auto;
  background: none;
  border-radius: 0;
  padding: 0;
  box-sizing: content-box;
  flex: none;
}
.nav-title p {
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, .72);
  margin: 0 0 0 16px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .3);
  height: 21px;
  line-height: 21px;
  max-width: 560px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.user-name {
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, .9);
  font-weight: 500;
}
/* 顶栏按钮改为「白字透明」链接观感 */
.nav-user .ios-btn.ghost {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  height: 26px;
  padding: 0 12px;
  font-size: var(--fs-12);
}
.nav-user .ios-btn.ghost:hover {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}

/* 第二行 50px：一级导航 */
.tabs-nav {
  max-width: none;
  margin: 0;
  padding: 0 var(--header-pad-h);
  height: var(--header-nav-h);
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: visible;
  background: transparent;
  mask-image: none;
  -webkit-mask-image: none;
}
.tabs-nav .tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--header-nav-h);
  margin-right: 36px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  background-image: none;
  color: #fff;
  font-family: var(--font-topmenu);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 18px;
  transition: text-shadow .14s, opacity .14s;
  text-shadow: none;
}
.tabs-nav .tab:hover {
  background: transparent;
  background-image: none;
  color: #fff;
  text-shadow: 0 4px 20px #8dfee3;
}
.tabs-nav .tab.on {
  background: transparent;
  background-image: none;
  color: #fff;
  font-weight: 600;
}
.tabs-nav .tab::after { display: none !important; }
.tabs-nav .tab.on::after {
  display: block !important;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 0;
  background: #fff;
}
.tabs-nav .tab svg { width: 16px; height: 16px; flex-shrink: 0; }
/* 顶栏角标：红底白色 */
.dot { border-color: rgba(255, 255, 255, .6); }

/* --------------------------------------------------------------------------
   3. 左侧栏 160px：右侧 100px 大圆角胶囊（铁律 6）
      由 sycm-theme.js 注入 .sycm-side（内容取当前板块的卡片标题，不编造）
   -------------------------------------------------------------------------- */
.sycm-side {
  position: fixed;
  left: 0;
  top: 118px;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 40;
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sidebar);
  border-right: 1px solid var(--color-border-card);
  padding-bottom: 24px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sycm-side::-webkit-scrollbar { width: 0; }
.sycm-side:hover::-webkit-scrollbar { width: 4px; }
.sycm-side::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 2px; }

.sycm-brand {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-bottom: 1px solid var(--color-border-card);
  font-size: var(--fs-16);
  color: #4472d3;
  margin-bottom: 20px;
  white-space: nowrap;
}
.sycm-brand .sycm-brand-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--corner-1);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--fs-12);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.sycm-menu { list-style: none; margin: 0; padding: 0; }
.sycm-menu-item {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 0 0 10px;                       /* 10px 下距，与 交付 的侧栏节奏一致 */
  padding: 0 12px 0 30px;
  border: none;
  border-radius: 0 var(--corner-pill) var(--corner-pill) 0;   /* ★ 右侧大圆角 */
  background: transparent;
  font-family: var(--font-base);
  font-size: var(--fs-14);
  color: var(--color-text-menu);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-image .14s, color .14s;
}
.sycm-menu-item:hover,
.sycm-menu-item.on {
  background-image: var(--gradient-menu-active);
}
.sycm-menu-item.on { color: var(--color-primary-pale); font-weight: 600; }

/* --------------------------------------------------------------------------
   4. 主内容区：左侧让出 160 侧栏 + 20 内边距
   -------------------------------------------------------------------------- */
main {
  max-width: none;
  margin: 0;
  padding: 20px 20px 0 180px;
  background: var(--color-bg-page);
  min-height: calc(100vh - 118px);
}
.view-page { animation: fadeIn .14s ease; }

/* 内容最大宽（2026-10-31 改）：原来是「与 sycm 一致 1430、超宽屏不拉伸」，
   结果 1920 屏右侧空出 290px。用户要求「让中间的页面充满右边空白的区域」，
   所以 --layout-max-w 改成 100%，这里就不用动了（保留一行说明）。 */
#main > .view-page { max-width: var(--layout-max-w); }

/* --------------------------------------------------------------------------
   5. 卡片（铁律 2 / 9）：12px 圆角、无边框、无阴影、纵向间距 18px
      头 60px 行高、无分割线；内容左右 24px
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-bg-surface);
  border: none;
  border-radius: var(--corner-card);
  box-shadow: none;
  padding: 0 var(--card-pad-h) 24px;
  margin-bottom: var(--card-gap);
  overflow: hidden;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: var(--card-header-h);
  line-height: var(--card-header-h);
  margin-bottom: 0;
  padding: 0;
  border-bottom: none;
}
.card-head h2 {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0;
  line-height: var(--card-header-h);
  text-wrap: initial;
}
.count { color: var(--color-text-secondary); font-size: var(--fs-12); font-weight: 400; margin-left: 4px; }
.count.danger { color: var(--color-up); }

/* 卡片内若以表格/长内容收尾，底部留白交给 .card 的 padding */
.card > .tip { margin-top: 12px; }

/* --------------------------------------------------------------------------
   6. 表格（铁律 8）：只有横线、无竖线；表头白底、字重 500
   -------------------------------------------------------------------------- */
.table-wrap {
  border: none;
  border-radius: 0;
  background: transparent;
  max-height: 560px;
  overflow: auto;
}
table {
  font-size: var(--fs-12);
  white-space: nowrap;
  border-collapse: collapse;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: var(--fs-12);
  padding: 10px 16px 10px 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}
thead th.num, td.num { text-align: right; }
tbody td {
  padding: 12px 16px 12px 10px;
  border-bottom: 1px solid var(--color-border);
  border-left: none;
  border-right: none;
  font-size: var(--fs-12);
  color: var(--color-text-primary);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr.row-click { cursor: pointer; transition: background .1s; }
tbody tr.row-click:hover td,
tbody tr:hover td { background: var(--color-primary-light); }
td.num { font-size: var(--fs-14); font-weight: 400; }

/* 铁律 8 兜底：任何表格都不得出现竖线（style.css 的 .src-table 原本是四边框表格） */
table th, table td {
  border-left: none !important;
  border-right: none !important;
}
.src-table th, .src-table td,
.sc-table th, .sc-table td {
  border-top: none !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.src-table th, .sc-table th {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
  font-weight: 500 !important;
  font-size: var(--fs-12) !important;
}
td.src-excluded, .src-table tr.src-excluded td { text-decoration: line-through; }

/* 合计行：sycm 用细线 + 加粗，不用蓝色粗线 */
tfoot td {
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: none;
  font-weight: 700;
  padding: 10px 16px 10px 10px;
  text-align: right;
}

/* 固定首两列的分割阴影改用细线，避免出现竖边框观感 */
#dataTable tbody tr:hover td:nth-child(1),
#dataTable tbody tr:hover td:nth-child(2) { background: var(--color-primary-light); }

/* 单元格标记态：淡黄底保留（业务语义），换成更接近 sycm 的浅色 */
td.metric-cell:hover { background: #fdf7e8; }
td.metric-cell.marked { background: #fbf1d6; }

/* --------------------------------------------------------------------------
   7. 按钮（6.2）：高 28、圆角 4、12px
   -------------------------------------------------------------------------- */
.ios-btn {
  border: none;
  border-radius: var(--corner-1);
  height: 28px;
  padding: 0 12px;
  font-family: var(--font-base);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  touch-action: manipulation;
}
.ios-btn:hover { filter: none; }
.ios-btn:active { transform: none; opacity: 1; }

.ios-btn.primary {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #fff;
  box-shadow: none;
}
.ios-btn.primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.ios-btn.primary:active { background: var(--color-primary-active); }

.ios-btn.ghost {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
.ios-btn.ghost:hover { border-color: var(--color-primary-hover); color: var(--color-primary-hover); background: #fff; }

.ios-btn.danger { background: var(--color-up); border: 1px solid var(--color-up); color: #fff; }
.ios-btn.dark { background: var(--color-bg-subtle); border: 1px solid var(--color-border); color: var(--color-text-primary); }

.ios-btn.sm { height: 26px; padding: 0 10px; font-size: var(--fs-12); line-height: 24px; border-radius: var(--corner-1); }
.ios-btn.block { width: 100%; height: 36px; font-size: var(--fs-14); margin-top: 6px; }

/* 文字按钮（蓝色链接） */
.link-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--fs-12);
  font-family: var(--font-base);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--corner-1);
}
.link-btn:hover { color: var(--color-primary-hover); text-decoration: none; }

/* --------------------------------------------------------------------------
   8. 表单控件（4px 圆角 / 12px 字）
   -------------------------------------------------------------------------- */
select, input, textarea {
  font-family: var(--font-base);
  font-size: var(--fs-12);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  padding: 5px 8px;
  background: var(--color-bg-surface);
  transition: border-color .14s, box-shadow .14s;
}
select { height: 28px; padding: 0 8px; }
input { height: 28px; }
select:focus, input:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(32, 98, 230, .12);
  background: #fff;
  outline: none;
}
.field label { font-size: var(--fs-12); font-weight: 500; color: var(--color-text-regular); }
.field input, .field select { height: 28px; }

/* --------------------------------------------------------------------------
   9. 标签 / 分段 / 药丸
   -------------------------------------------------------------------------- */
.chip, .sel-tag {
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  border-radius: var(--corner-1);
  font-size: var(--fs-12);
  color: var(--color-text-primary);
}
.chip { padding: 3px 10px; }
.chip:hover { border-color: var(--color-primary-hover); color: var(--color-primary-hover); }
.chip.on {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
}
.sel-tag { background: var(--color-bg-subtle); }

.multi-select {
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  background: var(--color-bg-surface);
  min-height: 28px;
  padding: 2px 8px;
}
.multi-select:hover, .multi-select:focus-visible { border-color: var(--color-primary-hover); }
.multi-select:focus-visible { box-shadow: 0 0 0 2px rgba(32, 98, 230, .12); }
.ms-tag {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--corner-1);
  font-size: var(--fs-12);
  font-weight: 400;
}
.ms-tag:hover { background: var(--color-primary); color: #fff; }
.ms-placeholder { color: var(--color-text-secondary); font-size: var(--fs-12); }

/* 药丸分段控件（.seg-tabs）与页内二级标签（.workspace-tabs） */
.seg-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--color-bg-surface);
  border-radius: var(--corner-1);
  border-bottom: none;
  margin-bottom: 0;
}
.seg-tabs .tab {
  height: 26px;
  padding: 0 14px;
  border-radius: 2px;
  font-size: var(--fs-12);
  font-weight: 400;
  color: var(--color-text-regular);
  background: transparent;
  border: none;
  cursor: pointer;
}
.seg-tabs .tab.on {
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
}

.workspace-tabs { border-bottom: 1px solid var(--color-border); gap: 24px; }
.wtab {
  padding: 0 0 8px;
  font-size: var(--fs-14);
  font-weight: 400;
  color: var(--color-text-regular);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.wtab.on { color: var(--color-text-primary); font-weight: 600; border-bottom-color: var(--color-primary); }
.wtab:hover { color: var(--color-text-primary); }

/* 提示条 .tip / .table-tip */
.tip {
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  line-height: 20px;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--color-bg-subtle);
  border-radius: var(--corner-1);
}
.tip code { background: #eef1f6; border-radius: 2px; padding: 1px 6px; font-size: 11px; }

/* 筛选摘要块 */
.fs-item {
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  border-radius: var(--corner-1);
  font-size: var(--fs-12);
  font-weight: 400;
  min-height: 28px;
  padding: 2px 10px;
}
.fs-item:hover { border-color: var(--color-primary-hover); color: var(--color-primary-hover); }
.fs-item.primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* --------------------------------------------------------------------------
   10. KPI 块：圆角 12、无阴影、数字用数字体
   -------------------------------------------------------------------------- */
.kpi {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-card);
  box-shadow: none;
  padding: 12px 14px;
}
.kpi .k { font-size: var(--fs-12); color: var(--color-text-regular); font-weight: 500; }
.kpi .v { font-size: 20px; font-weight: 700; color: var(--color-text-primary); }
.kpi .s { font-size: 11px; color: var(--color-text-secondary); }
.kpi.neg .v { color: var(--color-up); }
.kpis-title { font-size: var(--fs-16); font-weight: 700; color: var(--color-text-primary); }

.rpkpi {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-card);
}
.rpkpi-num .v { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.rpkpi-num .k { font-size: var(--fs-12); color: var(--color-text-regular); }
.rpkpi.neg .v { color: var(--color-up); }
.spark-wrap { color: var(--color-primary); }

/* 总览/概览块（同步页） */
.sv-ov-block { border: 1px solid var(--color-border); border-radius: var(--corner-card); background: #fff; }
.sv-ov-label { font-size: var(--fs-12); color: var(--color-text-secondary); }
.sv-ov-val { font-size: 17px; font-weight: 700; color: var(--color-text-primary); }
.sv-ov-val.ok { color: var(--color-down); }
.sv-ov-val.warn { color: var(--color-warning); }
.sv-ov-val.err { color: var(--color-up); }

/* --------------------------------------------------------------------------
   11. 弹层（8px 圆角）与详情
   -------------------------------------------------------------------------- */
.modal {
  border-radius: var(--corner-2);
  box-shadow: var(--shadow-popup);
  background: var(--color-bg-surface);
}
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.modal-head h3 { font-size: var(--fs-16); font-weight: 700; color: var(--color-text-primary); }
.modal-mask { background: rgba(0, 0, 0, .45); backdrop-filter: none; -webkit-backdrop-filter: none; }
.detail-body h4 { font-size: var(--fs-14); color: var(--color-text-regular); font-weight: 700; }
.detail-body .table-wrap { border: 1px solid var(--color-border); border-radius: var(--corner-1); }

/* 徽标：圆角 2、浅底（对齐 sycm 策略标签） */
.badge {
  border-radius: 2px;
  padding: 1px 8px;
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 20px;
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.badge.disp.已完成 { background: #e9faf0; color: var(--color-down); }

/* 帮助按钮 */
.help-btn {
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  border-radius: 50%;
}
.help-btn:hover, .help-btn:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* --------------------------------------------------------------------------
   12. 登录页 —— 已迁出本文件
   --------------------------------------------------------------------------
   登录页换成体系 C（千牛登录页风格），由 tokens-login.css + login.css 负责，
   与本文件的浅色后台体系 A 完全隔离（主色 #3d7fff ≠ #2062e6）。
   本文件不再对 #viewLogin 施加任何样式，避免两套令牌互相污染。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   13. 其它零散块
   -------------------------------------------------------------------------- */
.settings-row { font-size: var(--fs-14); border-bottom: 1px solid var(--color-border); }
/* 设置页的面板切换已由左侧菜单承担，内容区这套重复菜单隐藏
   （移动端没有侧栏，由文末 @media 重新显示，所以这里不能加 !important） */
.settings-menu { display: none; }
.set-item {
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  background: var(--color-bg-surface);
  font-size: var(--fs-14);
  font-weight: 400;
  padding: 8px 16px;
  color: var(--color-text-primary);
}
.set-item:hover { background: var(--color-bg-subtle); }
.set-item.on {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   13.0 设置页：sycm 信息表 + 侧栏分组标题
        正文 12px（铁律 9），字段值走数字字体、长路径省略
   -------------------------------------------------------------------------- */
.sycm-menu-group {
  margin: 2px 0 8px;
  padding: 0 12px 0 30px;
  height: 22px;
  line-height: 22px;
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  letter-spacing: .2px;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-info { border-top: 1px solid var(--color-border-light); }
.settings-info .settings-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: 40px;
  padding: 10px 4px;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-12);
  line-height: 18px;
}
.settings-info .settings-row > span {
  flex: none;
  width: 96px;
  color: var(--color-text-regular);
}
.settings-info .settings-row > b {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: var(--font-num);
  word-break: break-all;
}
.settings-info .settings-row > b.path {
  font-family: var(--font-base);
  font-size: var(--fs-12);
  color: var(--color-text-regular);
  word-break: break-all;
}
/* 面板内的说明列表：12px，条目不挤 */
.settings-panel .backup-list { font-size: var(--fs-12); line-height: 20px; }
.settings-panel .backup-list code {
  font-family: var(--font-num);
  background: var(--color-bg-subtle);
  border-radius: 2px;
  padding: 0 4px;
}
/* 面板内的输入框：与铁律 9 对齐（12px），高度按 4px 圆角控件规范 */
.settings-panel .field input {
  height: 32px;
  font-size: var(--fs-12);
  border-radius: var(--corner-1);
}
.settings-panel .field label { font-size: var(--fs-12); color: var(--color-text-regular); }
.settings-panel .field { margin-bottom: 12px; }
.settings-panel .table-wrap { margin-top: 12px; }

.cost-banner { background: #fff8e8; border: 1px solid #f2dcae; border-radius: var(--corner-card); }
.cost-banner-text { font-size: var(--fs-12); color: #8a5d16; }
.red-num { color: var(--color-up); font-size: var(--fs-14); }

.filter-toggle {
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  font-size: var(--fs-12);
  font-weight: 500;
  padding: 6px 12px;
}

/* 同步/说明类卡片统一圆角 */
.sync-help-section, .sv-node, .sv-feed-item, .sv-sync-item,
.sv-node3, .sv-maint-item, .sv-tech-details, .mgroup, .shop-picker {
  border: 1px solid var(--color-border);
  border-radius: var(--corner-card);
  background: var(--color-bg-surface);
}
.mgroup h4 { background: var(--color-bg-subtle); font-size: var(--fs-12); color: var(--color-text-regular); }
.mitem { font-size: var(--fs-12); border-top: 1px solid var(--color-border-light); }
.mitem:hover { background: var(--color-primary-light); }

/* 底部导航（移动端）在桌面不用；移动端由文末 @media 打开（原先系统的导航样式） */
.bottom-nav { display: none; }

/* --------------------------------------------------------------------------
   13.1 数据页「上传数据库」提示条（sycm-upload.js 注入）
   -------------------------------------------------------------------------- */
.dt-upload-hint {
  display: block;
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: var(--corner-1);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  color: var(--color-text-regular);
  font-size: var(--fs-12);
  line-height: 20px;
}
.dt-upload-hint.is-busy {
  background: var(--color-primary-light);
  border-color: #cfe1ff;
  color: var(--color-primary);
}
.dt-upload-hint.is-ok {
  background: #eafaef;
  border-color: #b6e8c8;
  color: #0a8f45;
}
.dt-upload-hint.is-err {
  background: #fef2f2;
  border-color: #f8c9c9;
  color: #c0392b;
}
.dt-upload-hint .warn { color: #c26a00; }
.dt-upload-hint b {
  font-family: var(--font-num);
  font-weight: 600;
  margin: 0 1px;
}
#btnDtUpload { margin-right: 8px; }

/* 无障碍跳转链接保持可用但视觉不打扰 */
.skip-link { background: var(--color-primary); }

/* --------------------------------------------------------------------------
   13.3 分段控件 .seg-tabs（任务书 01-设计系统 §6.3-A，原样照抄数值）
        全站通用：页头时间维度 / 店铺、数据总览指标、趋势图范围、
        成本页供应商、首页总览范围与指标
        ⚠ style.css 里已有 .seg-tabs/.seg 的旧定义（flex 分段 + 底部横线），
          这里用 .seg-tabs .seg 两级选择器压过它。
   -------------------------------------------------------------------------- */
.seg-tabs {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-border);   /* 白底药丸在白行上需要一圈淡边才看得出边界 */
  border-radius: var(--corner-1);
  padding: 2px;
  gap: 2px;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}
.seg-tabs .seg {
  display: inline-block;
  height: 26px;
  padding: 0 14px;
  border: none;
  border-radius: 2px;
  background: transparent;
  font-family: var(--font-base);
  font-size: var(--fs-12);
  line-height: 26px;
  color: var(--color-text-regular);        /* #666 */
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .14s, color .14s;
}
.seg-tabs .seg:hover { background: var(--color-bg-subtle); }
.seg-tabs .seg.is-active {
  background: var(--color-primary);        /* #2062e6 */
  color: #fff;
  font-weight: 500;
}
.seg-tabs .seg:disabled { color: var(--color-text-secondary); cursor: not-allowed; }

/* --------------------------------------------------------------------------
   13.3b 页头筛选行（任务书 20-商品排行 §2）
   -------------------------------------------------------------------------- */
.common-top-wrapper { margin: 0 0 18px; }
.page-head-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  min-height: 40px;
  padding: 6px 16px;
  background: var(--color-bg-surface);
  border-radius: var(--corner-card);
}
.stat-time {
  flex: none;
  font-size: var(--fs-12);
  color: var(--color-text-regular);       /* #666 */
  white-space: nowrap;
}
.stat-time b {
  font-family: var(--font-num);
  font-weight: 500;
  color: var(--color-text-primary);       /* #333 */
  margin-left: 4px;
}
.page-head-row .seg-tabs { flex: none; }
.page-head-row .page-head-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.page-head-row .link-btn {
  font-size: var(--fs-12);
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
}
.page-head-row .link-btn:disabled { color: var(--color-text-secondary); cursor: not-allowed; }

/* 日期下拉（任务书 20-商品排行 §2.2：白底 1px #e6e6e6、4px 圆角、高 28、12px） */
.sycm-select {
  flex: none;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: var(--font-num);
  font-size: var(--fs-12);
  cursor: pointer;
}
.sycm-select:disabled {
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  cursor: not-allowed;
}

/* 成本页查询条件：供应商 + 供应商输入框 + 编码输入框 + 查询，全部并排一行 */
.cost-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin: 0 0 12px;
}
.cost-filter-label {
  flex: none;
  font-size: var(--fs-12);
  color: var(--color-text-regular);
}
.cost-filter-row > #costSearchInput {
  flex: 1 1 auto;
  min-width: 180px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: var(--font-base);
  font-size: var(--fs-12);
  box-sizing: border-box;
}
.cost-filter-row > #costSearchInput:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(32, 98, 230, .12);
}
.cost-filter-row > #costSearchInput::placeholder { color: var(--color-text-secondary); }
.cost-filter-row > #btnCostSearch {
  flex: none;
  height: 32px;
  padding: 0 22px;
  border-radius: var(--corner-1);
  font-size: var(--fs-12);
  white-space: nowrap;
}

/* 可搜索的供应商选择器（输名称或拼音首字母，"dddf" → 大东代发） */
.sup-picker {
  position: relative;
  flex: 0 1 300px;
  min-width: 220px;
}
.sup-picker > input {
  width: 100%;
  height: 32px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: var(--font-base);
  font-size: var(--fs-12);
  box-sizing: border-box;
}
.sup-picker > input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(32, 98, 230, .12);
}
.sup-picker > input::placeholder { color: var(--color-text-secondary); }
.sup-picker-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  line-height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  color: var(--color-text-regular);
  font-size: 10px;
  cursor: pointer;
}
.sup-picker-clear:hover { background: var(--color-border); color: var(--color-text-primary); }

/* 下拉面板：fixed 挂到视口上（left/top/width 由 app.js placeCostSupPanel 计算）
   —— 卡片是 overflow:hidden，绝对定位会被卡片裁掉半截 */
.sup-picker-panel {
  position: fixed;
  z-index: 300;
  left: 0;
  top: 0;
  width: 260px;                 /* JS 会按输入框宽度覆盖 */
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
  padding: 4px 0;
  box-sizing: border-box;
}
.sup-picker-panel[hidden] { display: none; }
.sup-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 30px;
  line-height: 30px;
  font-size: var(--fs-12);
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.sup-picker-item:hover { background: var(--color-primary-light); }
.sup-picker-item.is-active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 500; }
.sup-picker-item .sup-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sup-picker-item .sup-py {
  flex: none;
  font-family: var(--font-num);
  color: var(--color-text-secondary);
  letter-spacing: .5px;
}
.sup-picker-item .sup-n { flex: none; color: var(--color-text-secondary); }
.sup-picker-empty {
  padding: 10px 12px;
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

/* 数据总览卡里的趋势图与 KPI 之间的节奏 */
#dtOverview .kpi-grid { margin-bottom: 18px; }
/* 商品详情弹窗里的 7 张卡：一行 4 个（原来 auto-fit 会挤成 7 个一行，太紧凑） */
.kpi-grid-auto { grid-template-columns: repeat(4, 1fr); }
#dtOverview .dt-trend { margin: 0; }
#dtOverview .row-ops .seg-tabs { border: 1px solid var(--color-border); }
#dtOverview .row-ops .seg {
  height: 26px;
  padding: 0 14px;
  border: none;
  border-radius: 2px;
  background: transparent;
  font-size: var(--fs-12);
  color: var(--color-text-regular);
  cursor: pointer;
}
#dtOverview .row-ops .seg.is-active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   13.4 设置 → 品牌设置（登录页背景图 / 登录页 Logo / 页面 Logo）
   -------------------------------------------------------------------------- */
.brand-rows { border-top: 1px solid var(--color-border-light); }
.brand-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--color-border);
}
.brand-prev {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--fs-12);
}
.brand-prev.wide { width: 120px; height: 80px; }
.brand-prev.tall { width: 120px; height: 48px; }
.brand-prev img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.brand-prev.wide img { object-fit: cover; width: 100%; height: 100%; }
.brand-info { flex: 1 1 auto; min-width: 0; }
.brand-name {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 20px;
}
.brand-note {
  font-size: var(--fs-12);
  color: var(--color-text-regular);
  line-height: 18px;
  margin-top: 2px;
  word-break: break-all;
}
.brand-ops { flex: none; display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   13.4b 设置 → 用户管理 · 权限弹窗（2026-10-24 按 sycm 尺度重排）
        版块权限 2×2 卡片、可见指标分组网格、可见店铺 chips
        正文 12px（铁律 9），主色只 #2062e6
   -------------------------------------------------------------------------- */
.user-modal { width: 94%; max-width: 980px; }
.user-modal .detail-body { max-height: 76vh; overflow-y: auto; }

/* 「版块权限」「可见指标」「可见店铺」三个小标题 */
.user-modal .form-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  padding: 0 0 0 8px;
  border-left: 2px solid var(--color-primary);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0;
  line-height: 18px;
}
.user-modal .form-section .hint {
  font-size: var(--fs-12);
  font-weight: 400;
  color: var(--color-text-secondary);
}
.user-modal .form-section .f-ops { margin-left: auto; display: inline-flex; gap: 10px; }
.user-modal .form-section .link-btn {
  font-size: var(--fs-12);
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 版块权限：两列卡片，勾选态=主色描边 + 淡蓝底 */
.user-modal .perm-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.user-modal .perm-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  background: var(--color-bg-surface);
  font-size: var(--fs-12);
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-modal .perm-checks label:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 500;
}
.user-modal .perm-checks input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex: none;
  accent-color: var(--color-primary);
}

/* 可见指标：分组盒子 3 列，正文 12px */
.user-modal .metric-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}
.user-modal .mgroup {
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  background: var(--color-bg-surface);
  overflow: hidden;
}
.user-modal .mgroup h4 {
  margin: 0;
  padding: 6px 10px;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--color-text-regular);
  line-height: 18px;
}
.user-modal .mitem {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-top: 1px solid var(--color-border-light);
  font-size: var(--fs-12);
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.user-modal .mitem:first-of-type { border-top: none; }
.user-modal .mitem:hover { background: var(--color-primary-light); }
.user-modal .mitem .hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: var(--font-num);
}
.user-modal .mitem input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex: none;
  accent-color: var(--color-primary);
}

/* 可见店铺：chips（店铺名一律走全局命名显示，值仍是系统原名） */
.user-modal .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.user-modal .chips .chip {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-surface);
  font-size: var(--fs-12);
  color: var(--color-text-regular);
  cursor: pointer;
  font-family: var(--font-base);
}
.user-modal .chips .chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.user-modal .chips .chip.on {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
}
.user-modal .chips .muted { font-size: var(--fs-12); color: var(--color-text-secondary); }

/* 用户列表里的权限徽标别用旧系统的彩色底 */
#userListWrap .badge { font-weight: 400; }
#userListWrap .nowrap { white-space: nowrap; font-family: var(--font-num); }

/* --------------------------------------------------------------------------
   13.4d 设置 → 操作日志（2026-10-24 新增）
   -------------------------------------------------------------------------- */
.audit-filter {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: var(--fs-12);
  color: var(--color-text-regular);
}
.audit-filter label { display: inline-flex; align-items: center; gap: 6px; }
.audit-filter .hint { color: var(--color-text-secondary); }
#auditTable { width: 100%; }
#auditTable td { white-space: normal; }
#auditTable td:first-child { white-space: nowrap; font-family: var(--font-num); color: var(--color-text-regular); }
#panel-audit .table-wrap { max-height: 520px; }

/* --------------------------------------------------------------------------
   13.8 缩略图放大层（2026-10-24）
        PC：悬停缩略图 → 跟随光标的两毛大图（position:fixed，不会被表格裁掉）
        移动端：点缩略图 → 居中/底部小窗（不是全屏），点空白处退出
        大图一律用图片源链接（ali CDN）实时取，不在服务器上落地大图
   -------------------------------------------------------------------------- */
.thumb-zoom {
  position: fixed;
  z-index: 400;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: var(--corner-2);
  background: var(--color-bg-surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  border: 1px solid var(--color-border);
  pointer-events: none;      /* 悬停态不抢鼠标事件 */
  overflow: hidden;
  line-height: 0;
}
.thumb-zoom[hidden] { display: none; }
.thumb-zoom img {
  display: block;
  width: 260px;
  height: 260px;
  max-width: 260px;
  max-height: 260px;
  object-fit: contain;
  background: var(--color-bg-surface);
}
/* 移动端：变成「点空白退出」的小窗 */
.thumb-zoom.is-popup {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  width: auto;
  pointer-events: auto;
  padding: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.thumb-zoom.is-popup img {
  width: min(78vw, 360px);
  height: min(78vw, 360px);
  max-width: min(78vw, 360px);
  max-height: 52vh;
  object-fit: contain;
}
/* 移动端弹层背后的遮罩（点它关闭）：单独一层，确保「点空白处退出」 */
.thumb-zoom-mask {
  position: fixed;
  inset: 0;
  z-index: 399;
  background: rgba(0, 0, 0, .28);
}
.thumb-zoom-mask[hidden] { display: none; }
/* 缩略图可放大时的光标提示 */
.dt-thumb-wrap[data-dt-big],
.dt-daily-head .dt-thumb-wrap.lg { cursor: zoom-in; }

/* --------------------------------------------------------------------------
   13.5 公告 / 预警条（任务书 02-共享外壳 §5）
        与页面同底 #EEF1F6，左右留白 20、上留白 8；容器高 32、圆角 4、
        底 #fff5e3、文字 #984201 12px；徽标最小宽 16 高 16 圆角 8 #ff335e 白字 10px
   -------------------------------------------------------------------------- */
.notice-wrap {
  padding: 0 var(--content-pad-h, 20px);
  margin: 8px 0 0;
}
.notice-wrap[hidden] { display: none; }
.notice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--corner-1);
  background: #fff5e3;
  color: #984201;
  font-size: var(--fs-12);
  line-height: 32px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notice-bar .badge {
  flex: none;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ff335e;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-family: var(--font-num);
}
.notice-bar b { font-family: var(--font-num); font-weight: 600; }
.notice-bar .btn-text {
  flex: none;
  color: var(--color-primary);
  cursor: pointer;
}

/* 首页淘工厂总览：指标分段 + 趋势图 */
.home-tg-metrics { margin: 0 0 12px; }
.home-tg-metrics .seg-tabs {
  display: inline-flex;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  padding: 2px;
  gap: 2px;
}
.home-tg-metrics .seg {
  height: 26px;
  padding: 0 14px;
  border: none;
  border-radius: 2px;
  background: transparent;
  font-family: var(--font-base);
  font-size: var(--fs-12);
  color: var(--color-text-regular);
  cursor: pointer;
  white-space: nowrap;
}
.home-tg-metrics .seg:hover { background: var(--color-bg-subtle); }
.home-tg-metrics .seg.is-active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
}
#homeTaogc .kpi-grid { margin-bottom: 18px; }
#homeTaogc .dt-trend { margin: 0; }
#homeTaogc .row-ops .seg-tabs {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  padding: 2px;
  gap: 2px;
}
#homeTaogc .row-ops .seg {
  height: 26px;
  padding: 0 14px;
  border: none;
  border-radius: 2px;
  background: transparent;
  font-size: var(--fs-12);
  color: var(--color-text-regular);
  cursor: pointer;
}
#homeTaogc .row-ops .seg.is-active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   13.6 KPI 单元格（排版照任务书 10-首页 §4.2 .oui-index-cell）
        指标名 14px #333 → 数值 24px AlibabaSans102 700 → 子行 12px #666
        2026-10-24：改为左右两栏——左边文字信息，右边趋势小图
        （任务书 §5.3 折线语言：本期实线 #2062e6 2px、上一周期虚线 #c9d2e3 2px）
   -------------------------------------------------------------------------- */
.kpi-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 92px;
}
.kpi-cell .kpi-cell-l {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kpi-cell .kpi-cell-r {
  flex: 0 0 46%;
  max-width: 46%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.kpi-cell .kpi-name {
  font-family: var(--font-base);
  font-size: var(--fs-14);              /* 14px */
  font-weight: 400;
  color: var(--color-text-primary);     /* #333 */
  line-height: 20px;
  margin-bottom: 8px;
}
.kpi-cell .kpi-value {
  font-family: var(--font-num);         /* AlibabaSans102 */
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 28px;
  margin: 0 0 7px;
  font-variant-numeric: tabular-nums;
}
.kpi-cell .kpi-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);              /* 12px */
  color: var(--color-text-regular);     /* #666 */
  line-height: 18px;
  white-space: nowrap;
}
.kpi-cell .kpi-sub-label { color: var(--color-text-secondary); }  /* #999 */
.kpi-delta {
  display: inline-block;
  font-family: var(--font-num);
  font-size: var(--fs-12);
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}
.kpi-delta.up { color: var(--color-up); }       /* #f23c3c 涨 */
.kpi-delta.down { color: var(--color-down); }   /* #08c45c 跌 */
.kpi-delta.flat { color: var(--color-text-secondary); }

/* 卡片内趋势小图（右侧栏） */
.kpi-cell .kpi-chart {
  display: block;
  width: 100%;
  line-height: 0;
}
.kpi-cell .kpi-chart svg {
  display: block;
  width: 100%;
  height: 40px;
}

/* 报表页 KPI 卡里的旧 sparkline（保留）：数据点静止不显示，悬浮才出现 */
.kpi-spark {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  line-height: 0;
  margin-bottom: 4px;
}
.kpi-spark svg,
.kpi-spark .spark {
  display: block;
  width: 100%;
  height: 28px;
}

/* 全系统趋势图统一：不要「带标点的折线」，曲线本身平滑，数据点只在悬浮时出现 */
svg .trend-dot { fill: transparent; }
svg .trend-dot:hover { fill: currentColor; }
svg .trend-dot-blue:hover { fill: #0071e3; }

/* 公告滚动条：换条时的淡入 */
.notice-fade { animation: noticeFade .45s ease-out; }
@keyframes noticeFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.notice-bar .notice-meta { color: #b4791f; }

/* 页脚（任务书 02-共享外壳 §6：两行居中 12px #999 行高 26px） */.page-foot {
  margin-top: 24px;
  padding: 20px 0 24px;
  text-align: center;
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  line-height: 26px;
}
.page-foot a { color: inherit; text-decoration: none; }
.page-foot a:hover { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   13.2 商品逐日明细弹窗 ·「实卖数逐日趋势」折线图
        规格来自 复刻任务书 10-首页.md §5.3（体系 A 折线图）：
        图区高 200、Y 轴 4 档刻度 12px #999 + 网格 #f0f0f0、
        X 轴日期 12px #999、主折线 #2062e6 实线 2px、参考线 #c9d2e3 虚线 2px、
        图例右上角色块 10×2 + 12px 文字
   -------------------------------------------------------------------------- */
.dt-trend {
  margin: 4px 0 18px;
  padding: 14px 16px 10px;
  border-radius: var(--corner-card);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
}
.dt-trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;                       /* 标题下方 8px */
}
.dt-trend-head-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}
/* 趋势图右上角的范围分段：近7天 / 近30天 / 历史数据（任务书 .seg-tabs） */
.dt-trend-range {
  display: inline-flex;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--corner-1);
  padding: 2px;
  gap: 2px;
}
.dt-trend-range .seg {
  height: 24px;
  padding: 0 10px;
  border: none;
  border-radius: 2px;
  background: transparent;
  font-size: var(--fs-12);
  color: var(--color-text-regular);
  cursor: pointer;
  white-space: nowrap;
}
.dt-trend-range .seg:hover { background: var(--color-bg-subtle); }
.dt-trend-range .seg.is-active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
}
/* 标题：style.css 的 .detail-body h4 会抢走颜色/字重，这里用两级类名压过去 */
.dt-trend .dt-trend-title {
  margin: 0;
  font-size: var(--fs-14);                  /* 14px 600 #333 */
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 20px;
}
.dt-trend-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}
.dt-trend-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  color: var(--color-text-regular);
  white-space: nowrap;
}
.dt-trend-swatch {
  display: inline-block;
  width: 10px;
  height: 2px;
  border-radius: 1px;
}
.dt-trend-swatch.solid { background: var(--color-primary); }
.dt-trend-swatch.dashed {
  height: 0;
  border-top: 2px dashed #c9d2e3;
  border-radius: 0;
}

/* 绘图区：左让 44px 放 Y 轴刻度 */
.dt-trend-wrap { position: relative; }
.dt-trend-plot {
  position: relative;
  height: 200px;                            /* 图区高度 200px */
  margin-left: 44px;
  cursor: crosshair;
}
.dt-trend-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dt-trend-ylab {
  position: absolute;
  left: -44px;
  width: 38px;
  text-align: right;
  transform: translateY(-50%);
  font-size: var(--fs-12);                  /* 12px #999 */
  color: var(--color-text-secondary);
  font-family: var(--font-num);
  line-height: 16px;
  pointer-events: none;
}
.dt-trend-xaxis {
  position: relative;
  height: 18px;
  margin: 6px 0 0 44px;
}
.dt-trend-xlab {
  position: absolute;
  top: 0;
  font-size: var(--fs-12);                  /* 12px #999 */
  color: var(--color-text-secondary);
  font-family: var(--font-num);
  line-height: 18px;
  white-space: nowrap;
}

/* 悬浮层 */
.dt-trend-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  pointer-events: none;
}
.dt-trend-vline {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  border-left: 1px dashed var(--color-primary);
  opacity: .55;
}
.dt-trend-dot {
  position: absolute;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary);
  box-sizing: border-box;
}
.dt-trend-tip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -145%);
  padding: 4px 8px;
  border-radius: var(--corner-1);
  background: rgba(51, 51, 51, .92);
  color: #fff;
  font-size: var(--fs-12);
  line-height: 18px;
  white-space: nowrap;
  pointer-events: none;
}
.dt-trend-foot {
  margin: 8px 0 0;
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
  text-align: left;
  line-height: 18px;
}
.dt-trend-foot b { font-family: var(--font-num); font-weight: 600; color: var(--color-text-primary); }
.dt-trend-empty {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-12);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   14. 中等宽度（769~1400）：关掉 style.css 在 1024/640 处的响应式回退
       范围刻意排除 ≤768 —— 那一档是移动端，由文末第 15 节接管
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1400px) {
  main { padding: 20px 20px 0 180px; }
  .card { padding: 0 var(--card-pad-h) 24px; }
  .help-btn { width: 26px; height: 26px; font-size: 13px; }
  .help-btn.sm { width: 22px; height: 22px; }
  .kpi-grid { grid-template-columns: repeat(5, 1fr); }
  .rpkpi { height: 104px; }
  .rpkpi-num .v { font-size: 18px; }
  .cost-banner { flex-direction: row; align-items: center; }
  .settings-row { font-size: var(--fs-14); }
  .modal { width: 94%; max-width: 1180px; border-radius: var(--corner-2); }
  .modal-mask { padding: 24px 0; align-items: center; }
  .modal-head { padding: 16px 20px; border-radius: 0; }
  .detail-body { padding: 16px 20px 20px; }
  .table-wrap { max-height: 560px; overflow: auto; }
  thead th { font-size: var(--fs-12); padding: 10px 16px 10px 10px; z-index: 2; }
  table { font-size: var(--fs-12); }
  tbody td { padding: 12px 16px 12px 10px; }
  .modal-foot { flex-direction: row; }
  .modal-foot .ios-btn { width: auto; min-height: 0; }
  .filter-body { display: none; }
  .filter-body.open { display: flex; }
}

/* --------------------------------------------------------------------------
   15. 移动端（≤768px）：沿用原先系统的导航样式
       —— 顶栏收敛成一行品牌 + 账号，一级导航交给固定底部 .bottom-nav（4 项），
          左侧 160px 胶囊侧栏隐藏，内容区单列、触控 40px+，表格横向滚动。
       桌面端铁律不变：>768 仍是 body min-width:1240px、不做响应式。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* ---- 外壳 ---- */
  html, body { min-width: 0; }                 /* 放开桌面的 1240 最小宽 */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .nav { min-width: 0; padding: 0 0 4px; }
  .nav-inner {
    height: auto;
    min-height: 48px;
    padding: 8px 14px;
    gap: 10px;
  }
  .nav-title h1 { font-size: 16px; gap: 8px; }
  .nav-title p { display: none; }              /* 顶栏副标题让位，模块导航移交底部 */
  .nav-logo { height: 26px; padding: 0; }  /* 移动端也放大（原 18px） */
  .nav-user { gap: 8px; }
  .nav-user .ios-btn.ghost { height: 24px; padding: 0 10px; }
  .user-name { font-size: 11px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabs-nav { display: none; }                 /* 一级导航 → 底部导航 */

  /* 底部导航（原先系统的移动端导航） */
  .bottom-nav {
    display: flex;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--color-border);  /* #e6e6e6 */
  }
  .bottom-nav .bn-item { color: var(--color-text-regular); }
  .bottom-nav .bn-item.on { color: var(--color-primary); }
  .bottom-nav .bn-item .dot { border-color: #fff; }

  /* 侧栏在移动端不出现（也没有 160px 让位） */
  .sycm-side { display: none; }
  main { padding: 12px 12px 0; min-height: 0; }
  #main > .view-page { max-width: none; }

  /* ---- 卡片：只收内边距，12px 圆角 / 18px 间距 / 无阴影一律不动 ---- */
  .card { padding: 0 12px 16px; }
  .card-head {
    min-height: 48px;
    line-height: 1.4;
    padding: 12px 0;
    gap: 8px;
  }
  .card-head h2 { font-size: var(--fs-14); line-height: 1.4; }
  .card-head .count { display: block; margin: 2px 0 0; }
  #main > .view-page > .card > .card-head { display: block; }

  /* ---- 页头筛选行（统计时间 / 分段 / 日期 / 操作）---- */
  .page-head-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    min-height: 0;
  }
  .page-head-row .seg-tabs { flex: 1 1 auto; }
  .page-head-row .page-head-right { margin-left: 0; flex: 1 1 100%; justify-content: space-between; gap: 8px; }
  .stat-time { flex: 1 1 100%; white-space: normal; }
  .sycm-select { height: 30px; }

  /* ---- KPI：单列（卡片本身已是左信息 / 右小图）---- */
  .kpi-grid, #dtOverview .kpi-grid, #homeTaogc .kpi-grid,
  .kpi-grid-auto, #dtDailyBody .kpi-grid { grid-template-columns: 1fr; gap: 10px; }
  .kpi-cell { min-height: 84px; padding: 12px; }
  .kpi-cell .kpi-value { font-size: 22px; }
  .kpi-cell .kpi-cell-r { flex: 0 0 42%; max-width: 42%; }
  .kpi-cell .kpi-chart svg { height: 36px; }

  /* ---- 表格：横向滚动、取消双滚动 ---- */
  .table-wrap {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  thead th { font-size: 11.5px; padding: 8px 10px; }
  table { font-size: 12.5px; }
  tbody td { padding: 9px 10px; }
  .card-head, .card-head h2 { line-height: 1.4; }

  /* ---- 分段 / 筛选：横向滚动不换行 ---- */
  .seg-tabs,
  .dt-trend-range {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .seg-tabs::-webkit-scrollbar { height: 0; }
  .seg-tabs .seg { flex: none; }

  /* ---- 趋势图 ---- */
  .dt-trend-head { flex-wrap: wrap; gap: 8px; }
  .dt-trend-head-right { flex-wrap: wrap; gap: 8px; }
  .dt-trend-plot { height: 160px; margin-left: 38px; }
  .dt-trend-ylab { left: -38px; width: 32px; }
  .dt-trend-xaxis { margin-left: 38px; }
  .dt-trend-foot { line-height: 18px; }

  /* ---- 公告条：允许折行 ---- */
  .notice-bar { height: auto; min-height: 32px; padding: 6px 10px; line-height: 18px; white-space: normal; }
  .notice-wrap { padding: 0; }

  /* ---- 成本页：条件行改为竖排堆叠（一排塞不下 4 个控件）---- */
  .cost-filter-row { flex-wrap: wrap; gap: 8px; }
  .cost-filter-label { flex: 1 1 100%; }
  .sup-picker { flex: 1 1 100%; min-width: 0; }
  .cost-filter-row > #costSearchInput { flex: 1 1 calc(100% - 88px); min-width: 0; }
  .cost-filter-row > #btnCostSearch { flex: none; }

  /* ---- 设置页：没有侧栏 → 用回内容区的面板菜单 ---- */
  .settings-menu { display: flex; }
  .set-item { padding: 10px 14px; font-size: var(--fs-14); }

  /* ---- 品牌图（设置-品牌）：上下堆叠 ---- */
  .brand-row { flex-wrap: wrap; gap: 10px; }
  .brand-info { flex: 1 1 100%; }

  /* ---- 弹窗：底部上滑（沿用原先系统观感）---- */
  .modal-mask { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
  }
  .modal-head { padding: 14px 16px; }
  .detail-body { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }

  /* 用户权限弹窗：手机上全部单列堆叠 */
  .user-modal .perm-checks { grid-template-columns: 1fr; }
  .user-modal .metric-groups { grid-template-columns: 1fr; max-height: 42vh; }
  .user-modal .form-section { flex-wrap: wrap; line-height: 20px; }
  .user-modal .form-section .f-ops { margin-left: 0; }

  /* ---- 表单控件 16px：iOS Safari 对 <16px 的输入框聚焦时会自动放大整页 ----
     （2026-10-24 用户反馈：点供应商/款式编码输入框，页面会自己放大。
       只放大输入框的字号，其它正文尺度不动。） */
  input, select, textarea,
  .lg-input, #costSupInput, #costSearchInput, .sycm-select, .dt-search, .field input {
    font-size: 16px;
  }
  /* 这两个选择器在桌面上带类/ID 两级，这里必须同样具体才压得住 */
  .cost-filter-row > #costSearchInput,
  .sup-picker > input { font-size: 16px; }
  #costSupInput,
  #costSearchInput { height: 38px; }
  .sup-picker > input { height: 38px; }
  .cost-filter-row > #costSearchInput { height: 38px; }
  .sycm-select { height: 34px; }

  /* ---- 触控目标 ---- */
  .ios-btn { min-height: 40px; }
  .row-ops .ios-btn { min-height: 34px; padding: 6px 10px; }
  .toast { bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* 「打开商品页」在移动端是 App 深链，做成好点的按钮（触控 ≥ 40px 的一半以上 + 明确边界） */
  .dt-daily-head .dt-meta a.dt-pid {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--color-primary);
    border-radius: var(--corner-1);
    background: var(--color-primary-light);
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--font-base);
    font-size: var(--fs-12);
    font-weight: 500;
  }
  .dt-daily-head .dt-meta a.dt-pid:active { background: var(--color-primary); color: #fff; }

  /* 页脚在移动端不占额外高度 */
  .page-foot { margin-top: 14px; padding: 14px 0 6px; }
}

/* 超窄屏（≤420px）：顶栏进一步压缩，隐藏用户名 */
@media (max-width: 420px) {
  .user-name { display: none; }
  .nav-title h1 { font-size: 15px; }
  .kpi-cell .kpi-cell-r { flex: 0 0 38%; max-width: 38%; }
}